Divi: Jak odhalit obsah při najetí myší na karty

Chtěl bys mít obsah který se odhalí při najetí myší na výsuvné úhlové jazýčky divi ?

Vždy je zábavné objevovat nové a kreativní způsoby interakce s uživateli pomocí efektů hoveru. Skvělý způsob, jak toho dosáhnout, je odhalit obsah při umístění kurzoru pomocí rozšiřitelných rohových jazýčků. To umožňuje uživateli umístit kurzor myši na kartu v rohu sloupce nebo obrázku a rozbalit překryvnou vrstvu s a obsah další užitečnost pro uživatele.

V tomto tutoriálu vytvoříme rozvržení divi zcela unikátní, které odhalí obsah při umístění kurzoru pomocí rozšiřitelných záložek úhlu. Ve skutečnosti vám ukážeme, jak navrhnout rozšiřitelný rohový pokos pro všechny čtyři rohy sloupu v divi.

Začněme!

přehled

Zde je rychlý pohled na rozložení rozbalitelných rohových karet, které společně vytvoříme. Všimněte si, jak krásně symetrické jsou efekty a obsah vznášení.

Vytvořte novou stránku pomocí Divi Builder

Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.

Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder

poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)

Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.

Vytvoření rozvržení rozšiřitelných překryvů obsahu v Divi

Návrh výsuvného rohového pokosu z pravé dolní polohy

Chcete-li začít, přidejte do běžné sekce řádek se dvěma sloupci.

Před přidáním modulu aktualizujte parametry linky následovně:

• Použít vlastní šířku okapu: ANO
• Šířka žlabu: 4

Pro tento první zobrazený prvek vytvoříme obrázek na pozadí sloupce, který bude mít rohovou záložku (pomocí modulu Blurb) v pravé dolní části sloupce, který se při najetí myší roztáhne a pokryje celý sloupec/obrázek.

Přečtěte si také našeho průvodce Divi: Jak vytvořit mřížku sloupce tekutiny při vznášení

Začněme přidáním modulu Blurb.

Přidejte modul Blurb do sloupce 1

Nastavení sloupce 1

Jakmile je reklama na svém místě, otevřete nastavení řádku a aktualizujte následující:

• Obrázek na pozadí [vložit obrázek]
• Velikost obrázku na pozadí: Skutečná velikost

POZNÁMKA: V tomto příkladu používáme průhledné obrázky piva na pozadí převzaté z balíčku rozložení „Pivovar“. Jsou 128 x 359 pixelů, takže používáme skutečnou velikost obrázku.

Hranice sloupce 1

• Zaoblené rohy: 10px vpravo dole
• Šířka okraje (vpravo a dole): 2 pixely
• Barva ohraničení (vpravo a dole): #e94558

Vlastní CSS a přetečení

Na kartě Upřesnit přidejte do hlavního prvku následující vlastní CSS:

height: 400px;

Rozbalovací možnost 'Viditelnost' a proveďte následující změny:

• Horizontální přetečení: Skryté
• Vertikální přetečení: Skryté

Přidejte obsah do modulu Blurb

Nyní jsme připraveni začít přizpůsobovat modul Blurb ve sloupci 1. Otevřete nastavení modulu a aktualizujte následující:

• Název: Mango IPA
• Tělo:

<p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
<p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
<p>4.8% ABV / 4 IBUs</p>

• Obrázek: Přidejte stejný obrázek jako pozadí sloupce

Přizpůsobení modulu Blurb

Dejte reklamě barvu pozadí při najetí myší následovně:

• Pozadí (Desktop): průhledné
• Desktop (Hover): rgba (255,255,255,0.9)

Na kartě Design, aktualizujte následující:

• Umístění obrázku/ikony: vpravo
• Písmo názvu: Oswald
• Tloušťka písma: Polotučné
• Styl písma: TT
• Velikost textu: 40px
• Barva textu těla (počítač): jasná
• Barva textu těla (umístění myši): #121212

