Kunne du tænke dig at flyde blogindlæg i Divi?
I dag skal vi vise dig en kreativ måde at præsentere blogindlæg som flydende kort i Divi. Hver blog eller Websted skal sigte efter at have en fremragende indhold attraktive og måske lige så vigtige eller tilgængelige.
En måde at sikre, at indhold forbliver tilgængelig for brugerne, er at få det til at flyde på siden.
Og for bloggere vil vi vise dig, hvordan du præsenterer artikler fra din blog som flydende kort, så de forbliver synlige, mens du ruller på siden.
Lad os gå.
undersøgelse
Her er en kort oversigt over resultatet, som vi vil opnå i slutningen af denne vejledning.
Hvad du behøver for at komme i gang
Før du begynder at skabe dette design i Divi, skal du gøre følgende:
- Opret en ny side, giv et relevant navn og klik på 'Brug Divi Builder'
- Vælg indstillingen Vælg layout".
- Find og vælg layout 'bloggers landingsside«.
- Klik på knappen Vælg layout for at indlæse det på siden.
Derefter vil du have det færdiglavede layout klar til brug til denne øvelse.
Sådan oprettes blogindlæg flydende kort ved hjælp af Divi's blogmodul
Nu hvor layoutet er indlæst på siden, er vi klar til at lave vores blogindlæg flydende kort.
Læs også: Sådan opretter du en Sticky Global Header i Divi
Opret en ny sektion helt nederst i layoutet.
Tilføj derefter en ny én-kolonne række til sektionen.
Tilføj et blogmodul og en titel til rækken/kolonnen
I stedet for at oprette et nyt blogmodul her, scroll op og find det eksisterende blogmodul, der viser tre blogindlæg (det er i den tredje sektion nær midten af siden). Åbn " Andre modulparametre »Og vælg« Modul kopi".
Indsæt derefter modulet i den nye en-kolonne række, vi oprettede nederst på siden ved at højreklikke på det grå plus-ikon og vælge " Indsæt modul".
Dernæst tilføjer vi en titel over vores blogindlæg, som også vil svæve over blogkortene. For at gøre dette skal du kopiere det eksisterende tekstmodul med den lille titeltekst " Lifestyle".
Indsæt derefter modulet lige over det nye blogmodul, vi lige har tilføjet.
Derefter skal du redigere titelteksten for at beskrive den type blogindlæg, du vil have. I dette eksempel bruger vi bare " Top Story".
Tilpasning af linjen med fast position og tilpasset bredde
Vi ønsker at reducere størrelsen på flydende blogindlæg, så de ikke fylder for meget på siden, når de har en fast position. Det ville være underholdende. For at gøre dette skal du åbne linjeindstillingerne og opdatere følgende:
For at få emnerne til at flyde, skal vi give linjen en fast position. Under fanen Avanceret skal du opdatere følgende:
- Position: Fast
- Beliggenhed: Nederst til højre
- Lodret offset: 20px
- Vandret offset: 20px
- Z-indeks: 12
Opdateret blogmodul med minimalt indhold og box-shadow
Generelt har Blog-modulet allerede et tre-søjlet gitterlayout og en flot stil, der følger med den layoutpakke, vi har valgt. Men der er et par ting, vi skal gøre.
Se også: Sådan opretter du en global header med login-formular i Divi
Først og fremmest skal vi reducere størrelsen af kortene (lodret) og fjerne nogle elementer fra indhold.
For at gøre dette skal du åbne blogindstillingerne og skjule alle elementer undtagen det fremhævede billede. Dette vil få indlægget til at vise kun det fremhævede billede og titlen.
Under fanen Stil skal du konfigurere boksskyggen som følger:
- Skyggeboks: Se skærmbillede
- Box Shadow Blur Styrke: 28px
- Undertekstskriftfarve: rgba(0,0,0,0.19)
undersøgelse
Her er en forsmag på det resultat, vi har indtil videre.
Få linjen med artikler til at blive vist, når du svæver
Endelig kan vi tilføje en fin svæveeffekt, der opfordrer brugerne til at interagere med de flydende artikler.
Læs også: Sådan opretter du blogsiden med Blog-modulet i Divi
Åbn linjeindstillinger og opdateringsmuligheder:
Til kontoret
- Transformation: 50 %
Til svævetilstand
- Transformation: 0 %
Dette vil i første omgang bringe hele linjen uden for browserens visningsport med 50 %. Når brugeren svæver over linjen, kommer den helt tilbage til syne.
Skjul række på mobil
Medmindre du vil udgive et enkelt blogindlæg, giver det ikke mening at flyde disse blogindlæg på mobilen. Det ville sandsynligvis optage alt for meget plads og give problemer, når du forsøger at scrolle.
Se også: Sådan tilføjer du en kontaktformular til en global header i Divi
For at skjule kort på mobilen skal du åbne sektionsindstillinger og slå sektionssynlighed fra på telefon og tablet.
Endelig resultat
Download DIVI nu!!!
Konklusion
Så! Vi har vist dig i denne tutorial en kreativ og original måde at præsentere de blogindlæg, du vil fremhæve.
Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog 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.
...
