Support » Plugin: Gutenberg Blocks by Kadence Blocks – Page Builder Features » DOM size and heading order (the semantically right way)

  • Hi there
    Adam made another great tutorial. About DOM and alternative and faster way of elements positioning. More search engine and SEO friendly. Here

    But I have question about heading positioning order for my infoboxes. What is semantically and SEO friendly correct (right) way to position heading element ? Outside of Row Layout or inside of Row Layout ? If I place my heading inside of Row Layout then I struggle to make it separate from six infoboxes. Please see screenshot.
    Thank you

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi,
    You can place it outside the box. Just make sure that heading is H2 and your info boxes are h3


    Thread Starter ocsaroy


    It is also OK if I place H2 as it is above without any containers juste H2 header alone ?

    1) Do you have an article on you website about DOM and semantically correct and faster structure with one column ?
    2) Why is your NEW wireframe feature have slower old multiple columns structure designs ?

    Thank you


    a. Yes there is a container around your page that gives it context.

    1. Not at this time.
    2. It’s not correct to say “slower” there are many good reasons to use columns depending on what you are doing. And in many cases, there is needed control with columns. Also having dom isn’t bad you just want to prevent how much your page has. The point is to keep the dom down so when you don’t need it don’t use it type of thing.

    There are probably some wireframes that need to be updated now that this setting is out but it’s brand new and the wireframes were posted before it was available.


    Thread Starter ocsaroy


    Hi there
    Can you please add some horizontal infoboxes ? I am trying a month and can’t replicate what Adam did above in the video. Can you please help. I want to replace vertical method to horizontal. Can you please add into the wireframes one example of 6 infoboxes (horizontal method) like in Adams’s video ?

    • This reply was modified 1 year ago by ocsaroy.



    Apologies for the delay in getting back to you.

    I believe what was not shown on the tutorial is the option of setting a max-width for the Info Box block. So for your Info Box blocks, go to the block settings > Container Settings and set a value for the Container Max Width option so the blocks will not take the full width of the column.

    Here’s a screen recording for your reference –

    Hope this helps and let us know if we can assist you further.

    Best Regards,

    Thread Starter ocsaroy


    Finally !!! Bingo ! Only setting that seems helped me is “Content Max Width Inherit from Theme”
    1) Row Layout > Structure Settings > Content Max Width Inherit from Theme? > ON
    2) Justify Content > Space Evenly or Space around (Inherit or Space between not working for me)

    But now I have more redoutable problem with mobile responsiveness for smaller screens.



    Hi @ocsaroy,
    Glad you found what you were looking for! Can you clarify the issues you’re now experiencing on smaller screens? Can you post a link to this?


Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘DOM size and heading order (the semantically right way)’ is closed to new replies.