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 Application. Know that every element is created using the Code App, giving the 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 Application

Log in your project and go to the design application.

Screenshot_128-1

 

Click the edit button of the main layout to enter the Design App.

Screenshot_306

 

Step 2: Add new element to main layout

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

Click the plus button next to the footer section.

Screenshot_307

 

Click the Special Elements button in the footer library.

Screenshot_308

 

Click Add to site next to the To Top element

Screenshot_309

 

Click yes to confirm the installment.

 

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 style button next to To Top in the footer section.

Screenshot_310

 

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

Click Icon Default Settings in the Style design panel.

Screenshot_311

 

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 "fa-arrow-up"

(2) click the green save button

(3) Click Dimensions

Screenshot_312-1

 

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

(1) Change the left margin from 14 to 12

(2) Click the green save button

(3) Return home

Screenshot_313

 

The To Top button should look something like this now:

Screenshot_314

 

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

Screenshot_315

 

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.

Screenshot_300

 

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

Screenshot_316-1

 

(1) Select To Top from the content layout

(2) Click Add

Screenshot_317-1

 

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 Save Layout to save your changes.

 

Screenshot_318

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.