EMBED Instruction: WordPress DE

So kannst du deinen Grafikgenerator in WordPress einbinden:

Schritt 1: Gehe zum Page Editor deiner WordPress-Seite.

Schritt 2: Erstelle ein neues "Custom HTML" Element.

Nach der Erstellung sollte es so aussehen:

Schritt 3: Kopiere den folgenden Code-Snippet mit Strg + C (oder Command + C auf macOS).

  
    {{iframeCode}}
  

Schritt 4: Füge den Code-Snippet in das "Custom HTML" Element ein, indem du Strg + V (oder Command + V auf macOS) nutzt.

Wenn du jetzt speicherst und die Live-Seite ansiehst, wird dir auffallen, dass der Grafikgenerator nicht horizontal zentriert ist...

Es gibt viele Wege, dieses Problem zu lösen, aber wir empfehlen die folgenden Schritte...

Schritt 5: Wähle das "Custom HTML" Element, klicke auf den Options-Button (Icon mit 3 übereinander liegenden Punkten) und wähle "Group".

Schritt 6: Öffne die Einstellungen (das dritte Icon von rechts in der oberen Toolbar).

Schritt 7: Stelle die Gruppenkonfiguration auf "Row".

Schritt 8: Setze die Gruppenjustierung auf "Space between items".

Wenn du speicherst und die Live-Seite ansiehst, sollte der Grafikgenerator nun horizontal zentriert sein...

Das war's schon!

Wie machst du den Grafikgenerator kleiner?

Du kannst die Breite und Höhe des Grafikgenerators ändern.

Um die Breite zu ändern, musst du eine weitere Gruppe erstellen und dieser neuen Gruppe eine spezifische Inhaltsbreite geben. Folge hierfür diesen Schritten...

Schritt 9: Mit dem "Row" Element ausgewählt, erstelle eine neue Gruppe.

Schritt 10: Setze die "content width" der neuen Gruppe auf einen spezifischen Wert (in diesem Beispiel 800 Pixel).

Wieder speichern und die Live-Seite ansehen, um den Effekt der Breitenänderung zu sehen...

Beachte, dass die Inhaltsbreite der neu erstellten Gruppenelemente als maximale Breite fungiert. Auf kleineren Geräten wird die Breite des Grafikgenerators automatisch verringert, um auf den Bildschirm zu passen.

Als nächstes die Höhe: Dafür musst du den Code-Snippet, den du in das "Custom HTML" Element eingefügt hast, bearbeiten. Folge diesen Schritten...

Schritt 11: Wähle das "Custom HTML" Element und finde den "height: 80vh;"-Parameter im Code-Snippet.

Schritt 12: Ändere "80vh" in einen niedrigeren Wert (in diesem Beispiel "60vh").
"vh" bezieht sich auf die Viewport-Höhe und wird als Prozentsatz der Höhe des Geräts gemessen, auf dem die Seite angezeigt wird. Wähle immer einen Wert, der sowohl auf Desktop- als auch auf Mobilgeräten funktioniert. Nutze dein eigenes Mobilgerät als Referenz.

So sieht die Live-Seite jetzt aus (nach dem Speichern)...

Thomas Wicke

Thomas Wicke

- Trying to reinvent stuff