Vil du bruke skygge- og sveveeffekter i Divi å lage innhold interaktiv og skiller seg ut nettstedet Web ?
Sørg for at din nettstedet Web Det kan være vanskelig å skille seg ut fra lignende nettsteder. Men når du først kommer dit, er det nesten alltid verdt innsatsen og tanken som gikk inn i det.
Vi viser deg hvordan du lager innhold interaktiv når du lager nettsider med Divi.
La oss gå!
undersøkelsen
Før vi dykker inn i denne opplæringen, la oss ta en rask titt på resultatet du kan forvente.
Stasjonær datamaskin
Mobil
La oss starte realiseringen med Divi!
Se også: Divi: Hvordan lage en meny med snurrehjul når du sveverl
Legg til en ny seksjon
Bakgrunnsfarge
Opprett en ny side eller åpne en eksisterende og legg til en vanlig del på den. Åpne seksjonsinnstillinger og endre bakgrunnsfargen.
- Bakgrunn: #03006d
avstanden
Gå deretter til innstillinger for seksjonsavstand og endre som følger:
- Polstring (øverst og bunn): 50px
Legg til en ny linje
Struktur av kolonnen
Fortsett ved å legge til en ny rad i seksjonen ved å bruke følgende kolonnestruktur.
dimensjonering
Gå deretter til størrelsesinnstillingene og la linjen fylle hele skjermens bredde.
- Bruk egendefinert takrennebredde: JA
- Rennebredde: 1
- Bredde: 100 %
avstanden
La oss også endre følgende avstandsinnstillinger:
- Polstring (høyre): 9vw (stasjonær), 5vw (nettbrett og telefon)
- Polstring (høyre): 5vw (nettbrett og telefon)
Legg til en tekstmodul i kolonne 1
Legg til innhold
Når du er ferdig med å redigere radinnstillingene, legger du til den første tekstmodulen i kolonne 1.
Legg til det første tegnet som avsnittstekst. Og så innhold som du ønsker skal vises som listetekst.
Tekstinnstillinger (skrivebord)
Gå deretter til fanen utformingog endre standard avsnittstekstinnstillinger. Sørg for å bruke samme farge for seksjonstekst og bakgrunn.
- Skriftvekt: Ultra fet
- Tekstfarge: #03006d
- Tekststørrelse: 27vw (stasjonær), 0vw (nettbrett og telefon)
- Linjehøyde: 1,1 em
- Tekstskygge: Se fangst
- Shadow Blur Styrke: 0,01em
- Skyggefarge: #ffffff
- Tekstjustering: Venstre
Hold musepekeren for tekstinnstillinger
For å lage den fine sveveeffekten, må vi endre disse tekstinnstillingene for hover avsnitt.
- Tekstfarge(Svev): #ffffff
- Skyggefarge(Hover): rgba(255,255,255,0)
Listeinnstillinger (skrivebord)
Fortsett ved å gå til oppføringsinnstillingene.
- Skriftvekt: Lett
- Listetekstfarge: #ffffff
- Listetekststørrelse: 0px (skrivebord), 18px (nettbrett og telefon)
- Stilposisjon: Sirkel
- Uordnet listestilposisjon: Utenfor
- Uordnet listeelementinnrykk: 0px
Liste tekstinnstillinger ved peker (hover)
Vi vil at listeteksten skal vises på hover. Dette er grunnen til at vi vil endre størrelsen på teksten når du peker.
- Uordnet listetekststørrelse (sveving): 18px
avstanden
Fortsett ved å gå til modulavstandsinnstillingene og gjør noen endringer der også.
- Margin (bunn): 50 piksler (nettbrett og telefon)
- Margin (høyre): -4vw (stasjonær), 0vw (nettbrett og telefon)
Klon tekstmodul 4 ganger og plasser duplikater i gjenværende kolonner
Nå som vi er ferdige med å modifisere den første modulen i kolonne 1, klone modulen fire ganger. Plasser deretter hver av duplikatene i de resterende kolonnene. Vi vil modifisere hver av duplikatene for å matche det vi ønsker.
Endre tekstmodulen i kolonne 2
Rediger innhold
Åpne duplikatet i kolonne 2 og rediger innholdet.
Endre mellomrom
Deretter går du til avstandsinnstillinger og endrer egendefinerte margverdier.
- Margin (bunn): 50 piksler (nettbrett og telefon)
- Marg (venstre og høyre): -2vw (stasjonær), 0vw (nettbrett og telefon)
- Høyre marg: -2vw (stasjonær), 0vw (nettbrett og telefon)
Endre tekstmodulen i kolonne 3
Rediger innhold
Endre også innholdet i duplikatet i kolonne 3.
Endre mellomrom
Med avstandsinnstillinger i designfanen.
- Marg (Venstre): 2,5 vw
- Marg (Høyre): 1,5 vw
Endre tekstmodulen i kolonne 4
Rediger innhold
Fortsett ved å åpne Tekstmodulinnstillingene i kolonne 4 og rediger innholdet der også.
Endre mellomrom
Deretter går du til Design-fanen og endrer de tilpassede margverdiene i Avstandsinnstillingene.
- Marg (Venstre): -6vw
- Marg (Høyre): 2vw
Endre tekstmodulen i kolonne 5
Innhold
Gjør plass for siste duplikat. Rediger innholdet i innholdsområdet.
Endre mellomrom
Med egendefinerte avstandsinnstillinger.
- Marg (Venstre): -7vw
- Marg (Høyre): 3vw
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.
Les også: Divi : Hvordan tilpasse handlekurven og søkeikonene til modulen "Fullbreddemeny".
kontor
Mobil
Last ned DIVI nå!!!
konklusjonen
Vi vet hvor viktig det er å sikre at din nettstedet Web skiller seg ut fra andre nettsteder. Med Divis innebygde alternativer kan du være så kreativ du vil.
Denne artikkelen er et eksempel på hvordan du kan lage interaktivt hover-innhold.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
