Haben Sie eine mehrsprachige Website (z.B. DE, EN) und möchten Elemente auf einer deutschen Seite anders gestalten als auf der englischen Seite?
Um dies zu tun, fügen Sie
1. Ihren eigenen CSS Code hinzu (Einstellungen - Design - CSS)
2. eine Marketing Flexi Class Box auf der entsprechenden Seite hinzu und platzieren die Elemente innerhalb der Class Box, die Sie anders stylen möchten
Beispiel: Textfarbe
Ziel:
Ein bestimmter Text soll auf der englischen Seite blau sein.
Der gleiche Text soll auf der deutschen Seite rot sein.
Lösung:
Der <body> Tag jeder Seite hat eine "lang-xx" Klasse. xx steht für die Sprachkennung. Alle deutschen Seiten haben also die Klasse lang-de, alle englischen Seiten die Klasse lang-en, usw.
Diese Klassen können Sie in Ihrem CSS Code ansprechen und stylen.
Demo: https://per-lang-css-demo.incms.net/de/
Den CSS-Code finden Sie im Screenshot auf der o.g. Demo-Seite:
/* color in blue for english */
/* color in red for german */
Wie Sie im Screenshot auf der o.g. Demo-Seite sehen, verwenden wir die Klasse lang-color, um die Textfarbe zu stylen. Diese Klasse können Sie beliebig benennen.
Wichtig ist nur, dass Sie auf der Seite, wo Sie Elemente anders stylen möchten, eine Marketing Flexi Class Box mit genau dieser Klasse hinzufügen und die Elemente, die Sie stylen möchten (hier den Text), innerhalb dieser Class Box platzieren.
Beispiel: Bild verstecken
Ziel:
Ein bestimmtes Bild soll auf der deutschen Seite sichtbar sein.
Das gleiche Bild soll auf der englischen Seite versteckt sein.
(Oder andersherum)
Lösung:
Der <body> Tag jeder Seite hat eine "lang-xx" Klasse. xx steht für die Sprachkennung. Alle deutschen Seiten haben also die Klasse lang-de, alle englischen Seiten die Klasse lang-en, usw.
Diese Klassen können Sie in Ihrem CSS Code ansprechen und stylen.
Demo: https://per-lang-css-demo.incms.net/de/
Den CSS-Code finden Sie im Screenshot auf der o.g. Demo-Seite:
/* hide in english */
/* hide in German */
Wie Sie im Screenshot auf der o.g. Demo-Seite sehen, verwenden wir die Klassen lang-hide-en und lang-hide-de, um die Bilder zu verstecken. Diese Klassen können Sie beliebig benennen.
Wichtig ist nur, dass Sie auf der Seite, wo Sie das Bild verstecken möchten, eine Marketing Flexi Class Box mit genau dieser Klasse hinzufügen und das Bild (oder andere Elemente) innerhalb dieser Class Box platzieren.