Divi: Jak vytvořit vlastní překryvné obrázky

Chtěli byste se naučit, jak navrhovat vlastní překryvné obrázky pomocí divi ?

Překryvné obrázky jsou ve webovém designu již dlouhou dobu. Jsou ideální pro zapojení Návštěvníci odhalením obsah Další a designové prvky, když najedete myší na obrázek. 

V tomto tutoriálu vám ukážeme, jak navrhnout vlastní překryvné obrázky divi. Tato překrytí se změní a odhalí prvky, když najedete na obrázek. 

Nejsou potřeba žádné pluginy.

Začněme!

přehled

Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.

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 Stavitel

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.

Vytváření vlastních překryvných obrázků v Divi

Navrhněte sekci, řádek a sloupce

Chcete-li začít, vytvořte ve výchozí sekci řádek se třemi sloupci.

Otevřete nastavení sekce a přidejte následující barvu pozadí:

• Pozadí: #3a0ca3

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

• CSS Třída: et-overlay-container

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

Přidat obrázek

Nyní, když jsou sekce, řádek a sloupec připraveny, přidejte nový modul Image do sloupce 1. Toto bude hlavní obrázek za našimi návrhy překrytí.

Nahrajte obrázek, který vypadá spíše jako portrét než na šířku. Ujistěte se, že je dostatečně široký, aby zabral celou šířku sloupce ve všech velikostech prohlížečů.

POZNÁMKA: Můžete použít obrázky na šířku, ale možná budete muset odpovídajícím způsobem upravit umístění překryvných prvků, aby se nepřekrývaly.

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

• Okraj (dole): 0px

Na kartě pokročilý, přidejte následující třídu CSS:

• Třída CSS: et-overlay-image

Přidání překryvné barvy obrázku pomocí modulu "Divider".

K vytvoření překryvné barvy obrázku použijeme modul Divider.

Nejprve přidejte pod obrázek modul Divider.

Poté umístěte oddělovač absolutně tak, aby byl umístěn nad obrázkem:

• Pozice: Absolutní

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

• Show Divider: NO

• Barva pozadí: rgba (247,37,133,0.8)

Poté aktualizujte výšku a šířku oddělovače:

• Šířka: 100 %
• Výška: 100 %

Po vytvoření návrhu přidejte do rozdělovače následující třídu CSS:

• a-překryvná-položka

POZNÁMKA: Tato třída by měla být přidána ke všem prvkům návrhu překrytí, které chcete zobrazit pouze při najetí myší. Pokud nechcete, aby byl prvek zpočátku skrytý, vynechejte ho.

Abyste měli přehled o konstrukčních prvcích/modulech, otevřete modální vrstvy a označte modul Oddělovač („Barva překrytí“).

Přidán překryvný text záhlaví

Pod modulem Oddělovač přidejte nový modul Text. To bude sloužit jako překryvný text záhlaví, který se zobrazí v horní části obrázku při umístění kurzoru.

Aktualizujte obsah s názvem H2:

<h2>Coaching</h2>

Dále aktualizujte štítek textového modulu pro budoucí použití.

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

• Zarovnání textu: Na střed
• Barva textu: Světlá

• Písmo: Cormorant Garamond
• Tloušťka písma: Tučné
• Velikost textu: 40px

• Šířka: 100 %
• Max. šířka: 85 %

Na kartě pokročilý, aktualizujte pozici následovně:

• Pozice: Absolutní
• Umístění: nahoře uprostřed
• Vertikální posun: 10 %

POZNÁMKA: Svislé posunutí může být nutné upravit v závislosti na velikosti poměru stran obrazu. Například obrázek typu na šířku může vyžadovat menší odsazení

Dále do textového modulu přidejte následující třídy CSS:

• Třída CSS: et-overlay-item move-down

Kromě třídy "a-překryvná-položka", přidáme další třídu "posunout dolů" abyste mohli použít vlastní CSS k mírnému posunutí záhlaví dolů při najetí myší.

Vytvoření překryvného hlavního textu

Chcete-li vytvořit překrytí hlavního textu, můžeme duplikovat modul Text použitý pro překrytí záhlaví. Před aktualizací duplicitních parametrů změňte popisek na "Překryvné tělo".

Otevřete nastavení textu nového modulu Text a aktualizujte soubor obsah těla s několika větami odstavcového textu.

Na kartě pokročilý, změňte absolutní umístění modulu na střed.

Protože nechceme, aby se to přesunulo při umístění kurzoru (pouze se objevilo), aktualizujte třídu CSS tak, aby zahrnovala pouze následující:

• CSS Třída: et-overlay-item

Vytvoření překryvného tlačítka

Poslední překryvnou vrstvou na tomto obrázku bude tlačítko. Chcete-li vytvořit tlačítko, přidejte nový modul Button pod druhý modul Text.

Před úpravou návrhu aktualizujte polohu tlačítka následovně:

• Pozice: absolutní
• Vertikální posun: 10 %

Nyní by tlačítko mělo být ve středu spodní části obrázku.

Na kartě pokročilý, aktualizujte třídu CSS a přidejte vlastní fragment CSS do hlavního prvku následovně:

• Třída CSS: et-overlay-item move-up

• Hlavní prvek CSS:

min-width: 15em;

Všimněte si, že k tlačítku byla přidána další třída, která jej při najetí myší posune mírně nahoru. To má doplnit pohyb textu záhlaví dolů při umístění kurzoru myši.

