Configure Meta Slider

[title_box title=”Configure Meta Slider”]

Welcome to another G Web Design Tutorial. In this lesson we will look at setting up the plugin Meta Slider, which we installed in a previous lesson, which you can go through here ADD PLUGIN. We will be using WordPress 4.6 and the Responsive theme.

Step 1

Click on the menu item “Meta Slider”. This will open the Meta Slider interface.

Web Design

web designStep 2

Currently we have slides yet. Let’s create our first slide by clicking on the “ + ” sign as indicated. Now let’s look at the 7 parts of this screen.

1. The name currently showing “New Slider”. You can simply click on the name and change it to a more appropriate one.
2. This is the “Add New Slide” button, when clicked it will add the various slides that we will use for this slideshow.
3. The “Save and Preview” button which will save and pop up a little preview of what the slider will look like and the “Save” button which will only save your information.
4. The 4 different slider types that are supported by Meta Slider. You can play around with this we will stick to the Flex slider for this lesson.
5. This contains some advanced features which you can play around with, but for this tutorial we will leave the default settings.
6. Here we have the “Usage” section which contains the shortcode for this plugin. The shortcode can be pasted basically anywhere in your WordPress website.
7. Finally the “Delete Slider” button which deletes the entire slider and all its slides.

Step 3

Now lets create a slideshow. Click on “New Slider” and change it to “First Slideshow”. Now click on “Add Slide” and either select one picture at a time or select multiple pictures for multiple slides. In the tutorial we are going to select multiple pictures and start setting up our slider. Once uploaded click the “Add Slider” blue button at the bottom right to put your images in the slider.

web designStep 4

As you can see from the screenshot below the various elements that make up this slideshow. On the left hand side you have all the images. On the far right we have the dimensions in pixels of the size of the slider. This will depend on your WordPress website design and the size of your pictures. In the centre we have the “General”, “SEO” and “Crop” sections. The “General” will have the caption, url and how you how your next window to open when someone clicks a slide. The “SEO” tab optimizes you image for search engines and the “Crop” tab is the re-size the picture if you do desire.

web designWeb design

Step 5

Complete all the relevant fields, the screenshot below shows the fully completed sections and also slider size set to 600 x 400 pixels. Now you can go ahead and click on save to store your slider.

web design
Step 6

Now let’s copy the shortcode on the bottom left in this case it is [metaslider id=88]. You can either place it in an existing page/post or create a new page/post. Tutorials on creating a new post or page can be viewed here : ADD PAGE and ADD POST. We are going to place it in an existing page, our current “Services” page. As you will notice when you edit the page the Meta Slider plugin has created a button to insert sliders, which also makes you life easier, but since we have already copied the shortcode let’s past it in and update the page. One updated click on the “View Page” link and there we are a brand new slideshow for your WordPress website. Remember this can be incorporated anywhere in you web design.

web design

web design

web design

Thanks for reading,

Graham (Web Designers Cape Town)
G Web Design (Web Design Cape Town Companies)
“Your Partner on the web”

Back to Table of Contents