Mission 8: Add element to layout

Briefing

Every layout is built using a massive library of design elements. These elements can be styled and tweaked however you like using the Design Editor. Know that every element is created using the developer app, giving developer the freedom to change elements or create their own. There is literally no limit to what you can do.

In this mission we are going to add a to top button to our layouts.

Step 1: Design Editor

Log in your project and go to the design application.

1 design button-4

(1) Click the edit button of the content layout to enter the design editor

2 select layout-2

Step 2: Add new element to content layout

We are going to add a To Top Button to the footer.

Click the plus button next to the footer section.

3 add footer

Click the Special Elements button in the footer library.

4 special elements

Click Add to site next to the To Top element

5 to top

Click yes to confirm the installment.

6 install confirm

Step 3: Style Element

When you scroll down you should see the scroll to top button appear on the right of your preview screen.

Click the green style button next to To Top in the footer section.

7 to top added

We are going to change the icon in the top button.

Click Icon Default Settings in the Style design panel.

8 icon styling

There are 3 types of font libraries you can choose from. Click on the links to search the icon class you want to add to the element.

(1) change "fa-angle-up" to "ion-android-arrow-dropup"

(2) click the green save button

(3) Click Dimensions

9 icon change

As you will notice in the preview screen the new arrow is a little off center.

(1) Change the left margin from 14 to 16

(2) Click the green save button

(3) Return home

10 icon dimensions

The To Top button should look something like this now:

11 result

To make the new layout available for the CMS and website we need to update our layout.

12 update layout

Step 4: Link element to other layout

Now that we have added a new styled element to our content layout we also want to add this element to our homepage layout.

Return to the design starter page and click the edit button next to the homepage layout.

13 select homepage

Next to the Footer section you will see a new blue link button.

This button indicates that there are elements on other layouts that can be added to this section of the current layout.

Click the link button

14 linked element

(1) Select To Top from the content layout

(2) Click Add

15 link to top

The To Top element has been added to the Footer as a linked element. This means that the styling and settings of the To Top element of the content layout and homepage layout are the same. If you make changes to one of these elements both will be updated.

Click the Update Layout to save your changes.

16 update homepage layout

Don't forget to take a look in the CMS and publish your website to see the new To Top button in action.

Debriefing

The technique of adding elements to a layout is the fundamental way to built a layout lightning fast from scratch. Simply add elements to the Header, Content and Footer section. Style them. Publish.

You can also take a look at our video where we built the tutorial site from scratch.

Thank you for going through these missions with us. The final mission awaits as we will update our credentials to the site and add a custom background to the CMS login screen of our clients.

if you have any questions you can always contact us at support@sitemanager.io. If you like to learn more about the Design application you can always watch our Youtube playlist where we give you a full overview.