Media - Afbeelding
Gebruik het inhoudstype van het Beeld om een JPG, GIF, of beeld PNG aan het Page Builder stadiumtoe te voegen. Naast de standaard desktopafbeelding kunt u ook een secundaire afbeelding voor mobiele apparaten opgeven. U kunt ook een bijschrift toevoegen dat onder de afbeelding wordt weergegeven en de afbeelding koppelen aan een URL, product, categorie of pagina.
Gereedschap Afbeelding
De gereedschapset voor afbeeldingen wordt weergegeven wanneer u de muisaanwijzer op de container van de afbeelding plaatst.
{width="500" modal="regular"}
Een afbeelding toevoegen
-
Vouw in het deelvenster Page Builder Media uit en sleep een tijdelijke aanduiding Image naar de doelcontainer.
U kunt een afbeelding toevoegen aan een rij, kolom of tab. In het volgende voorbeeld wordt de afbeelding naar een lege kolom gesleept.
{width="600" modal="regular"}
-
Gebruik een van de volgende methoden om het afbeeldingselement toe te voegen:
{width="500" modal="regular"}
note note NOTE De maximale bestandsgrootte is 4 MB. Ondersteunde bestandstypen zijn JPG, GIF en PNG. -
upload een nieuw beeld : Gebruik deze methode om een nieuw beelddossier van uw systeem te uploaden.
-
Klik op Upload Image.
-
Zoek en kies de afbeelding die u aan de galerie en doelcontainer wilt toevoegen.
Als alternatief, kunt u een beelddossier van uw systeem ook slepen en het laten vallen op het pictogram van de Camera ( {width="20"}).
-
-
selecteer een bestaand activa : Gebruik deze methode om een bestaand beeldmiddel van de media opslag/galerij te selecteren.
-
Klik op Select from Gallery.
-
Gebruik de structuur om naar de afbeelding te navigeren.
-
Klik op de miniatuur en klik op Add Selected .
{width="600" modal="regular"}
-
-
Onderzoek en selecteer een beeld van Adobe Stock : Gebruik deze methode om een beeld van Adobe Stock te vinden.
note note NOTE Deze methode vereist een integratie van Adobe Stockdie voor uw Admin wordt gevormd. -
Klik op Search Adobe Stock en zoek naar een afbeelding.
-
Sla de voorvertoning of afbeelding met licentie op in de galerie.
Zie Gebruikend de Beelden van Adobe Stockvoor meer informatie over het werken met de activa van Adobe Stock.
-
Selecteer de elementminiatuur in de galerie en klik op Add Selected .
-
De afbeelding wordt weergegeven in de doelcontainer op de locatie van de plaatsaanduiding. In tegenstelling tot een achtergrondafbeelding kunt u de afbeelding naar een andere positie in de huidige container of naar een andere container verplaatsen.
note note NOTE De Banneren de inhoudstypes van de Schuifomvatten ook uploadt Beeld en Uitgezocht van Galerij opties om beelden toe te voegen. {width="500" modal="regular"}
-
Afbeeldingsinstellingen wijzigen
-
Beweeg over de beeldcontainer om de hulpmiddeldoos te tonen en de Montages te kiezen ( {width="20"}) pictogram.
De bestandsnaam, afmetingen en bestandsgrootte worden weergegeven onder de huidige afbeelding.{width="600" modal="regular"}
-
Voer een van de volgende handelingen uit om de huidige Image te wijzigen:
-
upload een nieuw beeld : Gebruik deze methode om een nieuw beelddossier van uw systeem te uploaden.
-
Klik op Upload Image.
-
Zoek en kies de afbeelding die u aan de galerie en doelcontainer wilt toevoegen.
-
-
selecteer een bestaand activa : Gebruik deze methode om een bestaand beeldmiddel van de media opslag/galerij te selecteren.
-
Klik op Select from Gallery.
-
Gebruik de structuur om naar de afbeelding te navigeren.
-
Klik op de miniatuur en klik op Add Selected .
{width="600" modal="regular"}
-
-
Onderzoek en selecteer een beeld van Adobe Stock: Gebruik deze methode om een beeld van Adobe Stock te vinden.
note note NOTE Deze methode vereist een integratie van Adobe Stockdie voor uw Admin wordt gevormd. -
Klik op Search Adobe Stock en zoek naar een afbeelding.
-
Sla de voorvertoning of afbeelding met licentie op in de galerie.
Zie Gebruikend de Beelden van Adobe Stockvoor meer informatie over het werken met de activa van Adobe Stock.
-
Selecteer de elementminiatuur in de galerie en klik op Add Selected .
-
-
-
Als u een Mobile Image wilt toevoegen, gebruikt u dezelfde methoden als die in de vorige stap zijn beschreven om een afbeelding te selecteren die u wilt gebruiken voor weergave op mobiele apparaten.
{width="600" modal="regular"}
-
Geef indien nodig een Link op voor de afbeelding.
De koppeling is de doelpagina die wordt weergegeven wanneer de klant op de afbeelding klikt. U kunt een van de volgende drie typen koppelingen gebruiken:
-
URL - Koppelingen naar een relatieve of volledig gekwalificeerde URL.
-
Product - Identificeert de bestemmingspagina die op de productnaam of SKU wordt gebaseerd. Zoek het product op naam die op of een gedeeltelijke of volledige naam wordt gebaseerd. Kies het product in de lijst met zoekresultaten.
{width="600" modal="regular"} te verbinden
-
Category - Hiermee wordt de doelpagina geïdentificeerd als een specifieke categorie of subcategorie in de categoriestructuur. Zoek de categorie op basis van een gedeeltelijke of volledige naam. Kies de categorie in het uitgebreide gedeelte van de weergegeven structuur.
{width="600" modal="regular"} te verbinden
-
Page - Hiermee wordt de doelpagina geïdentificeerd als een specifieke inhoudspagina. Zoeken naar de pagina op basis van een gedeeltelijke of volledige naam. Kies de pagina in de lijst met zoekresultaten.
{width="600" modal="regular"}
Schakel het selectievakje Open in new tab in als u wilt voorkomen dat de bezoeker uit uw winkel navigeert. Wanneer het selectievakje is uitgeschakeld, wordt de gekoppelde bestemming geopend op hetzelfde browsertabblad, waardoor de bezoeker daadwerkelijk van de winkel kan wegnavigeren.
-
-
Als u een Image Caption wilt toevoegen, voert u de tekst in die u onder de afbeelding wilt weergeven.
De opmaak van het bijschrift wordt bepaald door de stijlpagina die aan het huidige thema is gekoppeld.
Het bijschrift wordt doorgaans onder de afbeelding weergegeven en biedt bezoekers en zoekmachines informatie over de afbeelding. Als uw site in meerdere talen beschikbaar is, kunt u dezelfde afbeelding gebruiken, maar het bijschrift vertalen. In HTML is de tag
<figcaption>
een subset van de tag<figure>
.<figcaption>This is the image caption</figcaption>
-
Werk een van de andere instellingen naar wens bij:
-
Klik na afloop op Save om de instellingen toe te passen en terug te keren naar de werkruimte van Page Builder .
Een afbeelding verplaatsen
-
Beweeg over de beeldcontainer om toolbox te tonen en de Beweging te kiezen ( {width="20"}) pictogram.
{width="500" modal="regular"}
-
Selecteer de afbeelding en sleep deze naar de nieuwe positie, net onder de rode hulplijn.
{width="500" modal="regular"} te plaatsen
Een afbeelding verwijderen
-
Beweeg over de beeldcontainer om toolbox te tonen en te kiezen verwijder ( {width="20"} ).
-
Klik op OK wanneer u wordt gevraagd om te bevestigen.
Optimalisatie zoekmachine
Tekst voor deze instellingen is zichtbaar voor zoekprogramma's en verbetert de manier waarop de pagina wordt geïndexeerd.
-
Voor Alternative Text, ga een alt tekstbeschrijving voor digitale toegankelijkheidshulpmiddelen in om te tonen.
Het gebruik van alt-tekst is een beste praktijk op het gebied van toegankelijkheid en wordt in sommige landinstellingen wettelijk voorgeschreven. In HTML is het kenmerk
alt
een subset van de tagimage
tag:<image title="tooltip" alt="description" src="image.jpg">
. -
Voer bij Title Attribute de tekst in die als knopinfo bij mouseover moet worden weergegeven.
U kunt het beste een beschrijvende titel met veel trefwoorden kiezen om de manier waarop de afbeelding wordt geïndexeerd door zoekprogramma's te verbeteren. In HTML is het kenmerk
title
een subset van de tagimage
tag:<image title="tooltip" alt="description" src="image.jpg">
.
Advanced
-
Kies een Alignment als u de horizontale plaatsing wilt bepalen van de afbeeldingen die aan de container worden toegevoegd.
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto Optie Beschrijving Default
Hiermee past u de standaardinstelling voor uitlijning toe die is opgegeven in het stijlblad van het huidige thema. Left
Hiermee lijnt u de afbeeldingsinhoud uit langs de linkerrand van de afbeeldingscontainer, waarbij rekening wordt gehouden met de opgegeven opvulling. Center
Hiermee lijnt u de afbeeldingsinhoud uit in het midden van de afbeeldingscontainer, waarbij rekening wordt gehouden met de opgegeven opvulling. Right
Hiermee lijnt u de afbeeldingsinhoud uit langs de rechterrand van de afbeeldingscontainer, waarbij rekening wordt gehouden met de opgegeven opvulling. -
Stel de Border -stijl in die op alle vier zijden van de afbeeldingscontainer wordt toegepast:
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 Optie Beschrijving Default
Past de standaardrandstijl toe die door het bijbehorende stijlblad wordt gespecificeerd. None
Geeft geen zichtbare indicatie van de containerranden. Dotted
De containerrand wordt weergegeven als een stippellijn. Dashed
De containerrand wordt weergegeven als een onderbroken lijn. Solid
De containerrand wordt weergegeven als een effen lijn. Double
De containerrand wordt weergegeven als een dubbele lijn. Groove
De containerrand wordt weergegeven als een gegroefde lijn. Ridge
De containerrand wordt weergegeven als een afgeronde lijn. Inset
De containerrand wordt weergegeven als een inzetlijn. Outset
De containerrand wordt weergegeven als een omtreklijn. -
Als u een andere randstijl dan
None
instelt, voert u de weergaveopties voor de rand in:{width="600" modal="regular"}
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Optie Beschrijving Border Color Geef de kleur op door een staal te kiezen, op de kleurkiezer te klikken of door een geldige kleurnaam of een gelijkwaardige hexadecimale waarde in te voeren. Border Width Voer het aantal pixels in voor de lijnbreedte van de rand. Border Radius Voer het aantal pixels in om de grootte te bepalen van de straal die wordt gebruikt om elke hoek van de rand te afronden. -
(Optioneel) Geef de namen van CSS classes op uit het huidige stijlblad die u wilt toepassen op de container van de afbeelding.
Scheid meerdere klassennamen met een spatie.
-
Voer in pixels waarden in voor de Margins and Padding om de buitenste marges en de binnenopvulling van de afbeeldingscontainer op te geven.
Voer elke bijbehorende waarde in het diagram van de afbeeldingscontainer in.
table 0-row-2 1-row-2 2-row-2 layout-auto Containergebied Beschrijving Margins De hoeveelheid lege ruimte die wordt toegepast op de buitenrand van alle zijden van de container. Padding De hoeveelheid lege ruimte die wordt toegepast op de binnenrand van alle zijden van de container.