Kako oblikovati interaktivno lebdečo mrežo z Divi

Rifat Divi Tutorials Mar 1, 2022

Ljudje imajo raje spletna mesta za interaktivno oblikovanje. Divi nam daje možnost, da oblikujemo vse, kar se lahko spremeni z interakcijo z uporabnikom, in takšni dizajni so trenutno zelo priljubljeni. Danes bomo korak za korakom videli, kako oblikovati brezhibno lebdečo mrežo z Divijem , kjer bo na začetku postavitev mreže s preprostim naslovom, lebdenje nad bloki mreže pa bo spremenilo slog, slika ozadja pa bo lebdela.

Torej začnimo brez odlašanja.

Predogled oblikovanja

Preden začnemo z današnjo vadnico, poglejmo, kako bo videti naš rezultat oblikovanja.

1. del: Izgradnja strukture

Nastavitve razdelka

Barva ozadja

Ko gremo v Divi Builder, da naredimo novo zasnovo, se odsek na začetku samodejno ustvari. Spremenimo nastavitve tega razdelka, kot sledi.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj
  • Barva ozadja: #ffffff

Dodajte: vrstico 1 v razdelek

Struktura stolpcev

Zdaj dodajte vrstico s 4 stolpci v razdelek.

Dimenzioniranje

Velikost te vrstice bomo spremenili iz nastavitev brez dodajanja ločenih modulov.

  • Uporabite širino žleba po meri: Da
  • Širina žleba: 1
  • Širina: 100%
  • Največja širina: 1000 x 025

Razmik

Zdaj bomo dodali zahtevano vrednost razmika.

  • Zgornje oblazinjenje: 0px
  • Spodnje odmikanje: 0px

Meja

Zunanje delo oblikovalskega dela vrstice bomo zaključili tako, da tej vrstici dodamo obrobo in barvo.

  • Zgornja & Širina spodnje obrobe: 1px
  • Zgornja & Barva spodnje obrobe: #d3d3d3

Nastavitev stolpca 1

Gradientno ozadje za lebdenje

Zdaj bomo delali na nastavitvah stolpca 1. Najprej dodajmo gradientno ozadje.

  • Barva 1: rgba (255,255,255,0)
  • Barva 2: #000000
  • Vrsta gradienta: linearna
  • Začetni položaj: 30%

Slika ozadja lebdenja

Zdaj bomo v ozadje dodali sliko, ki bo prikazana ob lebdenju.

  • Velikost slike ozadja: naslovnica
  • Položaj slike ozadja: Center

Razred CSS

Nastavitve stolpcev bomo za zdaj zaključili z dodajanjem razreda CSS na zavihek Napredno.

  • Razred CSS: lebdeč-stolpec

1. stolpec: dodajte besedilni modul 1

H3 Vsebina

Zdaj bomo dodali besedilni modul v stolpec 1. Tam lahko podate besedilo po vaši izbiri.

Nastavitve vsebine H3

Izvedite naslednje nastavitve v razdelku Besedilo naslova na zavihku Oblikovanje. Pisava 3. naslova: Oswald

Teža pisave naslova 3 : ultra lahka
Slog pisave naslova 3 : velike črke
Barva besedila naslova 3 : #0a0a0a
Velikost besedila naslova 3 :

  • Namizni računalnik: 3vw
  • Tablete: 7vw
  • Telefon: 14vw

Razmik med črkami naslova 3 : -2px

Dimenzioniranje

Spremenimo vrednost v razdelku za velikost, da spremenimo velikost širine za različne velikosti zaslona.

Premer:

  • Namizje: 44%
  • Tablica: 48%
  • Telefon: 50%

Razmik

Naredimo nekaj prilagoditev razmika. Te vrednosti so primerne za naslov, ki ga uporabljamo v tej vadnici. Morda ga boste morali spremeniti za svoj naslov.

  • Spodnji rob: 25vh
  • Zgornje oblazinjenje: 5%
  • Spodnje oblazinjenje: 5%
  • Levo oblazinjenje: 3%
  • Desno oblazinjenje: 0%

Meja

Dodajte nekaj obrobe temu besedilnemu modulu.

  • Desna & Širina spodnje obrobe: 1px
  • Desna & Barva spodnje obrobe: #d3d3d3

Razred CSS

Nastavitve tega besedilnega modula bomo zaključili z dodajanjem razreda CSS.

  • Razred CSS: hover-title

2. stolpec: dodajte besedilni modul 2

Dodaj vsebino

Dodajte besedilni modul tik pod prejšnjim besedilnim modulom in napišite nekaj o tem razdelku ali karkoli po vaši izbiri.

Nastavitve besedila

Pomaknite se na zavihek načrtovanja besedilnega modula in sledite navodilom za spreminjanje vrednosti. Pisava besedila: Karla

Barva besedila : #ffffff
Velikost besedila :

  • Namizni računalnik: 0,8vw
  • Tablete: 2vw
  • Telefon: 3.6vw

Višina vrstice besedila : 2,2 em

Razmik

