Media - bild
Använd innehållstypen Bild om du vill lägga till en JPG, GIF eller PNG-bild på Page Builder scenen. Förutom standardskrivbordsbilden kan du ange en sekundär bild för mobila enheter. Du kan också lägga till en bildtext som visas under bilden och länka bilden till en URL-adress, produkt, kategori eller sida.
Verktygslådan Bild
Verktygslådan för bilden visas när du hovrar över bildbehållaren.
{width="500" modal="regular"}
Lägga till en bild
-
Expandera Media på panelen Page Builder och dra en Image platshållare till målbehållaren.
Du kan lägga till en bild till en rad, kolumn eller tabb. I följande exempel dras bilden till en tom kolumn.
{width="600" modal="regular"}
-
Använd någon av följande metoder för att lägga till bildresursen:
{width="500" modal="regular"}
note note NOTE Den största filstorleken är 4 MB. Filtyper som stöds är JPG, GIF och PNG. -
Överför en ny bild : Använd den här metoden om du vill överföra en ny bildfil från datorn.
-
Klicka på Upload Image.
-
Leta upp och välj bilden som du vill lägga till i galleriet och målbehållaren.
Du kan också dra en bildfil från datorn och släppa den på ikonen Kamera ( {width="20"} ).
-
-
Välj en befintlig resurs : Använd den här metoden om du vill välja en befintlig bildresurs från medielagring/galleri.
-
Klicka på Select from Gallery.
-
Använd trädet för att navigera till bilden.
-
Klicka på miniatyrbilden och klicka på Add Selected.
{width="600" modal="regular"}
-
-
Sök efter och markera en Adobe Stock-bild : Använd den här metoden om du vill söka efter en bild från Adobe Stock.
note note NOTE Den här metoden kräver en Adobe Stock-integrering konfigurerad för din administratör. -
Klicka på Search Adobe Stock och sök efter en bild.
-
Spara förhandsvisningen eller den licensierade bilden i galleriet.
Mer information om hur du arbetar med Adobe Stock-resurser finns i Använda Adobe Stock-bilder.
-
Välj miniatyrbilden för resursen i galleriet och klicka på Add Selected.
-
Bilden visas i målbehållaren på platshållarplatsen. Till skillnad från en bakgrundsbild kan du flytta bilden till en annan plats i den aktuella behållaren eller till en annan behållare.
note note NOTE Innehållstyperna Banner och Slider innehåller även alternativen Överför bild och Välj från galleri för att lägga till bilder. {width="500" modal="regular"}
-
Ändra bildinställningar
-
Håll pekaren över bildbehållaren för att visa verktygslådan och välj ikonen Inställningar ( {width="20"} ).
Filnamnet, dimensionerna och filstorleken visas under den aktuella bilden.{width="600" modal="regular"}
-
Gör något av följande om du vill ändra aktuell Image:
-
Överför en ny bild : Använd den här metoden om du vill överföra en ny bildfil från datorn.
-
Klicka på Upload Image.
-
Leta upp och välj bilden som du vill lägga till i galleriet och målbehållaren.
-
-
Välj en befintlig resurs : Använd den här metoden om du vill välja en befintlig bildresurs från medielagring/galleri.
-
Klicka på Select from Gallery.
-
Använd trädet för att navigera till bilden.
-
Klicka på miniatyrbilden och klicka på Add Selected.
{width="600" modal="regular"}
-
-
Sök efter och markera en Adobe Stock-bild: Använd den här metoden om du vill söka efter en bild från Adobe Stock.
note note NOTE Den här metoden kräver en Adobe Stock-integrering konfigurerad för din administratör. -
Klicka på Search Adobe Stock och sök efter en bild.
-
Spara förhandsvisningen eller den licensierade bilden i galleriet.
Mer information om hur du arbetar med Adobe Stock-resurser finns i Använda Adobe Stock-bilder.
-
Välj miniatyrbilden för resursen i galleriet och klicka på Add Selected.
-
-
-
Om du vill lägga till en Mobile Image använder du samma metoder som beskrivs i föregående steg för att välja en bild som ska användas för visning på mobila enheter.
{width="600" modal="regular"}
-
Ange vid behov en Link för bilden.
Länken är den målsida som visas när kunden klickar på bilden. 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.
{width="600" modal="regular"}
-
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.
{width="600" modal="regular"}
-
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.
{width="600" modal="regular"}
Markera kryssrutan Open in new tab om du inte vill att besökaren ska kunna navigera bort från din butik. När kryssrutan är avmarkerad öppnas det länkade målet på samma webbläsarflik, som kan navigera besökaren bort från din butik.
-
-
Om du vill lägga till en Image Caption anger du texten som du vill ska visas under bilden.
Bildtextens format bestäms av den formatmall som är kopplad till det aktuella temat.
Bildtexten visas vanligtvis under bilden och ger information om bilden för besökare och sökmotorer. Om webbplatsen finns på flera språk kan du använda samma bild, men översätta bildtexten. I HTML är taggen
<figcaption>
en delmängd av taggen<figure>
.<figcaption>This is the image caption</figcaption>
-
Uppdatera övriga inställningar efter behov:
-
När du är klar klickar du på Save för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.
Flytta en bild
-
Håll pekaren över bildbehållaren för att visa verktygslådan och välj ikonen Flytta ( {width="20"} ).
{width="500" modal="regular"}
-
Markera och dra bilden till den nya positionen, precis nedanför den röda stödlinjen.
{width="500" modal="regular"}
Ta bort en bild
-
Håll pekaren över bildbehållaren för att visa verktygslådan och välj ikonen Ta bort ( {width="20"} ).
-
När du uppmanas att bekräfta klickar du på OK.
Sökmotoroptimering
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 bilderna som läggs till i behållaren väljer du 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 bildinnehållet längs den vänstra kanten av bildbehållaren, med hänsyn till eventuell utfyllnad som har angetts. Center
Justerar bildinnehållet i mitten av bildbehållaren, med hänsyn till eventuell utfyllnad som har angetts. Right
Justerar bildinnehållet längs den högra kanten av bildbehållaren, med hänsyn till eventuell utfyllnad som har angetts. -
Ange det Border-format som ska användas på alla fyra sidorna i bildbehå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:{width="600" modal="regular"}
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto Alternativ Beskrivning 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. Border Width Ange antalet pixlar för kantlinjens bredd. Border Radius Ange antalet pixlar för att definiera radiens storlek 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 i bildbehållaren.
Avgränsa flera klassnamn med blanksteg.
-
Ange värden (i pixlar) för Margins and Padding för att ange de yttre marginalerna och den inre utfyllnaden för bildbehållaren.
Ange varje motsvarande värde i bildbehållardiagrammet.
table 0-row-2 1-row-2 2-row-2 layout-auto Behållarområde 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.