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.

TIP
U kunt de Integratie van Adobe Stockgebruiken om een aangewezen activa van onder de miljoenen te vinden en te bewaren die door worden verstrekt Adobe Stock. Zie Gebruikend de Beelden van Adobe Stockvoor details over hoe te om, de activa van Adobe Stock in uw galerij te zoeken te verfijnen en te bewaren.
NOTE
Als u significante veranderingen in Page Builder inhoud aanbrengt, adviseert men dat u het Levenslang van de Zitting Adminverhoogt om de zitting te verhinderen uit timing terwijl u werkt.

Gereedschap Afbeelding

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

toolbox van het Beeld {width="500" modal="regular"}

Gereedschap
Pictogram
Beschrijving
Verplaatsen
pictogram van de Beweging {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
pictogram van Montages {width="25"}
Opent Bewerken Beeld pagina, waar u de eigenschappen van het beeld en de container kunt veranderen.
Verbergen
het pictogram van de Huid {width="25"}
Hiermee verbergt u de huidige afbeelding.
Tonen
toon pictogram {width="25"}
De verborgen afbeelding wordt weergegeven.
Dupliceren
Dupliceer pictogram {width="25"}
Hiermee maakt u een kopie van de afbeelding.
Verwijderen
verwijder pictogram {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. 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.

    slepend een type van beeldinhoud aan het stadium {width="600" modal="regular"}

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

    Upload Beeld of Uitgezocht van de hulpmiddelen van de Galerij op het stadium {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 ( 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 .

        Toevoegend een geselecteerd beeld {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.

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

Afbeeldingsinstellingen wijzigen

  1. Beweeg over de beeldcontainer om de hulpmiddeldoos te tonen en de Montages te kiezen ( pictogram van Montages {width="20"}) pictogram.
    De bestandsnaam, afmetingen en bestandsgrootte worden weergegeven onder de huidige afbeelding.

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

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

        Toevoegend een geselecteerd beeld {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 .

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

    Mobiel beeld {width="600" modal="regular"}

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

      Kiekend een product om {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.

      Kiekend een categorie om {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.

      het Kiezen van een pagina aan verbinding {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.

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

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

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

Een afbeelding verplaatsen

  1. Beweeg over de beeldcontainer om toolbox te tonen en de Beweging te kiezen ( pictogram van de Beweging {width="20"}) pictogram.

    Bewegend een beeld {width="500" modal="regular"}

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

    Gebruikend de rode richtlijn om het beeld {width="500" modal="regular"} te plaatsen

Een afbeelding verwijderen

  1. Beweeg over de beeldcontainer om toolbox te tonen en te kiezen verwijder ( verwijder pictogram {width="20"} ).

  2. 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 tag image 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 tag image 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:

    Grenskleur {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.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d