Now that a strong basis of sections and components was created, it's time to give you some important hints on how to manage components and sections in order to edit them or apply them in different contexts, for example, when creating a new page.
‍
You should be aware of some core concepts before digging into specifics:
1. Pages are composed by sections that have elements inside (divs, images, text, columns, etc);
2. Each section or element can be associated with a class or multiple ones (e.g. this paragraph has the "guide component explanation" class, as you can see in the image below) that it's reusable throughout other elements — any change applied to that class, will be reflected in all the components that use this same class.

3. Due to this reason, if there's something that you want to change in a specific context you have two options:
• Option 1 - Duplicate the class and rename it (creating therefore a new one) — so you can apply any change you want on the Layout setting panel, that will therefore be associated to this new class you created. This option is commonly used for bigger changes, for example variations on a card style such as color, dimensions and other styling options, considering that you could possibly want to reuse this new element on a different place/page.

• Option 2 - Add a combo class (a second class to your element in that specific context)— that means adding another class to the same element, so the changes applied will be "saved" on the second class, not interfering with the elements that only have the first class applied. This option is commonly used for smaller changes that only make sense in particular contexts, for example to add a different margin or padding, that's why you'll find combo classes like "margin-top-20px" through the project :) [To add it, you only need to click class section on the panel, and you automatically be writing the name of the new class].

3. Be aware that in case you have created a new element or you are editing an element that doesn't have any class associated yet, as soon as you start editing, a new class will be created by default (and you'll need at least to rename it, or otherwise you'll lose track of what is that class for).

‍

When creating a new page, the first one you'll create is the Hero.
1. First things first, you'll need copy an existing hero section from the existing pages. It follows an already existing structure, you can simply duplicate the class name applied, so you can make slightly adjustments without affecting the original page (e.g. Hero About Us).
If you want to create a new section from scratch, add a new section element. Don't forget to apply a class name to your section (e.g. Hero About Us).

2. Then, you can copy an "Hero Container" from these Hero Variations that were exemplified on this styleguide — and make some subtle changes on top of it (always having in mind that replicate class/combo class mindset mentioned above);

3. This Hero Container div already includes the Header components, nevertheless you should make sure the interactions' panel have the two animations active.

As you'll see, there are two header components that must be included:
• Nav Bar — the one visible at the top of the page;
• Nav Bar Scrolled — the one that appears on scrolling, initially with a position negative, therefore not appearing on the page.

The Nav Bar Scrolled has two interactions defined that allow it to move down when users initially scroll down (Page scrolled > Nav White Moves Down) and another one once it reaches the top again , moving back to the negative position (While page is scrolling > Nav White Moves Up).

To re-use this components you must copy and paste the 3 groups of elements to the page (don't forget that componets be always placed inside a Section), in order to make it work in all the breakpoints:
1. "Full Testimonial Block";
2. "Slider Tablet";
3. "Slider Mobile".

Therefore you can "Replace Image" if you want to add a different person — no need to change the class, each image element is a different instance, even though having the same class — so you can switch the image without affecting other elements in the same or other pages.

To create different and a new features' list components, you'll need to have a particular situation in mind — the images are being used on the div background — so if you change the Background on the edit panel, all the elements with that same class being used, will be changed.
For this reason, in case you want to create a variation with different images, please do follow these steps:
1. Copy and paste the features' list component;
2. Select the div with the background image;

3. Then, you'll need to duplicate the main class (where the bg image was applied) and give it a different name: to duplicate a class, you'll have to remove the combo ones for instance (please remember the ones you have applied), duplicate the main one and give it another name. In this case, you'll need to remove the "no-margin" class, duplicate the "Image 1 Right", rename it (you can then change the background image to the one you want) and apply again the "no-margin" class.
‍

When adding/editing components of these types, the same rules of the testimonials' sections will need to be considered — the images can be "replaced" through the setting icon on top of the element — no need to replicate the class, considering that the images are an image element.