Media - banner

Gebruik de Banner inhoudstype om een geïllustreerde, interactieve component toe te voegen die gebruikers met een vraag aan actie en knoop in Page Builder stadium.

NOTE
Wat voorheen Banner in het menu Inhoud, is nu Dynamisch blok.

Banner op de startpagina van een winkel {width="700" modal="regular"}

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.

De bannergereedschapset wordt weergegeven wanneer u de muisaanwijzer op de bannercontainer plaatst.

Banner, gereedschapset {width="600" modal="regular"}

Gereedschap
Pictogram
Beschrijving
Verplaatsen
Pictogram Verplaatsen {width="25"}
Hiermee verplaatst u de banner naar een andere positie in het werkgebied.
(label)
Banner
Identificeert de huidige inhoudscontainer als een banner. Houd de muisaanwijzer boven de container om de gereedschapset weer te geven.
Instellingen
Instellingenpictogram {width="25"}
Hiermee opent u de pagina Banner bewerken, waarin u de eigenschappen van de banner en container kunt wijzigen.
Verbergen
Pictogram verbergen {width="25"}
Hiermee verbergt u de huidige banner.
Tonen
Pictogram tonen {width="25"}
Toont de verborgen banner.
Dupliceren
Pictogram Dupliceren {width="25"}
Maakt een kopie van de banner.
Verwijderen
Pictogram verwijderen {width="25"}
Hiermee verwijdert u de banner uit het werkgebied.
Upload New Image
Uploadt een afbeelding van uw lokale bestandssysteem naar de galerie voor de bannerachtergrond.
Select from Gallery
Hiermee gebruikt u een bestaande afbeelding uit de galerie voor de bannerachtergrond.
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 banner toevoegen

  1. In de Page Builder deelvenster, uitvouwen Media en sleep een Banner tijdelijke aanduiding naar het werkgebied.

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

    De Upload Image ​en​ Select from Gallery De knoppen zijn opgenomen zodat u de bannerinhoud rechtstreeks vanuit het werkgebied snel kunt wijzigen. U kunt de inhoud ook wijzigen op de Edit Banner ​pagina.

  2. Klik in de plaatsaanduiding voor de banner om de teksteditor en voer inhoud voor de banner in.

    U kunt ook complexere bannerinhoud opnemen met de opdracht Inhoud instellingen.

Banningsinstellingen wijzigen

  1. Houd de muisaanwijzer boven de bannercontainer om de gereedschapset weer te geven en kies de optie Instellingen ( Instellingenpictogram ).

  2. Gebruik de volgende secties voor gedetailleerde informatie over het bijwerken van de beschikbare montages:

  3. Klik op Save in de rechterbovenhoek om het dialoogvenster Edit Banner ​pagina.

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

Appearance

Banners kunnen eenvoudig worden ingesteld en onderhouden, omdat ze zijn gebaseerd op een van vier vooraf gedefinieerde sjablonen.

  • Kies een van de volgende typen bannerplaatsing:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Plaatsing Beschrijving
    Poster Hiermee centreert u de inhoud en de knop op de banner. Als de bedekking wordt gebruikt, wordt de volledige breedte van de banner uitgebreid.
    Collage Left Hiermee plaatst u de inhoud en de knop in een bepaald gebied aan de linkerkant van de banner. De bedekking dekt, indien gebruikt, alleen het gedefinieerde gebied.
    Collage Center Hiermee plaatst u de inhoud en de knop in een gedefinieerd gebied dat op de banner is gecentreerd. De bedekking dekt, indien gebruikt, alleen het gedefinieerde gebied.
    Collage Right Hiermee plaatst u de inhoud en de knop in een gedefinieerd gebied aan de rechterkant van de banner. De bedekking dekt, indien gebruikt, alleen het gedefinieerde gebied.

    Weergave - collage rechts {width="600" modal="regular"}

  • (Optioneel) Voer de Minimum Height voor de rij.

    De minimumhoogte kan een getal zijn met elke geldige CSS-eenheid (zoals 100px, 50%, 50em, 100vh) of een berekening (zoals 100vh - 237px).

    U kunt bijvoorbeeld de minimumhoogte van een banner instellen om de volledige hoogte van de pagina te vergroten, zodat u aantrekkelijke opties hebt voor achtergrondafbeeldingen en video's van volledige pagina.

