Home>Blog>Page Builder Cell Vertical Alignment

Page Builder Cell Vertical Alignment

Page Builder 2.5 introduced an additional setting called, "Cell Vertical Alignment". A powerful feature that allows you to control the alignment of cells within each row. You can choose from one of four vertical alignment options. Let's take a look.

Page Builder Cells

Page Builder Cells are directly related to row columns. A single row with a single column will result in a single cell. In the example below, I created a single row with two columns resulting in two cells.

SiteOrigin Page Builder Single row with two columns/cells

Adding content to a cell will increase the height of the cell. Cells with different content will have different heights.

Two SiteOrigin Page Builder cells with different heights

Cell vertical alignment allows you to control how you want to align cells in each row. You can choose from one of four vertical alignment options:

Top

Cells align to the top of the row. As you add content to each cell, such as images and text, the height of the cell will increase in a downwards direction relative to the top of the row.

SiteOrigin Page Builder Vertical Alignment - Top

"Iceland"
Vertical Alignment - Top

Center

Cells align to the centerline of the row. As you add content to each cell, the height of the cell will increase in an outwards direction from the rows centerline.

SiteOrigin Page Builder Vertical Alignment - Center

"Yellowstone National Park"
Vertical Alignment - Center

Bottom

Cells align to the bottom of the row. As you add content to each cell, the height of the cell will increase in an upwards direction relative to the bottom of the row.

SiteOrigin Page Builder Vertical Alignment - Bottom

"Yellowstone National Park"
Vertical Alignment - Bottom

Stretch

All cell heights will stretch to equal the height of the tallest cell. As you add content to each cell, the content will fill the cell from the top down relative to the top of the row. 

SiteOrigin Page Builder Vertical Alignment - Stretch

"Iceland"
Vertical Alignment - Stretch

Leave a Reply

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

