Mit dem Bildblock können Sie Bilder zu jeder SeedProd-Seite hinzufügen. Dieser Block unterstützt das Hochladen von Bildern aus Ihrer Medienbibliothek, die Eingabe einer direkten URL oder die Verwendung von KI-generierten Bildern – damit haben Sie flexible Optionen für die Beschaffung von Bildmaterial für Ihre Seiten.
Der Block zeigt nicht nur ein Bild an, sondern umfasst auch Link-Optionen, Steuerelemente für die Bildgröße, Rahmenstile, Schatteneffekte und Drehfunktionen – damit ist er ein voll ausgestattetes Bildelement für jedes Layout.
Hinzufügen des Bildblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Bildblock zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Bildblock per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Bildblock, um dessen Einstellungen zu öffnen. Konfigurieren Sie auf der Registerkarte „Inhalt“ die Bildquelle, Größe, Ausrichtung und den Link.
Bild:
- Bild: Laden Sie ein Bild hoch oder wählen Sie ein Bild aus Ihrer WordPress-Medienbibliothek aus. Der Block enthält auch eine Option zur KI-Bildgenerierung, mit der Sie Bilder direkt im Editor mit OpenAI erstellen können.
- Bildquelle: Geben Sie manuell eine direkte Bild-URL ein oder verwenden Sie die Steuerung „Dynamische Tags“, um eine dynamische Medienquelle wie einen benutzerdefinierten Feldwert einzufügen.
- Alt-Text: Geben Sie einen beschreibenden Alternativtext für das Bild ein, um die Barrierefreiheit und die Suchmaschinenoptimierung zu verbessern.
- Bildgröße: Legen Sie die Breite und Höhe des Bildes in Pixeln (px) oder als Prozentsatz (%) fest. Lassen Sie eines der Felder leer, um das natürliche Seitenverhältnis des Bildes beizubehalten.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Bildes innerhalb seines Abschnitts fest – links, mittig oder rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Link-Typ: Wählen Sie aus, wie sich das Bild beim Anklicken verhält – „Benutzerdefinierter Link“ öffnet eine von Ihnen angegebene URL, „Medien – Lightbox“ öffnet das Bild in voller Größe in einer überlagernden Lightbox.
- Link: Geben Sie die Ziel-URL für den Bildlink ein (sichtbar, wenn „Benutzerdefinierter Link“ ausgewählt ist). Klicken Sie auf das Einstellungssymbol, um zusätzliche Link-Optionen anzuzeigen.
- In neuem Fenster öffnen: Aktivieren Sie diese Option, um die verlinkte URL in einem neuen Browser-Tab zu öffnen.
- No Follow: Aktivieren Sie diese Option, um ein
rel="nofollow"Attribut zum Link hinzufügen, das Suchmaschinen anweist, keine Link-Autorität an das Ziel weiterzugeben.
Schritt 3: Vorlage auswählen (optional)
Die Registerkarte „Vorlagen“ bietet eine Auswahl an vordefinierten Bildstil-Voreinstellungen. Klicken Sie auf eine beliebige Vorlagenminiaturansicht, um sofort eine Kombination aus Rahmen-, Schatten- und Stileinstellungen auf Ihr Bild anzuwenden. Auf diese Weise können Sie Ihren Bildern schnell ein einheitliches, professionelles Aussehen verleihen, ohne jede Stiloption manuell konfigurieren zu müssen.
Schritt 4: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild und den Abstand Ihres Bildblocks anpassen.
Stile:
- Objektanpassung: Wählen Sie aus, wie das Bild seinen Container ausfüllt, wenn eine Höhe angegeben ist – Füllen, Keine, Abdecken oder Enthalten. Diese Option wird nur angezeigt, wenn ein Höhenwert festgelegt ist.
- Schatten: Fügen Sie einen Schlagschatten hinter dem Bild hinzu. Wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“ oder „2X Groß“.
- Bild drehen: Drehen Sie das Bild mit dem Schieberegler um 0 bis 360 Grad.
- Bildrahmen: Fügen Sie einen Rahmen um das Bild hinzu. Legen Sie den Rahmenstil (durchgehend, gepunktet oder gestrichelt), die Rahmenfarbe, die Rahmenbreite (oben, rechts, unten, links unabhängig voneinander) und den Rahmenradius zum Abrunden der Ecken fest – wahlweise in px oder % Einheiten.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Bildblock herum (oben, rechts, unten, links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Bildblocks an (oben, rechts, unten, links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Bildblock an, die von SeedProd automatisch für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt wurde.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Blendet den Bildblock auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Bildblock auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Bildblock auf Mobilgeräten aus.
Animationseffekte:
- Eingangsanimation: Wählen Sie einen Animationseffekt aus, der abgespielt wird, wenn der Bildblock in den Blickbereich scrollt, z. B. „Hüpfen“, „Einblenden“, „Vergrößern“, „Eindrehen“ und viele mehr.
Schritt 5: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Bildblocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Bildblock zu Ihrer Seite hinzugefügt! Bilder sind eines der wirkungsvollsten Elemente auf jeder Landing Page – sie geben den Ton an, schaffen Vertrauen und lenken die Aufmerksamkeit auf sich. Verwenden Sie die Registerkarte „Vorlagen“ für schnelle Stilvorlagen oder passen Sie Rahmen, Schatten und Drehung auf der Registerkarte „Erweitert“ genau an, um genau das gewünschte Aussehen zu erzielen.