DokumentationHandelPage Builder

Elements - HTML-kod

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 HTML-kod för att lägga till kodfragment av HTML, CSS och JavaScript i Page Builder scenen. Du kan till exempel lägga till anpassad HTML och deklarera en CSS-klass som kan användas på ett element på sidan. Du kan också lägga till ett kodfragment för en logotyp, knapp eller banderoll som du har fått från en tredjepartsleverantör.

Verktygslådan HTML Code

Verktygslådan HTML-kod

Verktyg
Ikon
Beskrivning
Flytta
Ikonen Flytta {width="25"}
Flyttar kodbehållaren HTML till en annan giltig plats på sidan.
Inställningar
Ikon för inställningar {width="25"}
Öppnar sidan Redigera HTML-kod, där du kan ändra egenskaperna för behållaren.
Dölj
Dölj ikon {width="25"}
Döljer kodbehållaren HTML.
Visa
Visa ikon {width="25"}
Visar den dolda kodbehållaren HTML.
Duplicera
Duplicera ikon {width="25"}
Skapar en kopia av behållaren HTML Code.
Ta bort
Ikonen Ta bort {width="25"}
Tar bort kodbehållaren HTML 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ägg till HTML-kod

I följande exempel visas hur du bäddar in Google Font-kod och deklarerar anpassade rubrikklasser som åsidosätter den aktuella formatmallen.

Steg 1: Välj ett Google-teckensnitt

  1. Gå till webbplatsen Google Fonts och välj den teckensnittsfamilj som du vill använda.

  2. Kopiera den genererade koden som ska bäddas in i avsnittet <head> på sidan och klistra in den tillfälligt i en textredigerare.

    • Bädda in teckensnittskod
    • CSS-regel

  3. Lägg till regeln font-family för varje rubrikklass, som omger rubrikklasserna i en <style>-tagg.

    Den här koden klistras in i Page Builder.

    code language-html 
    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

Steg 2: Lägg till koden på sidan

  1. Gå till Content > Elements>Pages ​på sidofältet_ Admin _i din butik.

  2. Hitta sidan där teckensnittet ska vara tillgängligt och öppna den i redigeringsläge.

  3. Bläddra nedåt och expandera avsnittet Content.

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

    Använd den röda stödlinjen för att placera avgränsaren antingen före eller efter en annan innehållsbehållare i rad-, kolumn- eller tabbuppsättningen.

    Dra en platshållare för HTML-kod till scenen {width="600" modal="regular"}

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

  6. Klistra in den inbäddade Google Fonts-koden och de formatdeklarationer som du har förberett i textrutan.

    Om du vill göra det enklare att läsa kan du ange några mellanslag för indrag av koden.

    Kod och format för HTML {width="500" modal="regular"}

  7. Uppdatera de återstående inställningarna efter behov (mer information finns i Ändra kodinställningarna för HTML).

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

    Det nya teckensnittet återges när sidan visas via en webbläsare.

Steg 3: Förhandsgranska sidan

  1. I avsnittet Currently Active ​anger du Enable Page ​till Yes.

    Aktivera sidan {width="600" modal="regular"}

  2. Klicka på pilen Save i det övre högra hörnet och välj Save & Close.

  3. Hitta sidan i rutnätet och välj View i kolumnen Actions.

    Förhandsgranska sidrubrikerna med den nya teckensnittsfamiljen {width="700" modal="regular"}

Ändra kodinställningar för HTML html-settings

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

  2. Redigera koden i textrutan efter behov.

    HTML, CSS och JavaScript-kod stöds. Kodfragment som tillhör avsnittet <head> på sidan kan anges här.

    Redigeraren innehåller även knappar för att infoga specialelement i koden:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Knapp Beskrivning
    Infoga widget… Klicka för att infoga en widget vid markörens position i textrutan HTML.
    Infoga bild… Klicka för att infoga en överförd bild eller en bild från galleriet vid markörens position i textrutan HTML.
    Infoga variabel… Klicka för att infoga en variabel vid markörens position i textrutan HTML.

  3. Uppdatera inställningarna för Advanced ​efter behov.

    • Om du vill styra placeringen av koden i den överordnade behållaren väljer du en Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      Alternativ Beskrivning
      Default Använder den standardinställning för justering som anges i formatmallen för det aktuella temat.
      Left Justerar listan längs den vänstra kanten på den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts.
      Center Justerar listan i mitten av den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts.
      Right Justerar blocket längs den högra kanten på den överordnade behållaren, med hänsyn till eventuell utfyllnad som har angetts.

      I följande exempel ställs alternativen in på att använda en centrering för det återgivna kodblocket.

      Delare med centrering {width="600" modal="regular"}

    • Ange det Border-format som ska användas på alla fyra sidor i kodbehå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
      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:

      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 för behållaren.

      Avgränsa flera klassnamn med blanksteg.

    • Ange värden, i pixlar, för Margins and Padding för att fastställa den yttre marginalerna och den inre utfyllnaden för kodbehållaren.

      Ange motsvarande värden i diagrammet.

      table 0-row-2 1-row-2 2-row-2
      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