You are here: Blog » WordPress Plugins » Spacer

Spacer

Spacer

This WordPress plugin adds a spacer button to the WYSIWYG visual editor which allows you to add precise custom spacing between lines in your posts and pages. Note that you can also enter negative spacing to shift the following content upwards.

NEW What are fancy dividers?

Fancy dividers help organize your texts and are helpful for breaking up paragraphs, chapters, separate thoughts, etc

Starting in version 3, you can create an arsenal of additional spacers and fancy dividers to have at your disposal as you lay out your pages. In the picture above, you see an example of some dividers that you could create with Spacer. These visual elements help organize your texts and are helpful for breaking up paragraphs, chapters, separate thoughts, etc within your pages and posts. You have full control over the look and feel of your dividers, and you can create an unlimited amount of them. You are only limited by your creativity 🙂 The Spacers that you build can be added into your posts and pages with the spacer button in the WYSIWYG visual editor.

How do I create a fancy divider?

Add new spacers via Settings > Spacer > Add Spacers (top tab) > New Spacer Give your spacers descriptive names (like gray divider) to remember them later. Use the live preview tool to help as you build.

The two images above illustrate how to create additional spacers and dividers. Start off by going to your WordPress admin > Settings > Spacer > Add Spacers (top tab) > New Spacer. Give your new spacer a name and adjust it to your liking. If you want to give it a background color, try adding something like background:gray; to the Style setting. Use the live preview tool to help you as you build your Spacers.

How do I add a fancy divider to a page/post?

Adding a fancy divider to a post

As the above image shows, you can choose which Spacer you want to add via the spacer button in the WYSIWYG visual editor. It’s a good idea to give your spacers descriptive names (such as big spacer, small gray divider, etc) to help you remember them later as you need them.

What if I don’t know CSS well, or would like an easier way to create fancy dividers?

Check out the Visual Artist premium add-on for Spacer.

Basic Spacers

Dividers are great, but sometimes you just want to create basic spacers. Basic spacers allow you to control the amount of space between lines. Simply click the spacer button in the WYSIWYG visual editor and choose “Default”.

Spacer Button Setting the spacer height Spacer height: 35px Spacer height: -35px

 

Ready to get started?

 

Download for Free

The question headers (How do I create a fancy divider?, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in 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.

19 thoughts on “Spacer

  1. Lee

    Hi Justin,

    Thank you for your plugin, it is great.

    I am using it after installing the Tesseract Theme from Tyler Moores website. I have used the space = ‘550px’ on my home page to space out my home page picture, which worked great.

    However, I was having issues with that picture resizing for mobile so I have installed Adaptive Images which now resizes the picture. However, with the spacer I know have a significant blank section on the mobile version between the re-sized picture and the text below.

    Do you have any suggestions on how to get around this ?

    Thanks. Lee.

    Reply
    1. Justin Saad Post author

      Hi Lee,

      Thanks for stopping by. I would try playing with the
      “Default Spacer Height On Mobile” setting for the spacer. This allows you to set a different spacer height to be used on mobile devices, for all instances of that spacer. For example, you might set this setting to 50px.

      If you only want to edit the mobile spacing for a single spacer instance, you could edit the shortcode like this [spacer height="550px" mheight="50px"]

      Best,
      Justin

      Reply
    1. Justin Saad Post author

      Hi Greg,

      Thanks for stopping by. Are you able to provide me with a link to a demo page demonstrating the problem, and also a description of how you would like it be working?

      Thanks,
      Justin

      Reply
  2. Rod Salm

    Hello,

    I’ve used your Spacer plugin quite successfully, learning about it from the theme I was using.

    One problem, small one, is that the admin notice is blanked out, it takes up the space, but all the text matches the background and I can’t see where to click to dismiss it. Effectively adding blank space to the top of my WordPress dashboard (cuts into the screen real estate). 🙂

    Every have this issue anywhere else?

    Thanks, and keep up the good work.

    Reply
    1. Justin Saad Post author

      Hi Rod,

      The problem you mention, from what I gather, might be a CSS conflict somewhere that causes the admin notice to not display properly. I can’t really say though without getting a closer look at the issue. I would like to be able to fix it though, so that I can resolve these types of errors for you and any other users who may be experiencing the same thing.

      One way to do that would be for you to provide me with temporary access to your wp admin via a tech support account. Obviously up to you and what you are comfortable with, but assuming you are on board, you can use my email info[at]clevelandwebdeveloper[dot]com as the user email.

      On a side note, which theme was it that informed you about Spacer? I ask because it’s always useful to know where people hear about the plugin.

      Thanks for your input,
      Justin

      Reply
  3. Torsten

    I really like the plugin, but I was wondering, is there any way, to make space be the height of the screen on auto, making it responsive.

    Reply
    1. Justin Saad Post author

      Hi Torsten,

      Assuming that the rest of your site is responsive to begin with, it should be possible to do by using em, rem, or % for the Spacer height unit, instead of px, and then playing around with the “Spacer Height” value, until you get something that matches your desired behavior.

      Best,
      Justin

      Reply
  4. Valentina

    Since I updated to the new version the plugin is not working! On the visual editor if I click on the button.. nothing happen, it look like a piece of drop-down menu, but I cannot see anything. Please help me! Your plugin is wonderful, I need to fix it! Thank you

    Reply
    1. Justin Saad Post author

      Hi Valentina,

      What version of WordPress are you using? The reason I ask is because the new version of the Spacer plugin is only compatible with WordPress versions 3.5 and newer.

      If you are using a WordPress version newer than 3.5, it should be working. If it’s not then there might be a conflict with another plugin. If you are able to set up a tech support account for me in your WP admin, I would be willing to take a closer look. You can use the info@clevelandwebdeveloper.com address for the email on the account.

      Reply
      1. David

        Dear Justin
        I’m having the same problem as Valentina with the update using WordPress 3.9. Did you come up with an answer?

        Reply
          1. Justin Saad Post author

            Quick update – this issue should be resolved now, so if you update to Spacer 3.0.1 it should be working for you. Thanks for the helpful feedback!

          2. Justin Saad Post author

            Yay it worked! Thanks for getting back to me. It’s helpful to know that updates are working as intended.

            I do have a donate link available. Thanks for your contribution, it allows me to dedicate time to continue developing Spacer and keeping it free.

            Also if you see fit, I would really appreciate it if you would leave a positive review for the plugin. It helps to spread the word about Spacer 🙂 Thanks so much!

            Best,
            Justin

  5. Jeff

    Hi Justin,
    thanks for this tool it’s awesome! Recently we updated to premium for $20 and we lost some custom spacer settings and we are not able to set anything other than default.
    So we ended up using [spacer height="default"] several times to get what we needed. IF we change [spacer height="default"] to [spacer height="60"] it doesn’t seem to compile correctly.
    Are we just missing a config somewhere?
    thanks
    Jeff from pittsburgh

    Reply
    1. Justin Saad Post author

      Hi Jeff,

      You should add px after the number 60.
      So where it says [spacer height="60"] you should change that to be [spacer height="60px"] instead.

      Best,
      Justin

      Reply

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