Build A Page
Once you've created a page the next step is to build out the page section by section. Unlike card content blocks in Nucleus 1, Nucleus 2 pages are broken up into sections which are as follows:
- Information (display additional details or description)
- List (content in traditional list or accordion)
- Calendar (specifically collect date, time & ranges)
- Cards (create and display grids of beautiful cards)
- HTML (embed video, audio or other resources)
Rearrange Sections
Rearranging sections within a page is super easy! Simply drag a section up or down by selecting the drag icon on the right hand side of the section you're looking to move.
Once you move a section, it will automatically save your changes.
Creating A Section
Now let's walk through building a section to give you a better idea how it's done. To start, select the page you would like to work on by clicking the edit button.
If the page you select doesn't have any sections already built, you will be presented with an option to immediately build your first section. In this example will select the information section.
Note: It's possible not all sections will be available and if this is the case, they will be greyed out. These sections will become available as they're completed and launched in Nucleus Web.
Next, choose a layout. Within the options you should see an example of how each layout would present on your Nucleus website. You can always go back and change this at a later time. For this example we will choose Layout 1.
The final step is to name your section. Don’t overthink it, just type something short and sweet that helps describe this section. (It’s only visible to admins). Once you have a name click Save & Start Editing.
Edit/Build A Section
Now let's go over everything you can do within the Information Section we created above. First at the top of the page you have the ability to do the following:
- Change Layout
- Change Colors
- Adjust Background
- Adjust Text
- Add Custom Code
Changing your layout is pretty straight forward. Selecting it allows you to choose a different layout for how that section will be presented on your page. You can also customize the Image Placement, Preferred Section Height & Section Inset.
Switching to Colors allows you to choose a color palette variation based on the current color palette you have selected in the Design Section of Nucleus Web.
Selecting Text gives you a wide range of width & alignment options.
The Buttons section allows you to adjust the size, alignment and even behavior of how buttons are presented within the section on your page.
Selecting Background allows you to add images or video and adjust the background color. Images can be scaled to better present your image on the page and video's can be added using a video URL from YouTube or Vimeo.
Finally, Custom Code allows you to add Custom CSS if you have experience in doing so.
PLEASE NOTE: This is an advanced area, and you can cause your page, sections or entire site to behave improperly or fail to load.
Moving on down the section editor you will see where you can add text. You can edit and change the Top Label, Headline & Body of the section you're editing.
Next is the Media section which is where your image will go and show up in the layout you have selected.
Last but not least, is Actions. This is where you can easily add one or more buttons to this section. Clicking the +Add an Action button will give you the ability to select a type of button, add button text and choose a button style.
