Divi: Jak zobrazit úryvky článku při najetí myší

Chcete vědět, jak zobrazit úryvky článku při umístění kurzoru myši divi ?

Zobrazení náhledu úryvků blogových příspěvků při umístění kurzoru může být efektivním způsobem, jak zachovat kompaktní rozložení mřížky pro vaše blogové příspěvky, aniž byste tyto úryvky úplně opustili. 

Záměrem je tedy nejprve skrýt úryvky a poté je zobrazit, když najedete na příspěvek v mřížce. Umožňuje tedy čtenářům vidět více příspěvků a zároveň jim dává možnost vidět úryvky příspěvků, které je zajímají.

V tomto tutoriálu vám tedy ukážeme, jak vytvořit efekt přepínání úryvků tohoto blogového příspěvku při umístění kurzoru myši divi. 

Začněme!

přehled

Nejprve je zde přehled toho, co budeme v tomto tutoriálu vytvářet.

Vytvoření rozložení modulu blogu

Nejprve musíme vytvořit základní rozložení pro naše blogové příspěvky. V tomto tutoriálu přidáme řádek do sloupce a vložíme do něj modul Blog.

Vytvořte čáru

Chcete-li začít, vložte do sekce řádek s jedním sloupcem

šířka čáry

Poté přejděte na nastavení linky. pak na kartě Styl v části Velikost upravte šířky následovně:

• Maximální šířka: 90 %
• Maximální šířka: 1200 pixelů

Přidejte modul blogu

Poté vložte modul Blog do sloupce dříve vytvořeného řádku.

Nastavení modulu blogu

Poté přejděte na kartu Nastavení modulu Blog Obsah, v části Prvky nastavte možnost „Zobrazit tlačítko Další informace“ na „Ano“

Nyní přejděte na kartu Styl, v části Šablona vyberte šablonu „Mřížka“ jako rozvržení blogu.

Nakonec přejděte na kartu Upřesnit a přidejte následující třídu CSS: 

Třída CSS: toggle-blog-excerpt

Následně tuto třídu použijeme jako selektor pro náš vlastní CSS kód v dalším kroku.

Přidejte vlastní CSS pomocí modulu Kód.

V tomto okamžiku jsou naše blogové příspěvky rozvrženy do mřížky a do nabídky Blog byla přidána vlastní třída CSS. Použijeme tedy tento selektor třídy CSS, abychom konkrétně zacílili na tento modul Blog a přidali efekt přepínání při najetí myší na článek.

Pro přidání CSS použijeme modul Kód. Chcete-li to provést, přidejte modul Kód pod modul Blog.

Dále vložte vlastní CSS níže potřebné k vytvoření efektu přepínání úryvku článku při umístění kurzoru. Především nezapomeňte vložit kód CSS mezi potřebné značky stylu.

1. @media all and (min-width: 981px) {
2.   /* add transition for post content*/
3.   .toggle-blog-excerpt .et_pb_post .post-content {
4.     -webkit-transition: all 500ms !important;
5.     transition: all 500ms !important;
6.   }
7.   /* keep post content visible in visual builder */
8.   body.et-fb .toggle-blog-excerpt .et_pb_post .post-content {
9.     visibility:visible;
10.     opacity: 1;
11.     max-height:none;
12.   }
13.   /* hide post content */
14.   .toggle-blog-excerpt .et_pb_post .post-content {
15.     visibility: hidden;
16.     opacity: 0;
17.     max-height:0px;
18.   }
19.   /* show post content when hovering over post item */
20.   .toggle-blog-excerpt .et_pb_post:hover .post-content {
21.     visibility: visible;
22.     opacity:1;
23.     max-height: 500px;
24.   }
25.   /* set min-height for all post items */
26.   .toggle-blog-excerpt .et_pb_post {
27.     min-height: 400px; 
28.   }
29. }

Podívejme se na dosavadní výsledek.

Výsledek

Pojďme přidat další styling do modulu Blog pomocí Divi builderu

Nyní, když je CSS na místě, aby nám poskytlo přepínací efekt pro úryvky našich blogových příspěvků, můžeme pak do modulu blogu přidat jakýkoli další styl pomocí konstruktoru divi.

V tomto příkladu provedeme minimální úpravy stylu, ale klidně prozkoumejte i svůj vlastní styl.

Styl nadpisu článku

• Název ztlumeného světla: Tučný text
• Barva textu nadpisu: #6D6A7E
• Velikost textu nadpisu: 20px
• Výška titulního řádku: 1.3 m

Styl textu "Přečíst více"

• Přečtěte si více Tlumené světlo: Tučný text
• Přečtěte si více Styl kopírování: TT
• Barva textu Přečtěte si více: #6D6A7E
• Mezery mezi písmeny Číst dále: 1px
• Výška řádku Číst dále: 3.5em

Změna zobrazení stránkování textu

• Zobrazit stránkování Ztlumené světlo: Tučný text
• Barva textu Zobrazit stránkování: #6D6A7E
• Mezera mezi písmeny Zobrazit stránkování: 1px
• Zobrazit stránkování Styl kopírování: TT

Odstraňte ohraničení

• Rozložení mřížky Šířka okraje: 0px

Vznášet se ve stylu Shadow Box

• Shadow box: Viz snímek obrazovky
• Počáteční pozice: 0px
• Síla rozostření rámečku: 38 pixelů
• Barva písma titulků: rgba (109,106,126,0.25)

Konečný výsledek

Proč investovat do čističky vzduchu?

Na závěr, jak je ukázáno v tomto tutoriálu, přidání některých úryvků CSS vám může poskytnout funkce, které potřebujete k vytvoření úryvků blogových příspěvků s pěkným efektem vznášení. 

Nejdůležitější věcí v této metodě je, že můžeme přidat další styling, jak si přejeme, do modulu blogu pomocí integrovaných možností Divi. Kromě toho vám umožní přizpůsobit prvky příspěvků, včetně přidání dalších efektů přechodu. 

Doufám, že to pomůže dát blogu váš Webové stránky Divi další podpora z hlediska designu a funkčnosti. Řekněte nám o svých zkušenostech v komentářích.