Every website layout in SiteManager is built with different elements. In the design editor you can style these elements using the same kind of design panels we used in mission 2 when we styled a page component. In this mission we are going to change the background color of the floating menu (in starting position and on scroll effect) and change the way our submenu opens and closes.
Step 1: Design Editor
Log in your project and go to the design application.
(1) Click the edit button of the content layout to enter the design editor
You always enter the design editor in placeholder view. In this tutorial we are going to style one of the design elements of the layout. You can do this in placeholder view but you can also pick any other real page render to see the effect.
(example of picking a actual content render)
Step 2: Floating Menu Styling (start)
We are going to change the background of the floating menu. We will change it to white since we have changed the content background in the previous mission.
Click the green styling button next to floating menu.
Click Floating Menu
(1) Select Color 5 (white) as the new background color, replacing Content BG
(2) Click save
(3) Click on the home icon to return to the start panel
Step 3: Floating Menu Styling (sticky effect)
When you scroll down you will see that the background of the floating menu is not white yet. In this step we are going to change the background color again but this time it for when the floating menu is scrolling down and sticking to the top of the screen.
Return to the floating menu styling (see step 2).
Click the on Scroll Effect button (Sticky Settings)
Click on the Background Banner button
Click on Background
(1) Select Color 5 (white) to replace Content BG as background color
(2) Click the save button (update CSS)
(3) Click home icon to return to the start panel
When you scroll down you will see that the background of the banner is now white.
Step 4: Change Submenu (Open Close Animation)
In this example we are going to change the submenu functionality of the floating menu.
(1) Click the dark gear button next to Floating Menu.
(2) Click Menu Options
(3) Set Animation Open Effect to Fade In
(4) Set Animation Out Effect to Face In Close
(5) Click save button next to Menu Options
(6) Click home icon to return to the start panel
Step 5: Publish Layouts
For the design changes to take affect in the CMS and published website we need to update the layouts.
First we are going to update the Content layout.
(1) Click Update Layout
(2) Return to the design home page
Since the floating menu is also used in the Homepage Layout we also need to update this layout.
Click the edit button next to homepage.
Click the update layout on the bottom of the start panel.
When you return to the CMS editor you will see the updated floating menu. Don't forget to publish the website to see the changes on the preview site.
The tutorial missions start with the layouts already build. Know that you can built any website from scratch as shown in the videos on the behind the scenes page of the tutorial website.
if you have any questions you can always contact us at firstname.lastname@example.org. If you like to learn more about the Design application you can always watch our Youtube playlist where we give you a full overview.
In the next mission we are going to add an appear animation to our blockquote component using the design editor.