Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 16, 2020 at 5:04 pm #1175121
    Hannes

    Hi,

    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!!

    January 17, 2020 at 7:01 am #1175258
    Rikard

    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,
    Rikard

    January 17, 2020 at 8:59 am #1175282
    Hannes

    Hi Rikard,

    here’s a mockup:
    https://ibb.co/gtPZ6W8

    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,
    Hannes

    January 18, 2020 at 7:30 am #1175762
    Rikard

    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,
    Rikard

    January 24, 2020 at 11:02 am #1178073
    Hannes
    This reply has been marked as private.
    January 24, 2020 at 3:24 pm #1178143
    Guenni007

    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(){
?>
<script>
(function($){
    $('.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"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

    you have to adjust that script to your Enfold Settings of Content Width.
    https://webers-testseite.de/nesting-columns/

    January 24, 2020 at 7:00 pm #1178197
    Hannes

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

    January 25, 2020 at 9:44 am #1178296
    Rikard

    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,
    Rikard

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