DokumentationHandelPage Builder

Layout - rad

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 Rad för att lägga till en rad i Page Builder scenen.

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 Rad

Verktygslådan för raden visas när du hovrar över radbehållaren. Verktygslådan innehåller alternativ för att flytta, dölja, duplicera, redigera eller ta bort raden. Valet av inställningar avgör radens utseende, bakgrund och layout. Ytterligare innehållselement kan dras till raden från panelen Page Builder till vänster.

Verktygslådan Rad

Verktyg
Ikon
Beskrivning
Flytta
Ikonen Flytta {width="25"}
Flyttar raden till en annan position i förhållande till andra rader på scenen.
(etikett)
Row
Identifierar den aktuella innehållsbehållaren som en rad. Håll pekaren över behållaren för att visa verktygslådan.
Inställningar
Ikon för inställningar {width="25"}
Öppnar sidan Redigera rad, där du kan ändra egenskaperna för behållaren.
Dölj
Dölj ikon {width="25"}
Döljer den aktuella raden.
Visa
Visa ikon {width="25"}
Visar den dolda raden.
Duplicera
Duplicera ikon {width="25"}
Skapar en kopia av raden.
Ta bort
Ikonen Ta bort {width="25"}
Tar bort radbehå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 rad

  1. Dra en ny Row till scenen på panelen Page Builder under Layout, precis nedanför den första raden.

  2. Om du vill formatera raden för du muspekaren över radbehållaren för att visa verktygslådan och väljer ikonen Inställningar ( Inställningar-ikon {width="20"} ).

    I följande avsnitt finns detaljerad information om hur du fyller i de tillgängliga inställningarna.

    Lägger till en rad {width="600" modal="regular"}

Ändra radinställningar

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

    Verktygslådan Rad {width="600" modal="regular"}

  2. Använd följande avsnitt för detaljerad information om hur du uppdaterar de tillgängliga inställningarna.

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

Utseende

Använd inställningarna för Utseende för att bestämma hur innehåll visas på raden.

Utseendeinställningar

  • Om du vill bestämma hur bakgrundsfärgen och/eller bakgrundsbilden ska visas i förhållande till behållaren och bredden för innehållsområdet väljer du justeringen:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Alternativ Beskrivning
    Contained Bakgrundsfärgen eller bilden är begränsad till den maximala sidbredd som definieras av temat.
    Full Width Begränsar innehållet till den maximala sidbredd som definieras av temat. Bakgrundsfärgen och/eller bilden är inte begränsad och utökar radens hela bredd.
    Full Bleed Innehållet och bakgrundsbilden och/eller färgen är inte begränsade och radens fulla bredd utökas. Fullt utfall kan bara användas med teman som stöder layouten.

  • Ange Minimum Height för raden. Det här värdet kan vara ett tal med en giltig CSS-enhet (till exempel 100px, 50%, 50em, 100vh) eller en beräkning (till exempel 100vh - 237px).

    Du kan till exempel ange den minsta radhöjden för att sträcka ut hela sidhöjden, vilket ger dig övertygande alternativ för helsidesbakgrundsbilder och -videor.

  • Välj en Vertical Alignment-inställning om du vill justera alla innehållsbehållare som läggs till på raden (Överkant, Mitten eller Nederkant).

Bakgrund

Det finns många alternativ för att definiera hur en rad visas i bakgrunden. Du kan använda en enkel färg- eller bakgrundsbild och hantera mer avancerade effekter.

Bakgrundsfärg

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.

Ingen färg (standard)

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 .

Välja en färgruta

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.

Anger opacitet

NOTE
Page Builder har också stöd för ett genomskinlighetslager, eller alfakanal, i bakgrundsbilder som kan användas för att skapa bakgrunder med olika grad av opacitet.

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 bakgrundstyperna beskrivs nedan.

Bakgrundstyp

Inställningar för bildtyp

Om du ställer in Background Type ​på Image använder du följande inställningar för att definiera hur bakgrundsbilden ska visas.

Bakgrundsbild

  • Background Image - Om det behövs använder du de angivna verktygen för att välja en bakgrundsbild som ska användas på raden:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Alternativ Beskrivning
    Upload Överför en bildfil från den lokala datorn till galleriet och använder den sedan som bakgrundsbild för raden.
    Select from Gallery Uppmanar dig att välja en befintlig bild från galleriet som bakgrundsbild för raden.
    Kameraikon {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 radens bredd:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Alternativ Beskrivning
    Cover Bakgrundsbilden täcker radens hela bredd.
    Contain Bakgrundsbilden är begränsad till innehållsområdets bredd.
    Auto Använder storleken från den aktuella formatmallen.

    Bakgrundsstorlek {width="250"}

  • Background Position - Ange det här alternativet för att bestämma hur bakgrundsbilden är förankrad i förhållande till raden:

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Ankarpunkt Position
    Top Vänster / Mitten / Höger
    Center Vänster / Mitten / Höger
    Bottom Vänster / Mitten / Höger

    Fästpunkten är som ett push-stift som fäster bilden vid raden 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
    Scroll Den bifogade bakgrundsbilden synkroniseras så att den flyttas nedåt när sidan rullas. Använd Parallax-bakgrund för att styra rullningshastigheten.
    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 - Ange som Yes om du vill upprepa bakgrundsbilden för att fylla det tillgängliga utrymmet på raden.

Inställningar för videotyp

Om du anger bakgrundstypen till 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 (.mp4 rekommenderas): https://myvideos.com/spiral.mp4

    URL för bakgrundsvideo {width="300"}

  • Overlay Color - Välj en färg för att använda en genomskinlig färgton på videon.

  • Infinite Loop - Ange till No om du vill att videon ska spelas upp en gång och stoppas. När det här alternativet är inställt på Yes (standard) upprepas videon i en oändlig slinga.

  • Lazy Load - Ange som No om du vill att videon ska läsas in med sidan, även när den inte är synlig. När det här alternativet är inställt på Yes (standard) läses videon in från källan endast när den är synlig på skärmen.

  • Play Only When Visible - Ange till No om 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 det här alternativet är inställt på Yes (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.

Parallaxbakgrund

Använd de här alternativen om du vill styra hastigheten för en rullad bakgrundsbild eller -video i förhållande till sidans rullning. Bakgrunden kan ställas in så att den rullas långsammare för att skapa en känsla av nedsänkning.

  • Ange Aktivera parallaxbakgrund till Yes.
  • Ange Parallaxhastigheten som ett decimalvärde mellan -1.0 och 2.0.

Inställningar för parallaxbakgrund

Avancerat

  • Om du vill styra den vågräta placeringen av innehållsbehållare som läggs till på raden 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
    Default Använder den standardinställning för justering som anges i formatmallen för det aktuella temat.
    Left Justerar innehållsbehållarna längs radens vänstra kant, med hänsyn till eventuell utfyllnad som har angetts.
    Center Justerar innehållsbehållaren i mitten av radbehållaren, med hänsyn till eventuell utfyllnad som har angetts.
    Right Justerar innehållsbehållaren längs radens högra kant, med hänsyn till eventuell utfyllnad som har angetts.

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

    Raden i följande exempel har en kantradie på 15.

    Rad med kantradie på 15 {width="500"}

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

    Avgränsa flera klassnamn med blanksteg.

  • Ange värden (i pixlar) för Margins and Padding för att ange radens yttre marginaler och inre utfyllnad.

    Ange varje motsvarande värde i radbehå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. 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

    Marginaler och utfyllnad {width="600" modal="regular"}

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d