Comments

  1. 1 month, 1 day ago Erwin Odendaal

    On my iPad Air with iOS 10 ‘Stretch’ looks exactly the same as ‘Top’.

    • 1 month, 1 day ago RC

      I see the same problem on Chrome iPad & iPad Pro simulations.

      Stretch would really be nice.

      Any way to make this work?

    • 1 month, 23 hours ago Alex S

      Cell Vertical Alignment will “disable” itself when your columns collapse. This was done to prevent significantly stretched columns of blank spacing appearing on mobile devices (this spacing is most noticeable when there’s a significant mismatch in column sizing).

      You can control when this happens by adjusting your mobile width. You can adjust this by navigating to WP Admin > Settings > Page Builder and open the Layout tab.

    • 1 month, 20 hours ago Josh

      Same on an iMac running Safari.

  2. 1 month, 1 day ago Stefan

    Thank you!
    I am looking for an eternity for this trick

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Glad we could finally release this Stefan, sorry it wasn’t sooner! All the best :)

  3. 1 month, 1 day ago Primož Cigler

    Awesome! The flexbox superpowers? :)

    • 1 month, 21 hours ago Andrew Misplon Hi, I Work Here

      Thanks for following along Primož. Flexbox powers!

  4. 1 month, 1 day ago Jojo Mac

    This looks useful.

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Hope it helps with a problem soon :) All the best.

  5. 1 month, 1 day ago Cess

    Finally! An app that understands what designers look for!

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Thanks Cess. Hopefully this will come in handy for you soon :) All the best.

  6. 1 month, 1 day ago Jim Houghton

    Thanks for continuing to find ways to improve SOPB.

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Thanks for the support Jim :)

  7. 1 month, 1 day ago Ted Sluymer

    Great!!!

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Thanks Ted :)

  8. 1 month, 23 hours ago Yosniel

    This is awesome! Now I don’t have to use a bunch of CSS and the “spacer” to modify how it looks.

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Hi Yosniel. Good to hear from you. The less CSS the better :)

  9. 1 month, 23 hours ago Nikolay

    An excellent addition, just was not enough in some cases. Now there will be an opportunity to try on their sites. Thank you!

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Wish we had it sooner. Hopefully it’ll be useful moving forward. All the best :)

  10. 1 month, 23 hours ago Bas

    GREAT!!!
    I was hoping for this feature.

    Thanks again.
    Bas

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Thanks Bas :) Good to hear from you.

  11. 1 month, 23 hours ago Tom

    This is an excellent feature that I have been hoping for.

    Thank You! Let me give it a try.

    T

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Thanks Tom. A long running request. Glad to finally have it out.

  12. 1 month, 22 hours ago Connected Carole

    Love this functionality!

    • 1 month, 22 hours ago Andrew Misplon Hi, I Work Here

      Super, glad you like it :)

  13. 1 month, 22 hours ago HunterGatherer

    Thank you, Alex and the SiteOrigin team. Still the best.

    HG/mws

    • 1 month, 22 hours ago HunterGatherer

      Andrew…

      • 1 month, 21 hours ago Andrew Misplon Hi, I Work Here

        Thanks for your support, it’s most appreciated. Glad we could get this long awaited feature out. More to follow :)

  14. 1 month, 21 hours ago Corrinda

    Thank you!
    I noticed the new setting but really did not understand what it did or why you’d use it.
    Now I see how useful it is and what to do with it.

    • 1 month, 21 hours ago Andrew Misplon Hi, I Work Here

      Hi Corrinda. Super :) Hopefully, it’ll come in handy in one of your future page layouts.

  15. 1 month, 21 hours ago Brad

    First collapse order, copy & pasting content and now vertical alignments! I’m looking forward to my next project.

    • 1 month, 3 hours ago Andrew Misplon Hi, I Work Here

      Super :) Hope it all helps.

  16. 1 month, 18 hours ago Ron

    Great addition – The images to the left of the text alignment is confusing, they seem not to conform to the alignment of its companion text. This brings to mind another question which is kind of related. Does Siteorigin plan on enabling the ability of text to flow from one column to the next? Example: http://wpskyway.com/pagebuilder/ (page right) – dynamic column layout.

    Regards,

    Ron

    • 1 month, 10 hours ago Alex S

      Hi Ron,

      The images on the left are the contents of the left column. In the examples, it’s allowing for the row to be much larger than the contents of the right cell which allows for the cell vertical alignment setting to work. In other words, if the left cell was empty, the Cell Vertical Alignment options wouldn’t do anything. Does that make sense?

      That’s an interesting idea. I’m going to log this as a feature request.

      • 1 month, 1 hour ago wireb

        After looking a the examples – I discovered what is confusing to me. All the text alignment examples to the right, show both, the text and the cell contain – as gray background tint. This illustrates the text alignment in relation to the cell, however this is not the case with the images.

        Thank you Alex for your response.

        Ron

  17. 1 month, 16 hours ago kaborin

    wow,awesome!
    I am about to use this plugin for my clinent wordpress blog site.
    Thank you for your great product!

    • 1 month, 10 hours ago Alex S

      Hi kaborin,

      Thank you for the kind words! :)
      Best of luck with the new project mate.

  18. 1 month, 14 hours ago Greg

    This is an awesome feature. Aligning made easy. Yet to try it out but look forward to giving it a go. There has many times I could have used this in the past. Thank you.

    • 1 month, 3 hours ago Andrew Misplon Hi, I Work Here

      Indeed! Sorry it took so long. Glad to have it out now. All the best.

  19. 1 month, 13 hours ago Rishi Gangoly

    I was looking for this for quite some time. Thanks for adding this in.

    • 1 month, 3 hours ago Andrew Misplon Hi, I Work Here

      Thanks Rishi, really glad we finally have this out.

  20. 1 month, 6 hours ago miracle

    I am pleased to hear this and an happy for its actualization.

    • 1 month, 3 hours ago Andrew Misplon Hi, I Work Here

      Thanks miracle, hope it helps :)

  21. 1 month, 5 hours ago Bruce

    This is great. It solves the problem of using images of different sizes.

    • 1 month, 3 hours ago Andrew Misplon Hi, I Work Here

      Thanks Bruce. Hopefully it makes your next layout a little easier to build. All the best.

  22. 1 month, 4 hours ago James

    I’ve tested it on this page http://1.ajaysgroup.com/young-people/ at the bottom, and it doesn’t appear to be working. It stays aligned to the top.

    • 1 month, 3 hours ago Andrew Misplon Hi, I Work Here

      Hi James. It looks like you have it set to Stretch right now. Please, try changing it to Center, that should do the trick.

  23. 1 month, 3 hours ago James

    Thanks for checking. I’ve changed it to centre, and that works, but the stretch doesn’t seem to.
    Basically, I would like the text box to be the same size as the image box, irrelevant of the amount of text in it.
    Is that what stretch is supposed to do?

    • 29 days, 22 hours ago RC

      James’ definition is exactly what I was looking for in a stretch functionality.

      “text box to be the same size as the image box, irrelevant of the amount of text in it”

  24. 29 days, 19 hours ago J. Guerra

    This. is. Good. Thank. You

  25. 29 days, 1 hour ago kindra

    Awesome feature! I have been wishing for this. Thank you for seeing the need and solving the problem.

  26. 28 days, 23 hours ago Tom Pfaff

    In my pages stretch isn’t doing anything different than top (version 2.5.12 on chrome). I have a number of rows with two cells each. The individual cells have a background color and it doesn’t stretch so the two cells match. At the moment I manual set the bottom padding of the cell that has less content to match the other cell. Would love for this to work.

  27. 28 days, 6 hours ago Marcel de Korte

    Very nice!

  28. 24 days, 21 hours ago Jamie Tubmen

    1. What I want to do is add images one on top of the other, vertically, in a given cell. How do I do this?

    2. Is there a way in a SiteOrigin theme (Puro) to pad the top and bottom of each image so that they don’t all squish together?

  29. 22 days, 2 hours ago Alex

    Good, but for me stretching doesn’t work, looks like top alignment. Crome, Firefox, IE.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More