Wie du ein Bild in ein Divi Layout einfügst
Anleitung für meine Kunden
1. Gehe auf die gewünschte Seite und öffne den Divi Builder
Auf jeder Seite sind die verschiedenen Elemente:
- Abschnitte = Sektion (in blau, globale Sektion olivgrün)
- Zeile mit Spalten (in grün)
- und Module (in schwarz) hierarchisch ineinander verschachtelt angeordnet.
__________________
2. Füge ein neues Modul hinzu.
> Am einfachsten ist es, ein bestehendes Modul zu kopieren. Dann brauchst du keine weiteren Designeinstellungen vornehmen, da diese mit übernommen werden. Du kannst es dorthin ziehen, wo du es brauchst.
> Oder füge ein neues Modul (innerhalb einer Zeile, die sich wiederum innerhalb eines Abschnitts befindet) durch Klicken auf den schwarzen Kreis mit + hinzu.
> Suche das Bild-Modul in der Liste und klicke darauf, um es der Seite hinzuzufügen. Die Modulliste ist durchsuchbar, du kannst auch das Wort “Bild” eingeben und dann die Eingabetaste drücken, um das Bildmodul automatisch zu finden und hinzuzufügen.
3. Sobald das Modul hinzugefügt wurde, öffnet sich das Fenster mit den Optionen für das Moduls, unterteilt in drei Hauptgruppen: Inhalt, Design und Erweitert.
__________________
4. Füge die Inhalte (Bild, Link) hinzu
“Inhalt”
Hier befinden sich alle Inhaltselemente des Moduls, z. B. Text, Bilder und Symbole.
Inhalt > Bild
Klicke auf das kleine Steuerrad.
Wähle ein Bild aus der WordPress-Medienbibliothek aus und laden es hoch. Wenn das Bild sich noch nicht in der Medienbibliothek befindet, kannst du es mit Drag and Drop von deinem Computer in die Medienbibliothek hochladen.
Bilder werden immer linksbündig in ihren Spalten angezeigt und erstrecken sich über die gesamte Breite der Spalte. Die Höhe des Bildes wird durch das Seitenverhältnis des Originalbildes bestimmt.
Inhalt > Link
Inhalt > Link > In Lightbox öffnen
Hier kannst du auswählen, ob das Bild beim Klicken in einer Lightbox geöffnet wird oder nicht. Wenn diese Option aktiviert ist, wird das Bild in voller Größe vergrößert, wenn man in das Fenster klickt.
Inhalt > Link > Link URL für das Bild
Möchtest du das Bild in ein Link verwandeln, dann gib hier eine gültige Web-URL in dieses Feld ein.
Inhalt > Link > Ziel für die Bild URL
Hier kannst du wählen, ob das Link in einem neuen Fenster geöffnet werden soll.
__________________
5. “Design”
Auf der Registerkarte Design befinden sich die Gestaltungsoptionen für das Modul, z. B. Schriftarten, Farben, Größen und Abstände. Hier läßt sich das Aussehen des Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen.
Wenn du eine fertiges Modul kopiert oder aus der Bibliothek übernommen hast, brauchst du hier KEINE Einstellungen machen.
__________________
6. Füge die richtigen Attribute für das Bild ein
Öffne die Registerkarte “Erweitert” mit weitere Optionen, die für Webdesigner hilfreich sein können.
Erweitert > Attribute
Für SEO Zwecke ist es wichtig, hier die richtigen Attribute=Tags für das Bild einzufügen, damit es von Suchmaschinen gefunden und erkannt werden kann.
Erweitert > Attribute > Alternativer Bildtext:
füge eine kurze Beschreibung des Bildes hinzu mit allen erforderlichen Informationen, falls das Bild nicht geladen werden kann. Z.B. “Landschaft mit grünem Apfelbaum vor blauem Himmel mit spielenden Kindern” Dies dient auch dem Lesen durch Suchmaschinen.
Erweitert > Attribute > Bildtitel:
Füge den Titel des Bildes, eventuell auch Namen des Autors ein: z.B. “Apfelbaum von Lieschen Müller, 2018”
Erweitert > Attribute > Sichtbarkeit
Mit dieser Option kannst du steuern, auf welchen Geräten das Modul angezeigt wird. Du kannst das Modul auf Tablets, Smartphones oder Desktop-Computern einzeln deaktivieren.
__________________
7. Vergiss nicht, alles zu sichern:
Klicke auf den violetten Kreis am unteren Rand der Seite, damit sich das Menü öffnet.
> Klicke “Speichern” im grünen Kästchen rechts unten