DokumentationHandelPage Builder

Element - knappar

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Skapat för:

  • Nybörjare
  • Mellanliggande
  • Användare

Använd innehållstypen Knappar om du vill lägga till en enskild knapp eller en uppsättning knappar i Page Builder scenen. Du kan ordna knappar vågrätt eller lodrätt och lägga till dem direkt i rader, kolumner, flikar och banners på scenen.

Banderoll med en knapp på 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.

Verktygslådor

När du arbetar med innehållstypen Knappar lägger du till och redigerar enskilda knappar och knappbehållaren som innehåller en eller flera knappar. Var och en har en egen verktygslåda som du använder för att utforma knappar på scenen Page Builder.

Enskild knappverktygslåda

Knappverktygslådan

Verktyg
Ikon
Beskrivning
Inställningar
Ikon för inställningar {width="25"}
Öppnar sidan Redigera knapp där du kan ändra knappens egenskaper.
Duplicera
Duplicera ikon {width="25"}
Skapar en kopia av knappen.
Ta bort
Ikonen Ta bort {width="25"}
Tar bort knappen från scenen.

Verktygslåda för knappbehållaren

Knappbehållarverktygslådan

Verktyg
Ikon
Beskrivning
Flytta
Ikonen Flytta {width="25"}
Flyttar knappbehållaren till en annan giltig plats på sidan.
Lägg till
Lägg till ikon {width="25"}
Lägger till en knapp i behållaren.
(etikett)
Knapp
Anger den aktuella behållaren som ett knappelement.
Inställningar
Ikon för inställningar {width="25"}
Öppnar sidan Redigera knappar, där du kan ändra egenskaperna för behållaren.
Dölj
Dölj ikon {width="25"}
Döljer knappbehållaren.
Visa
Visa ikon {width="25"}
Visar den dolda knappbehållaren.
Duplicera
Duplicera ikon {width="25"}
Skapar en kopia av knappbehållaren.
Ta bort
Ikonen Ta bort {width="25"}
Tar bort knappbehållaren och dess innehåll från scenen.
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 enskild knapp

  1. Expandera Elements på panelen Page Builder och dra en Buttons platshållare till en rad, kolumn eller tabb på scenen.

    Dra en knapp till scenen {width="500" modal="regular"}

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

  3. Ange Button Text som ska visas på knappen.

    Grundläggande knappinställningar {width="600" modal="regular"}

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

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

    Exempel på primär och sekundär knapp {width="500" modal="regular"}

  5. Ange Button Link med någon av följande typer:

    • URL - Ange länkens mål-URL.

      URL:en kan antingen vara en relativ länk till en produkt eller sida i din butik, eller en fullständig URL.

      Exempel på relativ URL - ../luma-analog-watch.html

      Fullständigt URL-exempel - http://mystore.com/luma-analog-watch.html

      Om länken går till en annan webbplats kan du hålla den aktuella sidan öppen för din butik genom att öppna länken på en ny flik i webbläsaren.

      Markera kryssrutan Open in new tab om du vill hindra besökaren från att navigera utanför din butik.

    • Product - Ange ett produktnamn (delvis eller fullständigt) eller SKU, och välj sedan produktnamnet i listan.

      note note
      NOTE
      Produkterna visas i listan enligt inställningarna för Visa i lager. För flera Source-handlare som använder Inventory management begränsas produktlistan av den källa som är tilldelad standardwebbplatsen.

      Välja en produkt för knapplänken {width="600" modal="regular"}

    • Category - Ange ett kategorinamn (delvis eller fullständigt) eller klicka i det tomma fältet för att visa kategoriträdet. Välj sedan kategorinamnet i trädet.

      Välj en kategori för knapplänken {width="600" modal="regular"}

    • Page - Ange namnet på en CMS-sida (delvis eller fullständig) eller klicka i det tomma fältet för att visa den fullständiga listan. Välj sedan namnet på sidan i sökresultatlistan.

      Välj CMS-sida för knapplänken {width="600" modal="regular"}

  6. Slutför de avancerade inställningarna efter behov.

  7. När du är klar klickar du på Save i det övre högra hörnet för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.

Lägga till en uppsättning knappar

I följande avsnitt beskrivs en serie steg som börjar med en enskild knapp och skapar en uppsättning med tre knappar i en knappbehållare. Om du inte redan har en enskild knapp följer du de föregående instruktionerna för att lägga till en enskild knapp på scenen.