Background

Er zijn veel opties voor het definiëren van de achtergrondweergave van een banner. U kunt een eenvoudige kleur- of achtergrondafbeelding toepassen en geavanceerde effecten beheren.

Background Color

Geef de achtergrondkleur op door een staal te kiezen, op de kleurkiezer te klikken of door een geldige kleurnaam of een gelijkwaardige hexadecimale waarde in te voeren. Deze instelling bepaalt de achtergrondkleur van de rij. U kunt ook de dekking van de kleur aanpassen.

Geen kleur (standaard) {width="200"}

U kunt de waarde op drie manieren instellen:

  • Een vooraf gedefinieerde kleurnaam, zoals White
  • De hexadecimale kleurwaarde voor de kleur, zoals #ffffff
  • De RGB-waarde voor de kleur, met een dekkingspercentage, zoals rgba(255, 255, 255, 0.75)

Als u een kleur wilt kiezen, klikt u op het staal links van het dialoogvenster Geen kleur doos.

Een kleurstaal kiezen {width="600" modal="regular"}

Als u nogmaals op het kleurvak klikt om de kleurkiezer te openen, worden in het vak onder de schuifregelaar de huidige waarden voor rood, groen, blauw en alpha (rgba) weergegeven. Het laatste getal geeft het huidige dekkingspercentage aan als een decimaal. U kunt de schuifregelaar gebruiken om de dekking aan te passen of de gewenste decimale waarde invoeren.

Dekking instellen {width="600" modal="regular"}

NOTE
Page Builder ook een transparantielaag ondersteunt, of alfakanaal in achtergrondafbeeldingen die kunnen worden gebruikt om achtergronden met verschillende dekkingsgraden te maken.

Background Type

Een achtergrondtype kan een afbeelding of video zijn. Page Builder standaardinstellingen Image en worden verschillende afbeeldingsinstellingen weergegeven. Als u Video, Page Builder Hiermee vervangt u de afbeeldingsinstellingen door video-instellingen. Beide instellingen voor achtergrondtypen worden in de volgende secties beschreven.

Achtergrondtype {width="200"}

Instellingen voor afbeeldingstypen

Als u de Achtergrondtype tot Imagegebruikt u de volgende instellingen om de weergave van de achtergrondafbeelding te definiëren.

Banner met achtergrondafbeelding {width="600" modal="regular"}

  • Background Image - Kies zo nodig met de beschikbare gereedschappen een achtergrondafbeelding die u op de banner wilt toepassen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Gereedschap Beschrijving
    Upload Uploadt een afbeeldingsbestand van uw lokale computer naar de galerie en past het vervolgens toe als de achtergrondafbeelding voor de banner.
    Select from Gallery Hiermee wordt u gevraagd een bestaande afbeelding in de galerie te kiezen als achtergrondafbeelding voor de banner.
    Pictogram Camera {width="25"} Hiermee kunt u de afbeelding naar de tegel van de camera slepen of naar de afbeelding in uw lokale bestandssysteem bladeren.
  • Background Mobile Image - Gebruik indien nodig dezelfde gereedschappen om een andere achtergrondafbeelding te kiezen die u wilt gebruiken voor weergave op mobiele apparaten.

  • Background Size - Stel deze optie in om te bepalen hoe de achtergrondafbeelding wordt geschaald ten opzichte van de breedte van de banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Optie Beschrijving
    Cover De achtergrondafbeelding bedekt de volledige breedte van de banner.
    Contain De achtergrondafbeelding is beperkt tot de breedte van het inhoudsgebied.
    Auto Hiermee past u de grootte van het huidige stijlblad toe.

    Achtergrondgrootte {width="200"}

  • Background Position - Stel deze optie in om te bepalen hoe de achtergrondafbeelding wordt verankerd ten opzichte van de banner:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Anker Posities
    Top Links/midden/rechts
    Center Links/midden/rechts
    Bottom Links/midden/rechts

    Het ankerpunt is als een drukknop die de afbeelding op de opgegeven achtergrondpositie aan de banner koppelt.

  • Background Attachment - Stel het type bijlage in om te bepalen hoe de achtergrondafbeelding ten opzichte van de schuifpagina wordt verplaatst:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Optie Beschrijving
    Scroll De bijgevoegde achtergrondafbeelding wordt gesynchroniseerd zodat deze omlaag wordt verplaatst wanneer de pagina wordt verschoven.
    Fixed (Niet beschikbaar voor mobiele apparaten) De achtergrondafbeelding wordt niet verplaatst wanneer de container over de afbeelding schuift en op de opgegeven achtergrondpositie wordt vastgezet.
  • Background Repeat - Als u de achtergrondafbeelding wilt herhalen om de ruimte te vullen, wijzigt u deze instelling Yes.

