Vad sägs omaffischer din blogg Divi i form av en karusell där du enkelt kan bläddra igenom artiklar?
För många webbplatser har bloggandet blivit en viktig del av deras marknadsföringsstrategi. SEO.
Men förutom att skapa högkvalitativt innehåll är det också viktigt att förenkla processen att bläddra i inlägg för dina besökare. På så sätt kan de hoppa från artikel till artikel och spendera mer tid på din webbplats och läsa innehållet du lägger upp där.
I Divi finns en bloggmodul som du kan använda för att dynamiskt visa dina artiklar och anpassa dem också. Om du letar efter ett sätt att ta sökupplevelsen till nästa nivå, kommer du att älska den här artikeln.
Vi kommer att visa dig hur du förvandlar Divis integrerade bloggmodul till en karusell med hjälp av Divis integrerade element och en gratis js-bibliotek .
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet.
Skapa en bloggsida med Divi Theme Builder
Börja med att lägga till en ny sida på webbplatsen du arbetar på.
Ge din sida en titel, publicera sidan och klicka på 'Använd Divi Builder".
Ladda ner 'Inredningsföretag' fördesignad layoutbloggsida
I den här handledningen kommer vi att använda bloggsidan från layouten "Inredningsföretag", men du är fri att använda vilken annan layout du vill.
Skapa "Föregående" och "Nästa" pilmallar med hjälp av Divis Sammanfattningsmodul
Väl inne på bloggsidan kan vi börja skapa karusellen.
Den första delen är tillägnad att skapa de pilar vi behöver för att tillåta besökare att navigera mellan artiklar.
Läs också: Hur man skapar en klibbig global rubrik i DIVI
För att designa pilarna kommer vi att använda Divis Sammanfattningsmodul, men du är fri att använda vilken annan modul du väljer.
Lägg till en ny rad överst i avsnittet din blogg använder följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna och låt linjen vidröra sektionens vänstra och högra sida genom att ändra storleksinställningarna enligt följande:
- Maximal bredd: 100%
- Maximal bredd: 100%
Lägg till en sammanfattningsmodul
Lägg till en sammanfattningsmodul och infoga en titel.
Välj sedan en ikon.
- Använd ikoner: JA
Ikoninställningar
Växla till fliken Stil och ändra ikoninställningarna enligt följande:
- Ikonfärg: #000000
- Bild/ikonplacering: Vertex
- Bild/ikonjustering: Center
Titeltextinställningar
Ändra sedan titeltextinställningarna.
- Titeltypsnitt: Mulish
- Soft Light Titel: Semi Bold
- Textjustering: mitten
- Rubrikens textfärg: #000000
dimensionering
Vi ändrar sedan modulstorleksinställningarna på olika skärmstorlekar.
- Maximal bredd: 10 % (dator), 20 % (surfplatta), 30 % (telefon)
- Textjustering: höger
Låt oss också lägga till en CSS-klass. Den här CSS-klassen hjälper oss att utlösa karusellåtgärden vid klick.
- CSS-klass: bakåtknapp
Slutligen kommer vi också att lägga till en rad med CSS-kod till huvudelementet i modulen för att förvandla markören till en pekare.
cursor: pointer;
Klona linjen och placera den längst ner i avsnittet
När du har slutfört den första pilen kan du klona hela radbehållaren och placera dubblettraden i slutet av bloggsektionen.
Öppna modulen Sammanfattning i dubblettraden och redigera titeln.
Använd ikoner: JA.
Ändra även CSS-klassen.
- CSS-klass: nästa knapp
Förbered bloggmodulen
dimensionering
Med pilarna på plats är det dags att börja justera bloggmodulen, med början på raden den är placerad på. Öppna linjeinställningarna och ändra storleksinställningarna därefter:
- Maximal bredd: 100 %
- Maximal bredd: 100%
Ställ sedan in linjespillen på "dolda". Detta kommer att hjälpa till att säkerställa att karusellen inte kommer att orsaka att en horisontell rullningslist visas på vår sida.
- Horisontellt bräddavlopp: Dold
- Vertikalt spill: Dold
Dölj paginering
När linjeinställningarna är på plats öppnar du inställningarna för Bloggmodulen. Se till att sökning är inaktiverad i objektinställningarna.
- Visa paginering: Nej
Växla sedan till fliken Stil och ändra layouten till "Helskärm".
- Modell: Helskärm
Vi kommer också att lägga till ett överlägg.
- Överläggsbild som visas: AKTIV
- Överlagringsikonens färg: #ffffff
- Överlagringsbakgrundsfärg: rgba (1,0,66,0.33)
Därefter lägger vi till en CSS-klass i vår blogg, som hjälper oss att aktivera karusellen senare i handledningen.
- CSS-klass: blogg-modul
Och vi kommer att generera lite utrymme mellan postmeta och utdrag genom att lägga till en bottenmarginal till Post Metadata CSS-elementet på den avancerade fliken.
Upptäck också: Hur man skapar en skjut- och tryckmeny i DIVI
margin-bottom: 50px;
Lägg till Slick JS-funktionalitet
När alla Divi-inställningar är på plats är det dags att lägga till slick js-funktionalitet! Lägg till en kodmodul precis under bloggmodulen (eller någon annanstans på sidan).
Lägg sedan till slick js-biblioteket i skripttaggar (som du kan se i utskriftsskärmen nedan). Du är också fri att lägga till dem i din webbplatshuvud i inställningarna för Divi-tema.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Vi kommer att ändra varje blogginlägg något på individuell nivå med hjälp av CSS-kod.
Läs också: Hur man skapar bloggsidan med Bloggmodulen i DIVI
Var noga med att placera koden mellan stiltaggar som visas i skärmdumpen nedan.
.slick-slide {
float: left;
margin: 2vw;
}
Och slutligen kommer vi att lägga till lite JQuery-kod för att låta karusellen ta form. I koden nedan lägger vi även till knapparna vi designat för karusellfunktionaliteten.
Var noga med att placera koden i skripttaggar som du kan se nedan.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
Spara sidan och avsluta Divis Visual Builder för att visa resultatet
I Visual Builder kommer du inte att se resultatet.
Så, så fort du är klar, spara din sida, avsluta Visual Builder och se resultatet på din webbplats!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
Ladda ner DIVI nu!!!
Slutsats
Så ! Det var allt för den här artikeln. Vi har visat dig hur du tar din bloggmoduldesign till nästa nivå. Specifikt visade vi dig hur du förvandlar Divis inbyggda bloggmodul till en karusell med hjälp av ett gratis js-bibliotek.
Om du vill veta mer om Divi, tveka inte att besöka vår katalog med Divi tutorials. Du kan också konsultera Hur man skapar bloggsidan med Divi Blog-modulen
Se också 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.
.
