Top
Login
Inhalt x
Die Pop-up Vorlagen über die Codeansicht anpassen
  • 08 Nov 2024
  • 3 Minuten zu lesen
  • Drucken
  • Dunkel
    Licht
  • pdf
Inhalt

Die Pop-up Vorlagen über die Codeansicht anpassen

  • Aktualisiert am 08 Nov 2024
  • 3 Minuten zu lesen
  • Drucken
  • Dunkel
    Licht
  • pdf
Artikel-Zusammenfassung

Die Code-Ansicht gibt Zugriff auf den HTML und CSS Code der Vorlage um advanced customization vorzunehmen. Verwenden Sie die Code-Ansicht für detaillierte visuelle Optimierungen, die mit den UI-Optionen nicht möglich sind. Die Code-Ansicht ist für jede von Ihnen ausgewählte Pop-up Vorlage verfügbar. Weitere Informationen zu Pop-up Vorlagen finden Sie unter Die Pop-up Vorlage wählen.

Your title goes here

Bevor Sie Ihre Vorlage anpassen, als beste Methode, erstellen Sie eine Sicherungskopie des Codes. Dies verhindert einen unerwarteten Verlust von Inhalten.

Zugriff auf die Code-Ansicht der Vorlage

Die Vorlage über die Codeansicht anpassen

Anwendungsfälle

Zugriff auf die Detailansicht des Codes der Vorlage

Verwenden Sie die folgenden Schritte, um auf die Code-Ansicht der Pop-up-Vorlage zuzugreifen:

  1. Auf dem Pop-up-Bearbeitungsbildschirm klicken Sie auf das Symbol für die Codeansicht, um auf den Vorlagencode zuzugreifen.

  2. Wenn Sie den Code bearbeitet haben, klicken Sie auf das Wiedergabesymbol, um eine Vorschau der Änderungen anzuzeigen.

Die Vorlage über die Codeansicht anpassen

Für Popups, die mit Visual Editor erstellt wurden, ermöglichen CSS-Selektoren die Anpassung der verschiedenen Elemente innerhalb des Pop-ups. Weitere Informationen finden Sie unter CSS Selektors.

Die folgende Tabelle listet die verschiedenen Arten von CSS-Selektoren in der CSS-Code-Ansicht auf verwenden Sie direkt die bereitgestellten CSS-Selektoren, um visuelle Optimierungen an der Pop-up Vorlage vorzunehmen.

Zusätzlich andere CSS-Selektoren können innerhalb der Pop-up Vorlage mit der Element prüfen für weitere Anpassungen identifiziert werden.

CSS Selektor

Beschreibung & Beispiele

Entsprechendes HTML-Element

.popuptemplate-popupResizeBox

Container des .popupTemplateCard Elements.

Beim Ändern der Größe des Pop-ups, Breite und Höhe werden auf diesen Div.

class="popuptemplate-popupResizeBox nocode-popup react-resizable"

.popupTemplateCard

Container von .popupContainer Element für die interne Implementierung.

class="popupTemplateCard"

.popupContainer

Container mit Ziehen und Ablegen Layout zusammen mit dem 'XIcon Container, Zeigen Sie mir nicht wieder Container, Carousel-punkte und Carousel-lpfeiler. Pop-up-Hintergrundfarbe und -bild werden auf diese Komponente angewendet.

class="popupContainer"

#popupClosePanel

Container für 'XSymbol im Pop-Up.

id="popupClosePanel"

#popupDontShowPanel

Container für Zeigen Sie mir nicht mehr Checkbox.

id="popupDontShowPanel"

#popupDotNavButton

Container für Carousel-Punkte.

id="popupDotNavButton"

#popupLeftNavButton

Container für Pop-up linker button.

id="popupLeftNavButton"

#popupRightNavButton

Container für Pop-up recht button.

id="popupRightNavButton"

#noCodeWidgetContainer

Container mit Ziehen und Ablegen Layout innerhalb eines Pop-ups.

id="popupDontShowPanel"

.wfx-row

Zeigt an, dass der aktuelle Div eine Zeile ist.

class="wfx-row"

.wfx-column

Zeigt an, dass der aktuelle Div eine Spalte ist.

class="wfx-column"

.wfx-card

Container der Drahtanzeige und Komponente.

class="wfx-card"

.wfx-safe-area

Zeigt an, dass der aktuelle div ein sicherer Bereichscontainer um Komponenten ist.

