Resources

FlickSlider

Overview

A responsive, flick-able image slider that supports links and text. Make effortless well-displayed galleries with the Slider extension.

Settings

As with all section, the FlickSlider section includes the Standard Section Options such as padding/margin, background options and etc.

Setup

The setup options allows you to configure how Flick Slider navigates, its height and transition speed.

Select Slider Nav
Select the navigation controls of Flick Slider, you can choose between:

  • Both Arrows and Bottom Nav: Enables both arrow and bottom navigation on the slider.
  • Only Bottom Nav: Enables only bottom navigation on the slider.
  • Only Arrows: Enables only arrow navigation on the slider.
  • None: No navigation is enabled.

Height
Control the height of the slider, using both the base vw (viewpoint width) and min-height in pixels.

Autoplay Time (ms)
Control the autoplay of slides navigating to the next slider. This option uses ms (milliseconds). For example, 1000 ms equates to 1 second.

Item Setup

The FlickSlider setup options are where you configure the individual FlickSlider items.

Add/Remove FlickSlider Items
To add additional FlickSlider items, click the +Add Item button. To remove, click the X icon.

Add/Remove item

Ordering FlickSlider Items
To re-order FlickSlider items, simply place the mouse cursor over the navicon and drag-and-drop to change the order of items. The Item name will automatically change to represent the order of the item e.g. item 3 moves into item 1, item 3 will rename to item 1.

Ordering Items

Background Image
Add a background image to the slider item by either using the Upload option or selecting an image from the WordPress Media library.

For high-resolution images, min. 2000px wide x 800px tall. (2MB Limit)

Image
Add an image to the slider by either using the Upload option or selecting an image from the WordPress Media library. This image sits on top of the background image and is positioned centrally.

Text
A large text field where you can insert an optional text to the slider item, a basic WYSIWYG is included providing options for formatting the slider text.

  • Bold, Italic, Underline
  • Select text alignment left, center or right
  • Control the tag that wrap the subheader, select between header tags <h1> to <h4> or <p> tag.

Toggle Raw Text
The Toggle Raw Text option disables the text editor tools (bold, italic etc...) and allows you to write or insert (copy/paste) HTML code into the Splash region.

Link
Adds a link to the entire slider body. Enter the URL for the address you wish the slider to navigate to.

Note: When entering an address, be sure to include the http:// to the beginning of your URL.

Text/Element Color Scheme
Control the color scheme for the slider text. You can choose from Default, White and Black.

Note: This will override link colors if set.

Shortcode

The Grams section can be inserted into a page, post or widget using the shortcode below. This is used as a quick reference and we recommend including a unique ID.


[pl_section section="slider" id="Enter_Unique_Id_Here"]