Appearance - Rolex Homepage

Breadcrumb path: Appearance / Rolex Homepage

You can access this page by clicking on Appearance from the main menu and Rolex Homepage from the dropdown menu.

Appearance - Rolex Homepage Fundamental

In this section, you will learn how to use the Rolex Homepage module. This module enables you to customize the Carousel Settings and Carousel Banners to be displayed on your Homepage.

Here is an example of a finished page using the Rolex Homepage module:

Now that you have learned the fundamental ideas and seen an example of the end result, this guide will continue walking you through how to use the Rolex Homepage module.

Rolex Homepage Settings

After you have navigated to the Rolex Homepage module, the Rolex Homepage Settings screen will display. This screen is divided into Carousel Settings and Carousel Banners sections.

• ● 1 Carousel Settings. This section enables you to make changes to the Carousel Settings. This includes a variety of specifications that will determine how your Carousel displays.

• ● 2 Carousel Banners. This section enables you to Add and Edit Custom Banners to display in your Carousel.

Now that you have learned about the different sections in Rolex Homepage Settings, you can continue with the guide covering each individual section. Please continue to the next section (Carousel Settings).

(1) Carousel Settings

This section enables you to make changes to Carousel Settings. These Settings determine how the Carousel displays through a variety of customizable specifications. This gives you comprehensive control over your Carousel, enabling you to personalize your Homepage Banner according to your own individual preferences.

• ● 1 Left Column. The Settings in the Left Column will be explained below.

• Carousel Width [% | px]. This setting enables you to set the Carousel Width by entering a number into the field. You can select the unit to the right, choosing either % (percentage) or px (pixels).

• Autoplay. This setting enables you to turn On or Off Autoplay.

• Autoplay Speed (ms). This setting enables you to set the Autoplay Speed by entering a number into the field. The Autoplay Speed is measured in ms (milliseconds). This is the length of time in milliseconds that your Carousel will display each Banner before moving to the next Banner.

• Arrows. This setting enables you to turn On or Off Arrows. These Arrows display on either side of your Banner, enabling your site visitors to scroll through the different Banners in your Carousel.

• Dots: This setting enables you to turn On or Off Dots. These Dots enable your site visitors to display any Banner from your Carousel.

• Dots Position (px): This setting enables you to set the Dots Position. This is the distance in pixels from the bottom of your Banner to your Dots.

• Pause On Hover: This setting enables you to turn On or Off Pause On Hover, which determines whether or not the Banner will Pause when a site visitor Hovers the mouse over it.

• ● 2 Right Column. The Settings in the Right Column will be explained below.

• Margin Top (px). This field enables you to set the Margin Top, which is the distance in pixels between the top of your Banner and your navigation.

• Margin Bottom (px). This field enables you to set the Margin Bottom, which is the distance in pixels between the Bottom of your Banner and the next element displayed.

• Transition [Fade | Slide]. This setting enables you to choose the Transition for your Banner Carousel. The Fade option will gradually Fade from one Banner slide to the next, whereas the Slide option will Slide the Carousel along.

• Transition Speed (ms). This field enables you to set the Transition Speed (ms). This is the length of time it takes to move from one Banner slide to the next.

• Animation. This dropdown enables you to select the Animation. The options include ease, linear, ease-in, ease-out, ease-in-out, step-start, and step-end.

• Arrows Design. This dropdown enables you to select the Arrow Design. The two options available are first and second. When selected, the Arrow Design will display to the right of the dropdown as a preview.

Once you have finished entering and modifying any of the above settings, be sure to click Save at the bottom of this section before moving on to the next (Carousel Banners).

(2) Carousel Banners

The Carousel Banners section enables you to Add, Edit, Delete, as well as change the Status and Order of the Banners in your Carousel.

• ● 1 Columns. In this row, you’ll find names of Columns which display information and allow you to make changes to the different Banners in your Carousel.

• Order. This column displays the relative Order that the Carousel will display the respective Banner.

• Banner. This column displays the name of the respective Banner.

• Status. This column displays the Status of the respective Banner and allows you to turn it On or Off.

• Actions. This column allows you to Edit or Delete a Banner when possible.

• ● 2 Rolex Banners. These rows are occupied by Rolex Banners. These Banners are premade by the Build software engineers and cannot be modified by you.

• ● 3 Custom Banner. This area displays any Custom Banners that you have created. You can Edit or Delete using the green and red icons to the right.

• Add New Banner. Click this button to display a new window shown below to Select Banner Type.

• ● Select Banner Type. This window displays options for you to choose different Banner Types.

• ● 1 Rolex Optional Banner. Click this button to open a new screen enabling you to toggle On or Off the Rolex Optional Banner.

• ● 2 Custom Banner. Click this button to open the Banner Editor.

When you are finished with the Carousel Banners section, you can continue to the next section (Banner Editor).

(3) Banner Editor

This will open the Edit Custom Banner screen. This screen enables you to create your own Custom Banner using the Editor. This is the same Editor used for the Page Builders. For more information on how to use the Editor, you can visit the Static Page Builder Editor section of the user manual.

Now that you have learned about the Banner Editor, this completes the section of the user manual covering Appearance - Rolex Homepage.