WebMasterService N3rds@Work

UpFront Shortcodes Lightbox
DerN3rd|8. Oktober 2021

UpFront Shortcodes Lightbox

Inhaltsverzeichnis

    1. Beschreibung
    2. Optionen 
        1. [su_lightbox]
           – der primäre Shortcode

       

        1. [su_lightbox_content]
           – ergänzender Shortcode

       

       

 

    1. Beispiele
        1. Bilder anzeigen

       

        1. Webseiten anzeigen

       

        1. Anzeigen von HTML-Inhalten

       

       

 

 

Beschreibung

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.

Optionen

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 Shortcode

Optionsname 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 Shortcode

Optionsname 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 –

Beispiele

Bilder anzeigen

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 .

Webseiten anzeigen

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 .

Anzeigen von HTML-Inhalten

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.

Kurzcode [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.

Shortcode [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.

Weitere Informationen

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

UpFront Shortcodes