Tagged: color section, tab section
-
AuthorPosts
-
January 22, 2018 at 2:42 pm #900814
Hi there!
is there any possibility to place a color section into a Tab Section. I would really need that ;)
Best,
January 22, 2018 at 3:56 pm #900851Hey 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 imgur.com or Dropbox public folder and post the links here.Cheers!
YigitJanuary 24, 2018 at 9:34 am #901999Hey,
I would like to match these two pages optically
with Color section:
https://www.dropbox.com/s/pplbecv1gbspxec/with%20color%20section.PNG?dl=0
with Tabs (no Color section)
https://www.dropbox.com/s/7p7ij4dcgzrnd2j/without%20Color%20Section.PNG?dl=0it’s important to have a easy solution here for our Content Managers.
cheers,
January 25, 2018 at 5:16 am #902519Hi,
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,
RikardJanuary 25, 2018 at 9:24 am #902690Hi,
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?
Best,
January 26, 2018 at 5:43 am #903175Hi reini77,
Can you show us what you’ve got so far?
Best regards,
VictoriaJanuary 26, 2018 at 9:08 am #903263Hi Victoria,
here again the links from my post above:
this is how it looks: (Made with tabs – so no color sections are possible)
https://www.dropbox.com/s/7p7ij4dcgzrnd2j/without%20Color%20Section.PNG?dl=0this is how it should look like: (made with color sections
https://www.dropbox.com/s/pplbecv1gbspxec/with%20color%20section.PNG?dl=0cheers,
January 29, 2018 at 6:03 pm #904332Is there any kind of solution?
cheers,
January 29, 2018 at 7:13 pm #904368anhand 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 : https://webers-testseite.de/reini77/
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?January 29, 2018 at 7:26 pm #904380or is it this you like to obtain ?
January 30, 2018 at 2:11 am #904564January 30, 2018 at 9:07 am #904668@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:
https://www.dropbox.com/s/pplbecv1gbspxec/with%20color%20section.PNG?dl=0
Sobald ich aber mit Tab-Section arbeite kann ich keine Color-Section mehr verwenden. Sieht dann so aus: https://www.dropbox.com/s/7p7ij4dcgzrnd2j/without%20Color%20Section.PNG?dl=0beste Grüße,
January 30, 2018 at 9:27 am #904674naja und meine Frage war, ob es das ist was du haben willst: https://webers-testseite.de/reini77a/
Bitte klicke mal auf das “i”
January 30, 2018 at 9:28 am #904675das 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:
https://webers-testseite.de/elegant/reina77/
In diesem Beispiel werden die Schrägen komplett anders erstellt. D.h auch die color-sections
Aufbau: color-section – tab-section – color-sectiondie 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 6 years, 10 months ago by Guenni007.
January 30, 2018 at 5:02 pm #905000By the way – this is a brainful method but its css magic is wonderfull
please compare : https://webers-testseite.de/elegant/
with: https://kriesi.at/themes/enfold-visual-artist/January 30, 2018 at 10:45 pm #905207Hi,
hehe, really really nice :)
Best regards,
BasilisMay 10, 2019 at 8:20 am #1099205Hi Guenni!
Wie bekomme ich den Inhalt der TabSection horizontal genau so ausgerichtet, wie dies bei der ColorSection ist (rote Linien)?
Siehe https://web2profit-my.sharepoint.com/:b:/g/personal/peter_meyer_web2profit_de/ET6ShZvzmRdIqqYdJUbnplUBF_wP9ApkU6UEcu70uBk8_w?e=ZPdFcTMay 14, 2019 at 4:37 am #1100349Hi,
@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,
IsmaelMay 14, 2019 at 8:30 am #1100410Hi 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
PeterMay 16, 2019 at 7:13 am #1101272Hi,
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,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.