Der Bild-Block ermöglicht es Ihnen, Bilder zu jeder SeedProd-Seite hinzuzufügen. Dieser Block unterstützt das Hochladen von Bildern aus Ihrer Mediathek, die Eingabe einer direkten URL oder die Verwendung von KI-generierten Bildern – so haben Sie flexible Optionen für die Beschaffung von Grafiken für Ihre Seiten.
Über die reine Anzeige eines Bildes hinaus enthält der Block Link-Optionen, Bildgrößenanpassungen, Rahmenstile und Schatteneffekte sowie Drehung – was ihn zu einem voll ausgestatteten Bildelement für jedes Layout macht.
Hinzufügen des Bild-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Bild-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Unter Design > Blöcke ziehen Sie den Bild-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Bild-Block, um seine Einstellungen zu öffnen. Konfigurieren Sie im Tab Inhalt die Bildquelle, Größe, Ausrichtung und den Link.
Bild:
- Bild: Laden Sie ein Bild aus Ihrer WordPress-Mediathek hoch oder wählen Sie es aus. Der Block enthält auch eine Option zur KI-Bildgenerierung, um Bilder direkt aus dem Editor mit OpenAI zu erstellen.
- Bildquelle: Geben Sie manuell eine direkte Bild-URL ein oder verwenden Sie die Steuerelemente für dynamische Tags, um eine dynamische Medienquelle wie einen benutzerdefinierten Feldwert abzurufen.
- Alternativtext: Geben Sie beschreibenden Alternativtext für das Bild ein, um die Zugänglichkeit und SEO zu verbessern.
- Bildgröße: Legen Sie die Breite und Höhe des Bildes in Pixel (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 Bereichs fest – Links, Mitte oder Rechts. Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgerät.
- Link-Typ: Wählen Sie, wie das Bild beim Klicken reagiert – Benutzerdefinierter Link öffnet eine von Ihnen angegebene URL oder Medium – Lightbox öffnet das Vollbildbild 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 Einstellungen-Symbol, 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 der Verknüpfung ein
rel="nofollow"-Attribut hinzuzufügen, das Suchmaschinen anweist, keine Link-Autorität an das Ziel weiterzugeben.
Schritt 3: Vorlage auswählen (Optional)
Der Tab Vorlagen bietet eine Auswahl an vordefinierten Bildstil-Vorgaben. Klicken Sie auf eine beliebige Vorlagen-Miniaturansicht, um sofort eine Kombination aus Rahmen-, Schatten- und Stileinstellungen auf Ihr Bild anzuwenden. Dies ist eine schnelle Möglichkeit, Ihren Bildern ein poliertes, konsistentes Aussehen zu verleihen, ohne jede Stiloption manuell konfigurieren zu müssen.
Schritt 4: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild und die Abstände Ihres Bild-Blocks anpassen.
Stile:
- Objekt-Passform: Wählen Sie, 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 aus Keine, Haarlin, 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 (durchgezogen, gepunktet oder gestrichelt), die Rahmenfarbe, die Rahmenbreite (oben, rechts, unten, links separat) und den Radius fest, um die Ecken abzurunden – mit der Wahl zwischen px- oder %-Einheiten.
Abstand:
- Abstand (Außen): Steuern Sie den äußeren Abstand um Ihren Bildblock (oben, rechts, unten, links). Unterstützt gerätespezifische Werte für Desktop, Tablet und Mobilgeräte.
- Abstand (Innen): 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 zur gezielten JavaScript-Steuerung erstellt wird.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format ein: attribut-name|wert.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Bildblock auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Bildblock auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Bildblock auf Mobilgeräten aus.
Animationseffekte:
- Erscheinungsanimation: Wählen Sie einen Animationseffekt, der abgespielt wird, wenn der Bildblock ins Sichtfeld scrollt, wie z. B. Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 5: Änderungen speichern
Sobald Sie die Konfiguration des Bildblocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Bildblock zu Ihrer Seite hinzugefügt! Bilder sind eines der wirkungsvollsten Elemente auf jeder Landingpage – sie geben den Ton an, schaffen Vertrauen und lenken die Aufmerksamkeit. Verwenden Sie den Tab „Vorlagen“ für schnelle Styling-Voreinstellungen oder optimieren Sie Rahmen, Schatten und Drehung im Tab „Erweitert“, um genau den gewünschten Look zu erzielen.