How to create a WordPress slide box

How to create a WordPress slide box

Slideboxes are a nice way to present content. They provide value to your site and also catch visitor’s attention, which is exactly what you want in any website or blog. Today I’m going to show you how you can create a WordPress slide box for your site. It is actually very straight forward thanks to this plugin that I built myself. WP Visual Slidebox Builder. As the plugin’s name says it is a visual builder, meaning that you will be able to create a WordPress slide box visually without having to rely on code; and as you do it you will also get a live preview to show the progress in your WordPress slide box. So let’s get started!

Download the plugin

The first thing you will need to do is download and install the plugin in your WordPress site. I’m not going to go into details on how to do this as this is a very simple task.

So once you have downloaded and installed the plugin you will need to go to “Settings” on the admin section of your WordPress site, and then click “Virtual Slide Box Builder”. This will take you right into the plugin, which should look like this:

scrennshot2

As you can see you have your live preview in the left, all the properties you can play around with on the right and the menu on the top. On the right side where all the properties are at, you will notice that they are dived into two categories: “Box” and “Lit”. The Box is the main container, and the Lit is the part that slides.

Creating the WordPress slide box

For this example we are going to be building a simple page that will display different industries, (healthcare, business, law, IT, hospitality). You can view the finish product by clicking the “view demo” link on the top.
So the first thing we are going to set are the dimensions. For this example we are going to use 400 width by 400 hight. So you can go ahead and set that on your side on the “Box” section. Now you should have a very plain “slideup” box that displays some text.

Next, we are going to add a background image to the “Box”. (Bellow are all the images that were used for this example.)

healthcare
hospitality
it
law

The Box

To add a background image you will simply click the “Background Image” button on the “Box” section and upload and image or use one from your library. So once we have the background image in place, we are going to remove the text from the “Box”, so that the image could show properly. Next we are going to give our slide box a smooth touch by adding rounded corners. Go ahead and set the values “Rounded Corners”. This is going to be 400 for each. We use 400 because we want to make a full circle, and since we set our dimensions at 400 thats what we have to use. Now let’s get rid of the border; all we have to do is set the “Border” to 0. And we are pretty much done with the “Box” section. Now we move on to the “Lit”

The Lit

Next we are going to work on the sliding part of our slide box. First let’s se the title (Healthcare, IT, Law, Hospitality). Due to the fact that we decided to build a rounded slide box, the title might not fit completely by default, so we might have to change the font size. So let;s set the title “Title Font Size” to 20. Now our title fits perfectly.

So now we move on to the text that is going to be displayed inside the “Lit” for this I’m going to use http://www.lipsum.com/ which is a very popular text generator. I have generated some text and copied inside the “Lit”, when you do this you might notice that the text might not fit completely, there might be some parts of it especially the corners not showing, since we are using a circle for our side box. So you are going to have to adjust the text to fit in the “Lit” by using the arrow right next to it. This will allow you to place the text up, down, left, and right as you wish.

Once you have place the text in the desired position it is time to add the final touches. We are going to decrease the opacity on the “Lit” by using the “Opacity” property minus button. Do this until you feel conformable with an opacity. Once that is done, you are ready to save your creation. So give it a name in the “Menu” box and hit save. You’re done!
View Demo

Profile photo of Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer, Inc.
Enmanuel Corvo is a passioned software engineer who enjoys contributing to the web community by creating plugins, blog post and providing technical help to those who need it.
Profile photo of Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)

Posted in Uncategorized.

One Comment

  1. Pingback: Free Webmaster Guide

Leave a Reply