Rader är de olika kolumnarrangemang som kan placeras inuti sektioner. Precis som moduler har rader olika inställningar som kan nås genom att klicka på inställningsikonen längst upp till vänster på raden. I den här handledningen kommer vi att gå över några av funktionerna och hur de kan användas för att skapa några mycket unika layouter. Särskilt linjeinställningar kan användas för att avsevärt öka variationen av layouter som skapas med Divi Builder, eftersom de skapar strukturen där dina moduler är värd.

linjemodul divi builder.png

inställningsparametrar rad divi.png

Innehållsinställningar

Bakgrundsfärg

Bakgrundsbilder kan appliceras på en hel rad. Som standard har raderna en transparent bakgrundsfärg.

Bakgrundsbild

Bakgrundsbilder kan appliceras på en hel rad.

MP4 bakgrundsvideo

den vidéos bakgrunder kan appliceras på linjer. Om du vill använda bakgrundsvideo måste du ladda upp MP4- och WEBM-video och ange vidéos här.

Webbbakgrundsvideo

den vidéos bakgrunder kan appliceras på linjer. Om du vill använda bakgrundsvideo måste du ladda ner MP4- och WEBM-video och ange videorna här.

Bakgrundsvideobredd

När dina videoklipp har laddats upp måste du ange bredden på din video här. Det måste vara lika med videons faktiska bredd, annars är bakgrundens position felaktig.

Bakgrundsvideoens höjd

När dina videoklipp har laddats upp måste du ange höjden på din video här. Det måste vara lika med videons faktiska höjd, annars är bakgrundspositionen felaktig.

Videopaus

Om du vill att videor ska pausa vid klickning aktiverar du det här alternativet.

Kolumnens bakgrundsfärg

För varje kolumn i rad kan du tilldela en unik bakgrundsfärg.

Kolumn bakgrundsbild

För varje kolumn i rad kan du tilldela en unik bakgrundsbild.

Admin-etikett

Detta kommer att ändra moduletiketten i generatorn för enkel identifiering. När du använder WireFrame-vyn i Visual Builder, kommer dessa etiketter att visas i modulblocket i gränssnittet Divi Byggare.

seciton design divi builder.png

Designparametrar

Använd parallaxeffekten

Om du vill använda parallaxeffekt för din bakgrundsbild på linjen kan du aktivera här och sedan välja den parallaxmetod du vill ha.

Kolumnparallax effekt

Här kan du välja om du vill använda parallaxeffekten för bakgrundsbilden för en viss kolumn i din rad.

Gör den här linjen full bredd

Om det här alternativet är aktiverat sträcker sig raden över webbläsarfönstrets fulla bredd (liknar ett avsnitt med full bredd). Detta är ett utmärkt sätt att skapa några häftiga kolumnlayouter i full bredd.

Använd anpassad bredd

Du kan också tilldela en linje en anpassad bredd. Om du till exempel vill lägga till variation i sidflödet och göra en rad större än resten kan du ange ett anpassat breddvärde här

Använd den anpassade rännbredden

Rännans bredd bestämmer avståndet mellan pelarna. Det finns 4 rännstorlekar, från 0. Den definition Om du ställer in rännans bredd till 1 kommer det inte att resultera i några mellanrum mellan kolumnerna. När det kombineras med alternativet Full Width kan detta skapa effekter som liknar modulen Portfolio Full Screen.

Utjämna kolumnhöjder

Detta är ett bra alternativ, särskilt användbart när du har applicerat bakgrundsfärger på enskilda kolumner. Om du aktiverar detta alternativ tvingas alla kolumner i raden att ha samma höjdvärde.

Anpassad stoppning

Om du vill justera fyllningen av linjen kan du göra det här.

Anpassad marginal

Om du vill justera marginalen på linjen kan du göra det här.

Anpassad kolumnstoppning

Om du vill justera stoppningen för en viss kolumn i din rad kan du göra det här.

Anpassad kolumnmarginal

Om du vill justera marginalen för en viss kolumn i din rad kan du göra det här.

förhandsalternativ kolumn divi.png

Avancerade inställningar

CSS ID

Du kan tilldela raden ett CSS-ID om du vill rikta in det i ditt formatmall eller med ankarlänkar.

CSS klass

Du kan tilldela en CSS-klass till raden om du vill rikta in den på ditt formatmall.

CSS kolumn ID

Du kan tilldela ett CSS-ID till en viss kolumn i din rad om du vill rikta in det i ditt formatmall eller med ankarlänkar.

CSS klasskolumn

Du kan tilldela en CSS-klass till en specifik kolumn i din rad om du vill rikta in den på ditt formatmall.

före

CSS-post här för att tillämpa: innan huvudlinjen div.

Huvudelement

CSS-post här för att gälla huvudlinjedivisionen.

Efter

CSS-post här för att gälla: efter huvudlinjens div.

Främre kolumnen

Ange CSS här för att tillämpa: innan den angivna kolumnavdelningen.

Huvudkolumnelement

Ange CSS här för att applicera på den angivna div-kolumnen.

Kolumn efter

CSS-post här för att tillämpa: efter den angivna div-kolumnen.

synlighet

Med det här alternativet kan du styra enheterna där din linjemodul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika moduler på olika enheter eller om du vill förenkla mobildesignen genom att eliminera vissa element från sidan.

Att sätta handledningen i praktiken

Nu när vi har gått igenom alla inställningar, låt oss testa några för att visa dig vad som är möjligt när varje inställning används kreativt. I det här exemplet täcker jag inställningen för helskärmsrad som en introduktion. Alternativet att skapa en "Full Screen" -rad är ett av de mest mångsidiga alternativen i uppsättningen. Detta kommer att förlänga linjens bredd till webbläsarens kant, liknar en sektion med helskärm (eller fullbredd). Till skillnad från ett avsnitt med full bredd kan dock fullbreddsrader ha kolumnstrukturer och innehålla valfri modul! I exemplet nedan har jag skapat en rad med fyra kolumner och lagt till en fyrkantig bild i varje kolumn. Därefter aktiverade jag "Gör denna rad till full bredd" för att förlänga raden till kanterna i webbläsarfönstret.

exempel design divi.jpg

Sedan reducerade jag "Gutter" -storleken till "1" för att ta bort avståndet mellan kolumnerna i raden.

avlägsna mellanslag mellan kolumner divi.jpg

Slutligen tog jag bort stoppningen över och under raden genom att ändra topp- och bottenvärdena med alternativet "Anpassad fyllning" till "0".
modifiering av fyllningen.jpg

Resultatet är en fullständig radtransformation, som förvandlar vår normala rad med fyra kolumner med bilder till ett fullblodsgalleri som ser fantastiskt ut jämfört med det gröna avsnittet nedan. Samma effekt kan också skapas med hjälp av anpassade kolumnbakgrundsfärger och textbaserade mods. Möjligheterna är obegränsade!