Media - banderoll

Använd innehållstypen Banner för att lägga till en illustrerad, interaktiv komponent som engagerar användarna med ett anrop till åtgärd och knapp på Page Builder scenen.

NOTE
Det som tidigare var alternativet Banner på menyn Innehåll är nu Dynamiskt block.

Banderoll på en startsida för butiken

NOTE
Om du gör betydande ändringar i Page Builder-innehållet rekommenderar vi att du ökar livstiden för administratörssession för att förhindra att sessionen gör timeout när du arbetar.

Banderollverktygslåda

Banderollverktygslådan visas när du hovrar över banderollbehållaren.

Banderollverktygslådan

Verktyg
Ikon
Beskrivning
Flytta
Ikonen Flytta {width="25"}
Flyttar banderollen till en annan plats på scenen.
(etikett)
Banderoll
Identifierar den aktuella innehållsbehållaren som en banner. Håll pekaren över behållaren för att visa verktygslådan.
Inställningar
Ikon för inställningar {width="25"}
Öppnar sidan Redigera banderoll där du kan ändra egenskaperna för banderollen och behållaren.
Dölj
Dölj ikon {width="25"}
Döljer den aktuella bannern.
Visa
Visa ikon {width="25"}
Visar den dolda banderollen.
Duplicera
Duplicera ikon {width="25"}
Skapar en kopia av banderollen.
Ta bort
Ikonen Ta bort {width="25"}
Tar bort bannern från scenen.
Upload New Image
Överför en bild från det lokala filsystemet till galleriet för banderollbakgrunden.
Select from Gallery
Använder en befintlig bild från galleriet som bannerbakgrund.
NOTE
Dolda element lagras i databasen och är osynliga för kunderna. De här elementen är dock synliga för sökmotorer och andra organ som crawlar webbplatsen. De returneras också som en del av innehållet om det begärs via ett API-anrop med ett synlighetsattribut, såvida du inte tar bort dem från scenen.

Lägg till en banderoll

  1. Expandera Media på panelen Page Builder och dra en Banner platshållare till scenen.

    Dra en bannerinnehållstyp till scenen {width="600" modal="regular"}

    Knapparna Upload Image ​och​ Select from Gallery inkluderas så att du snabbt kan ändra banderollinnehållet direkt från scenen. Du kan också ändra innehållet på sidan Edit Banner.

  2. Klicka på banderollplatshållaren för att visa textredigeraren och ange innehåll för banderollen.

    Du kan även inkludera mer komplext banderollinnehåll med inställningarna för Innehåll .

Ändra bannerinställningar

  1. Håll pekaren över banderollbehållaren för att visa verktygslådan och välj ikonen Inställningar ( Inställningar-ikon ).

  2. Använd följande avsnitt för detaljerad information om hur du uppdaterar de tillgängliga inställningarna:

  3. När du är klar klickar du på Save i det övre högra hörnet för att stänga sidan Edit Banner.

  4. Klicka på Save i det övre högra hörnet för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.

Appearance

Banderoller är enkla att installera och underhålla eftersom de är baserade på en av fyra fördefinierade mallar.

  • Välj någon av följande banderollplaceringstyper:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Placement Beskrivning
    Poster Centrerar innehållet och knappen på banderollen. Om övertäckningen används, utökas banderollens hela bredd.
    Collage Left Placerar innehåll och knapp i ett definierat område till vänster om banderollen. Om övertäckningen används, täcker den bara det definierade området.
    Collage Center Placerar innehåll och knapp i ett definierat område som är centrerat på banderollen. Om övertäckningen används, täcker den bara det definierade området.
    Collage Right Placerar innehåll och knapp i ett definierat område till höger om banderollen. Om övertäckningen används, täcker den bara det definierade området.

    Utseende - collage höger {width="600" modal="regular"}

  • (Valfritt) Ange Minimum Height för raden.

    Den minsta höjden kan vara ett tal med en giltig CSS-enhet (till exempel 100px, 50%, 50em, 100vh) eller en beräkning (till exempel 100vh - 237px).

    Du kan till exempel ange den minsta höjden för en banderoll så att hela sidhöjden sträcks ut, vilket ger dig tilltalande alternativ för helsidesbakgrundsbilder och -videor.

Background

Det finns många alternativ för att definiera en banners bakgrundsvisning. Du kan använda en enkel färg- eller bakgrundsbild och hantera mer avancerade effekter.

