You are here: Blog » Tutorials » Including a spacer within a panel

Including a spacer within a panel

Did you know that you can include spacers (or any other shortcode for that matter), within your Panels? All you have to do is insert the Spacer like normal within the panel content. This ability to mix and match your other shortcodes within your panels allows you to supercharge your panels and make them even more useful than they already are.

End Goal

Here is an example of how you can use spacer spacing (in this case, negative spacing) within your panels to improve the visual.

bna

How to do it

In the example image above, I added:

immediately before the phrases “Beverages” and “Hazardous Waste” to shift them upwards.

Here is the whole code I started off with:

And here is whole code including the negative spacing:

By using the spacer shortcode with negative spacing, we eliminate unwanted empty space between the phrases.

Thanks for taking the time to follow this tutorial. Hope you find it helpful. Please let me know if you have any questions or other feedback in the comments.

The section headers (End goal, How to do it, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in Tutorials and tagged by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over twenty 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.

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="">