Media - Afbeelding

Gebruik de Afbeelding inhoudstype om een JPG-, GIF- of PNG-afbeelding toe te voegen aan de Page Builder stadium. 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.

TIP
U kunt de Adobe Stock-integratie om een geschikt middel te vinden en te bewaren van één van de miljoenen die door Adobe Stock. Zie Adobe Stock-afbeeldingen gebruiken voor meer informatie over het zoeken, verfijnen en opslaan van Adobe Stock-middelen in uw galerie.
NOTE
Als u belangrijke wijzigingen aanbrengt in Page Builder wordt aangeraden de Levensduur beheersessie om te voorkomen dat de sessietime-out optreedt terwijl u werkt.

Gereedschap Afbeelding

De gereedschapset voor afbeeldingen wordt weergegeven wanneer u de muisaanwijzer op de container van de afbeelding plaatst.

Gereedschap Afbeelding

Gereedschap
Pictogram
Beschrijving
Verplaatsen
Pictogram Verplaatsen {width="25"}
Hiermee verplaatst u de afbeelding naar een andere positie in het werkgebied.
(label)
Afbeelding
Hiermee wordt de huidige inhoudscontainer geïdentificeerd als een afbeelding. Houd de muisaanwijzer boven de container van de afbeelding om de gereedschapset weer te geven.
Instellingen
Instellingenpictogram {width="25"}
Hiermee opent u de Afbeelding bewerken pagina, waar u de eigenschappen van de afbeelding en container kunt wijzigen.
Verbergen
Pictogram verbergen {width="25"}
Hiermee verbergt u de huidige afbeelding.
Tonen
Pictogram tonen {width="25"}
De verborgen afbeelding wordt weergegeven.
Dupliceren
Pictogram Dupliceren {width="25"}
Hiermee maakt u een kopie van de afbeelding.
Verwijderen
Pictogram verwijderen {width="25"}
Hiermee verwijdert u de afbeelding uit het werkgebied.
Nieuwe afbeelding uploaden
Uploadt een afbeelding van uw lokale bestandssysteem naar de galerie.
Selecteren in galerie
Hiermee kiest u een bestaande afbeelding uit de galerie.
NOTE
Verborgen elementen worden opgeslagen in de database en onzichtbaar voor klanten. Deze elementen zijn echter zichtbaar voor zoekmachines en andere bots die uw site kruipen. Ze worden ook geretourneerd als onderdeel van de inhoud als ze worden opgevraagd via een API-aanroep met een kenmerk van onzichtbaarheid, tenzij u ze uit het werkgebied verwijdert.

Een afbeelding toevoegen

  1. In de Page Builder deelvenster, uitvouwen Media en sleep een Image plaatsaanduiding 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.

    Een type afbeeldingsinhoud naar het werkgebied slepen {width="600" modal="regular"}

  2. Gebruik een van de volgende methoden om het afbeeldingselement toe te voegen:

    Afbeelding of Selecteren uploaden met de galerie-gereedschappen in het werkgebied {width="500" modal="regular"}

    note note
    NOTE
    De maximale bestandsgrootte is 4 MB. Ondersteunde bestandstypen zijn JPG, GIF en PNG.
    • Een nieuwe afbeelding uploaden: Gebruik deze methode om een nieuw afbeeldingsbestand 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 ook een afbeeldingsbestand van uw systeem slepen en op het Camera ( Pictogram Camera {width="20"} ).

    • Een bestaand element selecteren: Gebruik deze methode om een bestaand afbeeldingselement te selecteren in de media-opslag/galerie.

      • Klik op Select from Gallery.

      • Gebruik de structuur om naar de afbeelding te navigeren.

      • Klik op de miniatuur en klik op Add Selected.

        Een geselecteerde afbeelding toevoegen {width="600" modal="regular"}

    • Een Adobe Stock-afbeelding zoeken en selecteren: Gebruik deze methode om een afbeelding te zoeken vanuit Adobe Stock.

      note note
      NOTE
      Deze methode vereist een Adobe Stock-integratie geconfigureerd voor uw beheerder.
      • Klikken Search Adobe Stock en zoek naar een afbeelding.

      • Sla de voorvertoning of afbeelding met licentie op in de galerie.

        Zie Adobe Stock-afbeeldingen gebruiken voor meer informatie over het werken met Adobe Stock-middelen.

      • 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 Banner en Slider inhoudssoorten omvatten ook Afbeelding uploaden en Selecteren in galerie opties voor het toevoegen van afbeeldingen.

    Afbeelding in een kolom {width="500" modal="regular"}