Background Color

Ange bakgrundsfärgen genom att välja en färgruta, klicka på färgväljaren eller genom att ange ett giltigt färgnamn eller motsvarande hexadecimalt värde. Den här inställningen bestämmer radens bakgrundsfärg. Du kan också justera färgens opacitet.

Ingen färg (standard)

Du kan ange värdet på ett av tre sätt:

  • Ett fördefinierat färgnamn, till exempel White
  • Det hexadecimala färgvärdet för färgen, till exempel #ffffff
  • RGB-värdet för färgen, med opacitetsprocent, till exempel rgba(255, 255, 255, 0.75)

Om du vill välja en färg klickar du på färgrutan till vänster om rutan Ingen färg .

Välja en färgruta

Om du klickar på färgrutan för att öppna färgväljaren igen visar rutan under reglaget de aktuella värdena för rött, grönt, blått och alfa (rgba). Det sista talet anger den aktuella opaciteten i procent som decimal. Du kan justera opaciteten med hjälp av skjutreglaget eller ange ett decimalvärde.

Anger opacitet

NOTE
Page Builder har också stöd för ett genomskinlighetslager, eller alfakanal, i bakgrundsbilder som kan användas för att skapa bakgrunder med olika grad av opacitet.

Background Type

En bakgrundstyp kan vara en bild eller en video. Page Builder är som standard Image och visar olika bildinställningar. Om du väljer Video byter Page Builder bildinställningarna mot videoinställningarna. Båda bakgrundstypsinställningarna beskrivs i följande avsnitt.

Bakgrundstyp

Inställningar för bildtyp

Om du anger bakgrundstypen till Image använder du följande inställningar för att definiera hur bakgrundsbilden ska visas.

Banner med bakgrundsbild

  • Background Image - Om det behövs kan du använda de angivna verktygen för att välja en bakgrundsbild som ska användas på banderollen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Verktyg Beskrivning
    Upload Överför en bildfil från den lokala datorn till galleriet och använder den sedan som bakgrundsbild för banderollen.
    Select from Gallery Uppmanar dig att välja en befintlig bild från galleriet som bakgrundsbild för banderollen.
    Kameraikon {width="25"} Gör att du kan dra bilden till kamerapanelen eller bläddra till bilden i det lokala filsystemet.
  • Background Mobile Image - Använd vid behov samma verktyg för att välja en annan bakgrundsbild som ska användas för visning på mobila enheter.

  • Background Size - Ange det här alternativet för att bestämma hur bakgrundsbilden ska skalas i relation till banderollens bredd:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Alternativ Beskrivning
    Cover Bakgrundsbilden täcker banderollens hela bredd.
    Contain Bakgrundsbilden är begränsad till innehållsområdets bredd.
    Auto Använder storleken från den aktuella formatmallen.

    Background size {width="200"}

  • Background Position - Ange det här alternativet för att bestämma hur bakgrundsbilden är förankrad i förhållande till banderollen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Ankarpunkt Positioner
    Top Vänster / Mitten / Höger
    Center Vänster / Mitten / Höger
    Bottom Vänster / Mitten / Höger

    Fästpunkten är som ett push-stift som fäster bilden vid banderollen vid den angivna bakgrundspositionen.

  • Background Attachment - Ange bilagetypen för att bestämma hur bakgrundsbilden flyttas i relation till rullningssidan:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Alternativ Beskrivning
    Scroll Den bifogade bakgrundsbilden synkroniseras så att den flyttas nedåt när sidan rullas.
    Fixed (Inte tillgängligt för mobiler) Bakgrundsbilden flyttas inte när behållaren rullas över bilden och är fast vid den angivna bakgrundspositionen.
  • Background Repeat - Om du vill upprepa bakgrundsbilden för att fylla utrymmet ändrar du den här inställningen Yes.

Inställningar för videotyp

