Wachtrij diriez-vous d 'posterer jouw blog Divi in ​​de vorm van een carrousel waar je gemakkelijk door artikelen kunt scrollen?
Voor veel websites is bloggen een belangrijk onderdeel van hun marketingstrategie geworden. SEO.
Maar naast het maken van inhoud van hoge kwaliteit, is het ook belangrijk om het browsen van berichten voor uw bezoekers te vereenvoudigen. Op deze manier kunnen ze van artikel naar artikel springen en meer tijd op uw website doorbrengen met het lezen van de inhoud die u daar plaatst.
In Divi is er een Blog-module die u kunt gebruiken om uw artikelen dynamisch weer te geven en ook aan te passen. Als u op zoek bent naar een manier om de post-zoekervaring naar een hoger niveau te tillen, zult u dol zijn op dit artikel.
We laten u zien hoe u de geïntegreerde blogmodule van Divi kunt transformeren in een carrousel met behulp van Divi's geïntegreerde elementen en een gratis js-bibliotheek .
Laten we gaan.
overzicht
Laten we, voordat we in de tutorial duiken, even naar het resultaat kijken.
Maak een blogpagina met Divi Theme Builder
Begin met het toevoegen van een nieuwe pagina aan de website waaraan u werkt.
Geef je pagina een titel, publiceer de pagina en klik op 'Gebruik Divi Builder'.
Download 'Interior Design Company' vooraf ontworpen lay-out blogpagina
In deze tutorial gebruiken we de blogpagina van de lay-out 'Interior Design Company', maar je bent vrij om elke andere lay-out te gebruiken die je leuk vindt.
Maak 'Vorige' en 'Volgende' pijlsjablonen met behulp van Divi's samenvattingsmodule
Eenmaal op de blogpagina kunnen we beginnen met het maken van de carrousel.
Het eerste deel is gewijd aan het maken van de pijlen die we nodig hebben om bezoekers tussen artikelen te laten navigeren.
Lees ook: Hoe maak je een sticky global header in DIVI
Om de pijlen te ontwerpen, gebruiken we de module Samenvatting van Divi, maar u bent vrij om elke andere module naar keuze te gebruiken.
Voeg een nieuwe regel toe bovenaan de sectie jouw blog met behulp van de volgende kolomstructuur:
sizing
Open de lijninstellingen zonder nog modules toe te voegen en laat de lijn de linker- en rechterkant van de sectie raken door de formaatinstellingen als volgt te wijzigen:
- Maximale breedte: 100%
- Maximale breedte: 100%
Een overzichtsmodule toevoegen
Voeg een samenvattingsmodule toe en voeg een titel in.
Selecteer vervolgens een pictogram.
- Pictogrammen gebruiken: JA
Pictogram instellingen
Schakel over naar het tabblad Stijl en wijzig de pictograminstellingen als volgt:
- Pictogramkleur: #000000
- Plaatsing afbeelding/pictogram: Vertex
- Afbeelding/pictogram uitlijning: Midden
Instellingen voor titeltekst
Wijzig vervolgens de instellingen voor de titeltekst.
- Titel Lettertype: Mulish
- Titel zacht licht: half vet
- Tekstuitlijning: midden
- Titel tekstkleur: #000000
sizing
Vervolgens wijzigen we de instellingen voor het formaat van de module op verschillende schermformaten.
- Maximale breedte: 10% (desktop), 20% (tablet), 30% (telefoon)
- Tekstuitlijning: rechts
Laten we ook een CSS-klasse toevoegen. Deze CSS-klasse helpt ons de carrouselactie bij klikken te activeren.
- CSS-klasse: knop Terug
Ten slotte zullen we ook een regel CSS-code toevoegen aan het hoofdelement van de module om de cursor in een aanwijzer te veranderen.
cursor: pointer;
Kloon de regel en plaats deze onderaan de sectie
Nadat u de eerste pijl hebt voltooid, kunt u de hele rijcontainer klonen en de dubbele rij aan het einde van het bloggedeelte plaatsen.
Open de module Samenvatting in de dubbele rij en bewerk de titel.
Pictogrammen gebruiken: JA.
Pas ook de CSS-klasse aan.
- CSS-klasse: volgende knop
Bereid de blogmodule voor
sizing
Met de pijlen op hun plaats, is het tijd om de Blog-module aan te passen, te beginnen met de rij waarin deze is geplaatst. Open de regelinstellingen en wijzig de maatinstellingen dienovereenkomstig:
- Maximale breedte: 100%
- Maximale breedte: 100%
Zet dan de regel overlopen op 'verborgen'. Dit helpt ervoor te zorgen dat de carrousel geen horizontale schuifbalk op onze pagina veroorzaakt.
- Horizontale overloop: Verborgen
- Verticale overloop: Verborgen
Paginering verbergen
Zodra de regelinstellingen aanwezig zijn, opent u de instellingen van de blogmodule. Zorg ervoor dat paging is uitgeschakeld in de iteminstellingen.
- Paginering tonen: Nee
Ga vervolgens naar het tabblad Stijl en wijzig de lay-out naar 'Volledig scherm'.
- Model: Volledig scherm
We zullen ook een overlay toevoegen.
- Getoonde overlay-afbeelding: ACTIEF
- Kleur overlaypictogram: #ffffff
- Achtergrondkleur overlay: rgba (1,0,66,0.33)
Vervolgens voegen we een CSS-klasse toe aan onze blog, waarmee we de carrousel later in de zelfstudie kunnen inschakelen.
- CSS-klasse: blog-module
En we zullen wat ruimte tussen de post-meta en het fragment genereren door een ondermarge toe te voegen aan het CSS-element Post Metadata op het tabblad Geavanceerd.
Ontdek ook: Hoe maak je een schuif- en push-menu in DIVI
margin-bottom: 50px;
Voeg Slick JS-functionaliteit toe
Zodra alle Divi-instellingen aanwezig zijn, is het tijd om gelikte js-functionaliteit toe te voegen! Voeg een codemodule toe net onder de blogmodule (of ergens anders op de pagina).
Voeg vervolgens de gelikte js-bibliotheek toe in scripttags (zoals je kunt zien in onderstaand printscreen). Je bent ook vrij om ze toe te voegen aan je website header in de instellingen van de Divi-thema.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
We zullen elke blogpost op individueel niveau enigszins aanpassen met behulp van CSS-code.
Lees ook: Hoe de blogpagina aan te maken met de Blog-module in DIVI
Plaats zeker de code tussen stijltags zoals weergegeven in de onderstaande schermafbeelding.
.slick-slide {
float: left;
margin: 2vw;
}
En tot slot voegen we wat JQuery-code toe om de carrousel vorm te geven. In de onderstaande code voegen we ook de knoppen toe die we hebben ontworpen voor de carrouselfunctionaliteit.
Plaats zeker de code in scripttags zoals je hieronder kunt zien.
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
}
}]
});
});
Sla de pagina op en sluit Divi's Visual Builder af om het resultaat weer te geven
In de Visual Builder ziet u het resultaat niet.
Dus, zodra u klaar bent, slaat u uw pagina op, verlaat u de Visual Builder en ziet u het resultaat op uw website!
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Download DIVI nu!!!
Conclusie
Alstublieft ! Dat was het voor dit artikel. We hebben je laten zien hoe je het ontwerp van je blogmodule naar een hoger niveau kunt tillen. In het bijzonder hebben we u laten zien hoe u de ingebouwde blogmodule van Divi in ​​een carrousel kunt veranderen met behulp van een gratis js-bibliotheek.
Als u meer wilt weten over Divi, aarzel dan niet om onze catalogus van Divi-tutorials. Raadpleeg ook Hoe de Blog-pagina te maken met de Divi Blog-module
Zie ook onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