• Šířka obrázku/ikony: 100 pixelů (počítač), 64 pixelů (telefon)
• Šířka obsahu: 100 %
• Výška: 100 %
• Výplň (počítač): 15 % (nahoře a dole), 8 % (vlevo a vpravo)
• Výplň (umístění myši): 8 % (nahoře, dole, vlevo a vpravo)

• Zaoblené rohy (počítač): 20 pixelů vlevo nahoře
• Zaoblené rohy (umístění kurzoru): 10 pixelů vlevo nahoře
• Šířka ohraničení (nahoře a vlevo): 4 pixely (počítač), 2 pixely (při umístění kurzoru myši)
• Barva ohraničení (nahoře a vlevo): #e94558

Možnost transformace (počítač)

• Měřítko transformace (X a Y): 50 %

• Transformovat překlad
  • Osa Y: 50 %
  • Osa X: 30 %

Přečtěte si také našeho průvodce: Divi: Jak vytvořit lepící zápatí s efektem "Odhalit".

• Transform Origin: dole a vpravo

Možnosti transformace (umístění kurzoru myši)

• Měřítko transformace (Y a X) (přejetí myší): 100 %

• Transformovat překlad (Y a X) (přejetí myší): 0 %

Chcete-li převrátit doporučený obrázek na pravou stranu, přidejte do oblasti následující vlastní CSS Obsah souhrnu :

direction: rtl

POZNÁMKA: „rtl“ znamená "Zprava doleva", která změní výchozí pořadí obsahu (zleva doprava).

Výsledek

Podívejme se na konečný výsledek roztažení naší rohové karty z pravé dolní pozice. Všimněte si, jak se při najetí myší roztáhne, aby vyplnil celý sloupec.

Návrh výsuvného rohového pokosu z levé dolní polohy

Duplicitní sloupec

Chcete-li vytvořit rohový štítek rozšiřující se z levé dolní pozice, můžeme návrh znovu spustit duplikováním celého sloupce. Otevřít nastavení řádku a duplicitní sloupec 1. Poté odstraňte další sloupec, abyste měli pouze dva přesné duplikáty.

Aktualizujte nastavení sloupce 2

Dále otevřete nastavení sloupce 2 a aktualizujte následující:

• Zaoblené rohy: 10 px vlevo dole
• Šířka okraje (vpravo): 0px
• Šířka okraje (vlevo): 2 pixely
• Barva: #e94558

Aktualizujte parametry modulu Blurb

Dále aktualizujte nastavení Blurb následovně:

• Zarovnání textu: vpravo
• Zaoblené rohy (počítač): 20 pixelů vpravo nahoře
• Zaoblené rohy (umístění kurzoru): 10 pixelů vpravo nahoře
• Šířka levého okraje: 0px
• Šířka pravého okraje: 4 pixely (počítač), 2 pixely (při umístění kurzoru myši)
• Barva pravého okraje: #e94558

• Transformovat překlad (osa X) (počítač): -30 %
• Transform Origin (Desktop): vlevo dole

Poté nezapomeňte odebrat vlastní CSS v oblasti obsahu Blurb.

Výsledek

Zde je výsledek. Všimněte si, jak je tento symetrický k prvnímu a roste z levé spodní pozice sloupce.

Návrh výsuvného rohového pokosu z pravé horní pozice

Nyní jsme připraveni začít s našimi posledními dvěma rozšiřujícími se návrhy rohových pokosů. Abychom získali náskok, zduplikujme celý řádek obsahující reklamu, kterou jsme již navrhli.

Aktualizujte nastavení sloupce 1

Poté otevřete nastavení pro duplicitní řádek, poté otevřete nastavení pro sloupec 1 a aktualizujte následující:

• Zaoblené rohy: 10px vpravo nahoře
• Šířka dolního okraje: 0px
• Šířka horního okraje: 2px
• Barva horního okraje: #e94558

Aktualizujte parametry modulu Blurb

