[su_lightbox
]
– der primäre Shortcode
[su_lightbox_content
]
– ergänzender Shortcode
Shortcodes
[su_lightbox
]
und
[su_lightbox_content
]
werden verwendet, um verschiedene Elemente in einem Popup-Fenster anzuzeigen. Du kannts ein Bild, eine Webseite oder einen beliebigen HTML-Inhalt anzeigen.
Es gibt zwei Hauptparameter, die die Funktionsweise von Lightbox definieren, type
und src
.
type
Parameter gibt den Inhaltstyp an und kann die folgenden Werte haben:
image
– für Bilder;iframe
– zur Anzeige von Webseiten im Lightbox-Fenster;inline
– zur Anzeige beliebiger HTML-Inhalte.src
Parameter definiert den Inhalt. Dieser Parameter kann die folgenden Werte haben:
URL
– zur Anzeige von Bildern oder Webseiten im Lightbox-Fenster. Beispiele: http://example.com/image.jpg
(Bild), http://example.com
(Webseite);CSS selector
– zur Anzeige beliebiger HTML-Inhalte. Beispiel: #contact-form
.su_lightbox
] – der primäre ShortcodeOptionsname | Mögliche Werte | Standardwert |
---|---|---|
type Typ des Lightbox-Fensterinhalts auswählen |
iframe (Iframe) image (Bild) inline (Inline (html-Inhalt)) |
iframe |
src Hier URL oder CSS-Selektor einfügen. Verwende die URL für die Inhaltstypen Iframe und Bild. Verwende den CSS-Selektor für den Inline-Inhaltstyp. Beispielwerte: http://www.youtube.com/watch?v=XXXXXXXXX – YouTube-Video (iframe) http://example.com/wp-content/uploads/image.jpg – hochgeladenes Bild (Bild) http:/ /example.com/ – beliebige Webseite (iframe) #my-custom-popup – beliebige HTML-Inhalte (inline) |
Beliebiger Textwert | – none – |
mobile Setze diese Option auf no, um die Lightbox auf Mobilgeräten zu deaktivieren (≤768px) |
yes oder no | yes |
class Zusätzliche CSS-Klassennamen, durch Leerzeichen getrennt |
CSS-Klassenname(n) durch Leerzeichen getrennt | – none – |
su_lightbox_content
] – ergänzender ShortcodeOptionsname | Mögliche Werte | Standardwert |
---|---|---|
id Gib hier die ID aus dem Feld der Inhaltsquelle ein. Beispielwert: my-custom-popup |
Beliebiger Textwert | – none – |
width Passe die Breite für Inline-Inhalte an (in Pixel oder Prozent). Beispielwerte: 300px, 600px, 90% |
Beliebiger Textwert | 50% |
margin Passe den Rand für Inline-Inhalte an (in Pixel) |
Zahl von 0 bis 600 | 40 |
padding Passe das Padding für Inline-Inhalte an (in Pixel) |
Zahl von 0 bis 600 | 40 |
text_align Wähle die Textausrichtung |
left (links) center (Mitte) right (rechts) |
center |
background Wähle eine Hintergrundfarbe aus |
#HEX-Farbe | #FFFFFF |
color Wähle eine Textfarbe aus |
#HEX-Farbe | #333333 |
shadow Passe den Schatten für das Inhaltsfeld an |
CSS-Box/Text-Shadow-Kurzzeichen-Eigenschaft | 0px 0px 15px #333333 |
class Zusätzliche CSS-Klassennamen, durch Leerzeichen getrennt |
CSS-Klassenname(n) durch Leerzeichen getrennt | – none – |
Um ein Bild in der Lightbox zu setzten stelle den Anzeigen Typ – Parameter auf Bild und gib den Link zum Bild welches angezeigt werden soll als src Parameter an. Shortcode-Beispiel:
Lightbox mit Bild öffnen
[su_lightbox type="image" src="https://placekitten.com/200/300"
] Lightbox mit Bild öffnen [/su_lightbox
]
Vergiss nicht, Deine URL im Parameter src hinzuzufügen .
Um eine Web – Seite in der Lightbox Satz anzuzeigen stelle Typ – Parameter auf iframe und gib den Link zu einer Webseite , die Du anzeigen willst als src Parameter an. Shortcode-Beispiel:
Lightbox mit Webseite öffnen
[su_lightbox type="iframe" src="https://example.com/"
] Lightbox mit Webseite öffnen [/su_lightbox
]
Vergiss nicht, Deine URL im Parameter src hinzuzufügen .
Klicke hier, um die Lightbox mit HTML-Inhalten zu öffnen
[su_lightbox type="inline" src="#my-custom-popup"
] Klicke hier, um die Lightbox mit HTML-Inhalten zu öffnen [/su_lightbox
] [su_lightbox_content id="my-custom-popup"
] <h3>Benutzerdefinierter HTML-Inhalt</h3> Hier können beliebige <strong>HTML</strong> <em>Tags</em> verwendet werden. Andere Shortcodes sind auch [su_highlight
]erlaubt[/su_highlight
]. [/su_lightbox_content
]
Beachte, dass in beiden Shortcodes dieselbe Kennung my-custom-popup verwendet wird.
su_lightbox]
[su_lightbox
]
Shortcode erstellt ein Element, das beim Klicken eine Lightbox öffnet. Setze den type
Parameter auf inline
und gib den im Shortcode verwendeten Bezeichner
[su_lightbox_content
]
im src
Parameter an.
su_lightbox_content
]Verwende den ergänzenden Shortcode [su_lightbox_content
, um HTML-Inhalte oder Shortcodes in einer Lightbox anzuzeigen.]
Dieser Shortcode hat verschiedene Einstellungen wie: ID
, width
, margin
, etc. Wir möchten jedoch ID
Parameter in diesem Artikel beschreiben. In diesem Parameter solltest Du die CSS-Blockkennung angeben. Dieser Bezeichner sollte beim Einfügen des
[su_lightbox
]
Shortcodes als src
Parameterwert verwendet werden.
Du kannst beliebige HTML-Tags und sogar andere Shortcodes innerhalb beider Shortcodes verwenden.
Wenn Du ein fortgeschrittener Entwickler bist, kannst Du den Hilfs- Shortcode [su_lightbox_content
] löschen . Gib stattdessen einfach den erforderlichen CSS-Selektor im Shortcode [su_lightbox src=""
] im Parameter src an .
Übergeordnet: UpFront Shortcodes Handbuch