Vil du bruge skygge- og svæveeffekter i Divi at skabe indhold interaktive og skiller dig ud Websted ?
Sørg for din Websted Det kan være svært at skille sig ud fra lignende websteder. Men når man først når dertil, er det næsten altid indsatsen og tanken værd, der gik ind i det.
Vi viser dig, hvordan du opretter indhold interaktiv, når du laver hjemmesider med Divi.
Lad os gå!
undersøgelse
Før vi dykker ned i denne tutorial, lad os tage et hurtigt kig på det resultat, du kan forvente.
Stationær computer
Mobil
Lad os starte erkendelsen med Divi!
Se også: Divi: Sådan opretter du en menu med drejehjul, når du svæverl
Tilføj en ny sektion
Baggrundsfarve
Opret en ny side, eller åbn en eksisterende, og tilføj en almindelig sektion til den. Åbn sektionsindstillinger og skift baggrundsfarven.
- Baggrund: #03006d
afstand
Gå derefter til sektionsafstandsindstillinger og skift som følger:
- Polstring (top og bund): 50px
Tilføj en ny linje
Struktur af søjlen
Fortsæt ved at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur.
dimensionering
Gå derefter til størrelsesindstillingerne og lad stregen fylde hele skærmens bredde.
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Bredde: 100 %
afstand
Lad os også ændre følgende mellemrumsindstillinger:
- Polstring (højre): 9vw (desktop), 5vw (tablet og telefon)
- Polstring (højre): 5vw (tablet og telefon)
Tilføj et tekstmodul til kolonne 1
Tilføj indhold
Når du er færdig med at redigere rækkeindstillinger, skal du tilføje det første tekstmodul til kolonne 1.
Tilføj det første tegn som afsnitstekst. Derefter indhold at du ønsker skal vises som listetekst.
Tekstindstillinger (skrivebord)
Gå derefter til fanen Designog ændre standardindstillingerne for afsnitstekst. Sørg for at bruge samme farve til afsnitstekst og baggrund.
- Skrifttypevægt: Ultra fed
- Tekstfarve: #03006d
- Tekststørrelse: 27vw (desktop), 0vw (tablet og telefon)
- Linjehøjde: 1,1 em
- Tekstskygge: Se optagelse
- Skyggeslørstyrke: 0,01em
- Skyggefarve: #ffffff
- Tekstjustering: Venstre
Hold musen over tekstindstillinger
For at skabe den gode svæveeffekt skal vi ændre disse indstillinger for svæveafsnitstekst.
- Tekstfarve(Hover): #ffffff
- Skyggefarve(Hover): rgba(255,255,255,0)
Listeindstillinger (skrivebord)
Fortsæt ved at gå til listeindstillingerne.
- Skrifttypevægt: Let
- Listetekstfarve: #ffffff
- Listetekststørrelse: 0px (desktop), 18px (tablet og telefon)
- Stilposition: Cirkel
- Uordnet listestilposition: Udenfor
- Uordnet listeelement indrykning: 0px
Liste tekstindstillinger ved svæv (hover)
Vi ønsker, at listeteksten skal vises ved svævning. Dette er grunden til, at vi ændrer størrelsen på teksten, når du svæver.
- Uordnet listetekststørrelse (svæver): 18px
afstand
Fortsæt ved at gå til indstillingerne for modulafstand og foretag nogle ændringer der også.
- Margen (bund): 50px (tablet og telefon)
- Margen (højre): -4vw (desktop), 0vw (tablet og telefon)
Klon tekstmodul 4 gange og placer dubletter i de resterende kolonner
Nu hvor vi er færdige med at ændre det første modul i kolonne 1, skal du klone modulet fire gange. Placer derefter hver af dubletterne i de resterende kolonner. Vi vil ændre hver af dubletterne, så de matcher det, vi ønsker.
Skift tekstmodulet i kolonne 2
Rediger indhold
Åbn dublet i kolonne 2 og rediger indholdet.
Skift mellemrum
Gå derefter til afstandsindstillinger og skift tilpassede margenværdier.
- Margen (bund): 50px (tablet og telefon)
- Margin (venstre og højre): -2vw (desktop), 0vw (tablet og telefon)
- Højre margin: -2vw (desktop), 0vw (tablet og telefon)
Skift tekstmodulet i kolonne 3
Rediger indhold
Skift også indholdet af duplikatet i kolonne 3.
Skift mellemrum
Med afstandsindstillinger i designfanen.
- Margin (venstre): 2,5 vw
- Margin (højre): 1,5 vw
Rediger tekstmodulet i kolonne 4
Rediger indhold
Fortsæt ved at åbne tekstmodulets indstillinger i kolonne 4 og rediger også indholdet der.
Skift mellemrum
Gå derefter til fanen Design og skift de tilpassede margenværdier i indstillingerne for afstand.
- Margin (Venstre): -6vw
- Margin (højre): 2vw
Rediger tekstmodulet i kolonne 5
Indhold
Gør plads til den sidste dublet. Rediger indholdet i indholdsområdet.
Skift mellemrum
Med brugerdefinerede afstandsindstillinger.
- Margin (Venstre): -7vw
- Margin (højre): 3vw
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
Læs også: Divi : Sådan tilpasser du kurven og søgeikonerne i modulet "Fuldbreddemenu".
kontor
Mobil
Download DIVI nu!!!
Konklusion
Vi ved, hvor vigtigt det er at sikre, at din Websted skiller sig ud fra andre hjemmesider. Med Divis indbyggede muligheder kan du være så kreativ, som du vil.
Denne artikel er et eksempel på, hvordan du kan oprette interaktivt hover-indhold.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
