How to create a simple slider in WordPress via Ait Page Builder

Author: Categories: WP Tutorials
Updated: September 6, 2018
How to create a simple slider in WordPress via Ait Page Builder

There are several methods how to revive your website in a simple, but impressive manner. One of such methods is the use of simple slider. Easy slider is an element for efficient creation of catchy and attractive presentations of your services or products. Thanks to the better interaction with your website visitors, you can better meet your marketing targets. Easy Slider can be activated quickly and easily just with tweaking a few settings.

This practical element can be placed anywhere on the standard page, and it can be inserted into columns as well. Easy Slider can be used in the sidebar areas, as well as outside of sidebars, where it can be set as fullwidth slider. Thanks to few settings you can create presentation like this one:

Easy Slider animation


Step 1: Initial setup of Easy Slider

Here you can find short guide how to add slider in WordPress Themes by Ait Themes.

Just log in to the admin interface and click on Page Builder item on the page you want to use Easy Slider for. Page Builder is located on the WP admin bar (in admin right at the top).


Pick the Easy Slider element from the upper part of Page Builder and drag & drop it to the desired place within the Sortable elements area – i.e. where the slider is meant to be displayed.

Subsequently automatic pop-up window shows with the simple slider settings. The settings parameters are divided between the Basic and Advanced settings.


Our tip:
Easy Slider can be used directly in the page header as a header slider. In this case, you need to click on Page Title and turn it off within the option Display -> OFF. Next, pick the Easy Slider element and drag and drop it to the very first position in the Sortable elements section. This way you will create header slider. Header slider can also be set to full width in the Basic settings.


Drag element


Step 2: How to work with Basic settings (and how to add transition effects)

There are several useful settings located in the Basic settings for creation of very interesting combination of effects and design elements for your simple slider.

We chose Content Slider with 2:1 format in our example, with Autoplay and navigation via thumbnails turned on. We picked option “Move” out of five available transition effects for slider animation. Rotate effect is also popular among developers and users, however this setting is more suitable when the text in the description box is aligned to the center.

When considering the appropriate slider format, you need to bear in mind the overall page design, as well as how much text you’re planning to add to the descriptions. 2:1 format is commonly used, as it is not only visually attractive, but also variable from the text positioning point of view. At the same time, this format is so universal, that there is no problem to find any suitable image for your slider.

And when is it beneficial to pick a different slider ratio, let’s say 3:1, 4:1 etc.? For example if you want to use it as an abstract background for some important text, slogan or message, you want to deliver to your website visitors. These less typical formats can be used also when these fit to the design of your presentation. Easy Slider element is easy to experiment with and by a simple change in the format, you can achieve a unique effect for an eye-catching website.

Basic settings


Step 3: How to work with Advanced settings

Advanced settings contain, apart from our standard settings (title and description of element, element background, margins and paddings), also special settings for Easy Slider which expand the countless number of various combinations of these settings. In order to use these advanced settings, you need to enable them, otherwise our default values will be applied.

Advanced settings


Apart from the number of colour pickers for fine-tuning of colour of individual simple slider elements, you can set up also timing for slide rotation in slider animation, the position of navigation elements, the width of slider description (you won’t need to set these up individually for each slide) and the font size of the title description.

With Horizontal and Vertical offset you can set up the offset of description from right or left slide margin (Horizontal offset) and upper and bottom slide margin (Vertical offset). These settings are most relevant for descriptions placed close to the slide margins and relate to all created slides. Therefore when creating slides, it’s enough to choose only once where the description should be positioned on the slide and you don’t need to bother with its positioning anymore.

For better idea how this works, check our example.

We have removed the background colour for the description box in Advanced settings, we have set the description box width to 460px, Vertical offset to 60px and Horizontal offset to 40px. For more noticeable effect we’ve increased the description box font size to 40px.

Advanced settings


Step 4: Addition of slides to Easy Slider

From this point you don’t need to pay attention to slider settings, you can focus on creative work with slides themselves. Switch back to Basic settings and at the end, within Slides section, click on Add new item. Following the creation of new item, few simple settings are displayed, thanks to which you can start creating the individual slides.

For each slide you can set url, title and description, as well as button text. If you don’t need any of these settings, you just skip them. You can therefore fully engage in selection of slide images and description box placement, so that everything fits together. You don’t need to edit image to fit to your slide, its size is determined by the slider format, therefore you can insert any image and it automatically gets cropped and resized. Subsequently you just need to find the right position of description box and your slide is ready.

New item

We have created 3 illustration slides in our slider

First Slide

First one has the description box in the middle and text is center aligned

Second Slide

The second one has the description box at the upper right side and text left aligned

Third Slide

The third one has the description box at the bottom left and text right aligned

This procedure can be repeated using Add new item button according to your needs. Thanks to couple of simple tweaks your image slider is ready. Finally you don’t need to add any special code or javascript, just click the OK button and save the Page Builder settings.

There is no easier way how to create a slider in WordPress Themes – and that’s why Easy Slider is one of the best sliders for WordPress.

Save settings

And that’s it!

About Ivi

She has more than 10 years experience in copywriting, blogging & content marketing with focusing on IT sphere and web development.