Section Design Settings: Text & Buttons

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 text & button 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:

Text & Button Alignment
Button Behavior & Size
Allowed Text to Display

Text & Button Alignment

Depending on how much text you want to display in your section, what layout style you've chosen, or even where the section exists on your page, you might want your text and buttons to be aligned in a certain way.

While editing a section, click Adjust Text & Buttons near the top.

You can then choose between left, center, or right alignment for headlines & labels, body text, and any actions/buttons you might decide to add to your section.

Any changes here will not be visible in the section editor itself. To see what your changes will look like on your website, click the Close button at the bottom, or click the X button in the top right corner. Then click Preview in the top right corner.

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.

Note: Adjusting the text alignment often goes hand in hand with adjusting the preferred text width in your section Layout settings.

Button Behavior & Size

If you add any actions (i.e. buttons) to your section, you will want to ensure they appear in a way that's cohesive with the rest of your section's design settings.

To find these settings, while editing a section, click Adjust Text & Buttons near the top.

If you have multiple buttons, you can determine that they always appear stacked. Otherwise, if your preferred text width and your browser is wide enough, you can choose to display buttons side by side when possible.

Outside of these two options, you can also choose whether your buttons appear smaller or larger in size.

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.

Allowed Text to Display

All layout options has the capability of displaying text (top labels, headlines, bylines, and body) except for Layout 6, which only displays the special type of content for that particular section. (The exception to this is the Info section, where Layout 6 will still display text, since this type of section is distinctly used to display only text.)

To determine which type of text will be displayed in your section, while editing your section, click Adjust Text & Buttons near the top.

At the bottom of the text & button settings, you can select or deselect which types of text you want to show in your section.

As you select or deselect these options, those fields will display or disappear in the section editor. Simply close these settings to see the updated section editor.

Note: If you have text already typed in one of those fields and you choose to disable that field, that text will not appear in your section. But don't worry - if you reselect it, the text you input previously will still be there saved in the background.

To view your changes, if you're still in the section settings, 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.

Section Design Settings: Text & Buttons

Text & Button Alignment

Button Behavior & Size

Allowed Text to Display

Further Reading