Instellingen voor videotypen

Als u de Background Type ​tot Videogebruikt u de volgende instellingen om de weergave van de achtergrondafbeelding te definiëren.

  • Video URL - Voer een geldige video-URL in. Geldige video-URL's kunnen koppelingen zijn naar:

    • YouTube-video's: https://youtu.be/CoDhMRUUjeI
    • Vimeo-video's: https://vimeo.com/190156113
    • Geldige videobestanden (.mp4 wordt aanbevolen): https://myvideos.com/spiral.mp4

    URL achtergrondvideo {width="200"}

  • Overlay Color - Selecteer een kleur om een transparante tint toe te passen op de video.

  • Infinite Loop - Instellen op No om de video eenmaal af te spelen en te stoppen. Wanneer deze is ingesteld op Yes (standaard), wordt de video herhaald in een oneindige lus.

  • Lazy Load - Instellen op No om de video met de pagina te laden, zelfs als deze niet zichtbaar is. Wanneer deze is ingesteld op Yes (standaard), wordt de video alleen uit de bron geladen wanneer deze op het scherm wordt weergegeven.

  • Play Only When Visible - Instellen op No om ervoor te zorgen dat de video direct wordt afgespeeld nadat deze is geladen, ongeacht of deze zichtbaar is. Wanneer deze is ingesteld op Yes (standaard) wordt het afspelen van de video alleen gestart wanneer deze zichtbaar is.

  • Fallback Image - Geef indien nodig een afbeelding op die op het scherm moet worden weergegeven voordat de video wordt geladen en als de video om een of andere reden niet wordt geladen.

Content

U kunt de bannerinhoud rechtstreeks in het werkgebied wijzigen of wanneer u de instellingen wijzigt. De instellingen bieden complexere inhoudseigenschappen, zoals bannerkoppelingen en -knoppen, en overlays. De positie van de inhoud weerspiegelt de Weergave plaatsingsinstelling.

Eenvoudige inhoud in het werkgebied

  1. Klik op de tekst van de tijdelijke aanduiding en voer de tekst in die u op de banner wilt weergeven.

    De editor-werkbalk wordt boven het tekstvak weergegeven.

    Inhoud in het werkgebied bewerken {width="600" modal="regular"}

  2. Gebruik de editor-werkbalk om tekst in te voeren en op te maken, en om elementen in te voegen, zoals koppelingen, afbeeldingen en widgets.

    Werkgebied met opgemaakte tekst {width="600" modal="regular"}

