​

Editing Page Styles in Tradly

This guide outlines the process for editing a page to update its styles, following a structured approach similar to a Figma design file. The work can be divided into the following categories:

1. Common Blocks: Header, footer, listing card, account card, etc.
2. Page-wise: Home page, listing page, listing details page, etc.
3. Responsive Design: Design first for web, then for mobile.

​

Working on the Home Page

Here is a step-by-step process for working on the home page:

​

1. Accessing the Home Page

• Navigate to the home page within the Tradly Editor.
• If the design specifies a single-column row, select the single column and save it. Note that every save is in draft mode, meaning it will not publish to production immediately.

​

2. Previewing Changes

• Use the preview panel to view changes based on the edits.
• To modify page styles, click on the settings icon at the end of the Home page title line.
• Set up the home page background color, padding, max width, and max height according to the design specifications.

​

3. Adding and Editing Blocks

• After saving, add new blocks from the block list.
• Update the row or column design and add block designs based on the layout.

This approach facilitates the creation and customization of templates.

​

Tips for Effective Template Creation

• Divide Work into Small Portions: If the home page contains 10 blocks, divide the task into 10 smaller tasks and work on each one individually.
• Publish Incrementally: After completing each task, publish it to production. This practice allows the use of the history feature to revert to previous versions if needed.
• Start with Defaults: For each page or block, start with default blocks or values. Enhance these elements afterward to get a clear understanding of the structure.

​

Conclusion

Editing page styles in Tradly involves careful planning and incremental updates. Dividing the work, using the preview and history features, and starting with default setups enables efficient creation and customization of the website to match design specifications.