Codeless Web Series – 06 How To Create a Custom Slider

Welcome to this tutorial. We are talking today about sliders and how you can add them with Folie WordPress Theme.

Sliders are a great way to organize and showcase images or videos on your site. There are so many plugins on the market that make the creation of sliders more easier and versatile. We have developed or own Codeless Slider with a wide range of options to ensure you a slide that fits your requirements.

Let’s get started !

• Usually the slider goes on the very top of your pages, so let’s create a new page with Codeless Builder :

 

• Add codeless slider by clicking at the gray balloon which appears on hovering the row in Visual Builder. You can add a Codeless Slider on every section of your page clicking at the corners of every column and row.

 

• The available options for the codeless slider will be shown of the left panel, under the Page Builder Section.

 

• Click at row containing the slider and see the row options at the left panel. Go to Design > Background Image and upload an image. You will see the image displayed at the left panel of the screen. This is the slider image.

 

• Clicking on the Plus icon next to the slide number, you can add new slides. For each slide that you add it works the same : Go to Row Options and choose the background image at Design Options. Every picture choosen is the slide image :

 

• At this point you can add some content in slider. Click at the gray balloon that appears in column insider slider and add any element you want. For a simple slider usually can be used ‘Custom Heading’ element. Select the options of this element on Customizer panel.

 

Here i am also adding some buttons to the slides :

• You can also clone an individual slide and the entire slider clicking on the Clone Icons.

 

Codeless Options include :

• Slider Height – drag the mouse to adjust the slider height.
• Full Height Slider – stretch Slider in a fullscreen style.
• Prev/Next Buttons – activate the buttons to navigate through slides.
• Pagination Buttons – activate the pagination buttons.
• Effect – choose an animation for the slider. Refresh the page if needed.
• Direction – choose the direction of the effect (horizontal or vertical).
• Transition Speed – choose the speed of the transition of the animation.
• Autoplay, delay between slides in ms – choose the autoplay and delay between slides.
• Loop – activate loop.
• Mousewheel – activate the mousewheel if you are using vertical sliders.

 

This is how the created Codeless Slider looks on live page :

 

 

So this is how you customize a Codeless Slider. For more detailed information, watch this narrated video tutorial 🙂 :

 

Have a nice day!