Complexe inhoud in de instellingen

  1. Houd de muisaanwijzer boven de bannercontainer om de gereedschapset weer te geven en kies de optie Instellingen ( Instellingenpictogram {width="25"} ).

  2. Omlaag schuiven naar de Content ​en de Message Text ​editor om bannertekst in te voeren en op te maken.

    U kunt ook elementen invoegen, zoals tekstkoppelingen, afbeeldingen en widgets.

    Redacteur voor berichttekst {width="600" modal="regular"}

  3. Geef indien nodig een Link voor de banner.

    De koppeling is de doelpagina die wordt weergegeven wanneer de klant op de bannerknop of het gebied 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.
    • 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.
    • 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.
    note note
    NOTE
    Vanaf de release van 2.4.1, Page Builder biedt geen ondersteuning meer voor het koppelen van de banner en koppelingen in de geneste tekst vanwege problemen met de weergave op de winkelachtergrond. Als u een koppeling gebruikt in het dialoogvenster Message Text ​kunt u de​_Link_ -optie. Als u liever één koppeling voor de gehele banner gebruikt, kunt u alle koppelingen uit de tekst verwijderen.
    Koppelingsconfiguratie is geblokkeerd {width="200"}
  4. Voeg zo nodig een knop toe om klanten te vragen de koppeling te volgen.

    Met de instelling Weergave banner wordt één koppeling of knop onder de tekst geplaatst. Vul de eigenschappen in van de koppeling of knop die u wilt toevoegen.

    Weergave met tekst en knop (of koppeling) {width="600" modal="regular"}

    note note
    NOTE
    U kunt ook meerdere knoppen of koppelingen gebruiken door een blok op de banner. U voorkomt conflicten door alle koppelingen of knoppen in het aparte blok te houden en geen koppeling of knop rechtstreeks aan de banner toe te voegen.
    • Set Show Button op een van de volgende wijzen:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Optie Beschrijving
      Always Er verschijnt altijd een knop op de banner.
      On Hover Een knop wordt alleen op de muisaanwijzer op de banner weergegeven.
      Never Show Er verschijnt nooit een knop op de banner.
    • Voer de Button Text om op de knop te worden weergegeven.

    • Set Button Type op een van de volgende wijzen:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Optie Beschrijving
      Primary Past de primaire knoopstijl van het huidige stijlblad toe.
      Secondary Past de secundaire knoopstijl van het huidige stijlblad toe, indien van toepassing.
      Link Maakt een hyperlink in plaats van een knop.

      De knopstijl van het huidige thema bepaalt de knopindeling. Een primaire knop heeft doorgaans een prominentere achtergrondkleur dan een secundaire knop.

  5. Set Show Overlay op een van de volgende wijzen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Optie Beschrijving
    Always De bedekking is altijd zichtbaar.
    On Hover De bedekking wordt alleen weergegeven bij aanwijzen.
    Never Show De bedekking is niet zichtbaar.

    U kunt een bedekking gebruiken om een achtergrondkleur toe te passen op het actieve inhoudsgebied dat door Appearance instellen. De bannerachtergrondafbeelding blijft zichtbaar voor de volledige breedte van de banner.

    Als u een bedekking wilt weergeven, stelt u de optie Overlay Color:

    • Klik op de knop Geen kleur en kies een staal.
    • In de Geen kleur in. Voer een geldige kleurnaam of een hexadecimale waarde in.

    Bedekkingskleur {width="600" modal="regular"}

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

    Banner met tekstbericht en knop {width="600" modal="regular"}

Search Engine Optimization seo

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

  1. Als u de horizontale plaatsing van inhoudscontainers wilt bepalen die aan de banner 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 inhoudscontainers uit langs de linkerrand van de bannercontainer, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Center Hiermee lijnt u de inhoudscontainer uit in het midden van de bannercontainer, waarbij rekening wordt gehouden met de opgegeven opvulling.
    Right Hiermee lijnt u de inhoudscontainer uit langs de rechterrand van de bannercontainer, waarbij rekening wordt gehouden met de opgegeven opvulling.
  2. Stel de Border stijl toegepast op alle vier zijden van de bannercontainer:

    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.
  3. Als u een andere randstijl dan None, vult u de weergaveopties voor de rand in:

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

      Randkleur {width="600" modal="regular"}

    • Border Width - Voer het aantal pixels in voor de lijnbreedte van de rand.

    • Border Radius - Voer het aantal pixels in waarmee de grootte van de straal die wordt gebruikt om elke hoek van de rand te afronden, wordt gedefinieerd.

  4. (Optioneel) Geef de namen op van CSS classes van het huidige stijlblad toe te passen op de bannercontainer.

    Scheid meerdere klassennamen met een spatie.

  5. Voer in pixels waarden in voor de Margins and Padding om de buitenmarges en de binnenopvulling van de banner op te geven.

    Voer elke corresponderende waarde in het diagram van de bannercontainer in.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Optie 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