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 year, 1 month ago Erwin Odendaal

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

    • 1 year, 1 month 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 year, 1 month ago Alex S Hi, I Work Here

      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.

      • 8 months, 8 days ago Shoki

        Hello and thanks you for this plugin.

        I have the same problem than Erwin, on iPad, ‘Stretch’ doesn’t work.
        If I desable ‘Use Legacy Layout Engine’ in ‘Page Builder’ back office, it’s work.
        It is strange, because my iPad is up to date.

        Is it an bug?

        Best regards

        • 8 months, 6 days ago Alex S Hi, I Work Here

          Hi Shoki,

          To clarify, what version of iOS are you using?
          Can you please link me to your website so I can inspect the results?

        • 8 months, 3 days ago Alex S Hi, I Work Here

          Hi Shoki,

          Would it be possible for you to create a thread so I can more easily receive notifications and reply?

          Regardless, on iPad your row has collapsed so it makes sense for the alignment to appear. If you would like for the row not to collapse, please open the row housing the Number Counter and text widget. Head over to the row styles sidebar. Open the Layout settings group and set the Collapse Behaviour to No Collapse.

    • 1 year, 1 month ago Josh

      Same on an iMac running Safari.

  2. 1 year, 1 month ago Stefan

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

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

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

  3. 1 year, 1 month ago Primož Cigler

    Awesome! The flexbox superpowers? :)

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Thanks for following along Primož. Flexbox powers!

  4. 1 year, 1 month ago Jojo Mac

    This looks useful.

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

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

  5. 1 year, 1 month ago Cess

    Finally! An app that understands what designers look for!

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

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

  6. 1 year, 1 month ago Jim Houghton

    Thanks for continuing to find ways to improve SOPB.

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Thanks for the support Jim :)

  7. 1 year, 1 month ago Ted Sluymer

    Great!!!

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Thanks Ted :)

  8. 1 year, 1 month 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 year, 1 month ago Andrew Misplon Hi, I Work Here

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

  9. 1 year, 1 month 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 year, 1 month ago Andrew Misplon Hi, I Work Here

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

  10. 1 year, 1 month ago Bas

    GREAT!!!
    I was hoping for this feature.

    Thanks again.
    Bas

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Thanks Bas :) Good to hear from you.

  11. 1 year, 1 month ago Tom

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

    Thank You! Let me give it a try.

    T

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

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

  12. 1 year, 1 month ago Connected Carole

    Love this functionality!

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Super, glad you like it :)

  13. 1 year, 1 month ago HunterGatherer

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

    HG/mws

    • 1 year, 1 month ago HunterGatherer

      Andrew…

      • 1 year, 1 month 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 year, 1 month 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 year, 1 month 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 year, 1 month ago Brad

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

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Super :) Hope it all helps.

  16. 1 year, 1 month 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 year, 1 month ago Alex S Hi, I Work Here

      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 year, 1 month 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 year, 1 month ago kaborin

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

    • 1 year, 1 month ago Alex S Hi, I Work Here

      Hi kaborin,

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

  18. 1 year, 1 month 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 year, 1 month ago Andrew Misplon Hi, I Work Here

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

  19. 1 year, 1 month ago WebDudes Support

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

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Thanks Rishi, really glad we finally have this out.

  20. 1 year, 1 month ago miracle

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

    • 1 year, 1 month ago Andrew Misplon Hi, I Work Here

      Thanks miracle, hope it helps :)

  21. 1 year, 1 month ago Bruce

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

    • 1 year, 1 month 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 year, 1 month 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 year, 1 month 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 year, 1 month 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?

    • 1 year, 1 month 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. 1 year, 1 month ago J. Guerra

    This. is. Good. Thank. You

  25. 1 year, 1 month ago kindra

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

  26. 1 year, 1 month 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. 1 year, 1 month ago Marcel de Korte

    Very nice!

  28. 1 year, 27 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. 1 year, 24 days ago Alex

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

  30. 11 months, 14 days 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. 11 months, 1 day 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.

  32. 10 months, 3 days ago Chris

    Not having much luck with this. Got a cell with a background image set and it doesn’t stretch vertically, it just covers the div where there is text. Any ideas?

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

      Hi Chris, thanks for posting. Please, could you post your question on the forum: https://siteorigin.com/thread. We’ll do our best to assist there. Thanks.

  33. 10 months, 3 days ago Myriam

    Hi there,
    Could someone help me. Trying to do a « shopmystyle » with page builder but why is it vertical? How can I like it horizontal? Thank

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

      Hi Myriam, thanks for reaching out. Please, could you post your question on the forum: https://siteorigin.com/thread. We’ll do our best to assist there. Thanks.

  34. 7 months, 21 days ago David

    Just what I was looking for. Thanks!!!

    • 7 months, 17 days ago Andrew Misplon Hi, I Work Here

      Super, glad that helped :) All the best with your site.

  35. 6 months, 24 days ago Lyndsey San Sebastian

    I’ve followed these instructions. Selected a 2 column row – applied the vertical stretch to each column, but still not lining up.

    • 6 months, 24 days ago Andrew Misplon Hi, I Work Here

      HI Lyndsey

      If you open a support thread on the forum and let us know once that’s done, we’d be happy to lend a hand.

      https://siteorigin.com/thread

      Please, include a link to a page with the problem. Thanks :)

  36. 5 months, 10 days ago Rhonda

    When I try to use the stretch feature, I can’t get it to make the columns equal. I am using Unwind theme and SiteOrigin Page Builder. Is this compatible for equal height columns? How can I get this to work?

    • 5 months, 9 days ago Andrew Misplon Hi, I Work Here

      Hi Rhonda

      If you open a support thread on the forum and let us know once that’s done, we’d be happy to lend a hand.

      https://siteorigin.com/thread

      Please, include a link to a page with the problem. Thanks :)

    • 5 months, 6 days ago Andrew Misplon Hi, I Work Here

      Hi Rhonda, did you get a chance on the forum? Thanks :)

  37. 4 months, 14 days ago Henry

    Great! This will be very useful for the design of my pages!

    • 4 months, 14 days ago Andrew Misplon Hi, I Work Here

      Hi Henry, super, glad to hear you’ll be able to make use of this feature. All the best :)

  38. 3 months, 7 days ago Zac

    This is a fantastic feature. Really loving the flexibility of the sitebuilder plugin. Just wondering how to get the background to stretch but the content to align vertically in the centre.

    • 3 months, 7 days ago Andrew Misplon Hi, I Work Here

      Hi Zac :)

      Can you perhaps open a support thread on our forum and let me know once that’s done? If possible, please include a link to the page concerned in your support thread so we can inspect the problem. Thanks.

      https://siteorigin.com/thread/

  39. 22 days, 3 hours ago Anna

    Hello!
    Did anyone find a solution of a problem with Vertical Alignment – Stretch, which doesn´t work? Windows 10, Chrome.

    • 22 days, 2 hours ago Alex S Hi, I Work Here

      Hi Anna,

      There are no known issues with Stretch Vertical Alignment. Can you please open a support thread on the forum and let us know once that’s done, we’d be happy to lend a hand.

      https://siteorigin.com/thread

      Please include a link to the page you’re working on so we can inspect the issue you’re experiencing.

      • 21 days, 11 hours ago Anna

        Finally I’ve figured it out. My mistake was that I was trying to affect a widget instead of a cell it contains. Thank you for your attention!

        • 21 days, 4 hours ago Andrew Misplon Hi, I Work Here

          Super :) Glad to hear you’ve made progress. Thanks for the update.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More