Vill du flyta blogginlägg i Divi?
Idag ska vi visa dig ett kreativt sätt att presentera blogginlägg som flytande kort i Divi. Varje blogg eller webbplats bör syfta till att ha en utmärkt innehåll attraktiva och kanske lika viktiga eller tillgängliga.
Ett sätt att säkerställa att innehåll förblir tillgänglig för användare är att få den att flyta på sidan.
Och för bloggare kommer vi att visa dig hur du presenterar artiklar från din blogg som flytande kort så att de förblir synliga när du rullar på sidan.
Låt oss gå.
undersökningen
Här är en kort översikt över resultatet som vi kommer att få i slutet av denna handledning.
Vad du behöver för att komma igång
Innan du börjar skapa den här designen i Divi måste du göra följande:
- Skapa en ny sida, ge ett relevant namn och klicka på "Använd Divi Builder"
- Välj alternativet Välj layout".
- Hitta och välj layout 'bloggarens målsida".
- Klicka på knappen Välj layout för att ladda den på sidan.
Efter det kommer du att ha den färdiga layouten redo att användas för denna handledning.
Hur man skapar flytande kort för blogginlägg med hjälp av Divis bloggmodul
Nu när layouten är laddad på sidan är vi redo att skapa vårt blogginlägg flytande kort.
Läs också: Hur man skapar en Sticky Global Header i Divi
Skapa ett nytt avsnitt längst ner i layouten.
Lägg sedan till en ny rad med en kolumn i avsnittet.
Lägg till en bloggmodul och en titel till raden/kolumnen
Istället för att skapa en ny bloggmodul här, scrolla upp och hitta den befintliga bloggmodulen som visar tre blogginlägg (den är i den tredje delen nära mitten av sidan). Öppna " Andra modulparametrar »Och välj« Modulkopia".
Klistra sedan in modulen i den nya enkolumnraden vi skapade längst ner på sidan genom att högerklicka på den grå plusikonen och välja " Klistra in modul".
Därefter lägger vi till en titel ovanför våra blogginlägg som också kommer att sväva ovanför bloggkorten. För att göra detta, kopiera den befintliga textmodulen med den lilla titeltexten " Livsstil".
Klistra sedan in modulen precis ovanför den nya bloggmodulen som vi just lagt till.
Redigera sedan titeltexten för att beskriva vilken typ av blogginlägg du vill visa. I det här exemplet använder vi bara " Utvalda".
Anpassa linjen med fast position och anpassad bredd
Vi vill minska storleken på flytande blogginlägg så att de inte tar för mycket plats på sidan när de har en fast position. Det skulle vara underhållande. För att göra detta, öppna linjeinställningarna och uppdatera följande:
För att få föremålen att flyta måste vi ge linjen en fast position. Under fliken Avancerat uppdaterar du följande:
- Position: Fast
- Plats: Nederst till höger
- Vertikal offset: 20px
- Horisontell offset: 20px
- Z-index: 12
Uppdaterad bloggmodul med minimalt innehåll och box-skugga
Generellt sett har Bloggmodulen redan en trekolumnig rutnätslayout och en snygg stil som följer med layoutpaketet vi har valt. Men det finns några saker vi måste göra.
Se även: Hur man skapar en global header med inloggningsformulär i Divi
Först och främst måste vi minska storleken på kartorna (vertikalt) och ta bort några element från innehåll.
För att göra detta, öppna blogginställningarna och dölj alla element utom den utvalda bilden. Detta gör att inlägget endast visar den utvalda bilden och titeln.
Under fliken Stil konfigurerar du boxskuggan enligt följande:
- Skuggruta: Se skärmdump
- Box Shadow Blur Styrka: 28px
- Textningstypsnittsfärg: rgba(0,0,0,0.19)
undersökningen
Här är en förhandstitt på resultatet vi har hittills.
Få raden med artiklar att visas när du håller muspekaren
Slutligen kan vi lägga till en trevlig svävningseffekt som uppmuntrar användare att interagera med de flytande artiklarna.
Läs också: Hur man skapar bloggsidan med Bloggmodulen i Divi
Öppna linjeinställningar och uppdateringsalternativ:
För kontoret
- Transform: 50%
För hover state
- Transform: 0%
Detta kommer initialt att föra hela raden utanför webbläsarens vyport med 50 %. När användaren svävar över linjen kommer den helt tillbaka till synen.
Dölj raden på mobilen
Om du inte vill publicera ett enda blogginlägg är det inte meningsfullt att sväva dessa blogginlägg på mobilen. Det skulle förmodligen ta upp alldeles för mycket utrymme och orsaka problem när man försöker scrolla.
Se även: Hur man lägger till ett kontaktformulär i en global rubrik i Divi
För att dölja kartor på mobilen, öppna sektionsinställningar och inaktivera sektionssynlighet på telefon och surfplatta.
Slutresultat
Ladda ner DIVI nu!!!
Slutsats
Så ! Vi har visat dig i denna handledning ett kreativt och originellt sätt att presentera de blogginlägg du vill lyfta fram.
Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
