To implement sliding boxes into your WordPress page, you have to do the following steps:
1. Download & Install the a-boxes plugin
You can find the plugin in the WordPress plugin directory, just search for “a-boxes” or “WP Slide-up box” in wp-admin’s plugin installer (Plugins >> Add new), then Install and Activate it.
Alternatively you can use the manual way:
a.) Download the zip package from the plugin’s download page or from the WordPress Plugin Database.
b.) Go to your WordPress Admin area and sign in (e.g.: www.yourdomain.com/wp-admin)
c.) Go to Plugins » Add new, then click on Upload
d.) Select the zip package you downloaded in 1a) then click on Install Now button.
e.) If the upload process was successful, you can now Activate the plugin.
2. After you’ve installed and activated the plugin, a new submenu item will appear in the WP-admin area
You’ll be able to find it after installation near the bottom of the wp-admin menu.
3. Set up your sliding boxes
Go to a-boxes » Shortcode Generator. Here you can use the Shortcode generator to set up your sliding boxes. The Generate shortcode button will create a shortcode for you that you can insert into any posts or pages on your website.
The possible shortcode parameters:
- id: The attachment ID of the image. This is the only required field. Click here for a tutorial on how to find it. Since v0.4 you can use the image URL here instead of the ID, too. It makes it possible to use images from outside your WordPress installation.
- mode: The animation type for the box. To understand better how the different modes work, take a look at our Modes Showcase page.
- title: The text displayed on the top of the box.
- desc: The longer text at the bottom part of the box. You can use the following HTML tags in the text: ‘br’, ’em’, ‘strong’, ‘i’, ‘b’, ‘p’, ‘span’, ‘ul’, ‘ol’, ‘li’ (no tag attributes are allowed). If you’d like to put links in the description, read this tutorial.
- target: The URL the box should be linked to.
- class: You can add extra classes to the box container with it. It can help customizing its look.
- bgcolor: The background color of the cover layer (hexadecimal RGB code).
- color: The text color of the cover layer (hexadecimal RGB code).
- alt: Alternative text for the background image. If not set, the title will be used.
- size: Size of the image (defined with WordPress image size slug).