Co takhleplakáter váš blog Divi ve formě kolotoče, kde můžete snadno procházet články?
Pro mnoho webů se blogování stalo důležitou součástí jejich marketingové strategie. SEO.
Kromě vytváření vysoce kvalitního obsahu je ale také důležité zjednodušit proces procházení příspěvků pro vaše návštěvníky. Tímto způsobem mohou přeskakovat z článku na článek a strávit více času na vašem webu čtením obsahu, který tam zveřejníte.
V Divi je modul Blog, který můžete použít k dynamickému zobrazení vašich článků a také k jejich přizpůsobení. Pokud hledáte způsob, jak posunout vyhledávání příspěvků na další úroveň, tento článek se vám bude líbit.
Ukážeme vám, jak přeměnit integrovaný blogový modul Divi na karusel pomocí integrovaných prvků Divi a bezplatná knihovna js .
Pojďme.
přehled
Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek.
Vytvořte si stránku blogu pomocí Divi Theme Builder
Začněte přidáním nové stránky na web, na kterém pracujete.
Dejte své stránce název, publikujte stránku a klikněte na 'Použijte nástroj Divi Builder".
Stáhněte si předem navrženou stránku blogu „Interior Design Company“.
V tomto tutoriálu budeme používat stránku blogu z rozvržení 'Interior Design Company', ale můžete použít jakékoli jiné rozvržení, které se vám líbí.
Vytvořte šablony šipek „Předchozí“ a „Další“ pomocí modulu Souhrn od Divi
Jakmile jsme na stránce blogu, můžeme začít vytvářet karusel.
První část je věnována vytvoření šipek, které potřebujeme, abychom umožnili návštěvníkům procházet mezi články.
Čtěte také: Jak vytvořit lepivou globální hlavičku v DIVI
K navrhování šipek použijeme modul Souhrn od Divi, ale můžete použít jakýkoli jiný modul podle svého výběru.
Přidejte nový řádek v horní části sekce váš blog pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů otevřete nastavení čáry a nechte čáru dotýkat se levé a pravé strany sekce změnou nastavení velikosti následovně:
- Maximální šířka: 100%
- Maximální šířka: 100%
Přidejte modul Souhrn
Přidejte modul Souhrn a vložte název.
Poté vyberte ikonu.
- Použít ikony: ANO
Nastavení ikon
Přejděte na kartu Styl a upravte nastavení ikon následovně:
- Barva ikony: #000000
- Umístění obrázku/ikony: Vertex
- Zarovnání obrázku/ikony: Střed
Nastavení textu nadpisu
Dále změňte nastavení textu nadpisu.
- Písmo názvu: Mulish
- Soft Light Název: Semi Bold
- Zarovnání textu: na střed
- Barva textu nadpisu: #000000
dimenzování
Poté změníme nastavení velikosti modulu na různých velikostech obrazovky.
- Maximální šířka: 10 % (počítač), 20 % (tablet), 30 % (telefon)
- Zarovnání textu: vpravo
Přidejme také třídu CSS. Tato třída CSS nám pomůže spustit akci karuselu po kliknutí.
- CSS třída: tlačítko zpět
Nakonec do hlavního prvku modulu přidáme také řádek kódu CSS, který změní kurzor na ukazatel.
cursor: pointer;
Klonujte čáru a umístěte ji na spodní část sekce
Jakmile dokončíte první šipku, můžete naklonovat celý kontejner řádků a umístit duplicitní řádek na konec sekce blogu.
Otevřete modul Souhrn v duplicitním řádku a upravte název.
Použít ikony: ANO.
Upravte také třídu CSS.
- CSS třída: tlačítko další
Připravte modul Blog
dimenzování
Když jsou šipky na místě, je čas začít vylepšovat modul Blog, počínaje řádkem, do kterého je umístěn. Otevřete nastavení čar a podle toho změňte nastavení velikosti:
- Maximální šířka: 100 %
- Maximální šířka: 100%
Poté nastavte přetečení řádku na „skrytý“. To pomůže zajistit, že karusel nezpůsobí zobrazení vodorovného posuvníku na naší stránce.
- Horizontální přepad: Skrytý
- Vertikální přetečení: Skryté
Skrýt stránkování
Jakmile jsou nastavení řádků nastavena, otevřete nastavení modulu Blog. Ujistěte se, že je stránkování zakázáno v nastavení položky.
- Zobrazit stránkování: Ne
Dále přejděte na kartu Styl a změňte rozvržení na „Celá obrazovka“.
- Model: Celá obrazovka
Přidáme i překryv.
- Zobrazený překryvný obrázek: AKTIVNÍ
- Barva překryvné ikony: #ffffff
- Barva pozadí překryvné vrstvy: rgba (1,0,66,0.33)
Dále do našeho blogu přidáme třídu CSS, která nám později v tutoriálu pomůže povolit karusel.
- CSS třída: blog-module
A vygenerujeme určitý prostor mezi meta příspěvku a úryvkem přidáním spodního okraje k prvku CSS Post Metadata na kartě Upřesnit.
Objevte také: Jak vytvořit posuvné a tlačné menu v DIVI
margin-bottom: 50px;
Přidejte funkcionalitu Slick JS
Jakmile jsou všechna nastavení Divi na místě, je čas přidat funkci slick js! Přidejte modul Kód těsně pod modul Blog (nebo kdekoli jinde na stránce).
Poté přidejte knihovnu slick js ve značkách skriptu (jak můžete vidět na printscreenu níže). Můžete je také přidat do záhlaví svého webu v nastavení Divi téma.
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
Každý blogový příspěvek na individuální úrovni mírně upravíme pomocí CSS kódu.
Čtěte také: Jak vytvořit stránku blogu s modulem Blog v DIVI
Nezapomeňte kód umístit mezi značkami stylu jak je znázorněno na snímku obrazovky níže.
.slick-slide {
float: left;
margin: 2vw;
}
A nakonec přidáme nějaký kód JQuery, abychom umožnili karuselu, aby získal tvar. V níže uvedeném kódu také přidáváme tlačítka, která jsme navrhli pro funkci karuselu.
Nezapomeňte kód umístit ve značkách skriptu jak můžete vidět níže.
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
}
}]
});
});
Uložte stránku a ukončete Divi's Visual Builder, abyste zobrazili výsledek
Ve Visual Builderu neuvidíte výsledek.
Takže, jakmile budete hotovi, uložte svou stránku, ukončete Visual Builder a uvidíte výsledek na svém webu!
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Tak ! To je pro tento článek vše. Ukázali jsme vám, jak posunout návrh modulu Blog na další úroveň. Konkrétně jsme vám ukázali, jak pomocí bezplatné knihovny js proměnit vestavěný modul Blog Divi na karusel.
Pokud se chcete o Divi dozvědět více, neváhejte navštívit náš katalog Divi tutoriály. Můžete se také poradit Jak vytvořit stránku Blog s modulem Divi Blog
Viz také naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
