In the Drag & Drop Builder, you can customize settings for your sections and columns to control how your page looks, functions, and feels. Below, you’ll learn how to access and adjust your all of page’s layout settings.
To access any section’s settings hover over it in the builder and click the gear icon in the top-left corner, then select “Edit Section Styles”.
Or, click the gear icon next to Section Style in the layout settings panel. Within the settings panel, you’ll find tools to change the following options:
Here, you can add a color or image background to your section. For images, we recommend using a picture that’s at least 1200 px wide or a smaller pattern that’s designed to repeat. Because your background image will scale to fit different devices, it’s best to use pictures that don’t contain essential elements like text or faces.
If you do add an image, you can control its placement with the sizing, alignment, and repeat settings. And, you can increase visibility of elements within the section by adding an image color overlay.
Increase padding parameters to create space between section edges and your content.
Some sections benefit from taking up more space. You can set a minimum height of 50%, 75%, 90%, or Full to adjust how tall your section will appear. Use the alignment settings to control where content should sit within your section.
In the example above, we set the section’s minimum height to 75% and alignment to “Top” to make the first section of the page stand out.
Use these settings to add an arrow effect to your section—which can help gently guide visitors to scroll up or down your page.
With timing control settings, you can delay a section’s appearance for a set amount of time. One popular use case for this setting is to delay the appearance of a shopping cart or buy button. That way, visitors have time to read or watch an offer before they are prompted to buy your product.
Our countdown widget is another clever way to show (or hide) specific sections after a time delay. For details, check out the widget guide here.
Device specific display
Here, you can configure a section to only show up on specific devices. Though all of our templates are designed to be mobile responsive, device-specific sections allow for even greater control.
Columns and sections share quite a few style options in common. However, there are a few key differences.
- Minimum height, timing controls, and device-specific display settings are not available for columns.
- You can add arrow borders to the right or left of a column, in addition to the top or bottom.
- You can adjust columns’ margins as well as padding. Margin settings control the space outside the column (between other columns and rows). Padding options control the amount of space between a column’s edges and content within that column.
(Updated June 12, 2017)
Please let us know if you have additional questions.
You can always file a support ticket if you have additional questions by clicking the Support button in your dashboard shown here or clicking here to file a support ticket.