Om du ställer in Background Type ​på Video använder du följande inställningar för att definiera hur bakgrundsbilden ska visas.

  • Video URL - Ange en giltig video-URL. Giltiga video-URL:er kan vara länkar till:

    • YouTube-videofilmer: https://youtu.be/CoDhMRUUjeI
    • Vimeo-videofilmer: https://vimeo.com/190156113
    • Giltiga videofiler (.mp4 rekommenderas): https://myvideos.com/spiral.mp4

    URL för bakgrundsvideo {width="200"}

  • Overlay Color - Välj en färg för att använda en genomskinlig färgton på videon.

  • Infinite Loop - Ange till No om du vill att videon ska spelas upp en gång och stoppas. När värdet är Yes (standard) upprepas videon i en oändlig slinga.

  • Lazy Load - Ange som No om du vill att videon ska läsas in med sidan, även när den inte är synlig. När värdet är Yes (standard) läses videon in från källan endast när den visas på skärmen.

  • Play Only When Visible - Ange till No om du vill att videon ska börja spelas upp omedelbart efter att den har lästs in, oavsett om den är synlig eller inte. När värdet är Yes (standard) börjar videon spelas upp endast när den är synlig.

  • Fallback Image - Om det behövs anger du en bild som ska visas på skärmen innan videon läses in och om videon inte läses in av någon anledning.

Content

Du kan ändra banderollinnehållet direkt på scenen eller när du ändrar inställningarna. Inställningarna innehåller mer komplexa innehållsfunktioner, som bannerlänkar, knappar och övertäckningar. Innehållets position återspeglar placeringsinställningen Utseende.

Enkelt innehåll på scenen

  1. Klicka på platshållartexten och ange den text som du vill ska visas på banderollen.

    Redigeringsverktygsfältet visas ovanför textrutan.

    Redigera innehåll på scenen {width="600" modal="regular"}

  2. Använd redigerarens verktygsfält för att ange och formatera text samt infoga element som länkar, bilder och widgetar.

    Scen med formaterad text {width="600" modal="regular"}

Komplext innehåll i inställningarna

  1. Håll pekaren över banderollbehållaren för att visa verktygslådan och välj ikonen Inställningar ( Inställningar-ikon {width="25"} ).

  2. Bläddra ned till avsnittet Content ​och använd Message Text-redigeraren för att ange och formatera banderolltext.

    Du kan också infoga element, till exempel textlänkar, bilder och widgetar.

    Redigerare för meddelandetext {width="600" modal="regular"}

  3. Ange vid behov en Link för banderollen.

    Länken är den målsida som visas när kunden klickar på banderollknappen eller området. Du kan använda en av tre länktyper:

    • URL - Länkar till en relativ eller fullständig URL.
    • Product - Identifierar målsidan baserat på produktnamnet eller SKU:n. Sök efter produkten efter namn baserat på antingen ett partiellt eller fullständigt namn. Välj produkten i sökresultatlistan.
    • Category - Identifierar målsidan som en specifik kategori eller underkategori i kategoriträdet. Sök efter kategorin utifrån antingen ett helt eller delvis namn. Välj kategori i det utökade avsnittet i det visade trädet.
    • Page - Identifierar målsidan som en specifik innehållssida. Sök efter sidan baserat på ett helt eller delvis namn. Välj sidan i sökresultatlistan.
    note note
    NOTE
    Från och med version 2.4.1 stöder Page Builder inte längre länkning av banderollen och länkar i den kapslade texten på grund av problem med visningen på butiken. Om du använder en länk i Message Text ​kan du inte konfigurera alternativet​_Link_. Om du föredrar att använda en enda länk för hela banderollen kan du ta bort alla länkar från texten.
    Länkkonfigurationen är blockerad {width="200"}
  4. Om det behövs lägger du till en knapp som uppmanar kunderna att följa länken.

    Inställningen för banderollutseende placerar en enda länk eller knapp under texten. Fyll i egenskaperna för länken eller knappen som du vill lägga till.

    Utseende med text och knapp (eller länk) {width="600" modal="regular"}

    note note
    NOTE
    Du kan också använda flera knappar eller länkar genom att lägga till ett block i banderollen. För att undvika konflikter ska du behålla alla länkar eller knappar i det separata blocket och inte lägga till en länk eller knapp direkt i banderollen.
    • Ange Show Button till något av följande:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Alternativ Beskrivning
      Always En knapp visas alltid på banderollen.
      On Hover En knapp visas bara på banderollen när du hovrar.
      Never Show En knapp visas aldrig på banderollen.
    • Ange Button Text som ska visas på knappen.

    • Ange Button Type till något av följande:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Alternativ Beskrivning
      Primary Använder det primära knappformatet från den aktuella formatmallen.
      Secondary Använder det sekundära knappformatet från den aktuella formatmallen, om tillämpligt.
      Link Skapar en hyperlänk i stället för en knapp.

      Knappformatet från det aktuella temat avgör knappformatet. Vanligtvis har en primärknapp en mer framträdande bakgrundsfärg än en sekundär knapp.

  5. Ange Show Overlay till något av följande:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Alternativ Beskrivning
    Always Övertäckningen är alltid synlig.
    On Hover Övertäckningen visas bara vid hovring.
    Never Show Övertäckningen är inte synlig.

    Du kan använda en övertäckning om du vill använda en bakgrundsfärg för det aktiva innehållsområdet som definieras av inställningen Appearance. Banderollens bakgrundsbild är fortfarande synlig för banderollens hela bredd.

    Om du väljer att visa en övertäckning anger du Overlay Color:

    • Klicka på färgrutan Ingen färg och välj en färgruta.
    • Ange ett giltigt färgnamn eller ett hexadecimalt värde i fältet Ingen färg.

    Övertäckningsfärg {width="600" modal="regular"}

  6. Klicka på Save i det övre högra hörnet för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.

    Banner med textmeddelande och knapp {width="600" modal="regular"}

