Medien - Bild
Verwenden Sie den Image-Inhaltstyp, um ein JPG-, GIF- oder PNG-Bild zum Page Builder Staging“. Zusätzlich zum Standard-Desktop-Image können Sie ein sekundäres Image für Mobilgeräte angeben. Sie können auch eine Beschriftung hinzufügen, die unter dem Bild angezeigt wird, und das Bild mit einer beliebigen URL, einem Produkt, einer Kategorie oder Seite verknüpfen.
Bild-Toolbox
Die Bild-Toolbox wird angezeigt, wenn Sie den Mauszeiger über den Bild-Container bewegen.






Bild hinzufügen
-
Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Image Platzhalter in den Ziel-Container.
Sie können ein Bild zu einer Zeile, Spalte oder Registerkarte hinzufügen. Im folgenden Beispiel wird das Bild in eine leere Spalte gezogen.
-
Verwenden Sie eine der folgenden Methoden, um das Bild-Asset hinzuzufügen:
note note NOTE Die maximale Dateigröße beträgt 4 MB. Unterstützte Dateitypen sind JPG, GIF und PNG. -
Neues Bild hochladen : Verwenden Sie diese Methode, um eine neue Bilddatei von Ihrem System hochzuladen.
-
Klicken Sie auf Upload Image.
-
Suchen Sie das Bild und wählen Sie es aus, um es der Galerie und dem Ziel-Container hinzuzufügen.
Alternativ können Sie auch eine Bilddatei aus Ihrem System ziehen und auf dem Symbol Kamera (
-
-
Vorhandenes Asset auswählen : Verwenden Sie diese Methode, um ein vorhandenes Bild-Asset aus dem Medienspeicher/der Mediensammlung auszuwählen.
-
Klicken Sie auf Select from Gallery.
-
Navigieren Sie mithilfe der Baumstruktur zum Bild.
-
Klicken Sie auf die Miniaturansicht und dann auf Add Selected.
-
-
Adobe Stock-Bild suchen und auswählen : Verwenden Sie diese Methode, um ein Bild aus Adobe Stock zu suchen.
note note NOTE Für diese Methode ist eine Adobe Stock-Integration für Ihren Administrator konfiguriert. -
Klicken Sie auf Search Adobe Stock und suchen Sie nach einem Bild.
-
Speichern Sie die Vorschau oder das lizenzierte Bild in der Galerie.
Weitere zum Arbeiten mit Adobe Stock-Assets findenunter „Verwenden von Adobe StockBildern“.
-
Wählen Sie die Asset-Miniaturansicht in der Galerie aus und klicken Sie auf Add Selected.
-
Das Bild wird im Ziel-Container an der Position des Platzhalters angezeigt. Im Gegensatz zu einem Hintergrundbild können Sie das Bild an eine andere Position innerhalb des aktuellen Containers oder in einen anderen Container verschieben.
note note NOTE Die Inhaltstypen Banner und Regler enthalten auch Optionen Bild hochladen und Aus Galerie auswählen zum Hinzufügen von Bildern. -
Bildeinstellungen ändern
-
Bewegen Sie den Mauszeiger über den Bild-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen (
Der Dateiname, die Abmessungen und die Dateigröße werden unter dem aktuellen Bild angezeigt. -
Führen Sie einen der folgenden Schritte aus, um die aktuelle Image zu ändern:
-
Neues Bild hochladen : Verwenden Sie diese Methode, um eine neue Bilddatei von Ihrem System hochzuladen.
-
Klicken Sie auf Upload Image.
-
Suchen Sie das Bild und wählen Sie es aus, um es der Galerie und dem Ziel-Container hinzuzufügen.
-
-
Vorhandenes Asset auswählen : Verwenden Sie diese Methode, um ein vorhandenes Bild-Asset aus dem Medienspeicher/der Mediensammlung auszuwählen.
-
Klicken Sie auf Select from Gallery.
-
Navigieren Sie mithilfe der Baumstruktur zum Bild.
-
Klicken Sie auf die Miniaturansicht und dann auf Add Selected.
-
-
Adobe Stock-Bild suchen und auswählen: Verwenden Sie diese Methode, um ein Bild aus Adobe Stock zu suchen.
note note NOTE Für diese Methode ist eine Adobe Stock-Integration für Ihren Administrator konfiguriert. -
Klicken Sie auf Search Adobe Stock und suchen Sie nach einem Bild.
-
Speichern Sie die Vorschau oder das lizenzierte Bild in der Galerie.
Weitere zum Arbeiten mit Adobe Stock-Assets findenunter „Verwenden von Adobe StockBildern“.
-
Wählen Sie die Asset-Miniaturansicht in der Galerie aus und klicken Sie auf Add Selected.
-
-
-
Verwenden Sie zum Hinzufügen eines Mobile Image dieselben im vorherigen Schritt beschriebenen Methoden, um ein Bild auszuwählen, das für die Anzeige auf Mobilgeräten verwendet werden soll.
-
Geben Sie bei Bedarf einen Link für das Bild an.
Der Link ist die Zielseite, die angezeigt wird, wenn der Kunde auf das Bild klickt. Sie können einen von drei Link-Typen verwenden:
-
URL - Links zu einer relativen oder vollständig qualifizierten URL.
-
Product - Identifiziert die Zielseite anhand des Produktnamens oder der SKU. Suchen Sie nach dem Produkt anhand eines Namens, der entweder auf einem Teil- oder einem vollständigen Namen basiert. Wählen Sie das Produkt aus der Suchergebnisliste aus.
-
Category - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategoriestruktur. Suche nach der Kategorie basierend auf einem Teil- oder Vollnamen. Wählen Sie die Kategorie aus dem erweiterten Abschnitt der angezeigten Baumstruktur aus.
-
Page - Identifiziert die Zielseite als eine bestimmte Inhaltsseite. Suche nach der Seite basierend auf einem Teil- oder vollständigen Namen. Wählen Sie die Seite aus der Liste Suchergebnisse aus.
Wenn Sie verhindern möchten, dass der Besucher Ihren Store verlässt, aktivieren Sie das Kontrollkästchen Open in new tab . Wenn das Kontrollkästchen deaktiviert ist, wird das verknüpfte Ziel in derselben Browser-Registerkarte geöffnet, die den Besucher effektiv von Ihrem Store weg navigieren könnte.
-
-
Um ein Image Caption hinzuzufügen, geben Sie den Text ein, der unter dem Bild angezeigt werden soll.
Das Format der Beschriftung wird durch das Stylesheet bestimmt, das mit dem aktuellen Design verknüpft ist.
Die Beschriftung wird normalerweise unter dem Bild angezeigt und stellt für Besucher und Suchmaschinen Informationen zum Bild bereit. Wenn Ihre Site in mehreren Sprachen verfügbar ist, können Sie dasselbe Bild verwenden, aber die Beschriftung übersetzen. Beim HTML ist das
<figcaption>
-Tag eine Teilmenge des<figure>
-Tags.<figcaption>This is the image caption</figcaption>
-
Aktualisieren Sie alle anderen Einstellungen nach Bedarf:
-
Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.
Verschieben eines Bildes
-
Bewegen Sie den Mauszeiger über den Bild-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol „Verschieben (
-
Wählen Sie das Bild aus und ziehen Sie es an die neue Position, direkt unter der roten Richtlinie.
Entfernen eines Bildes
-
Bewegen Sie den Mauszeiger über den Bild-Container, um die Toolbox anzuzeigen, und wählen das Symbol Entfernen (
-
Wenn Sie zum Bestätigen aufgefordert werden, klicken Sie auf OK.
Suchmaschinenoptimierung
Der Text für diese Einstellungen ist für Suchmaschinen sichtbar und verbessert die Indizierung der Seite.
-
Geben Sie Alternative Text eine Alt-Textbeschreibung für die anzuzeigenden digitalen Barrierefreiheits-Tools ein.
Die Verwendung von Alternativtext ist eine Best Practice für die Barrierefreiheit und wird in einigen Gebietsschemata gesetzlich vorgeschrieben. Beim HTML ist das
alt
-Attribut eine Teilmenge desimage
-Tags:<image title="tooltip" alt="description" src="image.jpg">
. -
Geben Sie Title Attribute den Text ein, der beim Bewegen des Mauszeigers als QuickInfo angezeigt werden soll.
Wählen Sie als Best Practice einen beschreibenden, schlüsselwortreichen Titel aus, um die Art und Weise zu verbessern, wie das Bild von Suchmaschinen indiziert wird. Beim HTML ist das
title
-Attribut eine Teilmenge desimage
-Tags:<image title="tooltip" alt="description" src="image.jpg">
.
Advanced
-
Um die horizontale Positionierung der dem Container hinzugefügten Bilder zu steuern, wählen Sie ein Alignment aus.
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Option Beschreibung Default
Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist. Left
Richtet den Bildinhalt am linken Rand des Bild-Containers aus, wobei ein beliebiger Abstand berücksichtigt wird. Center
Richtet den Bildinhalt in der Mitte des Bild-Containers aus, wobei für jeden angegebenen Abstand gesorgt wird. Right
Richtet den Bildinhalt am rechten Rand des Bild-Containers aus, wobei ein beliebiger Abstand berücksichtigt wird. -
Legen Sie den Border fest, der auf alle vier Seiten des Bild-Containers angewendet werden soll:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto Option Beschreibung Default
Wendet die Standardformatvorlage für Rahmen an, die im zugehörigen Stylesheet angegeben ist. None
Zeigt keine sichtbaren Begrenzungen des Containers an. Dotted
Der Container-Rahmen wird als gepunktete Linie angezeigt. Dashed
Der Container-Rahmen wird als gestrichelte Linie angezeigt. Solid
Der Container-Rahmen wird als durchgezogene Linie angezeigt. Double
Der Container-Rahmen wird als doppelte Linie angezeigt. Groove
Der Container-Rahmen wird als gerillte Linie angezeigt. Ridge
Der Container-Rahmen wird als geriffelte Linie angezeigt. Inset
Der Container-Rahmen wird als Einfügelinie angezeigt. Outset
Der Container-Rahmen wird als Ausgangslinie angezeigt. -
Wenn Sie einen anderen Rahmenstil als
None
festlegen, müssen Sie die Anzeigeoptionen für den Rahmen vervollständigen:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Option Beschreibung Border Color Geben Sie die Farbe an, indem Sie einen Musterabschnitt auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben. Border Width Geben Sie die Anzahl der Pixel für die Rahmenlinienbreite ein. Border Radius Geben Sie die Anzahl der Pixel ein, um die Größe des Radius festzulegen, mit dem jede Ecke des Rahmens gerundet werden soll. -
(Optional) Geben Sie die Namen der CSS classes aus dem aktuellen Stylesheet an, die auf den Bild-Container angewendet werden sollen.
Trennen Sie mehrere Klassennamen durch ein Leerzeichen.
-
Geben Sie Werte in Pixeln für die Margins and Padding ein, um die äußeren Ränder und den inneren Abstand des Bild-Containers anzugeben.
Geben Sie jeden entsprechenden Wert in das Bild-Container-Diagramm ein.
table 0-row-2 1-row-2 2-row-2 layout-auto Container-Bereich Beschreibung Margins Die Menge des Leerraums, der auf die Außenkante aller Seiten des Containers angewendet wird. Padding Die Menge des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird.