Divi: Hvordan lage en Fluid Hero-seksjon

Vil du opprette en helteseksjon i Divi som er flytende i stedet for den tradisjonelle responsive?

Heltedelen av en nettstedet Web er en av de beste kandidatene for flytende design. I motsetning til tradisjonell responsiv design som justerer seg til forskjellige bruddpunkter, tilpasser flytende design seg sømløst til nettleserens visningsport og holder designet konsistent på tvers av alle enheter. Tross alt er Hero-delen det første brukerne ser på en nettstedet Web.

I denne opplæringen skal vi vise deg hvordan du lager en hel flytende helteseksjon i Divi. Nøkkelen til å lage denne flytende designen er å legge til en flytende rotskriftstørrelse til hver av modulene som brukes og deretter inkludere lengdeenheten em (hvem er i forhold til rotkroppens skriftstørrelse ) i modulinnstillingene.

La oss starte!

undersøkelsen

Her er en rask titt på designet vi skal lage i denne opplæringen.

Legg merke til hvordan den flytende designen jevnt tilpasser seg bredden på nettleservinduet.

Opprett en ny side med Divi Builder

For å komme i gang må du gjøre følgende:

Fra WordPress-dashbordet, gå til Sider> Legg til nye for å opprette en ny side.

Gi den en tittel som gir mening for deg og klikk Bruk Divi Builder

deretter klikker du Begynn å bygge (Bygg fra bunnen av)

Etter det vil du ha et tomt lerret å begynne å designe i Divi.

Les også: Divi: Hvordan lage en helteseksjon med Fullwidth Header-modulen

Hvordan designe en Fluid Hero-seksjon i Divi

Seksjonsinnstillinger

For å starte, la oss oppdatere de eksisterende designinnstillingene for delen. Åpne seksjonsinnstillinger og oppdater følgende:

• Gradientstopp:
  • 30 %: #ff2000
  • 30 %: #121212
• Gradientretning: 45 grader

Under fanen utforming, oppdater utfyllingen:

• Polstring: 0px topp, 0px bunn

Lag en linje

Deretter legger du til en rad med én kolonne i seksjonen.

Linjeinnstillinger

Åpne linjeinnstillinger og oppdater følgende under fanen utforming :

• Rennebredde: 1
• Bredde: 100 %
• Maks bredde: 1 px
• Min høyde: 100 vh (skrivebord), ingen (nettbrett og telefon)
• Polstring: 0px (øverst og bunn)

Lag flytende overskriftstekst med kantlinje

Nå som delen og linjen er fullført, kan vi legge til den flytende overskriftsteksten til Hero-delen. Vi vil også legge til en flytende kantlinje til tekstmodulen for et kreativt designelement.

Legg til en tekstmodul

For å lage tittelteksten og rammen, legg til en ny tekstmodul i kolonnen.

Tekstinnstillinger

Under fanen Innhold, oppdater den innhold av kroppen med følgende HTML-kode:

<h1>Fluid Fullscreen Page Design<spanstyle="color: #ff2000;">.</span></h1>

For å gjøre designelementene flytende, må vi først legge til en flytende rotskriftstørrelse til modulen ved å bruke CSS Clamp()-funksjonen. 

Under fanen Avansert, lim inn følgende CSS-kodebit:

font-size: clamp(32px, 4.1vw, 70px);

Under fanen utforming, oppdater følgende designinnstillinger for overskriftstekst:

• Overskriftstekst:
  • Type: H1
  • Font: Montserrat
  • Skriftvekt: Tung
  • Farge: #ffffff
  • Størrelse: 1em
  • Bokstavavstand: 0,1em
  • Linjehøyde: 1,2 em

Oppdater også mod-polstringen som følger:

• Polstring: 1. (øverst, bunn, venstre og høyre)

Oppdater følgende for å lage den flytende kantlinjen:

• Kantbredde: 1em
• Kantfarge: #ffffff
• Nederste kantfarge: klar
• Venstre kantfarge: klar

Opprette aksentkanten

For å lage aksentkanten kan vi duplisere den eksisterende tekstmodulen.

Slett det innhold av den eksisterende kroppen og oppdater designparametrene som følger:

• Maks bredde: 6,5 cm
• Høyde: 3,25 em
• Kantbredde: 0,5 em
• Kantfarge: #ff2000

