You are here: Blog » WordPress Plugins » Add-Ons » Spacer: Panels Add-On

Spacer: Panels Add-On

Did you ever want to create panels in your WordPress blog posts? Now, if you find yourself asking the question “What are panels?” we first need to address that.

Now you know what a panel looks like

And here is an example of a panel with a header…

My first panel
This is an example of a panel with a header – cool!

Panels provide a great way for you to interact with your users in friendly, engaging callout boxes. They can effectively convey important information, alerts, and any type of message that you want to make sure your readers will notice.

Did you know? With the Panels add-on, you can create as many panels you want, and you can easily design each panel to fit your needs. For example, you might create a danger panel in red, an informative panel in yellow, and a success panel in green. Then, you can simply include these panels whenever they come in handy while writing your posts.

How To Create Your Panels

The video below provides a quick demonstration of how to create your Panels. For a more detailed walk-through, please see the step by step guide at the end of this post.

Step By Step Instructions

 

Step 1: Create your first panels

p1

  1. In your WordPress admin > Settings > Spacer > Panels (top tab) > Click the blue “New Panel” button
  2. Give your panel a title. In my example, I called mine “Red Alert”.
  3. Set the “Background Color” which will be used as the background for the panel content. I went with white
  4. Select the text color to be used for the panel. I chose black.
  5. You can choose to have the panel corners rounded or sharp. Rounded will give a rounded rectangle shape for your panel, whereas sharp will give you a traditional rectangle shape. I left mine rounded.
  6. Choose a border color for your panel. I went with red.
  7. Choose if you want to include a heading area for your panel. The border color chosen in the previous step will be used for the heading background color. In my case, the red I chose in step 6 conveys an appropriate sense of “danger” when used as the heading background color.
  8. Choose your heading text color. I went with white for this as well.

In my case, I also created another panel called info. This panel does not include a heading. Here is how that one was set up:

p1.2

Next, you are going to insert your panels into a post.

Step 2: Insert panels into your post

For the sake of this example, let’s assume you are writing a post about how to make chicken wings. Suppose you want to add a “red alert” notice to warn your readers not to add too much spicy chili powder, and also an info panel to suggest a nice side dish.

  1. While editing your post, go to the spot where you want to add the alert. In the WYSIWYG Visual Editor toolbar, click the Panels icon  and select the panel you created in step 1. Mine was called “Red Alert”.
  2. When you insert the panel, the panel content text will initially be set to “Panel Content”. Let’s change that to say “Don’t add a lot of chili powder or it will turn out too spicy.”
  3. The panel heading text will initially be set to “Panel Heading”, so let’s change that to “Be Careful!” instead.
  4. No go to the spot where you want to suggest the dish. Click the panels icon and select the info panel you created in step 1. Mine was called “Info”.
  5. Change the panel content to “Did you know? This dish goes great with some celery.” Since this panel doesn’t have a heading, you don’t have to set a heading text for it.

If all goes well, your post write-up should now look something like this:

p2

Step 3: See your panels in action!

When you view your post, you should now see something like the following image:

p3

Great job – you have now set up and implemented your own panels. See how easy that was to make your posts more readable and interesting?

Premium Support

Need help with setup? Just send a message

The step headers (Step 1, Step 2, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in Add-Ons, WordPress Plugins and tagged , , by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of three. He is also a web developer and designer who has been making websites for over fifteen years. His company is called The Motech Network and his website is ClevelandWebDeveloper.com. In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

One thought on “Spacer: Panels Add-On

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">