Section Design Settings: Layout
Designing your webpages begins with designing each individual section that creates the page. You can choose to make all sections on a page look and feel cohesive, or you can shake things up to bring attention to any particular section.
There are several design elements to consider. This guide will cover the various layout options you can use to transform your section.
Don't want to read through the entire guide? Skip ahead to any one of these topics:
6 Layout Options
No matter what type of section you create, there will always be 6 different layout options you can choose from.
While editing a section, click Change Layout near the top.
Layouts 1, 2, 3, & 6 include a slot to upload one or more photos, while Layout 4 & 5 focus more on just the text of the section.
When you select a layout with image slots, you will be able to upload your photo(s) by closing the design settings, scrolling below the text fields, and clicking + Add Image. (Or you can drag and drop an image from your device into the respective image slot.)
Every photo has a focal point. By default, it will be directly in the center, but you should always change it to ensure the focus of the image is always visible, no matter the size of screen your webpage is being viewed from.
Size & Positioning
You can easily change the height of each section, how wide the text boxes exist, and where the text is anchored in the section.
While editing a section, click Change Layout near the top.
Depending on how much text and what feel you want your section to have, you may want your section to have a short, medium, or tall height. (Tall height will always take up the entire height of your browser.)
The text width will determine how wide the invisible text boxes are before starting a new line of text.
Text anchoring determines where the text boxes are anchored in the section.
Any of these three selections will not be visible in the section editor. To view your changes, click Close at the bottom of the settings, or the X in the top right corner. Then click Preview in the top right corner of the section editor.
This will open a new tab in your browser to preview the entire page you're working on. Because Nucleus autosaves your work, now any time that you make changes in the editor, the preview page that's open in the new tab will continually refresh automatically as well. (Pretty neat if you ask us! 😁)
Special Layout Customization
Depending on what layout you select, there will be unique customization options at the bottom of the layout settings.
Layout 1 allows you to select which side of the screen the desktop and mobile image appears in relation to the accompanying text.
Layout 2 & 3 allow you to select whether the image appears above or below the section text.
Layout 4 allows you to choose between 1-3 columns of body text.
Layout 5 & 6 do not have any unique customizations.
You will notice that all 6 layouts allow you to choose between Full-Width, Inset, & Inset + Info. Most times, you will likely use Full-Width. Choosing Inset provides a secondary background to your section, which can be adjusted under the Background settings.
Note: Because there are so many options in this setting, this guide will not cover the specifics in there. Click here to view a guide on section background settings.
The Inset + Info option allows you to incorporate additional text above the information in the inset part of the section. When you choose this option and close out the settings, you will see Lead-In Text available for you to add to.
Aside from selecting the Inset + Info option, none of your selections in the Layout Customizations will be visible in the section editor. To view your changes, click Close at the bottom of the settings, or the X in the top right corner. Then click Preview in the top right corner of the section editor.
This will open a new tab in your browser to preview the entire page you're working on. Because Nucleus autosaves your work, now any time that you make changes in the editor, the preview page that's open in the new tab will continually refresh automatically as well. (Pretty neat if you ask us! 😁)
Further Reading
Layout settings are just one facet of customizing your section. Check out the following guides to learn about all the other various design settings for a section: