How to Add Sliding Boxes to WordPress

Sliding boxes can be used to display important information in an eye-catching manner; visitors can interact with the box by moving their cursor over the information to display a new slide or to close a box when they have read the information. WordPress features a selection of free plug-ns that allow you to add and customize sliding boxes without any coding knowledge. Used sparingly, sliding boxes can help direct visitors to areas of your site that you want to give more exposure.

Sign in to your WordPress account (link in Resources) and select "Plugins" from the dashboard.

Click "Add New" and type "Sliding Boxes" (without the quotation marks) in the Search box.

Press "Enter" or click "Search Plugins" to display a list of plugins that add the sliding box functionality to your WordPress blog.

Check the description section for each plugin and click the "Install Now" link for the plugin that suits your needs. Plugins include the WordPress Visual Slide Box Builder that allows you to build slide boxes visually, WP Slide-up Box that adds jQuery-driven slide boxes to pages and posts, and Slide In Popup that enables you to define the bottom edge slide-in box globally or for each page/post.

Click "OK" to confirm the plugin installation and then click the "Activate Plugin" link.

Click "Settings" and select "Virtual Slide Box Builder."

Adjust the rounded corners, border, width, height and opacity values to specify the look of the sliding box. Click "Background" image and select a file if you want to use a background for the box.

Click the "Text" box in the "Box" section and type the initial text that is displayed in the sliding box.

Click the radio button next to "Bottom," "Top," "Left" or "Right" to specify the direction of the slide effect.

Click the "Title" input box and type a title for the sliding box. Click the "Text" box in the "Lit" section and type the text that is displayed when the user moves their mouse cursor over the text box.

Click the "Title Link" input box and type the title of the post to link to when the user clicks the sliding box.

Click the input box in the Menu section and type a name for the sliding box.

Click "Save" to generate the shortcode for the sliding box.

Copy and paste the shortcode anywhere on your site where you want to display the sliding box. The sliding box can be added to a page, post or any section of the site capable of rending HTML.

Click "New" and repeat the process to create further sliding boxes.

Click "Appearance" and select "WP Slide-up Box."

Type the ID of the image that you want to add to the sliding box in the "Image ID" input box. To obtain the image ID fro images on your WordPress site click "Media" and then select "Library."

Type a title and description text for the sliding box image and then type a URL in the "Target URL" input box.

Click "Add Image" to generate the shortcode for the sliding box. Copy and paste the shortcode anywhere on your site where you want to display the sliding box. Add the "mode" parameter along with an option to specify which sliding effect to use for the box. For example "[slideupbox id="31" mode="left-right"] slides the title and text in over the image from left to right. Check the modes showcase page (link in Resources) for a list of options and examples.

Click "Appearance" and select "Widgets."

Click and drag the "SlideIn Box" widget to the "SlideIn Boxes" widget area.

Type a title for the sliding box in the "Title" section and then type the HTML or PHP code that you want to use inside the box. For PHP enclose the code inside "<?php?>" tags.

Click the "Save" button to store the sliding box.

Click and drag the "SlideIn Box" widget to the "SlideIn Boxes" widget area again to create another sliding box.

Click "Settings" and select "Global Slide In" after you have saved the sliding boxes.

Select the sliding box that you have created from the "Global SlideIn Box" drop-down list.

Type a pixel or percentage value in the "Left side distance" or "Right side distance" input boxes to specify the distance from the side of the page that the box is displayed.

Click the "Delay" input box and type the number after the page is loaded to display the sliding box.

Click the radio button next to the close policy that you want to use for the sliding box. "Close button" allows users to click a button to close the box while "Toggle button" allows users to toggle the display of the box on and off. Use "None" to prevent the removal of the sliding box or if you want to use your own HTML for a close button inside the box.

Click the radio button next to the cookie condition that you want to use for the sliding box. The box can be displayed every time the page is visited, once per visit or only on the first visit.

Click "Save Changes" to apply the changes you have made and activate the selected sliding box.