Gå till innehållet

Så här konfigurerar du linjer på Divi Builder

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Rader är de olika kolumnlayouterna som kan placeras i sektioner. Precis som modulerna har raderna olika parametrar tillgängliga genom att klicka på parameterikonen längst upp till vänster på raden. I den här handledningen går vi igenom några av funktionerna och hur de kan användas för att skapa mycket unika layouter. I synnerhet radinställningar kan användas för att avsevärt öka mångfalden av layouter som skapats 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

Bakgrundsvideor kan appliceras på linjer. Om du vill använda bakgrundsvideo måste du ladda ner MP4 och WEBM-video och ta tag i videorna här.

Webbbakgrundsvideo

Bakgrundsvideor kan appliceras på linjer. Om du vill använda bakgrundsvideo måste du ladda ner MP4 och WEBM-video och ta tag i 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 ändrar moduletiketten i generatorn för enkel identifiering. När du använder WireFrame-vyn i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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 reglerar avståndet mellan kolumnerna. Det finns fyra rännstorlekar, med början från 4. Om du ställer in rännbredden på 0 kommer det inte att leda till några mellanrum mellan kolumnerna. I kombination med alternativet Full bredd kan detta skapa effekter som liknar helskärmsportföljmodulen.

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.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
6 aktier
del2
tweet1
Enregistrer3