For å plassere aksentrammen, legg til en absolutt posisjon med en forskyvning lik bredden på rammen i Overskriftstekst (1em)-modulen. 

Under fanen Avansert, oppdater følgende posisjonsalternativer:

• Stilling: Absolutt
• Sted: øverst til høyre
• Vertikal offset: 1em
• Horisontal forskyvning: 1em

Lag underteksttekst

Under tittelteksten legger vi til den flytende undertekstteksten. Siden denne teksten er mindre, legger vi til en mindre flytende rotskriftstørrelse.

Legg til en ny tekstmodul

For å lage bildeteksten legger du til en ny tekstmodul under den eksisterende overskriftstekstmodulen.

Du kan legge til noen utfyllende tekstsetninger som følger:

• Innhold: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Legg til flytende rotskriftstørrelse

Deretter må vi legge til en ny flytende skriftstørrelse som fungerer bedre for liten tekst. Under fanen Avansert limer du inn følgende CSS-kodebit under hovedelementet:

font-size: clamp(14px, 1.4vw, 24px);

Innstillinger for tekstdesign

Under fanen utforming, oppdater følgende:

• Tekst:
  • Skriftvekt: Semi fet
  • Farge: #ffffff
  • Størrelse: 1em
  • Høyde: 1,6 em

Oppdater deretter størrelsen og avstanden som følger:

• Maks bredde: 19 cm
• Marg: 2 em (bunn), auto (venstre), 5 em (høyre)

Lag væskeknappen

For å lage væskeknappen, legg til en ny knappemodul under tekstmodulen.

Deretter oppdaterer du knappeteksten for å lese "7 Day Free Tral".

Legg til flytende rotskriftstørrelse

Deretter må vi legge til en ny flytende skriftstørrelse som passer for en knapp. 

Under fanen Avansert, lim inn følgende CSS-kodebit under hovedelementet:

font-size: clamp(20px, 2.35vw, 40px);

Innstillinger for knappdesign

Under fanen utforming, oppdater følgende:

• Knappjustering: Høyre

• Bruk egendefinert størrelse for knapp: JA
• Knappetekstfarge: #ff2000
• Gradientstopp:
  • Farge 1 25 %: klar
  • Farge 2 25 %: #ffffff
• Gradientretning: 45 grader

• Knapp:
• Kantbredde: 0 piksler
• Kantradius: 0 piksler
• Font: Montserrat
• Skriftvekt: tykk
• Stil: kursiv
• Vis knappikon: JA
• Ikon: trekantformet pil til høyre (se skjermbilde)
• Ikonplassering: Høyre

• Marg: 8 em (høyre)
• Polstring: 0,2em (øverst og bunn), 1,5em (venstre), 1em (høyre)

Lag et bilde for Hero-delen

Med alle innhold av Hero-seksjonen til riktig størrelse på siden, er vi klare til å legge til Hero-seksjonsbildet på venstre side. For å gjøre dette, legg først til en bildemodul under knappen.

Åpne bildeinnstillinger og last opp et bilde.

Innstillinger for bildedesign

Under fanen utforming, oppdater følgende innstillinger:

• Bildejustering: venstre (skrivebord og nettbrett), midt (telefon)
• Maks bredde: 48 % (stasjonær PC og nettbrett), 70 % (telefon)
• Polstring: 4 % (venstre)

Til slutt, gi bildet en absolutt posisjon med en offset ved å bruke vmin-lengdeenheten som følger:

• Stilling: Absolutt (stasjonær og nettbrett), relativ (telefon)
• Plassering: øverst til venstre (stasjonær datamaskin og nettbrett)
• Vertikal offset: 30vmin (stasjonær PC og nettbrett), 0px (telefon)

Endelig resultat

Her er sluttresultatet på en live-side.

Se også: Divi: Slik bruker du masker og bakgrunnsmønstre for en helteseksjon

Slik tilpasser det flytende designet seg jevnt til bredden på nettleservinduet.

Last ned DIVI nå!!!

konklusjonen

Å legge til et flytende design til en Hero-seksjon kan være en praktisk måte å sikre at toppen av folden er vakkert konsistent på tvers av alle nettleserstørrelser, uten å måtte oppdatere designet på spesifikke stopp eller å bruke mediespørringer.

Forhåpentligvis vil denne teknikken legge til en annen nyttig designferdighet for fremtidige prosjekter.

Vi håper også at 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.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...