Main and Small Focus Advert Sliders and Groups

THIS TUTORIAL WILL LOOK AT HOW TO FIRSTLY CREATE A MAIN/SMALL FOCUS ADVERT IN THE CMS, AND THEN HOW TO ADD THE ADVERT AS A SLIDER OR SLIDER GROUP TO THE PAGE EDITOR FOR YOUR WEBSITE.

This tutorial will look at how to firstly create a Main/Small Focus Advert in the CMS, and then how to add the Advert as a Slider or Slider Group to the Page Editor for your website. The difference between the Main/Small Focus Advert Slider and the Main/Small Focus Advert Group is that a Group allows you to place separate Adverts around the page, but they work together so that if they are showing random adverts, the same advert won't occur more than once in the page. If you were to have multiple Advert Sliders you run the risk of displaying the same content on each at the same time. Groups will prevent this. You can group Adverts in more than one group for more complex pages.

1. Main Focus and Small Focus Advert Main Focus Adverts are known under a variety of different names, for example, large focus sections, main ads and hero images. They consist of large banner images displaying a "call to action", prominently placed on a page. Large Focus Adverts are often the first visual a user encounters on your website and their purpose is to offer an impression of and direct you to the websites most important content. 1a. Creating a new Main Focus Advert in the CMS system Firstly, access the CMS system and open the Large Focus Sections folder beneath Website Pages. Then, select the 'Add Main focus section' icon from the top left corner. A pop-up will automatically appear asking you to specify the advert path (path to another page on your site). You can either choose to leave this field blank, in which case a default path will be used or enter the path of a specific page for the advert to link to (ensure the Page Link checkbox is ticked). 1b. Uploading a Main Focus Advert image When creating a Main Focus Advert you must upload quality, high-resolution images into the Background Focus Image image box. The secondary image box is optional and will overlay a secondary image on top of the main picture. You can choose to have just one image and copy as part of the advert, or multiple that will display in a slider. Either drag and drop an image or select Upload to open the Upload File pop-up. Click the Choose file button, select your image and Click to Upload File, then press Save & Close. EXTRA TIP The file type you upload must be either a .jpg, .png, .svg or .gif. The size of the Main Focus Section is: width - 1920px by height - 960px. 1c. Adding text to a Main Focus Advert There are a variety of different fields for adding text to a Main Focus Advert: Headline text (H2 heading) Sub-heading text (H3 heading) Pretext (H4 heading) Midtext (H4 heading) Posttext (H4 heading) Description text Call to action (button) main focus example Small Focus Adverts consist of multiple visual panels in a slider, we recommend a maximum of six images per page. These Small Ads are designed to grab users attention and focus them to the less critical pages of your website. 1d. Creating a new Small Focus Advert in the CMS system Firstly, access the CMS system and open the Small Focus Sections folder beneath Large Focus Sections. Next, select the Small Focus Section icon. A pop-up will automatically appear asking you to specify the advert path. You can either choose to leave this field blank, in which case a default path will be used, or enter the path of a specific page for the advert to link to (ensure the Page Link checkbox is ticked). A new Small Focus Section will now be available to begin editing. If you wish to change the target of the path then copy and paste the preferred path into the Path field. 1e. Uploading a Small Focus image When creating a Small Focus Section you must upload quality, high-resolution images into the image box. The size of the Small Focus Section is: width - 600px by height - 400px. Drag and drop or select Upload to open the Upload File pop-up. Click the Choose file button, select the image and Click to Upload File, then press Save & Close. EXTRA TIP The file type you upload must be either a .jpg or .png. The size of the Small Focus Section is: width - 600px by height - 400px. 1f. Adding text to a Small Focus Section There are a variety of different fields for adding text to a Small Focus Advert. On the front-end page the text will appear when the cursor is hovered over the advert. When the screen size is reduced, the Small Ads respond and automatically show the descriptions. Title (H2 heading) Description (H3 heading) Price/Details (H4 heading) Call to action (button) 1g. Including a Small or Main Focus Section Lastly, when you're happy with the way your Small Focus Advert looks, tick the Include checkbox in the right-hand corner and select the Update button. You will now be able to use this large or small focus in the Page Editor. Now that you have created your Main/Small Focus Advert Slider in the CMS you can add it to a webpage when editing in the Page Editor. 2. Main Focus and Small Focus Advert Slider (adding to the Page Editor) The Main Focus Slider stretches across the full width of the browser so it should be prominently placed, usually at the top of a webpage. They are used to present an overview of your site's most important content and a number of different styling configurations can be added to the block, including navigational arrows, indictor dots and fades. 2a. Add from Blocks When you are in the Page Editor find the Large Focus Slider icon in the Blocks menu. Remember, you must create the Main Focus Adverts in the Main Focus Section folder (in the CMS system) before you can add them to the Page Editor. 2b. Selecting a Main Focus from the Main Focus Sections folder Once in place, right-click on the Slider block to open the Options pop-up. Use the Category or Sub Folder fields to select the Main Focuses you would like to display on the page. You should be able to see the Category of Sub Folder you created in the CMS system. You can also use the Specific field to select an individual Main Focus Advert. 2c. Adding configurations to your Main Focus Slider There are a variety of configurations that can be added to your Main Focus Slider. You can select these by right-clicking on the page block, choosing your selections from the Options pop-up and clicking Confirm Changes. Some of these configurations include fades, infinite scrolling, arrows, navigational dots, positioning, pausing and autoplay. The Small Focus Slider stretches content across the full width of the container and is used to focus users to desired pages. You can add a number of different configurations to Small Focus Sliders, including navigational arrows, indicator dots and fades. 2d. Add from Blocks When you are in the Page Editor find the Small Focus Slider icon and select or drag and drop it into place. Remember, you must create the Small Focus Adverts in the Small Focus Section folder (in the CMS system) before you can add them to the Page Editor. 2e. Selecting the Small Focuses from the Small Focus Sections folder Right-click on the Slider block to open the Options pop-up. Use the Category or Sub Folder fields to select the Small Focuses you would like displayed on the page, make sure this matches the category you selected when you created the advert. You can also use the Specific field to select an individual Small Focus Advert. 2c. Adding configurations to your Small Focus Slider There are a variety of configurations that can be added to your Small Focus Slider. You can select these by right-clicking on the page block, choosing your selections from the Options pop-up and clicking Confirm Changes. Some of these configurations include fades, infinite scrolling, arrows, navigational dots, positioning, pausing and autoplay. If infinite scrolling is switched on and the Small Focus slider reaches the origin point again, a small ‘flash” will occur. 3. Main Focus and Small Focus Slider Group As mentioned above, the Main Focus and Small Focus Sliders can also sit in Groups.  3a. Add from Blocks Locate the Large Focus Slider Group or Small Focus Slider Group icon from the Blocks menu. Select the icon or drag and drop it to the preferred location on your page.