The most customizable part of the hosted website is the header layout. The header can be customized specifically for desktop, tablet and phone.
- Steps for customizing the Header Layout
- Line Customization
- Section Customizations
- Links and Text
- Site Menu
1. Go to hosted websites page inside OwnerRez here. Then select your hosted website.
2. Click on Header Layout and select which layout you would like to adjust.
3. Now you'll see Lines and three Sections in each. Below you can see what this looks like inside OwnerRez and live on the hosted site.
1. You can rearrange the Lines by clicking and dragging the left side of the Line.
2. You can add more Lines by clicking Add Another Line.
3. You can change the style of the Line and remove Lines by clicking the Actions button on the right side.
4. If you select Change Style, you will be presented with this window. Here you can adjust items such as line background, line padding, font, font size, scroll behavior, 3D and button customizations.
1. To customize a Section, click into one of the three Sections inside a Line.
2. Then, if the section is blank, select what type of section you would like to create. There are three types, Links and Text, Logo, and Site Menu.
1. Links and Text allows you add multiple types of items by clicking Add Link. Once you click Add Link, select from the type dropdown what you'd like to include. The options are Link, Button, Text Only and Site Menu.
2. If you select Link or Button, you then need to select what Action you want. The Actions you can choose from are: My Email, My Phone, Page, Social Network, Other Email, Other Phone, Other URL.
- My Email will fill in the email you have set in your OwnerRez theming.
- My Phone will fill in the phone number you have set in your OwnerRez theming.
- Page allows you to select a specific website page you'd like to link to.
- Social Network allows you to select one of the social links you have set in your OwnerRez theming.
- Other Email allows you to add in a specific email address you'd like to link to.
- Other Phone allows you to add in a specific phone number you'd like to link to.
- Other URL allows you to add in a specific URL you'd like to link to.
3. Once you select the Action, you can set the icon you'd like to display for that link/button.
- To insert an icon, click the 🔍 icon next to the text box. This will open a new page on the FontAwesome website. You can search the entire set of 7865 icons. When you find one you like, click on it and look for this:
- Copy that entire "fab fa-envelope" text (without the double quotes) and paste it into the Icon text box for your link or button.
4. Now you can choose what text you'd like displayed for this link/button. If you'd like the text to be the same as what you set for the Action (ex. your email address), then leave this set to default. If you set an icon, and you only want that displayed, change default to custom and do not put anything in the "Specify Text" box.
If you select Logo as your Section type, the logo you have set in your theme settings will be added. You can choose to allow the logo to "spill" below the line over content below.
If you'd like to use a different logo on your hosted site, than what's set for your theming, you can set this by going to your hosted website settings.
Then select "Use custom logo" and add the logo file.
If you select Site Menu as your section type, all the links in your menu layout will be presented.
To rearrange the menu links, go to your Hosted Website Settings page, then click Menu Layout.
From there you can click and drag the menu links in the order you'd like.
You can also nest menu links underneath another by clicking the indent button.