Appearance - Header + Menu

Breadcrumb path: Appearance / Header + Menu

You can access this page by clicking on Appearance from your main menu and then clicking Header + Menu from the dropdown menu.

Appearance - Header + Menu Fundamental

In this section, you will learn to use the Appearance - Header + Menu module. Header + Menu enables you to design the Appearance of the top part of your website, which includes the Header and Menu. Note: only the first (upper) row of the menu is included in the Header + Menu.

Now that you have learned the fundamental idea, this guide will walk you through the Header + Menu module.

Header Templates

This is your main area for Header Templates. It allows you to Create New Templates, as well as manage preexisting ones. This section enables you to perform many convenient actions, such as quickly switching between different Header Templates by using Publish, or Copying a preexisting template to work from a preexisting idea. Following is a full description of the different functions on this screen.

• ● 1 Create New Template. Click this button to open a window prompting you to enter a Template Name. enter a name into this field and then click the button to open up a new screen for designing a template.

• Template Name *. In this field, enter a Template Name and then click Create New Template, or click Close to return to the previous screen.

• ● 2 Search. This field allows you to Search for Header Templates from all those currently in your system.

• ● 3 Columns. These columns display information and functions related to Header Templates.

• Name. This column displays the Name of the Header Template.

• Published. This column displays whether the Header Template has been published.

• Template. This column displays the Template.

• Created At. This column displays when the Header Template was created.

• Updated At. This column displays when the Header Template was updated.

• Actions [Copy | Edit | Publish | Delete]. This column displays a variety of Actions you can perform on the corresponding Header Template:

• Copy. This allows you to Copy a Header Template in its entirety. This is useful for creating new templates that build on previous ideas.

• Edit. This allows you to Edit a Header Template already available in the system.

• Publish. This allows you to Publish a Header Template. Note: because you can only have one Header Template active at a time, whichever one you have Published most recently will be active.

• Delete. This allows you to Delete a Header Template.

Now that you have learned about the functions of the Header Templates main screen, this guide will walk you through the steps to ● 1 Create New Template.

Create New Template

• ● 1 (Left Side). Name. Copy this design to [Tablet | Mobile | Copy]. The Name is displayed here. Choose the device setting you want to Copy a Template from, and then click Copy. Note: this will Copy over any unsaved progress you have made.

• ● 1 (Right Side). In this section you will find two rows of functions:

• Top row: Device [Desktop | Tablet | Mobile]. Click the icon of the device that you want to design a Header Template for. Note: every device requires its own separate header design.

• Bottom row: [View Page | Save | Publish].

• View Page. Click here to display a preview of how the page will look in its current state.

• Save. Click here to Save any progress made on your current design.

• Publish. Click here to Publish the current design on the front end of your webpage.

• Help. Click here to connect to the User Manual for Help with this module.

• ● 2 General Settings. In this section, you can change various settings for your Header Template.

• Template Name. In this field, you can edit the Header Template Name.

• Header Width. In this field, you can edit the Header Width. This is generally fixed and has no need to be changed. The default setting is 100.

• Header Max Width. In this field, you can edit the Header Max Width. This is generally fixed and has no need to be changed. The default setting is 100.

• ● 3 Element Table. This section displays the current Elements in your Header Template. By default, there are no Elements and they will only be revealed when Add New Row is utilized.

• Add New Row. This allows you to Add New Row to the current template.

• ● 4 Element Functions. In this area, you will see a collection of Functions that can be dragged and dropped into the Elements section.

• Call Us. This function displays a link that automatically opens up a call if used on mobile.

• Text Us. This function displays a link to Text if used on mobile.

• Menu. This function displays a Menu of the system.

• Account Icons. This function displays various Account Icons.

• There are currently 5 Icons included as shown below. These include: Track my Order, Wishlist, Shopping Cart, Search, and My Account. These Icons, as well as the order in which the Icons are displayed on your header, can be changed according to your desired specifications.

• ● Account Icons (continued).

• 1 Checkboxes determine whether or not the corresponding Icon is displayed and active. You can also change the Names of the Icons by entering text into this field.

• 2 Numbers determine the order in which the Icon is displayed (with 1 starting on the left and moving to the right as Numbers increase).

• 3 Browse enables you to upload your own image to be used as an Icon.

• Custom Text. This function displays Custom Text you have entered.

• Search Box. This function displays a keyword Search field.

• Popup Banners. This function displays a Popup Banner on your website.

• Image. This function displays an uploaded Image.

• Button Link. This function displays a Button Link you have entered.

• Rolex Plaque. This function, available only to Rolex authorized retailers, displays the Rolex Plaque javascript code.

• Email Us. This function displays an icon that links to Email.

• Social Icons. This function displays Icons with quick access to Social media.

• Custom code. This function displays Custom code you have entered.

• Line. This function displays a dividing Line.

• 6 View. This button allows you to View the current design in preview mode. You will also see a ruler below to provide perspective on the Header dimensions.

Now that you have learned the basics of Create New Template, you can continue with the next section of the guide (Add New Row).

Add New Row

The screen above shows the result when Add New Row is clicked. Three new rows have been added and shown in the image.

• ● 1 Element. The blue up and down arrows can be used to change the element of a given row.

• ● 2 Rows and Columns. Functions can be dragged and dropped into this area in order to design your Header Template.

• ● 3 Delete and Edit. Clicking Delete will remove a Row from the available configuration. Clicking Edit will bring up a new Edit screen as follows:

• ● Row Settings. This window displays a variety of settings related to the specific row.

• Name. This field allows you to enter a Name for the row.

• Status [On | Off]. This setting controls whether the row is turned On or Off.

• Columns. This field controls how many Columns are in the row.

• Transparent [Yes | No]. This setting controls whether or not the row background is Transparent.

• Background. This field controls the row Background color.

• Text Color. This field controls the row Text Color.

• Height. This field controls the row Height. The default is set to auto.

• Width. This field controls the row Width. The default is set to auto.

• Max Width. This field controls the row Max Width. The default is set to auto.

• Scroll [Normal | Fixed | Scroll]. This setting provides three setting options for the row Scroll.

• Normal. This option provides a standard scroll setting, where the row is left at the top when a user scrolls down the page.

• Fixed. This option provides a Fixed scroll setting, where the row follows the user while scrolling down.

• Scroll. This option provides a special Scroll setting.

When finished filling out the desired settings for the row, you can click outside of the box to return to the main screen.

After an element has been dragged and dropped into one of the elements, the green Edit icon becomes available and will bring up a new screen as shown below.

Example inputs for the Call Us function are shown in the above image. Note: every function has a slightly different menu of settings that can be customized according to your preferences.

When you finish your settings, you can use the Copy function at the top of the page to transfer from one device format to another (e.g. from Tablet to Mobile).

Now that you have learned how to set up Appearance - Header + Menu, that completes this section of the user manual.