Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1175121


    I want to reach the following:
    On the left side of my page I have a big 3/4 column with the content. On the right side I need 2-3 elements, all with the width 1/4, not only one. You can compare this to this forum:
    Left: Forum
    Right: User Profile; ‘Follow us on Facebook’, Subscribe to Newsletter…

    I want to set the background of the first element on the right to red, but the others on the right to white. That’s why I can not use a single column.

    How can I reach this?

    Thanks a lot!!


    Hey Hannes,

    I’m not sure I understand the layout you are trying to achieve, do you have a mockup or screenshot maybe?

    Best regards,


    Hi Rikard,

    here’s a mockup:

    I can not work with the columns in my opinion, because I want to have the red background in the right upper element, but not in the elements below.
    Thank you,


    Hi Hannes,

    You should be able to achieve something similar if you simply add a 1/4 column on the right, then add html markup in a text block element to create the first section:

    <div id="first-red">This is my red section</div>

    Then add this to Quick CSS:

    #first-red {
      background: red; 

    Best regards,

    This reply has been marked as private.

    just use the grid-row element – you can set the cellsize to 3/4 and 1/4
    on the left your content ( it is a drag and drop element like color-section) and put in the cells 1/1 container.

    If you like to have now the grid-row element not full-width : you can do it only with css – but i did this to child-theme functions.php

    function grid_layout_notfull(){
        $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>');
        $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
        $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 50px"});
    add_action('wp_footer', 'grid_layout_notfull');

    you have to adjust that script to your Enfold Settings of Content Width.


    OMG Guenni!
    It’s so easy, but you helped me really a lot! Thanks for this fantastic hint -> Made my day!!


    Hi Hannes,

    Great, I’m glad that @guenni007 could help you out :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.