How to Add a Content Slider

Navigate To The Page

1. Login to TheWebConsole

2. From the left side menu click Manage Pages and choose Content Pages

3. From the content page list either add a new page or edit an existing page

Note: information on how to Add a New Page and How to Edit an Existing Page can be found in more depth within separate knowledgebase articles.

Adding a Content Slider

1. Once the drag and drop editor has loaded you will be given the option to add different content modules into the page. All of these content modules first require a “Section” to be added. Once you have added your section and formatted it to your liking, simply click the “Slider” content module, located in the side menu. Once clicked, drag the module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

Note: Adding a section is covered in its own knowledge base article.

Adding Slides

1. Once you have added the content slider module to the page, hover over and click the module and click the edit button, the edit button appears as a pencil icon in the top right of the section.

2. Once the edit window appears you will have the ability to add sliders and apply settings to style the slides. The first screen that you will see is the Sliders tab. To add sliders simply click the “Add Slider” button. 

3. By default each slider you enter will have the genetic heading of “Slider #”.

Styling the Sliders

1. Once you have added all of your sliders, you can add styling to them. The styles are broken down into 4 tabs, Sliders, Slider Options, Layout and Slider Layout. These are covered below: 

• Sliders - This covers the overall layout of the entire slider content module.

  • Slider Class - This allows you to set a custom design class for each slider.

  • Border - Allows you to set a coloured border to the content module.

  • Outline - Allows you to choose the style of border applied and its thickness.

  • Add Background - This allows you to add a background to the slider.

  • Padding and Margin - This allows you to add space between the content of this module and the modules around it.
     

• Slider Options - Allows you to add global settings to how the slider will work.

  • Slides to Show - This allows you to choose the number of sliders in the tool that you wish to show.

  • Slide to Scroll - This allows you to choose the colour of the tab.

  • Loop - Allows you to loop/autoplay the content slides.

  • Show Arrows - This allows you to choose whether to show navigation arrows or to not show them.

  • Transition- Allows you to choose the Auto or Manual transition.

  • Fixed Height - This allows you to choose to set a fixed height size of the content area within the slider
     

• Layout - Allows you to add styling to the content area within the sliders

  • Border - Allows you to set a coloured border to the content module.

  • Border Radius - This allows you to curve the border of the slider.

  • Background Colour - This allows you to choose a background colour for the content area of the slider.

  • Padding and Margin - This allows you to add space between the content of this module and the modules around it.

  • Container Class - This allows our designers to add customized CSS styling to the module.
     

• Slider Layout - This allows you to add styling to the content area within the sliders.

  • Border - Allows you to set a coloured border to the content module.

  • Outline - Allows you to choose the style of border applied and its thickness.

  • Padding and Margin - This allows you to add space between the content of this module and the modules around it.

  • Background Colour - This allows you to choose a background colour for the content area of the slider.

  • Minimum Height - This allows you to choose to set a fixed height size of the content area within the slider.

2. Once you have added all of your sliders and applied all of your stylings click the blue Save and Close button to save the module.

Adding Content to the Sliders

1. Once you have added your sliders and applied the styling you will have the ability to then add content to each of the sliders. To do this simply drag and drop the content modules you wish to use into the respective column on the slider, this is done in the same manner as the normal content editor process.

Note: Information on how to add each of the content modules can be found in more depth within separate knowledgebase articles.

2. Once you have added your tabs, applied the settings and added your content, click the “Save” button on the bottom of the side menu to save the page and apply the tabs.

Note: Always remember to follow the final point and save the page itself, or the hard work you have done will not be applied.