How to Add Image Slider on WordPress Website?

How to Add Image Slider on WordPress Website?

Do you want to add image slider on your WordPress website? These image slider can play a vital role in highlight your products, news, announcements, etc in an eye-catchy way to your audience. By doing so, you can make your contents more visible on the website and can grab the attention of your potential customers to improve the engagement rate and conversion of your website.

Slider, being one of the essential tools for any website comes included or inbuilt on most of the WordPress templates. However, if the theme you are using on your WordPress website that does not have any options to add sliders or have the one with limited features then, you can choose to use the WordPress slider plugins available on the internet. These plugins will allow you to create and add different types of sliders on your WordPress website.

If you search for a WordPress slider plugin on the web, you might get thousands of results. However, you need to be very careful while picking the right one for your website. You need to make sure that the sliders are well optimized with speed and do not impact the loading time of your website. Additionally, the plugin needs to be fully responsive to all devices for letting you display slides on any screen size. You might also look for some other important features as well such as template, control over the display of the slides, autoplay options, and many more.

Here, in this article, we will use WP 1 Slider to show you how to add image slider on WordPress website. It is a free WordPress slider plugin available on the repository that comes with a cool slider design and customization options to display your image slides in a visually appealing fashion.

Some of the Best Features of WP 1 Slider:

  • Fully Responsive
  • Add Unlimited Images to the Slider
  • Add Unlimited Number of Slider in One Page
  • Separate Settings for Each Slide
  • Separate Caption Settings for Each Slide
  • 9 Different Position to Display Title and Description on Slider
  • Option to Change the Color of Title and Description
  • Easy Usage via Shortcode

Full Features and Details of WP 1 Slider

Creating Image Slide Using WP 1 Slider

Now let’s get started with the tutorial and create a beautiful image slider on WordPress website:

Step 1:

Download WP 1 Slider from WordPress.org for free. Then, install it on your WordPress website. If you have any difficulties while installing the plugin then, you can refer to its documentation.

After you have completed installing the plugin, activate it.

Step 2:

Upon successfully completing the installation of the plugin, you will see “WP 1 Slider” on the left menu of your site’s admin area. Click on it to continue.

You will land on the “All WP 1 Slider” listing page that contains the list of all the sliders you have created from the plugin. You can edit/delete any of them as per your requirement. Also, you can use the shortcodes to add the premade sliders on any page, post or custom post type of your WordPress website.

WP 1 Slider: Listing Page

To add a new slider, click on “Add New” button available on the top of the page.

Step 3:

You will be directed to the “Add New WP 1 Slider” page. It contains all the settings to create, customize and configure the sliders for your WordPress website.

WP 1 Slider: Settings Page

Before going through the settings, give the appropriate name to your new slider.

Then, click on “Add Image Slide”.

You can add unlimited images on your slider. So, choose any number of image slider as per your requirement.

WP 1 Slider: Image Slide Options

Each image slides will let you add the title and description. Also, you can display button on your slider and add custom button text and URL to direct your audience from the slider button.

Step 4:

After you have added the required number of image slides for your slider, go down below on the “General Settings”. It contains 4 different settings section to customize and configure your image slider. The settings section includes:

Slider Settings:

Here, you can enable/disable the slider box shadow.

WP 1 Slider: Slider Settings

If you chose to enable the box shadow then, select any of the 2 box shadow types. You can view the preview of the box shadow type.

Caption Settings:

From here, you can add captions for your image slider. Choose any of the 4 pre-available caption types to display your caption in the most suitable way.

WP 1 Slider: Caption Settings

Then, set the custom font size and color for title and description. Also, choose the most favourable position to display your caption.

Pager Settings:

Here, you can choose any of the 3 pager type for the slider i.e. dot, thumbnail and pagination.

WP 1 Slider: Pager Dot Settings

If you choose dot pager then, you can select any of 4 types of dot layout and customize its background color and active color.

WP 1 Slider: Pager Thumbnail Settings

For thumbnail, there are 10 pre-designed layouts available. Also, you can set the count, width and height for your thumbnail.

Navigation Arrow Settings:

Here, you can select any of the 7 pre-available navigation arrows for your slider.

WP 1 Slider:: Navigation Arrow Settings

Step 5:

After customizing the general settings of your slider, go to slider option section.

WP 1 Slider: Slider Options

This settings section will allow you to set the width, speed, pause, autoplay, transition, controls and responsiveness of your slider.

Step 6:

Then, click on “Publish” to make your slider live on your website.

WP 1 Slider: Publish

Step 7:

After that copy the generated shortcodes from WP1S Usage to add the image slider anywhere you want on the website.

WP 1 Slider: WP1s Usage

Wrapping Up

In this way, you can responsive add image slider on your WordPress website in few minutes. A slider that contains cool images can provide a huge boost on the engagement rate of the website. So, if you want to create and add image slider then, you can purchase the above mentioned plugin at a reasonable price and follow this tutorial.

You can also checkout the collection of:

Get latest updates, deals and more from us!
Deals, Updates
and more...
Search