Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 30, 2024 at 9:18 pm #1470283
    dsignoWerbung

    Hi,
    I have installed your “parallax” demo on a new website and need now 6 columns next to each other on the homepage, but enfold only allows 5 columns (5 x 1/5). What can I do?
    Best regards
    Dirk Wollenschläger

    October 31, 2024 at 5:05 am #1470314
    Ismael

    Hey dsignoWerbung,

    Thank you for the inquiry.

    but enfold only allows 5 columns (5 x 1/5). What can I do?

    You may need to manually create this using custom html and css in a Text or Code block element.

    Example:

    
<div class="av-column-container">
<div class="av-column av-column-one-sixth">Column 1</div>
<div class="av-column av-column-one-sixth">Column 2</div>
<div class="av-column av-column-one-sixth">Column 3</div>
<div class="av-column av-column-one-sixth">Column 4</div>
<div class="av-column av-column-one-sixth">Column 5</div>
<div class="av-column av-column-one-sixth">Column 6</div>
</div>

    Then add this css code:

    .av-column-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; 
}

.av-column-container .av-column-one-sixth {
    flex: 1 1 calc(100% / 6 - 10px); /
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .av-column-container .av-column-one-sixth {
        flex: 1 1 calc(50% - 10px); 
    }
}

@media (max-width: 480px) {
    .av-column-container .av-column-one-sixth {
        flex: 1 1 100%; 
    }
}

    Best regards,
    Ismael

    October 31, 2024 at 9:20 am #1470333
    dsignoWerbung

    Hi, thanks for the quick response.

    I have now installed the containers, but where can I find the formatting for the containers so that they look the same and move in the same parallax effect as the containers that have already been installed?

    November 1, 2024 at 4:28 am #1470380
    Ismael

    Hi,

    Thank you for the update.

    There will be no additional options for these columns since they are created manually. If you need animation and other options, you will need to use the default Column element.

    Best regards,
    Ismael

    November 1, 2024 at 10:23 am #1470403
    Guenni007

    Classes such as av_one_third are just names. With these names, “Enfold” knows how to handle them, e.g. how to set the width.
    But nobody prevents you from treating them differently.
    So you can use 1/3 columns and use them with all the options within the Advanced Layout Builder element. And then, later on, re-declare the settings provided by Enfold.

    To address them better and not influence the others (e.g. 1/3 columns), a custom class would be useful. To use a container as flex container – it would be advisable to have only those elements inside that should be influenced.
    Short and concise – create a color-section (custom class- what you like : flex-six) with 6 1/3 containers inside – without equal-height option.
    the direct parent container to those columns is the entry-content-wrapper – so this has to be the flex container.

    see and get css-code : https://webers-testseite.de/six-column-flex-layout/

    PS : Please remember to define the parallax effects differently for the screen widths.
    Why 1/6 columns and smaller were not adopted by default, you can see from the example.

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