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.

TIP
Du kan använda Adobe Stock Integration för att hitta och spara en lämplig resurs bland de miljontals som tillhandahålls av Adobe Stock. Mer information om hur du söker efter, finjusterar och sparar Adobe Stock-resurser i ditt galleri finns i Använda Adobe Stock-bilder .
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.

Verktygslådan Bild

Verktygslådan för bilden visas när du hovrar över bildbehållaren.

Verktygslådan Bild

Verktyg
Ikon
Beskrivning
Flytta
Ikonen Flytta {width="25"}
Flyttar bilden till en annan plats på scenen.
(etikett)
Bild
Identifierar den aktuella innehållsbehållaren som en bild. Håll pekaren över bildbehållaren för att visa verktygslådan.
Inställningar
Ikon för inställningar {width="25"}
Öppnar sidan Redigera bild där du kan ändra egenskaperna för bilden och behållaren.
Dölj
Dölj ikon {width="25"}
Döljer den aktuella bilden.
Visa
Visa ikon {width="25"}
Visar den dolda bilden.
Duplicera
Duplicera ikon {width="25"}
Skapar en kopia av bilden.
Ta bort
Ikonen Ta bort {width="25"}
Tar bort bilden från scenen.
Överför ny bild
Överför en bild från det lokala filsystemet till galleriet.
Välj från galleri
Väljer en befintlig bild från galleriet.
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ägga till en bild

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

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

  2. Använd någon av följande metoder för att lägga till bildresursen:

    Överför bild eller Välj från galleriverktyg på scenen {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 ( Kameraikon {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.

        Lägger till en markerad bild {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.

    Bild i en kolumn {width="500" modal="regular"}

Ändra bildinställningar

  1. Håll pekaren över bildbehållaren för att visa verktygslådan och välj ikonen Inställningar ( Inställningar-ikon {width="20"} ).
    Filnamnet, dimensionerna och filstorleken visas under den aktuella bilden.

    Aktuell bild {width="600" modal="regular"}

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

        Lägger till en markerad bild {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.

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

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

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

      Välja en produkt som ska länkas {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.

      Välj en kategori att länka {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.

      Välja en sida som ska länkas {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.

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

  6. Uppdatera övriga inställningar efter behov:

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

  1. Håll pekaren över bildbehållaren för att visa verktygslådan och välj ikonen Flytta ( Flytta {width="20"} ).

    Flytta en bild {width="500" modal="regular"}

  2. Markera och dra bilden till den nya positionen, precis nedanför den röda stödlinjen.

    Använda den röda stödlinjen för att placera bilden {width="500" modal="regular"}

Ta bort en bild

  1. Håll pekaren över bildbehållaren för att visa verktygslådan och välj ikonen Ta bort ( Ta bort ikon {width="20"} ).

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

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

    Kantfärg {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.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d