Steg 1: Skapa den andra knappen

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

    Lägger till en annan knapp {width="500" modal="regular"}

  2. Ange den text som du vill ska visas på den andra knappen.

  3. Klicka på den nya knappen för att visa dess verktygslåda och välj ikonen Inställningar ( Inställningar-ikon {width="20"} ).

    Redigera knappen {width="500" modal="regular"}

  4. Ange Button Type till Secondary.

  5. Konfigurera Button Link efter behov.

    I följande exempel är länken en relativ URL som går till sidan Kontakta oss.

    Knappinställningar för Kontakta oss {width="600" modal="regular"}

  6. Slutför de avancerade inställningarna 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.

Steg 2: Skapa den tredje knappen

  1. Klicka på den andra knappen igen på scenen och välj ikonen Duplicera ( Duplicera ikon {width="20"} ).

    Duplicera en knapp {width="500" modal="regular"}

  2. Ange den text som du vill ska visas på den tredje knappen.

  3. Klicka på den tredje knappen för att visa verktygslådan och välj ikonen Inställningar ( Inställningsikonen {width="20"} ).

    Verktygslåda för den tredje knappen {width="500" modal="regular"}

  4. Uppdatera Button Link efter behov.

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

Steg 3: Uppdatera knappbehållaren

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

    Knappbehållarverktygslådan {width="500" modal="regular"}

  2. Välj Stacked under Appearance.

  3. Ange All Buttons are same size till Yes.

    Staplade knappar med samma storlek {width="300"}

  4. Uppdatera de återstående inställningarna efter behov med hjälp av beskrivningarna från Ändra inställningarna för en knappbehållare.

  5. När du är klar klickar du på Save för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.

    Den fullständiga staplade knappuppsättningen visas på scenen, med en primär knapp och två sekundära knappar.

    Staplade knappar på scenen {width="500" modal="regular"}

Flytta en knapp

  1. Klicka på den knapp som du vill flytta.

  2. Markera och dra ikonen Flytta ( ikonen Flytta {width="20"} ), som visas precis före knapptexten, till en ny plats för knappen i knappbehållaren.

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

Ändra inställningar för en knapp

  1. Klicka på knappen på scenen för att visa verktygslådan och välj ikonen Inställningar ( Inställningar-ikon {width="20"} ).

    Knappverktygslådor {width="500" modal="regular"}

  2. Uppdatera standardinställningarna efter behov.

    • Button Text - Ange texten som ska visas på knappen (kan även uppdateras direkt från scenen).

    • Button Type - Anger knappformatet.

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Typ 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.

    • Button Link - Bestämmer målsidan som visas när någon klickar på knappen.

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      Alternativ Beskrivning
      URL Använder antingen en relativ eller fullständig URL-adress för att identifiera målsidan.
      Product Identifierar målsidan baserat på produktnamnet eller SKU:n. Du kan söka efter produktnamnet baserat på antingen ett partiellt eller fullständigt namn. Produkten väljs sedan i sökresultatlistan.
      Category Identifierar målsidan som en specifik kategori eller underkategori i kategoriträdet.
      Page Identifierar målsidan som en specifik CMS-sida.

  3. Slutför de avancerade inställningarna efter behov.

  4. Om du vill spara inställningarna och återgå till arbetsytan Page Builder klickar du på Save i det övre högra hörnet.

Ändra inställningar för en knappbehållare

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

  2. Uppdatera inställningarna för Appearance efter behov.

    • Använd ordningsalternativen för att visa knapparna antingen vågrätt eller lodrätt i behållaren:

      table 0-row-2 1-row-2 2-row-2 layout-auto
      Alternativ Beskrivning
      Inline Ordnar knapparna vågrätt.
      Stacked Ordnar knapparna lodrätt.

    • Ange alternativet All buttons are same size enligt dina önskemål.

      När värdet är Yes har alla knappar i behållaren en konsekvent storlek baserat på längden på den längsta knapptexten.

  3. Slutför de avancerade inställningarna efter behov.

  4. När du är klar klickar du på Save för att tillämpa inställningarna och återgå till arbetsytan i Page Builder.

Ändra avancerade inställningar

Du kan ändra Advanced-inställningarna för enskilda knappar och för knappbehållaren.

  1. Om du vill styra placeringen i den överordnade 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 innehållet längs den vänstra kanten av den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts.
    Center Justerar innehållet i mitten av den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts.
    Right Justerar innehållet längs den högra kanten av den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts.

  2. Ange det Border-format som ska användas på alla fyra sidor av knappbehållaren eller knappbehå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:

    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.

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

    Avgränsa flera klassnamn med blanksteg.

  5. Ange värden, i pixlar, för Margins and Padding för att bestämma de yttre marginalerna och den inre utfyllnaden för knappbehållaren eller knappbehållaren.

    Ange motsvarande värden i diagrammet.

    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. Alternativ: Top / Right / Bottom / Left
    Padding Mängden tomt utrymme som används på behållarens inre kant på alla sidor. Alternativ: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d