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.
Banderollverktygslåda
Banderollverktygslådan visas när du hovrar över banderollbehållaren.
Lägg till en banderoll
-
Expandera Media på panelen Page Builder och dra en Banner platshållare 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.
-
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
-
Håll pekaren över banderollbehållaren för att visa verktygslådan och välj ikonen Inställningar ( ).
-
Använd följande avsnitt för detaljerad information om hur du uppdaterar de tillgängliga inställningarna:
-
När du är klar klickar du på Save i det övre högra hörnet för att stänga sidan Edit Banner.
-
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. {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 exempel100vh - 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.
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 .
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.
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.
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.
-
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. {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. {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
{width="200"}
- YouTube-videofilmer:
-
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 ärYes
(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 ärYes
(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 ärYes
(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
-
Klicka på platshållartexten och ange den text som du vill ska visas på banderollen.
Redigeringsverktygsfältet visas ovanför textrutan.
{width="600" modal="regular"}
-
Använd redigerarens verktygsfält för att ange och formatera text samt infoga element som länkar, bilder och widgetar.
{width="600" modal="regular"}
Komplext innehåll i inställningarna
-
Håll pekaren över banderollbehållaren för att visa verktygslådan och välj ikonen Inställningar ( {width="25"} ).
-
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.
{width="600" modal="regular"}
-
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. {width="200"} -
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.
{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.
-
-
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.
{width="600" modal="regular"}
-
Klicka på Save i det övre högra hörnet för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.
{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 taggenimage
:<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 taggenimage
:<image title="tooltip" alt="description" src="image.jpg">
.
Advanced
-
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. -
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. -
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.
{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.
-
-
(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.
-
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.