Overview of Creating Sections

Don't want to read through the entire guide? Skip ahead to any one of these topics:

Building a Page in Sections
Adding & Rearranging Sections
Overview of a Section
Designing a Section
Adding Actions (i.e. Buttons)

Building a Page in Sections

Every page in Nucleus is built up in sections. You can have as many or as few sections as you'd like, and as many of the same sections as you'd like as well.

Nucleus offers a wide array of section types: Information, Cards, List, HTML (Embed), Calendar, Staff & Leaders, and Sermons.

Each section offers unique features, but overall, adding and managing sections is relatively the same across the board.

Note: Any changes you make to a page are autosaved while editing it. To learn about saving & publishing changes to a page, click here.

Adding & Rearranging Sections

To rearrange the order that sections appear on your page, click and drag the two lines up/down on the right side and release the section in your new desired order.

You can add a new section by clicking + Add New. at the bottom of the page.

Choose which type of section you'd like to add, select a layout style, and then give it a name. (This name is just for your own reference.)

Overview of a Section

While editing a section, there are 3-4 components you will see:

At the top, you have several options to manage the overall design of the section
Below this will be any headings and body text you want to appear on the section
Below this will be any other options specific to the type of section you added, or specific to the layout you chose for the section.
At the very bottom, you can add various actions (i.e. buttons) to the section.

Designing a Section

To change the design settings of your section, click any of the options near the top of the page, from Change Layout, to Adjust Text & Buttons, to Style Media, and much more.

Once you click on one of these, you can quickly move between the different design options by navigating through the menu at the top.

Preview Your Design Changes

Most of the design changes you make will not be detectible in the editor of your section. (There are two exceptions to this, stated below.) 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. (Pretty neat if you ask us! 😁)

Layout & Text Changes

The two exceptions (mentioned above) for what changes are noticeable directly in the editor are when choosing a Section Layout and when adjusting what types of Text will appear in your section.

If you choose a layout with images, you will be able to upload an image in the editor (once you close the design settings). Vice versa, if you choose a layout without any images, there will not be any place to upload an image in the editor.

For instance, if you choose Layout 3, you will see 3 options in the editor to upload your images. But if you select Layout 4 or 5, there will be no options to upload images.

While managing your section's text & buttons, you can decide which types of text are displayed on your section:

Top Label (Overline)
Headline
Byline & Other Labels
Body

Selecting or deselecting these options will cause the text fields in the editor to appear or disappear. For instance, with all four types of text visible, you will be able to edit all four.

Selecting only the body text, for instance, now you will only be able to edit the body text.

Note: Having other fields selected, but not having any text typed into those fields will affect how your section appears on your website. If you leave fields blank, Nucleus will showcase empty space where the text should be. So be sure to only select the types of text that you actually want to display on your section. (Unless you like the look of having a bunch of empty space 🤭)

Adding Actions (i.e. Buttons)

If you want to add one or more buttons for people to click on to take a specific action of some kind, you can always do this at the bottom of the section editor.

Just like with managing sections, you can reorder your actions by clicking the two lines up/down on the right side and release the action in your new desired order. To add a new button, click + Add New.

There are several destinations you might want to take someone to. Each destination has their own unique option that will appear once you select it, but otherwise, you will always need to type in the button text and button style.

For a more in-depth guide on creating actions (i.e. buttons) on a section, click here.