class="wfx-safe-area"

.wfx-padding

12px paddeln um Komponenten.

class="wfx-padding"

.wfx-full-width

Indikator für 100% Breitenbehälter einer Komponente.

Dies wird verwendet, um die Funktionen des sicheren Bereichs zu ignorieren.

class="wfx-full-width"

.wfxButtonText

Container für Button-Text.

class="wfxButtonText"

CSS Attribut Selektor

Beschreibung

[data-wfx-slide="1"]

Verbindet eine eindeutige Integer-ID mit jeder Carousel Slide.

Im angegebenen Beispiel-Selektor ist die eindeutige Id, die der aktuellen Folie zugeordnet ist, 1.

[data-wfx-dnd-element="1-3-2-textField"] für carousel

Funktioniert als Identifikator für eine Komponente in carousel. Format: "slide-row-column-component" Der Beispiel-Selektor [data-wfx-dnd-element="1-3-2-textField"] zeigt an, dass das aktuelle Element in der ersten Folie, der dritten Zeile, der zweiten Spalte und in einem Textfeld ist.

Unterstützte Werte für die Komponente sind textField, Bild, Button, Video, Audio.

[data-wfx-dnd-element="1-2-textField"] für Nicht Carousel Popups

Funktioniert als Identifikator für eine Komponente in Nicht-Carousel Pop-ups.

Format: "row-column-component" Der Beispiel-Selektor [data-wfx-dnd-element="1-2-textField"] gibt an, dass das aktuelle Element in der ersten Zeile, in der zweiten Spalte und in einem Textfeld ist. Unterstützte Werte für die Komponente sind textField, Bild, Button, Video, Audio.

Anwendungsfälle

Ändern der Textfarbe

Der folgende CSS-Code stilisiert alle <p> Elemente im Pop-up.

p {
  color: #8B0000;
  text-align: justify;
}

Vor Änderungen des Codes:

  • Standardmäßig wird der Absatztext an die Mitte ausgerichtet.

  • Die Textfarbe für Absätze ist auf #6B697D gesetzt.

Nach Code-Änderungen:

  • Absatztext ist gerechtfertigt, d. h. er wird gleichmäßig über die Breite des Containers verteilt.

  • Die Farbe des Textes wird in dunkelrot geändert (#8B0000)

Der Taste anpassen

Der folgende CSS-Code sticht die Elemente mit der Klasse .wfxButtonText.

.wfxButtonText {
  font-size: 16px;
  padding: 10px 15px;
}

Vor Änderungen des Codes:

Der Text innerhalb des Buttons hatte eine Standard-Schriftgröße und -padding.

Nach Code-Änderungen:

  • Schriftgröße: 16px;: Diese Zeile legt die Schriftgröße für den Text in Elementen mit der Klasse .wfxButtonText auf 16 Pixel fest.

  • Padding: 10px 15px;: Diese Zeile legt die Füllung von Elementen innerhalb der Klasse .wfxButtonText fest. Padding fügt Platz um den Inhalt eines Elements hinzu. Hier wird 10px Polster oben und unten angewendet, und 15px Polster werden links und rechts angewendet.

Anpassen der Folienfarbe

Der folgende CSS-Code zielt auf Elemente mit dem Attribut „data-wfx-slide“ auf den Wert „2“ und wendet die folgenden Stile auf diese Elemente an.

[data-wfx-slide="2"] {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  Rand: 5px;
}

Vor Änderungen des Codes:

Die Folie mit dem Wert „2“ hatte eine Standardfarbe für Hintergrundfarbe, Rahmen, Paddeln und Rand.

Nach Code-Änderungen:

  • Hintergrundfarbe: #f0f0f0f0;: Die Hintergrundfarbe der Folie ist auf hellgrau gesetzt (#f0f0f0f0f0).

  • Rand: 1px solid #ccc;: Fügt einen Rand von 1 Pixel Breite mit einer hellgrauen (#ccc) Farbe hinzu.

  • Padding: 10px;: Fügt 10 Pixel auf allen Seiten des Elements hinzu.

  • Rand: 5px;: Fügt einen Abstand von 5 Pixeln zu allen Seiten des Elements hinzu.

War dieser Artikel hilfreich?
What's Next
Datenschutzrichtlinie | Whatfix Glossar | Whatfix Platform Status
Urheberrecht © 2024 WHATFIX TM TM. Alle Rechte vorbehalten.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.
Logout