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

  • ocsaroy

    (@ocsaroy)


    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)
  • Plugin Author Ben Ritner – Kadence WP

    (@britner)

    Hi,
    You can place it outside the box. Just make sure that heading is H2 and your info boxes are h3

    Ben

    Thread Starter ocsaroy

    (@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 ?
    https://wire.kadenceblocks.com/wp-content/uploads/2021/05/Content-2.jpeg

    Thank you

    Plugin Author Ben Ritner – Kadence WP

    (@britner)

    Hey

    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.

    Ben

    Thread Starter ocsaroy

    (@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 11 months, 1 week ago by ocsaroy.

    Hello,

    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 – https://share.getcloudapp.com/Apu9eKJ6.

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

    Best Regards,
    Karla

    Thread Starter ocsaroy

    (@ocsaroy)

    Hello
    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.

    hannah

    (@hannahritner)

    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?

    Kindly,
    Hannah

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.