Zdaj dodajte nekaj razmikov v besedilo.

  • Spodnje oblazinjenje: 10%
  • Levo oblazinjenje: 9%
  • Desno oblazinjenje: 9%

Razred CSS

Končno zaprite nastavitve modulov tako, da dodate razred CSS.

  • Razred CSS: lebdeče besedilo

2. stolpec: Dodaj modul gumbov

Dodaj besedilo

Nato dodajte modul gumbov pod prejšnji besedilni modul in dodajte nekaj kopije po vaši izbiri.

Nastavitve gumba

Spremenite nastavitve gumbov s spodaj navedenimi vrednostmi.

  • Uporabite sloge po meri za gumb: Da
  • Velikost besedila gumba: namizje: 1vw, tablica: 2,5vw & Telefon: 4vw
  • Širina obrobe gumba: 0px
  • Polmer obrobe gumba: 0px
  • Pisava gumba: Karla
  • Pokaži ikono gumba: Da
  • Postavitev ikone gumba: levo
  • Pokaži ikono samo ob lebdenju za gumb: Ne

Razmik

Zdaj dodajte nekaj nastavitve razmika temu modulu gumbov.

  • Spodnji rob: 8%
  • Levi rob: 9%
  • Desni rob: 9%
  • Spodnje oblazinjenje: 5%
  • Desno oblazinjenje: 20%

Škatla senca

Dodajte senco gumbu iz sence polja.

  • Horizontalni položaj sence polja: 0px
  • Navpični položaj sence škatle: 2px
  • Barva sence: #000000

Razred CSS

Nazadnje bomo dodali ta razred CSS, preden zapremo nastavitve modula gumbov.

  • Razred CSS: lebdeči gumb

Ponovno uporabite stolpec 1

Izbriši stolpec št -2,3 & 4

Ustvarili smo naš 1. stolpec in to je tisto, kar lahko vedno znova uporabljamo. Torej bomo izbrisali preostale stolpce.

1. stolpec: kloniranje

Stolpec 1 bomo trikrat podvojili, da ga bomo ponovno uporabili.

Spremeni sliko ozadja na kloniranih stolpcih

Zdaj bomo spremenili sliko ozadja stolpcev, ki smo jih dobili s kloniranjem.

Spremenite vsebino kloniranih stolpcev

Zdaj spremenite vsebino kloniranih stolpcev.

Edinstvene obrobe stolpcev

1. stolpec

Zdaj bomo za vsak stolpec uporabili edinstveno obrobo. Začnimo s stolpcem 1.

  • Širina desne obrobe: namizje: 1px, tablica: 1px & Telefon: 0px
  • Barva desne obrobe: #d3d3d3
  • Širina spodnje obrobe: namizje: 0px, tablica: 1px & Telefon: 1px
  • Barva spodnje obrobe: #d3d3d3

2. stolpec

Nato se premaknite na stolpec 2 za prilagoditve obrob.

  • Širina desne obrobe: namizje: 1px, tablica: 0px & Telefon: 0px
  • Barva desne obrobe: #d3d3d3
  • Širina spodnje obrobe: namizje: 0px, tablica: 1px & Telefon: 1px
  • Barva spodnje obrobe: #d3d3d3

3. stolpec

In končno imamo stolpec 3.

  • Širina desne obrobe: namizje: 1px, tablica: 1px & Telefon: 0px
  • Barva desne obrobe: #d3d3d3
  • Širina spodnje obrobe: namizje: 0px, tablica: 0px & Telefon: 1px
  • Barva spodnje obrobe: #d3d3d3

2. del: Dodajte kodo CSS po meri

Možnost nastavitev strani

Ker smo končali z ustvarjanjem celotne strukture oblikovanja, bomo zdaj našemu dizajnu dodali kodo CSS po meri iz možnosti Nastavitve strani. Ta koda CSS bo pomagala sprožiti učinek lebdenja, ki ga pričakujemo.

Dodajte: kodo CSS

Zdaj kopirajte naslednjo kodo CSS in jo prilepite na "CSS po meri" pod zavihkom napredno.

.hover-column:hover .hover-title {
background-color: #000000;
}
 
.hover-column:hover .hover-title h3 {
color: white !important;
}
 
.hover-button {
color: black;
}
 
.hover-column:hover .hover-button {
color: white !important;
box-shadow: 0px 2px 0px 0px #ffffff;
}
 
.hover-column:before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(180deg,#ffffff 30%,#ffffff 100%);
z-index: -1;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
opacity: 1;
}
 
.hover-column:hover::before {
opacity: 0;
}

Končni rezultat

Vsa dela smo uspešno opravili. Naš dizajn bo videti tako.

Zaključne opombe

Danes smo videli vzorec, koliko čudovitih modelov je mogoče ustvariti z vgrajeno funkcijo Divi . Danes smo ustvarili preprosto mrežo, ki prikazuje le zanimiv učinek lebdenja. Upajmo, da bo to imelo pomembno vlogo pri vašem prihodnjem oblikovanju WordPressa. Če imate kakršne koli pripombe ali vprašanja, nam to sporočite v komentarjih. Če vam je ta vadnica všeč, bo delež nepogrešljiv.