Layout - rad

Använd Rad innehållstyp för att lägga till en rad i Page Builder stage.

NOTE
Om du gör betydande ändringar i Page Builder rekommenderar vi att du ökar Löptid för administratörssession för att förhindra att sessionen tajmar ut medan 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 Page Builder till vänster.

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

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
Ikonen 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. I Page Builder panel under Layout, dra en ny Row ​till scenen, precis nedanför den första raden.

  2. Om du vill formatera raden håller du pekaren över radbehållaren för att visa verktygslådan och väljer alternativet Inställningar ( Ikonen Inställningar {width="20"} ).

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

    Lägga 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 Inställningar ( Ikonen Inställningar {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 använda inställningarna och gå tillbaka till Page Builder arbetsyta.

Utseende

Använd Utseende inställningar som bestämmer hur innehållet visas på raden.

Utseendeinställningar {width="600" modal="regular"}

  • 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. Fullständigt utfall kan endast användas med teman som stöder layouten.
  • Ange Minimum Height för raden. Det här värdet kan vara ett tal med valfri giltig CSS-enhet (t.ex. 100px, 50%, 50em, 100vh) eller en beräkning (som 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 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) {width="200"}

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
  • rgba-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 Ingen färg box.

Välja en färgruta {width="600" modal="regular"}

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.

Ange opacitet {width="600" modal="regular"}

NOTE
Page Builder har även stöd för genomskinliga lager, eller alfakanal, i bakgrundsbilder som kan användas för att skapa bakgrunder med varierande grad av opacitet.

Background Type

En bakgrundstyp kan vara en bild eller en video. Page Builder standardvärdet är Image och visar olika bildinställningar. Om du väljer Video, Page Builder byter ut bildinställningarna mot videoinställningarna. Båda bakgrundstyperna beskrivs nedan.

Bakgrundstyp {width="200"}

Inställningar för bildtyp

Om du anger Background Type ​till Imageanvänder du följande inställningar för att definiera hur bakgrundsbilden ska visas.

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

  • Background Image - Använd vid behov de medföljande 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 om du vill ange hur bakgrundsbilden ska skalförändras i förhållande 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 om du vill ange hur bakgrundsbilden ska förankras 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 ut det tillgängliga utrymmet på raden.

Inställningar för videotyp

Om du anger Bakgrundstyp till Videoanvä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-videor: 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 som du vill använda en genomskinlig färgton på videon.

  • Infinite Loop - Ange som No för att få videon att spelas upp en gång och stoppa. När det här alternativet är inställt på Yes (standard) upprepas videon i en oändlig slinga.

  • Lazy Load - Ange som No för att göra så att videon läses in med sidan, även när den inte syns. När det här alternativet är inställt på Yes (standard) läses videon bara in från källan när den visas på skärmen.

  • Play Only When Visible - Ange som No för att få videon att 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) spelas videon bara upp 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 Parallaxhastighet som ett decimalvärde mellan -1.0 och 2.0.

Inställningar för parallaxbakgrund {width="600" modal="regular"}

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 Border format som används 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 Noneslutför du visningsalternativen för kantlinjer:

    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 om du vill ange de yttre marginalerna och den inre utfyllnaden för raden.

    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