Rækker er de forskellige søjlearrangementer, der kan placeres inde i sektioner. Ligesom moduler har rækker forskellige indstillinger, som du kan få adgang til ved at klikke på indstillingsikonet øverst til venstre i rækken. I denne vejledning vil vi gennemgå nogle af funktionerne, og hvordan de kan bruges til at skabe nogle meget unikke layouts. Linjeindstillinger kan især bruges til i høj grad at øge mangfoldigheden af layouts oprettet med Divi Builder, fordi de skaber den struktur, som dine moduler hostes i.
Indholdsindstillinger
Baggrundsfarve
Baggrundsbilleder kan anvendes på en hel række. Som standard har linjerne en gennemsigtig baggrundsfarve.
Baggrundsbillede
Baggrundsbilleder kan anvendes på en hel række.
MP4 baggrundsvideo
De videoer baggrunde kan anvendes på linjer. Hvis du vil anvende baggrundsvideo, skal du uploade MP4- og WEBM-video og indtaste videoer her.
Webbaggrundsvideo
De videoer baggrunde kan anvendes på linjer. Hvis du vil anvende baggrundsvideo, skal du downloade MP4- og WEBM-video og indtaste videoerne her.
Baggrundsvideobredde
Når dine videoer er uploadet, skal du indtaste bredden på din video her. Det skal være lig med den faktiske bredde på videoen, ellers vil baggrundens placering være forkert.
Baggrundsvideoens højde
Når dine videoer er uploadet, skal du indtaste din videohøjde her. Det skal være lig med den faktiske højde af videoen, ellers vil baggrundspositionen være forkert.
Videopause
Hvis du vil have videoer til at stoppe, når der klikkes, skal du aktivere denne indstilling.
Kolonnens baggrundsfarve
For hver kolonne i træk kan du tildele en unik baggrundsfarve.
Kolonne baggrundsbillede
For hver kolonne i træk kan du tildele et unikt baggrundsbillede.
Admin-etiket
Dette vil ændre modulmærket i generatoren for nem identifikation. Når du bruger WireFrame-visningen i Visual Builder, vil disse etiketter vises i modulblokken på grænsefladen Divi Bygger.
Designparametre
Brug parallax-effekten
Hvis du vil bruge parallax-effekt til dit linjebaggrundsbillede, kan du aktivere her og derefter vælge den parallax-metode, du ønsker.
Kolonneparallax effekt
Her kan du vælge, om du vil bruge parallakseffekten til baggrundsbilledet for en bestemt kolonne i din række.
Gør denne linje fuld bredde
Hvis denne indstilling er aktiveret, spænder linjen over hele browservinduets bredde (svarende til en sektion i fuld bredde). Dette er en fantastisk måde at oprette nogle seje kolonnelayouts i fuld bredde på.
Brug brugerdefineret bredde
Du kan også tildele en tilpasset bredde til en linje. Hvis du f.eks. Vil tilføje variation til sidefeed og gøre en række større end resten, kan du indtaste en brugerdefineret breddeværdi her
Brug den tilpassede tagrendebredde
Tagrendens bredde bestemmer afstanden mellem søjlerne. Der er 4 tagrendestørrelser, startende fra 0. Den definition indstilling af tagrendens bredde til 1 vil resultere i, at der ikke er mellemrum mellem søjlerne. Når det kombineres med Full Width-indstillingen, kan dette skabe effekter, der ligner Portfolio Full Screen-modulet.
Udligne kolonnehøjder
Dette er en god mulighed, især nyttig, når du har anvendt baggrundsfarver til individuelle kolonner. Aktivering af denne indstilling tvinger alle kolonner i rækken til at have den samme højdeværdi.
Brugerdefineret polstring
Hvis du vil justere linjens udfyldning, kan du gøre det her.
Brugerdefineret margen
Hvis du vil justere margen på linjen, kan du gøre det her.
Brugerdefineret kolonnepolstring
Hvis du vil justere polstringen af en bestemt kolonne i din række, kan du gøre det her.
Tilpasset kolonnemargin
Hvis du vil justere margenen for en bestemt kolonne i din række, kan du gøre det her.
Avancerede indstillinger
CSS ID
Du kan tildele rækken et CSS-ID, hvis du vil målrette det i dit typografiark eller med ankerlink.
CSS klasse
Du kan tildele en CSS-klasse til linjen, hvis du vil målrette den på dit typografiark.
CSS kolonne ID
Du kan tildele et CSS-ID til en bestemt kolonne i din række, hvis du vil målrette det i dit typografiark eller med ankerlink.
CSS klassesøjle
Du kan tildele en CSS-klasse til en bestemt kolonne i din række, hvis du vil målrette den på dit typografiark.
Før
CSS-post her for at gælde: inden hovedlinjediv.
Hovedelement
CSS-post her for at gælde for hovedlinjedivisionen.
Efter
CSS-post her for at anvende: efter hovedlinjediv.
Front kolonne
Indtast CSS her for at anvende: inden den specificerede kolonnediv.
Hovedkolonneelement
Indtast CSS her for at anvende til den specificerede div-kolonne.
Kolonne efter
CSS-post her for at anvende: efter den specificerede div-kolonne.
synlighed
Denne mulighed giver dig mulighed for at styre de enheder, som dit linjemodul vises på. Du kan vælge at deaktivere dit modul på tablets, smartphones eller desktops individuelt. Dette er nyttigt, hvis du vil bruge forskellige mods på forskellige enheder, eller hvis du vil forenkle mobildesignet ved at fjerne visse elementer fra siden.
At sætte tutorialen i praksis
Nu hvor vi har gennemgået alle indstillingerne, lad os teste et par for at vise dig, hvad der er muligt, når hver indstilling bruges kreativt. I dette eksempel dækker jeg indstillingen Fuld skærmrække som en introduktion. Muligheden for at oprette en "Fuld skærm" -række er en af de mest alsidige muligheder i sættet. Dette vil udvide linjens bredde til kanten af browseren, svarende til en sektion med fuld skærm (eller fuld bredde). I modsætning til en sektion med fuld bredde kan dog FullWidth-rækker have kolonnestrukturer og kan indeholde ethvert modul! I eksemplet nedenfor har jeg oprettet en række med 4 kolonner og tilføjet et kvadratisk billede til hver kolonne. Dernæst aktiverede jeg "Make this line full width" for at udvide linjen til kanterne i browservinduet.
Derefter reducerede jeg "Gutter" -størrelsen til "1" for at fjerne afstanden mellem kolonnerne i rækken.
Endelig fjernede jeg fyldet over og under linjen ved at ændre top- og bundværdierne med en "Custom Fill" -mulighed til "0".
Resultatet er en komplet række transformation, der omdanner vores normale række med 4 kolonner med billeder til et fuldt bredt, blødt billedgalleri, der ser fantastisk ud i forhold til det grønne afsnit nedenfor. Den samme effekt kan også oprettes ved hjælp af brugerdefinerede kolonnebaggrundsfarver og tekstbaserede mods. Mulighederne er ubegrænsede!
