Header With Login

Step by Step

 

Editing The Master Template:

 

1. Firstly, to apply the Header component that you want, go to Site Studio > Templates > Master Template.

 

2. Verify which template is signed as default, and select the edit option.

 

** Note: If you want, you can create a new template by clicking on “Add Master Template”, and after, set it as Default.

 

3. In the Layout Canvas, click on the “+” button and search for the Header with Login in the Components list.

 

4. Drag and drop to the Canvas, it needs to be at the top, it’s the first component.

 

5. Click "Save" to finish it.

 

Customizing the Component:

 

1. Click twice on the component and select the options to customize:

 

Header color:

• Background color: choose a color for the header background.

 

• Text color: select the color options for the text on the header.

 

Header logo & Button Login:

• Logo: select an image file for the logo, and inform the image title and Alt tag.

 

• Logo redirect: inform the homepage link.

 

• Login: inform the URL for the Login page.

 

• Language selector: select ON to activate the language selector on the header.

 

2. Click on "Apply" to save this.

 

Adding Links on the Header:

 

1. To create a new menu item, go to Manage > Structure > Menus, search for Menu header with login on the list, and click on "Edit menu".

 

2. Press the "+ Add link" button and fill the following fields:

 

• Menu link title: Enter the name of the link that will be displayed in the menu.

• Link: Inform the URL that the user will redirect.

3. In the tab Attributes, select an option of the target. *Only make these changes.

 

• • New window (_blank): When selecting this option, the link will open in the same tab as the user's browser. This option is recommended for internal links (site links);
• • Same window (_self): When selecting this option, the link will open in a new browser tab. This option is recommended for external links (other sites).

4. After filling the fields above, click on the "Save" button.

 

5. To add an image and change configurations of color, go to StyleGuide instructions.