Messenger Icon

Awesome Flex Slider for WordPress Bricks Builder

Table of Contents

A Bricks Element made by Piotnet Bricks Element Creator

 

Bricks Flex Slider (Flexslider) is an outstanding and completely responsive slider element with simple controls. It is simple to configure to attract user impressions.

Demonstration for Flex Slider

  • John Wick
    John Wick

    John Wick is a fictional character created by Derek Kolstad, and the titular protagonist of the neo-noir action thriller film series John Wick, portrayed by Keanu Reeves.

    Readmore
  • Captain America
    Captain America

    Captain America is the alter ego of Steve Rogers, a frail young artist enhanced to the peak of human perfection by an experimental "super-soldier serum"

    Readmore
  • Black Widow
    Black Widow

    An excellent markswoman and expert in weaponry, she uses automatic weapons and knives as needed to fulfill her missions.

    Readmore
  • Thor
    Thor

    Thor (from Old Norse: Þórr) is a prominent god in Germanic paganism. In Norse mythology, he is a hammer-wielding god associated with lightning, thunder

    Readmore
  • Iron man
    Iron man

    Iron Man is a superhero appearing in American comic books published by Marvel Comics. The character was co-created by writer and editor Stan Lee

    Readmore

Detailed tutorials to control Flex Slider element

How to trigger this element

Rod Leviton, a Piotnet Bricks user, created this element by applying his code (inspected thoroughly via Codepen.io) to Piotnet Bricks Element Creator, and he graciously shared it with the community.

In the beginning, access to Piotnet Bricks Dashboard >  Add Element Creator > Hover to Flex Slider > Use Element > Save it.

flex slider with piotnet bricks 1
Import Element

You just need to save this element to trigger it.

flex-slider-with-piotnet-bricks-2
Save Element

After that, the Flex Slider is automatically enabled and  stored in “All Elements Creator”

flex slider with piotnet bricks 3
Place to store this element

Configure Flex Slider Element

In your Bricks Editor, find and pick “Piotnet Flex Slider” 

flex slider with piotnet bricks 4

There are 4 main controls in the Content Tab

  • Sliders: Place to add your sliders’ parameters that will show up on the frontend
  • Title Style: Customize Styles of Sliders Titles
  • Description Style: Customize Styles of Sliders Description
  • Button Style: Configure styles of Buttons in Sliders
flex slider with piotnet bricks 5

Sliders Control

Click on Add Item to show up the first Slider,

  • Title: fill out the title of the slider
  • Description: the content of the slider
  • Choose Image: you can upload Image or use an external Image URL
  • Button Text: the title of Button.
  • Button Link: Embed a link to redirect/direct to another source.

To adjust the general height of all sliders, click on Slider Height (pixel unit)

flex slider with piotnet bricks 6
Place to add Sliders

Title Style Control

A place to customize Typography Style Control

  • Color
  • Font Size
  • Text align
  • Text transform 
  • Line height
  • Letter spacing
  • Text shadow
  • Text decoration
  • Padding
flex slider with piotnet bricks 7
Place to configure Titlte Syles

Description Style Control

A place to customize Description Style Control, similar to Title Style

flex slider with piotnet bricks 8
Place to configure Description Syles

Button Style Control

A place to customize Button Style Control, similar to Title Style.

flex slider with piotnet bricks 9
Place to configure Button Syles