Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
  • #900814

    Hi there!

    is there any possibility to place a color section into a Tab Section. I would really need that ;)



    Hey Stephan,

    Fullwidth elements such as Tab Section and Color Section work only fullwidth and therefore it is not possible to use them inside another shortcodes. Could you please elaborate on the changes you would like to make? We might be able to offer another solution :)
    You can upload your screenshots on or Dropbox public folder and post the links here.




    I would like to match these two pages optically
    with Color section:
    with Tabs (no Color section)

    it’s important to have a easy solution here for our Content Managers.




    Thanks for the screenshots, I think you should be able to create that layout with 1/3 elements for instance? If you should have any further problem problems then please post a link to where we can see the element in question so that we can have a closer look.

    Best regards,


    thanks for response. I’m not sure how – I’m already using 1/3 elements. My problem ist not to get the same structure. What I need is a page with tabs looking like Screenshot 1 – but with the 1/3 elements i do not have options like “diagonal borders” and “section background”

    is there any alternate solution?



    Hi reini77,

    Can you show us what you’ve got so far?

    Best regards,


    Hi Victoria,

    here again the links from my post above:

    this is how it looks: (Made with tabs – so no color sections are possible)

    this is how it should look like: (made with color sections



    Is there any kind of solution?



    anhand deiner Seite sehe ich , daß ich wohl deutsch mit dir kommunizieren kann.

    Die Schrägen lassen sich ja über color-sections realisieren.
    jetzt möchtest du aber , dass die folgenden “Columns” wohl ganz die Breite ausfüllen? ähnlich der Tabsection oder?

    einfach zwei color-sections hintereinander und dann der zweiten color-section eine benutzerdefiniert Klasse geben.
    z.B : full-container
    hiermit wird dann dieser Container auf volle Weite gesetzt.

    .full-container .container {
        max-width: 100%;
        margin: 0 auto;

    Beispiel :

    ich habe die 1/3 columns nur mal farbig hinterlegt, damit du siehst, dass es dann auf volle Weite geht.

    so ists im Backend (draufklicken um es zu vergrößern)


    Based on your page, I see that I can probably communicate German with you.

    The bevels can be realized via color-sections.
    but now you want, that the following “Columns” fill the full width? similar to the tab section?


    or is it this you like to obtain ?



    Please try @guenni007‘s solution. I’m pretty sure that it’s going to work.

    Best regards,


    @guenni007 Vielen Dank für deine Ausführung – Color Sections habe ich ja bereits verwendet – meine Frage war ja: Wie kann ich den Style den ich mi Color-Sections erstellt habe auch in “Tab-Sections” umsetzen.

    Sprich so sehen andere Seiten im Moment aus:
    Sobald ich aber mit Tab-Section arbeite kann ich keine Color-Section mehr verwenden. Sieht dann so aus:

    beste Grüße,


    naja und meine Frage war, ob es das ist was du haben willst:

    Bitte klicke mal auf das “i”


    das Problem ist nicht die oberseite sondern die untere dann schräg zu bekommen

    wenn du dich zB auskennst mit Polygonen ginge es so – ist aber ein wenig Koordinatensystem gefragt:

    In diesem Beispiel werden die Schrägen komplett anders erstellt. D.h auch die color-sections
    Aufbau: color-section – tab-section – color-section

    die Mittlere Tabsection bekommt eine ID und sieht zB so aus:

     #schraeg-links-rechts  {
    -webkit-clip-path: polygon( 0 10vw,100% 0,100% 100%, 0 calc(100% - 10vw) );
    clip-path: polygon( 0 10vw,100% 0,100% 100%, 0 calc(100% - 10vw) );
    margin-top: -10vw;
    padding: 6vw 0;
    background: #ededed; 

    Der Tabkopf sollte dann die gleiche Farbe wie der Hintergrund sein !

    polygone : koordinaten fangen links oben an, und gehen im Uhrzeigersinn weiter und immer x y
    also Beispiel oben erster Punkt x=0 und y nach unten 0.1 screenweite etc.
    darf auch pixel sein. aber relativ funktioniert bei kleinen Bildschrimen dann besser.

    • This reply was modified 1 year, 10 months ago by  Guenni007.

    By the way – this is a brainful method but its css magic is wonderfull

    please compare :



    hehe, really really nice :)

    Best regards,


    Hi Guenni!

    Wie bekomme ich den Inhalt der TabSection horizontal genau so ausgerichtet, wie dies bei der ColorSection ist (rote Linien)?



    @pete4u: Use this css code to center align the tab section content.

    .av-framed-box .av-layout-tab-inner .container {
        margin: 0 auto;

    Best regards,


    Hi Ismael,

    thank you for response.

    But that doesn’t work.

    1. I need the tab content aligned to the left in relation to the main content (Logo)
    2. the tab content should be 100% of the width of the main content (red lines)

    Thank you for help!

    Best regards



    Thanks for the update.

    It seems to be working just fine on our end. Did you toggle the Performance > File Compression settings after adding that css code?

    If you’re still having the same issue after, please kindly open a new ticket or thread so that we can close this one. We’ll continue there.

    Best regards,

Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.