Search Engine Optimization seo

Texten för de här inställningarna visas för sökmotorer och förbättrar indexeringen av sidan.

  • För Alternative Text anger du en alt-textbeskrivning för de digitala tillgänglighetsverktygen som ska visas.

    Alternativtext är en god hjälpmedelspraxis och krävs enligt lag i vissa språkområden. I HTML är attributet alt en delmängd av taggen image: <image title="tooltip" alt="description" src="image.jpg">.

  • För Title Attribute anger du den text som ska visas som ett verktygstips vid muspekaren.

    Det bästa sättet är att välja en beskrivande, nyckelordsrik titel som förbättrar hur bilden indexeras av sökmotorer. I HTML är attributet title en delmängd av taggen image: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  1. Om du vill styra den vågräta placeringen av innehållsbehållare som läggs till i banderollen väljer du en Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Alternativ Beskrivning
    Default Använder den standardinställning för justering som anges i formatmallen för det aktuella temat.
    Left Justerar innehållsbehållarna längs den vänstra kanten av banderollbehållaren, med hänsyn till eventuell utfyllnad som har angetts.
    Center Justerar innehållsbehållaren i mitten av banderollbehållaren, med hänsyn till eventuell utfyllnad som har angetts.
    Right Justerar innehållsbehållaren längs banderollbehållarens högra kant, med hänsyn tagen till eventuell utfyllnad som har angetts.
  2. Ange det Border-format som ska användas på alla fyra sidor i banderollbehållaren:

    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
    Alternativ Beskrivning
    Default Använder det standardkantlinjeformat som anges av den associerade formatmallen.
    None Visar inte någon synlig indikation för behållarkanterna.
    Dotted Behållarramen visas som en prickad linje.
    Dashed Behållarramen visas som en streckad linje.
    Solid Behållarramen visas som en heldragen linje.
    Double Behållarramen visas som en dubbel linje.
    Groove Behållarkanten visas som en utdragen linje.
    Ridge Behållarkanten visas som en rak linje.
    Inset Behållarramen visas som en indragen linje.
    Outset Behållarramen visas som en startrad.
  3. Om du anger ett annat kantlinjeformat än None fyller du i visningsalternativen för kantlinjen:

    • Border Color - Ange färgen genom att välja en färgruta, klicka på färgväljaren eller genom att ange ett giltigt färgnamn eller motsvarande hexadecimalt värde.

      Kantfärg {width="600" modal="regular"}

    • Border Width - Ange antalet pixlar för kantlinjens bredd.

    • Border Radius - Ange antalet pixlar för att definiera storleken på radien som används för att runda varje hörn av kanten.

  4. (Valfritt) Ange namnen på CSS classes från den aktuella formatmallen som ska användas för banderollbehållaren.

    Avgränsa flera klassnamn med blanksteg.

  5. Ange värden (i pixlar) för Margins and Padding för att ange banderollens yttre marginaler och inre utfyllnad.

    Ange varje motsvarande värde i bannerbehållardiagrammet.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Alternativ Beskrivning
    Margins Mängden tomt utrymme som används på ytterkanten på behållarens alla sidor.
    Padding Mängden tomt utrymme som används på behållarens inre kant på alla sidor.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d