Dále aktualizujte následující nastavení návrhu:

• Zarovnání tlačítek: na střed
• Použít vlastní styly pro tlačítko: ANO
• Velikost textu tlačítka: 14px
• Barva pozadí: #4361ee

• Šířka okraje tlačítka: 0 pixelů
• Vzdálenost mezi písmeny tlačítka: 0,1 em
• Tloušťka písma: Tučné
• Styl písma tlačítka: TT
• Výplň: 0,8 em (nahoře a dole), 0 pixelů (vlevo a vpravo)

Přidání vlastního CSS pomocí modulu Kód

Přidejte modul kódu pod tlačítko.

Poté vložte následující CSS do obsahu kódu. Nezapomeňte kód zabalit do potřebných značek skriptu.

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

Kód je okomentován, takže můžete pochopit, kde můžete upravit CSS tak, aby vyhovovalo vašim potřebám.

Duplikujte sloupec pro další design

Otevřete modální vrstvu, nejprve odstraňte dva prázdné sloupce.

Poté dvakrát duplikujte sloupec obsahující návrh překryvného obrázku. Měli byste mít celkem tři sloupce s identickými vzory.

Vytvoření návrhu překryvného obrázku č. 2

U tohoto dalšího návrhu umístíme tlačítko do středu obrázku (vždy viditelné). Dále přesuneme záhlaví a hlavní text do pohledu z horní a spodní části obrázku.

Upravte umístění hlavního textu a třídu CSS

Otevřete nastavení modulu překryvného textu ve sloupci 2 a aktualizujte pozici:

• Umístění: dole uprostřed
• Vertikální posun: 5 %

Dále aktualizujte třídu CSS o následující:

• Třída CSS: et-overlay-item move-up

Upravte umístění tlačítka a třídu CSS

Dále otevřete nastavení tlačítka ve sloupci 2 a aktualizujte následující umístění:

• Umístění: Centrum

Dále odstraňte třídu CSS, protože chceme, aby tlačítko zůstalo vždy viditelné.

Otevřete nastavení modulu Dělič (barva překrytí) a změňte pozadí následovně:

• Pozadí: rgba(67,97,238,0.8)

Poté otevřete nastavení tlačítka a změňte barvu pozadí:

• Barva pozadí: #f72585

Upravte obrázek a třídu CSS

Poté otevřete nastavení obrázku a nahrajte nový obrázek (pokud chcete).

Poté do obrázku přidejte následující třídu CSS:

• Třída CSS: et-overlay-image et-scale

Všimněte si, že kromě třídy „et-overlay-image“ existuje další třída nazvaná „et-scale“, která zvětší velikost obrázku a vytvoří efekt přiblížení při najetí myší.

Vytvoření návrhu překryvného obrázku č. 3

Nyní je čas vytvořit třetí návrh překryvného obrázku ve sloupci 3.

Upravte obsah překryvného textu a třídu CSS

Začněte otevřením nastavení modulu překryvného textu ve sloupci 3. Dále přidejte nadpis H2 nad odstavcový text. Nyní budou oba uvnitř modulu.

Poté odeberte třídu CSS, aby text zůstal viditelný nad obrázkem.

Upravte odsazení tlačítka a třídu CSS

Otevřete nastavení modulu tlačítka a aktualizujte posun vertikální polohy:

• Vertikální posun: 5 %

Odebrat překryvné záhlaví

Dále odeberte modul Overlay Header Text.

Upravte barvu překrytí a třídu CSS

Otevřete nastavení modulu Dělič (barva překrytí) a aktualizujte pozadí na následující:

• Barva přechodu levého pozadí: rgba (67,97,238,0.8)
• Pravá barva přechodu pozadí: rgba (247,37,133,0.8)
• Výchozí pozice: 25%
• Konečná pozice: 75 %

A protože chceme, aby překrytí přechodu bylo vždy viditelné, odeberte třídu CSS.

Upravte třídu CSS obrázku

Nakonec do hlavního obrázku přidáme další třídu CSS („et-rotate“), která změní velikost a otočí obrázek při najetí myší.

• Třída CSS: et-overlay-image et-rotate

Poslední úpravy

Než zkontrolujeme naše konečné výsledky, musíme provést nějaké úpravy.

Odeberte výchozí spodní okraj pro všechny moduly

Protože jsme již aktualizovali okraj se spodním okrajem 0px, můžeme tento okraj rozšířit na všechny moduly.

Klikněte pravým tlačítkem na nastavení okrajů a vyberte "Prodloužit marži".

Poté zvolte rozšíření okraje na Všechny moduly na stránce.

Odstraňte duplicitní moduly kódu

Ujistěte se, že jste odstranili nadbytečné moduly kódu, které byly přeneseny z duplikace prvního sloupce. Měli byste mít jen jeden. Můžete to udělat snadno z modálních vrstev.

Konečné výsledky

Nyní, když jsou naše tři návrhy hotové, pojďme se podívat na konečné výsledky našich návrhů překryvných obrázků.

Stáhnout DIVI hned!!!

A tady je design na mobilu. Překryvné efekty najetí kurzorem lze použít pouze na ploše. Překryvné vrstvy proto budou na mobilu stále viditelné.

Stáhnout DIVI hned!!!

Proč investovat do čističky vzduchu?

Vytváření vlastních překryvných obrázků je ve skutečnosti velká zábava. Existuje nespočet návrhů, které můžete vizuálně testovat pomocí Divi Builder. 

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.

...