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. 2 months, 21 days ago Erwin Odendaal

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

    • 2 months, 21 days ago RC

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

      Stretch would really be nice.

      Any way to make this work?

    • 2 months, 21 days 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.

    • 2 months, 21 days ago Josh

      Same on an iMac running Safari.

  2. 2 months, 21 days ago Stefan

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

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

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

  3. 2 months, 21 days ago Primož Cigler

    Awesome! The flexbox superpowers? :)

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

      Thanks for following along Primož. Flexbox powers!

  4. 2 months, 21 days ago Jojo Mac

    This looks useful.

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

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

  5. 2 months, 21 days ago Cess

    Finally! An app that understands what designers look for!

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

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

  6. 2 months, 21 days ago Jim Houghton

    Thanks for continuing to find ways to improve SOPB.

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

      Thanks for the support Jim :)

  7. 2 months, 21 days ago Ted Sluymer

    Great!!!

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

      Thanks Ted :)

  8. 2 months, 21 days ago Yosniel

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

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

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

  9. 2 months, 21 days 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!

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

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

  10. 2 months, 21 days ago Bas

    GREAT!!!
    I was hoping for this feature.

    Thanks again.
    Bas

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

      Thanks Bas :) Good to hear from you.

  11. 2 months, 21 days ago Tom

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

    Thank You! Let me give it a try.

    T

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

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

  12. 2 months, 21 days ago Connected Carole

    Love this functionality!

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

      Super, glad you like it :)

  13. 2 months, 21 days ago HunterGatherer

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

    HG/mws

    • 2 months, 21 days ago HunterGatherer

      Andrew…

      • 2 months, 21 days 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. 2 months, 21 days 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.

    • 2 months, 21 days ago Andrew Misplon Hi, I Work Here

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

  15. 2 months, 21 days ago Brad

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

    • 2 months, 20 days ago Andrew Misplon Hi, I Work Here

      Super :) Hope it all helps.

  16. 2 months, 21 days 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

    • 2 months, 21 days 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.

      • 2 months, 20 days 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. 2 months, 21 days ago kaborin

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

    • 2 months, 21 days ago Alex S

      Hi kaborin,

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

  18. 2 months, 21 days 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.

    • 2 months, 20 days ago Andrew Misplon Hi, I Work Here

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

  19. 2 months, 21 days ago Rishi Gangoly

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

    • 2 months, 20 days ago Andrew Misplon Hi, I Work Here

      Thanks Rishi, really glad we finally have this out.

  20. 2 months, 20 days ago miracle

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

    • 2 months, 20 days ago Andrew Misplon Hi, I Work Here

      Thanks miracle, hope it helps :)

  21. 2 months, 20 days ago Bruce

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

    • 2 months, 20 days ago Andrew Misplon Hi, I Work Here

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

  22. 2 months, 20 days 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.

    • 2 months, 20 days 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. 2 months, 20 days 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?

    • 2 months, 20 days 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. 2 months, 20 days ago J. Guerra

    This. is. Good. Thank. You

  25. 2 months, 19 days ago kindra

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

  26. 2 months, 19 days 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. 2 months, 18 days ago Marcel de Korte

    Very nice!

  28. 2 months, 15 days 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. 2 months, 12 days ago Alex

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

  30. 1 month, 1 day ago Jarle Indrøy

    Scrolling on one cell while the picture in the background of the row is fixed during scrolling is an interesting new feature. I suggest that you should build this in to PageBuilder.
    It utilises something called “tiny-scrollmation” and you can see an excample of its use here: https://www.vg.no/annonsorinnhold/ving/artikler/tenerife/

  31. 19 days, 14 hours ago Mike Butcher

    This would be great, but Stretch isn’t working for me either. Just behaves like Top. This is on desktop view, Chrome 62.0.3202.94.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More