Afbeeldingsinstellingen wijzigen

  1. Houd de muisaanwijzer boven de container van de afbeelding om het gereedschapvak weer te geven en kies de optie Instellingen ( Instellingenpictogram {width="20"} ).
    De bestandsnaam, afmetingen en bestandsgrootte worden weergegeven onder de huidige afbeelding.

    Huidige afbeelding {width="600" modal="regular"}

  2. De huidige Image Voer een van de volgende handelingen uit:

    • Een nieuwe afbeelding uploaden: Gebruik deze methode om een nieuw afbeeldingsbestand van uw systeem te uploaden.

      • Klik op Upload Image.

      • Zoek en kies de afbeelding die u aan de galerie en doelcontainer wilt toevoegen.

    • Een bestaand element selecteren: Gebruik deze methode om een bestaand afbeeldingselement te selecteren in de media-opslag/galerie.

      • Klik op Select from Gallery.

      • Gebruik de structuur om naar de afbeelding te navigeren.

      • Klik op de miniatuur en klik op Add Selected.

        Een geselecteerde afbeelding toevoegen {width="600" modal="regular"}

    • Een Adobe Stock-afbeelding zoeken en selecteren: Gebruik deze methode om een afbeelding te zoeken vanuit Adobe Stock.

      note note
      NOTE
      Deze methode vereist een Adobe Stock-integratie geconfigureerd voor uw beheerder.
      • Klikken Search Adobe Stock en zoek naar een afbeelding.

      • Sla de voorvertoning of afbeelding met licentie op in de galerie.

        Zie Adobe Stock-afbeeldingen gebruiken voor meer informatie over het werken met Adobe Stock-middelen.

      • Selecteer de elementminiatuur in de galerie en klik op Add Selected.

  3. Als u een Mobile Image Selecteer op dezelfde manier als in de vorige stap is beschreven een afbeelding die u wilt gebruiken voor weergave op mobiele apparaten.

    Mobiele afbeelding {width="600" modal="regular"}

  4. Geef indien nodig een Link 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.

      Een product kiezen om te koppelen {width="600" modal="regular"}

    • 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.

      Een categorie kiezen die u wilt koppelen {width="600" modal="regular"}

    • Page - Identificeert de doelpagina als een specifieke inhoudspagina. Zoeken naar de pagina op basis van een gedeeltelijke of volledige naam. Kies de pagina in de lijst met zoekresultaten.

      Een pagina kiezen die u wilt koppelen {width="600" modal="regular"}

    Als u wilt voorkomen dat de bezoeker van uw winkel af navigeert, selecteert u de optie Open in new tab selectievakje. Wanneer het selectievakje is uitgeschakeld, wordt de gekoppelde bestemming geopend op hetzelfde browsertabblad, waardoor de bezoeker daadwerkelijk van de winkel kan wegnavigeren.

  5. Om een Image Caption Voer 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, <figcaption> -tag is een subset van de <figure> -tag. <figcaption>This is the image caption</figcaption>

  6. Werk een van de andere instellingen naar wens bij:

  7. Klik op Save om de instellingen toe te passen en terug te keren naar de Page Builder werkruimte.

Een afbeelding verplaatsen

  1. Houd de muisaanwijzer boven de container van de afbeelding om de gereedschapset weer te geven en kies de optie Verplaatsen ( Pictogram Verplaatsen {width="20"} ).

    Een afbeelding verplaatsen {width="500" modal="regular"}

  2. Selecteer de afbeelding en sleep deze naar de nieuwe positie, net onder de rode hulplijn.

    De afbeelding plaatsen met de rode hulplijn {width="500" modal="regular"}

Een afbeelding verwijderen

  1. Houd de muisaanwijzer boven de container van de afbeelding om de gereedschapset weer te geven en kies de optie Verwijderen ( Pictogram verwijderen {width="20"} ).

  2. Klik wanneer u wordt gevraagd om te bevestigen OK.

Optimalisatie zoekmachine

Tekst voor deze instellingen is zichtbaar voor zoekprogramma's en verbetert de manier waarop de pagina wordt geïndexeerd.

  • Voor Alternative Text, voert u een alt tekstbeschrijving voor gereedschappen voor digitale toegankelijkheid die moeten worden weergegeven.

    Het gebruik van alt-tekst is een beste praktijk op het gebied van toegankelijkheid en wordt in sommige landinstellingen wettelijk voorgeschreven. In HTML, alt kenmerk is een subset van het image tag: <image title="tooltip" alt="description" src="image.jpg">.

  • Voor Title Attribute, voert u de tekst in die u als knopinfo wilt weergeven bij de muisaanwijzer.

    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, title kenmerk is een subset van het image tag: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  • Als u de horizontale plaatsing wilt bepalen van de afbeeldingen die aan de container worden toegevoegd, kiest u een Alignment.

    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 toegepast op alle vier zijden van de afbeeldingscontainer:

    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, vult u de weergaveopties voor de rand in:

    Randkleur {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 op van CSS classes in het huidige stijlblad toe te passen op de afbeeldingscontainer.

    Scheid meerdere klassennamen met een spatie.

  • Voer in pixels waarden in voor de Margins and Padding om de buitenmarges 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.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d