Dále otevřete nastavení modulu Blurb a aktualizujte následující:

• Zaoblené rohy (počítač): 20 pixelů vlevo dole
• Zaoblené rohy (umístění kurzoru): 10 pixelů vlevo dole
• Šířka horního okraje: 0 px
• Šířka dolního okraje: 4 pixely (počítač), 2 pixely (při umístění kurzoru myši)
• Šířka spodního okraje: #e94558

• Transformovat překlad (osa Y) (počítač): -50 %
• Transform Origin: vpravo nahoře

Vlastní CSS

Právě teď vidíme pouze levou spodní část prezentačního modulu, která nezobrazuje náš název jako další dvě prezentace v řádku výše. Aby se titulek zobrazil na kartě, musíme jej přemístit do levého dolního rohu reklamy pomocí vlastního CSS.

Přidejte do oblasti následující vlastní CSS Název reklamy :

position: absolute;
bottom: 0;
left: 15px;

Poté do oblasti obsahu přidejte následující CSS Obsah souhrnu :

direction: rtl;
height: 100%;

Návrh výsuvného rohového pokosu z levé horní pozice

Pro náš čtvrtý a poslední efekt najetí myší na rozšiřující se rohovou kartu ji umístíme do levého horního rohu, abychom dokončili symetrický design celého rozvržení mřížky.

Aktualizujte nastavení sloupce 2

V části Nastavení řádku otevřete nastavení sloupce 2 a aktualizujte následující:

• Ohraničení Rohy: 10 px vlevo nahoře
• Šířka dolního okraje: 0px
• Šířka horního okraje: 2px
• Barva horního okraje: #e94558

Aktualizujte parametry modulu Blurb

Dále otevřete nastavení textu modulu Blurb ve sloupci 2 a aktualizujte následující:

• Zaoblené rohy (počítač): 20 pixelů vpravo dole
• Zaoblené rohy (umístění kurzoru): 10 pixelů vpravo dole
• Šířka horního okraje: 0 px
• Šířka dolního okraje: 4 pixely (počítač), 2 pixely (při umístění kurzoru myši)
• Barva spodního okraje: #e94558

Poté aktualizujte možnosti transformace:

• Přeložení transformace (osa Y) (počítač): -50 %
• Transform Origin: vlevo nahoře

Vlastní CSS

Poté do oblasti přidejte následující vlastní CSS Název reklamy :

position: absolute;
bottom: 0%;
right: 0%;

Do pole přidejte také následující CSS Obsah inzerátu :

height: 100%;

Dokončete návrh rozvržení

Barva pozadí sekce

Přidejte barvu pozadí sekce následovně:

• Pozadí: #efefef

Přidat titulek

Chcete-li vytvořit nadpis, přidejte řádek do sloupce uprostřed dvou řádků

Poté přidejte modul Text.

Přidejte obsah: „Sezónní“.

Poté aktualizujte následující nastavení:

• Písmo: Merriweather
• Tloušťka písma: Tučné
• Styl: TT
• Zarovnání textu: Na střed
• Barva textu: #999999
• Velikost: 50 pixelů (počítač), 30 pixelů (tablet), 24 pixelů (telefon)
• Vzdálenost mezi písmeny: 1 em

• Výplň (vlevo): 50 pixelů (počítač), 30 pixelů (tablet), 24 pixelů (telefon)

Konečný výsledek

Podívejte se na konečný výsledek rozvržení s rozšiřujícími se rohovými kartami.

A tady je design na mobilu.

Stáhnout DIVI hned!!!

Proč investovat do čističky vzduchu?

Rohové karty zobrazené v tomto tutoriálu budou určitě fungovat pro jakýkoli typ obsahu, který chcete předvést Webové stránky Divi. 

Také nemusíte používat všechny čtyři rohy. Můžete například vytvořit rozvržení mřížky pro obrázky pouze pomocí záložek v pravém horním rohu, abyste odkryli obsah při najetí myší.

Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Můžete se také poradit 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.

...