Kako ustvariti gradientne razdelilnike v Divi

Rifat Divi Tutorials Jul 1, 2024

Divi , priljubljena tema WordPress, je znana po svojih vsestranskih modulih, ki oblikovalcem in razvijalcem spletnih strani omogočajo ustvarjanje osupljivih postavitev brez truda. Med njegovim impresivnim arzenalom modulov Divi Divider Module izstopa kot edinstveno orodje, ki uporabnikom omogoča izdelavo privlačnih razdelilnikov. V tej objavi v spletnem dnevniku se bomo poglobili v očarljiv svet gradientnih delilnikov in raziskali, kako lahko izkoristite Divi Divider Module, da izboljšate svoje dizajne. Podrobneje si bomo ogledali, kako delujejo gradientni delilniki, in vam ponudili navdihujoče primere, ki bodo spodbudili vašo ustvarjalnost.

Predogled

Tukaj je predogled, kako bo naš gradientni dizajn videti na koncu.

Kako ustvariti gradientne delilnike z razdelilnim modulom Divi

Obstaja več metod za izdelavo delilnika z Divi-jevim razdelilnim modulom. Modul privzeto prikazuje črto kot ločnico. Vendar pa je mogoče to vrstico deaktivirati in uporabiti nastavitve ozadja modula za ustvarjanje ločnice, ki jo je mogoče prilagoditi z različnimi možnostmi ozadja, kot so barve, prelivi, slike in drugo. Namesto da bi prikazali dejanski razdelilnik, se bomo osredotočili na oblikovanje vsebnika razdelilnika, da ustvarimo edinstveno oblikovan razdelilnik.

Skrij razdelilnik

Postopek je enostaven. Svoji postavitvi najprej dodajte razdelilni modul, nato pa pod zavihkom z vsebino prikrijte ločilnik.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Ozadje razdelilnika

Nato v meniju z nastavitvami ozadja na zavihku Vsebina izberite vrsto ozadja, ki ga želite uporabiti. V tej objavi se bomo osredotočili na možnosti preliva ozadja.

Dodajte velikost in razmik

Če želite ustvariti eleganten razdelilnik skoraj katere koli velikosti ali oblike, uporabite možnosti Velikost in razmik na zavihku Oblikovanje, da prilagodite višino in širino vsebnika razdelilnika. Če želite ustvariti želeno velikost, uporabite širino in višino, največjo širino in največjo višino, poravnavo modula ter zgornje in spodnje oblazinjenje.

Dodajte polmer obrobe

Za dodatno oblikovanje oblike dodajte možnosti obrobe, kot je Border Radius. Vogale je mogoče prilagoditi skupaj ali ločeno, da ustvarite fascinantne oblike. Za poseben dizajn lahko dodatno dodate Border Width, Styles itd.

Gradientni razdelilnik

Uporabili bomo ciljno stran iz brezplačnega paketa Home Baker Layout Pack , vključenega v Divi, za naš prvi gradientni razdelilnik. Umetniško delo tega paketa postavitve vsebuje rjave prelive in mogočne temne obrise. To bomo posnemali z našim prelivom z uporabo barvne palete paketa postavitve. Za našo prvo ilustracijo bomo uporabili modul Divider, ki je že prisoten v razdelku junakov. Ta je preprosta, vendar ima velik vizualni učinek. Tukaj je postavitev, preden smo za referenco dodali razdelilni modul.

Vidnost

Izberite Ne za Show Divider pod možnostmi vidnosti za modul Divider.

  • Pokaži razdelilnik: št

Gradient

Izberite zavihek Preliv ozadja, tako da se pomaknete navzdol do možnosti Ozadje. Temu bomo dodali pet gradientnih postaj. Uporabljene bodo privzete vrednosti za druge parametre gradienta. Parametri za vsak gradient stop so navedeni spodaj.

  • Prva stopnja gradienta: 0px, #dcc087
  • Drugi preliv: 16 slikovnih pik, #e6b060
  • Tretji preliv: 22 slikovnih pik, #f19d33
  • Četrti preliv: 31 slikovnih pik, #f49826
  • Peta stopnja preliva: 48 slikovnih pik, #3b261e

Piksle je treba uporabiti kot gradientno enoto. Barve, ki smo jih iskali, so zdaj na voljo. Vse, kar morate storiti, je optimizirati velikost.

  • Enota gradienta: slikovne pike

Dimenzioniranje

Nato izberite zavihek Oblikovanje. Vnesite 100 % za Width pod Sizing. Vse tri velikosti naprav morajo imeti višino nastavljeno na 40 slikovnih pik. Modularno zapiranje bo shranilo vaše nastavitve.

  • Širina: 100%
  • Višina: 40 slikovnih pik

Končni predogled

Zdaj imamo tukaj končni predogled našega gradientnega dizajna v akciji.

Zaključek misli

To zaključuje našo razpravo o uporabi razdelilnega modula Divi za izdelavo gradientnih delilnikov. Če želite izdelati gradientne delilnike po meri, uporabite možnost gradienta v razdelilnem modulu. Gradientne delilnike lahko izdelamo v različnih velikostih in oblikah z uporabo robnih kotov, razmikov in možnosti velikosti. Oblikujemo lahko značilne gradientne razdelilnike, ki bodo izstopali iz množice z le nekaj osnovnimi izbirami.

Divi WordPress Theme