Vil du flyte blogginnlegg i Divi?
I dag skal vi vise deg en kreativ måte å presentere blogginnlegg som flytende kort i Divi. Hver blogg eller nettstedet Web bør sikte på å ha en utmerket innhold attraktive og kanskje like viktige eller tilgjengelige.
En måte å sikre at innhold forblir tilgjengelig for brukere, er å få den til å flyte på siden.
Og for bloggere vil vi vise deg hvordan du presenterer artikler fra bloggen din som flytende kort slik at de forblir synlige mens du ruller siden.
La oss gå.
undersøkelsen
Her er en kort oversikt over resultatet som vi får på slutten av denne opplæringen.
Hva du trenger for å komme i gang
Før du begynner å lage dette designet i Divi, må du gjøre følgende:
- Opprett en ny side, gi et relevant navn og klikk på "Bruk Divi Builder"
- Velg alternativet Velg layout".
- Finn og velg layout 'bloggers landingsside'.
- Klikk på knappen Velg layout for å laste den inn på siden.
Etter det vil du ha det ferdiglagde oppsettet klart til bruk for denne opplæringen.
Hvordan lage blogginnlegg flytende kort ved å bruke Divis bloggmodul
Nå som oppsettet er lastet inn på siden, er vi klare til å lage flytende kort for blogginnlegget vårt.
Les også: Hvordan lage en Sticky Global Header i Divi
Lag en ny seksjon helt nederst i oppsettet.
Legg deretter til en ny rad med én kolonne i seksjonen.
Legg til en bloggmodul og en tittel i raden/kolonnen
I stedet for å lage en ny bloggmodul her, bla opp og finn den eksisterende bloggmodulen som viser tre blogginnlegg (den er i den tredje delen nær midten av siden). Åpen " Andre modulparametere »Og velg« Modul kopi".
Deretter limer du inn modulen i den nye én-kolonne raden vi opprettet nederst på siden ved å høyreklikke på det grå plussikonet og velge " Lim inn modul".
Deretter legger vi til en tittel over blogginnleggene våre som også vil flyte over bloggkortene. For å gjøre dette, kopier den eksisterende tekstmodulen med den lille tittelteksten " livsstil".
Deretter limer du inn modulen rett over den nye bloggmodulen vi nettopp la til.
Deretter redigerer du tittelteksten for å beskrive typen blogginnlegg du vil ha. I dette eksemplet bruker vi bare " Top Story".
Tilpasse linjen med fast posisjon og tilpasset bredde
Vi ønsker å redusere størrelsen på flytende blogginnlegg slik at de ikke tar for mye plass på siden når de har en fast plassering. Det ville vært underholdende. For å gjøre dette, åpne linjeinnstillingene og oppdater følgende:
For å få gjenstandene til å flyte, må vi gi linjen en fast posisjon. Under kategorien Avansert oppdaterer du følgende:
- Posisjon: Fast
- Sted: Nederst til høyre
- Vertikal offset: 20px
- Horisontal forskyvning: 20px
- Z-indeks: 12
Oppdatert bloggmodul med minimalt med innhold og boksskygge
Generelt har bloggmodulen allerede et tre-kolonne rutenettoppsett og en fin stil som følger med layoutpakken vi har valgt. Men det er et par ting vi må gjøre.
Se også: Hvordan lage en global header med påloggingsskjema i Divi
Først av alt må vi redusere størrelsen på kartene (vertikalt) og fjerne noen elementer fra innhold.
For å gjøre dette, åpne blogginnstillingene og skjul alle elementene bortsett fra det fremhevede bildet. Dette vil gjøre at innlegget bare viser det fremhevede bildet og tittelen.
Under Stil-fanen konfigurerer du boksskyggen som følger:
- Skyggeboks: Se skjermbilde
- Box Shadow Blur Styrke: 28px
- Tekstfarge: rgba(0,0,0,0.19)
undersøkelsen
Her er en forhåndsvisning av resultatet vi har så langt.
Få artikkellinjen til å vises når du svever
Til slutt kan vi legge til en fin sveveeffekt som oppmuntrer brukere til å samhandle med de flytende artiklene.
Les også: Hvordan lage bloggsiden med Bloggmodulen i Divi
Åpne linjeinnstillinger og oppdateringsalternativer:
For kontoret
- Transformasjon: 50 %
For hover state
- Transformasjon: 0 %
Dette vil i utgangspunktet bringe hele linjen utenfor nettleserens visningsport med 50 %. Når brukeren svever over linjen, kommer den helt tilbake til syne.
Skjul rad på mobil
Med mindre du vil publisere et enkelt blogginnlegg, er det ikke fornuftig å flyte disse blogginnleggene på mobil. Det vil sannsynligvis ta for mye plass og forårsake problemer når du prøver å bla.
Se også: Hvordan legge til et kontaktskjema i en global overskrift i Divi
For å skjule kart på mobil, åpne seksjonsinnstillinger og slå av seksjonssynlighet på telefon og nettbrett.
Endelig resultat
Last ned DIVI nå!!!
konklusjonen
Så! Vi har vist deg i denne opplæringen en kreativ og original måte å presentere blogginnleggene du vil fremheve.
Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan imidlertid 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.
...
