Media - banderoll
Använd innehållstypen Banner för att lägga till en illustrerad, interaktiv komponent som engagerar användare med en call to action och en knapp på Page Builder scenen.
Banderollverktygslåda
Banderollverktygslådan visas när du hovrar över banderollbehållaren.
Lägg till en banderoll
-
Expandera Page Builder på panelen Media 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 CoverBakgrundsbilden täcker banderollens hela bredd. ContainBakgrundsbilden är begränsad till innehållsområdets bredd. AutoAnvä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 TopVänster / Mitten / Höger CenterVänster / Mitten / Höger BottomVä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 ScrollDen 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 (
.mp4rekommenderas):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
Noom 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
Noom 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
Noom 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 AlwaysEn knapp visas alltid på banderollen. On HoverEn knapp visas bara på banderollen när du hovrar. Never ShowEn 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 PrimaryAnvänder det primära knappformatet från den aktuella formatmallen. SecondaryAnvänder det sekundära knappformatet från den aktuella formatmallen, om tillämpligt. LinkSkapar 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
alten 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
titleen 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 DefaultAnvänder den standardinställning för justering som anges i formatmallen för det aktuella temat. LeftJusterar innehållsbehållarna längs den vänstra kanten av banderollbehållaren, med hänsyn till eventuell utfyllnad som har angetts. CenterJusterar innehållsbehållaren i mitten av banderollbehållaren, med hänsyn till eventuell utfyllnad som har angetts. RightJusterar 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 DefaultAnvänder det standardkantlinjeformat som anges av den associerade formatmallen. NoneVisar inte någon synlig indikation för behållarkanterna. DottedBehållarramen visas som en prickad linje. DashedBehållarramen visas som en streckad linje. SolidBehållarramen visas som en heldragen linje. DoubleBehållarramen visas som en dubbel linje. GrooveBehållarkanten visas som en utdragen linje. RidgeBehållarkanten visas som en rak linje. InsetBehållarramen visas som en indragen linje. OutsetBehållarramen visas som en startrad. -
Om du anger ett annat kantlinjeformat än
Nonefyller 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.