Divi: Jak vytvořit responzivní posuvník akordeonu

Divi: Jak vytvořit responzivní posuvník akordeonu

, vyrábí jej Gaetan | divi, Divi Tutoriály

Chtěli byste vytvořit citlivý posuvník Divi akordeonu?

Posuvník akordeonu je zábavný a atraktivní způsob, jak zobrazit obsah na malém prostoru. 

Akordeonové posuvníky se obvykle skládají z několika prvků (nebo panelů) naskládaných vodorovně jako záhyby záclony. A když najedete na jeden z panelů, roztáhne se a odhalí obsah, zatímco ostatní panely harmoniky se smrští. To je místo, kde získáme efekt podobný akordeonu rozpínání a stahování.

V tomto tutoriálu vám ukážeme, jak vytvořit responzivní posuvník akordeonu v Divi pouze pomocí CSS. K tomu použijeme několik modulů Divi, které budou sloužit jako akordeonové panely. 

přehled

Zde je rychlý přehled toho, čeho v tomto tutoriálu dosáhneme.

Stáhnout DIVI hned!!!

Vytvoření nové stránky pomocí Divi Builder

Chcete-li začít, budete muset provést následující:

citlivý akordeonový posuvník Divi
citlivý akordeonový posuvník Divi

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

Vytvoření responzivního akordeonového slideru v Divi

Vytvoření linky

Chcete-li začít, přidejte do běžné sekce řádek s jedním sloupcem.

Poté otevřete nastavení linky a aktualizujte následující:

Hodnoty šířky a maximální šířky lze změnit podle vašich potřeb. Harmonika se vejde a bude fungovat v jakékoli šířce linky.

Parametry sloupce

Nyní, když máme pro řádek definovanou výšku, otevřete nastavení sloupců a do hlavního prvku přidejte následující CSS:
Desktop

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

tableta

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

Vytvoření akordeonového panelu pomocí modulů Blurb

Harmonika může být postavena pomocí jakéhokoli typu modulu (modulů). Pokud bychom chtěli, mohli bychom použít kombinaci různých modulů, které by fungovaly jako harmonikový panel. Ale pro tento návrh použijeme moduly Blurb.

Začněte přidáním modulu Blurb na řádek.

Blurb Mod Design

Otevřete nastavení modulu prezentace a aktualizujte následující:

Zachovejte smyšlený název a obsah těla. Vždy to můžeme později změnit.

Dále aktualizujte ikonu prezentace následovně:

Pozadí

Poté dejte reklamě obrázek na pozadí a překryvný přechod při umístění kurzoru následovně:

Poté přidejte překrytí pozadí.

Vznášet se

ikona

Dále se přepněte na kartu Návrh a aktualizujte následující:

Název a text textu

Výška krabice a stín

Po přizpůsobení textu dejte modulu výšku 100 % a stín rámečku následovně:

Vlastní CSS

Aby naše akordeonové panely (nebo modul Blurb) rostly a stahovaly se se zbytkem modulů, musíme přidat vlastní CSS pro změnu velikosti modulu pomocí flex-grow. 

Protože budeme mít celkem 5 modulů, které tvoří akordeon, přidáme "flex:1" pro výchozí stav a poté jej změníme na "flex:5" ve stavu vznášení.

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

Kancelář

flex:1;
position: relative !important;
transition: flex 800ms !important;

Vznášet se

flex:5;
position: relative !important;
transition: flex 800ms !important;

Poté přidejte následující vlastní CSS do CSS obsahu Blurb:

Kancelář

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
vytvořte citlivý posuvník Divi akordeonu

tableta

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
vytvořte citlivý posuvník Divi akordeonu

Přetečení a přechod

vytvořte citlivý posuvník Divi akordeonu

Velmi dobře! Jednalo se o seriózní přizpůsobení modulu Blurb. Ale dobrá zpráva je, že vše, co musíme udělat, je duplikovat je, abychom vytvořili zbývající akordeonové panely.

Duplicitní rozvržení pro více akordeonových panelů

Najeďte myší na prezentační modul a klikněte čtyřikrát na dvojitou ikonu, abyste vytvořili celkem pět akordeonových panelů (nebo modulů).

Dále aktualizujte obrázky na pozadí pro každý z nových reklam, které jste duplikovali.

vytvořte citlivý posuvník Divi akordeonu

Konečný výsledek

Nyní, když jsme prošli všemi kroky, pojďme se podívat na konečný výsledek.

Stáhnout DIVI hned!!!

závěr

Tento citlivý akordeonový posuvník má opravdu některé jedinečné prvky, díky kterým je jeho používání zábavné. Akordeonové panely se při přejetí myší plynule roztahují a smršťují bez jakýchkoli neočekávaných závad. 

A ikony prezentací se mění při umístění kurzoru myši a na mobilu, aby se zvýšilo uživatelské prostředí. Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najdete 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.

...

10 logistických motivů WordPress pro vytvoření webové stránky

10 logistických motivů WordPress pro vytvoření webové stránky

, vyrábí jej Passy Guy | dopravní síť

Znáte velkou nebo malou a střední firmu, která dnes nemá webové stránky? Přemýšleli jste někdy nad tím, proč by měl podnik vlastnit nebo jaké jsou jeho výhody? Už jste našli nejlepší logistická témata WordPress? Chcete vytvořit logistický web?

Odpovědi na všechny tyto otázky jsou celkem jednoduché. Webové stránky umožňují propagovat služby a produkty nabízené společností. Kromě toho, vzhledem k obrovskému trhu, kterým je internet, by to bylo nejlepší místo, kde by mohla být tato propagace cílená a levnější. Zde je několik odpovědí na vaše otázky, ale mohli bychom citovat tisíce dalších, což není účelem našeho článku.

Pokud tedy hledáte téma WordPress, které vám pomůže vytvořit web pro logistickou nebo přepravní společnost, nehledejte nic jiného. Zde je seznam prémiová témata WordPress, věnovaný pouze tomuto úkolu.

Zveme vás k nahlédnutí do našeho seznamu.

Ale než se objevíme společně Jak nainstalovat 7 kroků WordPress blogu et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu 

Pak zpět k tomu, proč jsme tady.

1. Transitec

Transitec je moderní a profesionální, plně citlivé téma WordPress, které vám umožní vytvořit webovou stránku mezinárodního postavení pro jakoukoli dopravní nebo logistickou společnost. Jeho vzhled a rozvržení se postará o zvýraznění každé služby, kterou váš web nabídne. 

Logistická WordPress témata - Transitec

Toto téma WordPress, navržené s opatrností, přichází s čistým kódem a vynikající dokumentací. Velmi citlivý, je zobrazen dokonale na jakémkoli typu obrazovky. Je to vynikající typografie, a kvalita použitých písem vám nabídne neuvěřitelný web, který nepochybně svést své návštěvníky.

Neváhejte objevit Jak konfigurovat dodávky na WooCommerce

Je dodáván s částí blogu, a vizuální konstruktér stránek, několik šablon rozložení a záhlaví, formulář žádosti o nabídku a další.

Stáhnout Demo | Web hosting

2. zahrnovat

Encompass je prémiové téma WordPress, které nabízí moderní, plně přizpůsobitelné rozhraní, které vám pomůže vytvořit webovou stránku pro jakoukoli firmu nabízející přepravní služby.

vytvořit dopravní web - Encompass

Toto téma WordPress je také založeno na Cherry Framework a má vše, co potřebujete aby váš web spolehlivý, což zanechá zásadní dopad na vaše zákazníky. K dispozici je také plugin Cherry Projects, který vám umožní prezentovat vaši flotilu velmi profesionálním způsobem.

Plugin Cherry Services vám také pomůže představit všechny informace o nabídkách námořní logistiky a jejich výhodách.

Discover Jak zvýšit počet konverzí: zvýšit omezené nabídky.

Dejte svým zákazníkům vědět o kvalitě vašeho přepravního podnikání a zkušenostech těch, kteří s vámi spolupracují prostřednictvím Cherry. Toto téma WordPress vám nabízí jednu z nejvýkonnějších funkcí včetně profesionálního procesu vytváření webových stránek pomocí vizuálního nástroje Power Page Builder.

Stáhnout Demo Web hosting

3. Genurent

Genurent je responzivní téma WordPress, ideální pro vytváření webů pro soukromé a veřejné dopravní společnosti, kyvadlovou dopravu, dodávku, limuzínu, půjčovny vrtulníků a další. Díky tomuto čistě kódovanému a velmi dobře organizovanému tématu WordPress bude tento úkol příjemným zážitkem pro každého začátečníka nebo pro každého odborníka na vývoj webových stránek.

Logistická WordPress témata - Genurent

Jedná se o plně přizpůsobitelné téma WordPress s uživatelsky přívětivým vzhledem na všech zařízeních. Má dokumentaci, která popisuje každou část vašeho tématu WordPress, a provede vás různými instalačními a konfiguračními procesy vašeho webu.

Objevte také Zásuvné moduly 7 WordPress pro přidání vodoznaku na obrázky vašeho webu.

Je kompatibilní s několik oblíbených pluginů, z nichž některé jsou do druhého integrovány bezplatně. Jeho ukázka je vysoce přizpůsobitelná díky pluginům WordPress, ale také díky výkonnému a robustnímu ovládacímu panelu, který nepochybně najdete intuitivně.

Stáhnout Demo | Web hosting

4.Logistika

Logistika je prémiové a víceúčelové téma WordPress, které je speciálně navrženo pro nákladní dopravu, logistiku, přepravu, přepravu nebo jakékoli společnosti poskytující služby v nákladní dopravě.

nejlepší WordPress témata - Logistika

Mimo jiné nabízí 8 stránek věnovaných portfoliu, 6 šablon stránek věnovaných sekci blogů, stejně jako šablony stránek pro sekce služeb, dopravy a infrastruktury, které jsou také vybaveny výjimečným vzhledem, což vám umožní dokonale odhalit hlavní účel vašeho podnikání. Jeho jedinečné a atraktivní rozvržení vám umožní předvést své služby.

Objevte také Kde najdete nejlepší šablony Elementor

Je kompatibilní se zásuvnými moduly WordPress, jako je například WPMLWPBakeryPosuvník Revolutiona plně odpovídá, aby vám pomohl doručit vašim návštěvníkům nebo zákazníkům, a procházení což bude jedinečné na všech zařízeních.

Stáhnout Demo | Web hosting

5. Cargo HUB

Cargo HUB je jedním z nejlepších témat WordPress věnovaných dopravním a logistickým společnostem, jejichž struktura rozvržení je založena na přizpůsobení Bootstrap Framework a Visual Composer.

nejlepší WordPress témata - Cargohub

Byl navržen s rozložením, které se přizpůsobuje jakékoli velikosti obrazovky, což umožňuje dokonalé zobrazení vašich služeb na tabletech a smartphonech. Budete mít schopnost snadno přizpůsobit každý aspekt a chování každé z jejích stránek nebo jeho modely díky integraci Vizuální skladatel plugin a podpora mnoha zkrácených kódů.

Je dodáván s výkonným panelem možností konfigurace, který umožní těm, kteří mají méně zkušeností, převzít kontrolu nad každou částí vašeho webu. Toto je téma WordPress s mnoha funkcemi, které vás zveme ke konzultaci.

Stáhnout | Demo | Web hosting

6.Translogické

Translogic je stylové a výkonné prémiové téma WordPress s prémiovým designem, které je ideální pro vytváření webových stránek pro logistiku, dopravu a nákladní dopravu.

Translogická témata wordpress vytvářejí webové stránky společnost logistika doprava spedice

Jeho jedinečné rozvržení promění váš web na skutečnou platformu, která zvýrazní každou z vašich služeb. Formulář žádosti o cenovou nabídku je jednou z vynikajících funkcí tohoto tématu WordPress, která uživatelům umožní znát například náklady na dopravu.

učit se Jak upravit e-mailovou adresu správce na WordPress a zajistěte, aby byl váš blog bezpečnější.

Je kompatibilní s pluginem WPML a má galerie modelů které zvýrazní vaše projekty. Po stránce mobility je to úplně jedno citlivý Při konzultacích na různých mobilních zařízeních se tedy nebudete muset obávat.

Stáhnout | Demo | Web hosting

7. tranzit

Toto prémiové logistické obchodní téma WordPress lze přizpůsobit pro mnoho souvisejících obchodních výklenků, jako jsou dopravní, dodávkové, nákladní, přepravní a stěhovací společnosti.

Tranzit

Při procházení stránky objevují návštěvníci čistý a optimalizovaný design typografie pixel perfect, popis služeb společnosti, podrobnosti o dopravě, více informací o společnosti, Ohlasy zákazníci a tok vašeho blogu.

Objevte také Jak vytvořit katalog produktů v aplikaci WordPress.

Toto prémiové téma WordPress je založeno na nejnovější verzi Cherry Framework, díky níž je ještě flexibilnější a bohatší na funkce. Nabízí perfektní kombinaci mezi modulem Live Customizer a doplňkem Power Builder, abyste z jeho personalizace získali co nejvíce.

Stáhnout Demo Web hosting

8. LOGIPRO

LogiPro je plně citlivé téma WordPress, které vám umožní vytvořit profesionálně vypadající webovou stránku pro jakoukoli dopravní nebo logistickou společnost. Toto téma WordPress, navržené s opatrností, přichází s čistým kódem a vynikající dokumentací.

Logipro témata wordpress vytvářejí webové stránky společnost dopravní logistika nákladní doprava

Krásné stránky vám pomohou představit vaše služby, ceny, historii a další klíčové aspekty podnikání, zatímco část Reference vám pomůže zvýšit spolehlivost vaší dopravní nebo logistické společnosti pro vaše zákazníky.

Přečtěte si také Jak a proč kvalitativní audit vašeho obsahu.

Můžete si jej utvářet podle svých cílů a jeho ukázky nabídnou optimální rozhraní a přizpůsobitelné téměř všem vašim potřebám. Je kompatibilní se všemi nedávnými prohlížeči a zařízeními, stejně jako s většinou pluginů WordPress.

Stáhnout | Demo | Web hosting

9.Expeditor

Expeditor je prémiové téma WordPress, které je vynikající při vytváření prezentace webových stránek pro společnost nabízející služby v nákladní dopravě, logistice, dopravě atd.. Dodává se s širokou škálou domovské stránky, která se vejde do jakékoli velikosti SME, která patří do této mezery.

Témata expeditorů wordpress vytvářejí webové stránky společnosti logistické přepravy nákladu

Ať už se zabýváte leteckou nebo námořní dopravou, dodavatelskými řetězci, sklady nebo stěhováním, určitě najdete rozvržení podle svých potřeb.

Discover Jak zobrazit všechny své WordPress publikace na jeden list papíru

Strávili jsme hodiny zkoumáním obecných potřeb tohoto typu podnikání, abychom jim mohli nabídnout potřebné prvky k vytvoření webových stránek. Je to téma WordPress, které je k dispozici pouze na ThemeForest.

Stáhnout | Demo | Web hosting

10. Odyssea

Pokud váš web pro přepravu, dopravu, přepravu nebo stěhování vyžaduje změnu člověka, je prémiové téma Odyssey WordPress uživatelsky přívětivým řešením, které dokáže ponořit vaše podnikání i jeho webové stránky do modernost.

Odysea

Pokud zvolíte toto téma WordPress, budete mít oproti své konkurenci alespoň výhodu díky poměrně vysokému počtu funkcí, které nativně nabízí. Jeho 100% responzivní rozložení je velmi flexibilní a umožní vašim návštěvníkům, kteří vlastní smartphone, využívat stejné výhody zkušenosti uživatelů pouze ti, kteří mají plochu.

Rovněž vám poskytuje svobodu upravovat kód mnoha způsoby. Různé možnosti rozložení jsou zahrnuty, aby vám umožnily zvolit nejoptimálnější způsob prezentace služeb vaší společnosti na internetu. A jako obvykle vám WordPress Live Customizer a doplněk Power Builder umožní změnit vzhled a dojem z vašeho webu pomocí myši.

 Stáhnout | Demo | Web hosting

Doporučené zdroje

Objevte také další doporučené zdroje, které vám pomohou lépe svést své partnery a předplatitele, ale také zlepšit bezpečnost vašeho webu. 

závěr

Voila! To je pro tento seznam prémiová témata WordPress navržen tak, aby vám pomohl vytvořit webovou stránku o dopravním podnikání. Doufáme, že vám tento článek pomůže najít budoucí téma WordPress pro vaše podnikání. 

Budete však také moci konzultovat naše ressources, 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.

Neváhejte nám poslat své připomínky, commentaires a návrhy ve specializované sekci. Většinou sdílejte tento článek na různých sociálních sítích.

... 

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

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

, vyrábí jej Gaetan | divi, Divi Tutoriály

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 skvělé pro zapojení návštěvníků tím, že odhalují další obsah a designové prvky, když najedete myší na obrázek. 

V tomto tutoriálu vám ukážeme, jak navrhnout vlastní překryvné obrázky v 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.

Divi Builder

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)

Divi Builder

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í:

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

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í:

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

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:

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

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

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

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 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í:

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

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:

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 obsah těla pomocí několika vět 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í:

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ě:

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ě:

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:

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:

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

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í:

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ě:

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

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:

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.

Překryvné obrázky Divi

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:

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í:

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ší.

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.

divi

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ů.

vlastní překryvné obrázky s Divi

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é.

vlastní překryvné obrázky s Divi

Stáhnout DIVI hned!!!

závěr

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.

...

Divi: Jak přidat ikonu hamburgeru do modulu Menu

Divi: Jak přidat ikonu hamburgeru do modulu Menu

, vyrábí jej Gaetan | divi, Divi Tutoriály

Chcete přidat ikonu hamburgeru do modulu Divi Menu?

Pokud vytváříte hlavičku v Divi, existuje několik způsobů, jak to udělat. 

Ukážeme vám, jak přidat ikonu hamburgeru do modulu Divi Menu. Tato ikona hamburgeru se již ve výchozím nastavení zobrazuje na menších obrazovkách. Ale v tomto tutoriálu se ujistíme, že se ikona hamburgeru objeví i na ploše. 

To dává vaší hlavičce minimální vzhled a zároveň přidává interakci.

Pojďme.

přehled

Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek.

Stáhnout DIVI hned!!!

Vytvořte novou šablonu globálního záhlaví pomocí Divi Builderu

Přejděte do Divi Theme Builder

Na hlavním panelu WordPress přejděte na „Divi > Tvůrce motivů' pak klikněte 'Přidat globální záhlaví'

Divi Theme Builder

Přidejte novou globální hlavičku

Zobrazí se rozbalovací nabídka. Chcete-li začít stavět od začátku, pokračujte výběrem "Vytvořit globální záhlaví".

Návrh globálního návrhu záhlaví

Nastavení sekce

Barva pozadí

Jakmile jste v editoru šablon, je čas začít navrhovat záhlaví. Všimnete si, že již existuje sekce. Otevřete nastavení sekce a přidejte barvu pozadí.

vzdálenost

Přepnout na kartu Design části a upravte následující parametry.

Přidat nový řádek

Struktura kolony

Pokračujte přidáním nového řádku pomocí následující struktury sloupců:

dimenzování

Otevřete nastavení linky, přejděte na kartu Design a změňte maximální šířku v nastavení velikosti.

vzdálenost

Poté změňte horní a spodní výplň v nastavení mezer.

Přidejte do sloupce modul nabídky

Vyberte nabídku, kterou chcete přidat

Dále přidejte modul Menu do sloupce řádku a vyberte dynamickou nabídku podle svého výběru.

Stáhnout logo

Nahrajte logo.

Odstraňte barvu pozadí

Dále z modulu odeberte výchozí bílou barvu pozadí.

Nastavení textu nabídky

Přepnout na kartu Design modulu a podle toho upravte textové parametry menu:

Nastavení rozevírací nabídky

Poté změňte nastavení z rozevírací nabídky.

Nastavení ikon

Změňte také nastavení ikon.

dimenzování

Dále přejděte do nastavení velikosti a přiřaďte maximální šířku loga.

vzdálenost

Odstraňte také výchozí spodní okraj z modulu.

Make Section Sticky

Nyní, když je naše nabídka na místě, uděláme také sekci lepivou. Otevřete nastavení sekce, přejděte na kartu pokročilý a použijte následující nastavení:

Barva pozadí v lepkavém stavu

Poté změňte barvu pozadí sekce na lepivý stav.

Lepkavý stín pole stavu

Na sekci také použijte stín krabice.

Do modulu Menu přidána ikona hamburgeru

Přidejte CSS ID do modulu nabídky

Nejprve otevřete nastavení modulu Menu a přejděte na kartu pokročilý a přiřadit CSS ID.

Přidejte modul Kód pod modul Menu

Dále přidejte modul Kód pod modul Menu.

Přidejte značky skriptu a stylu

Použijeme kód CSS a JQuery. Abychom se na to připravili, přidáme značky stylu a skriptu.

Přidejte kód CSS

Mezi značky stylu vložíme následující řádky kódu CSS:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

Přidejte JQuery

Přidejte řádky úvodního kódu JQuery

Dále budeme mít kód JQuery. Přidejte následující řádky kódu JQuery mezi značky skriptu:

jQuery(function($){
$(document).ready(function(){
 
});
});

Vytvořte proměnné

Dále vytvořte nějaké proměnné.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Umístěte ikonu přepínání do modulu Menu

Dále umístěte proměnnou ikony přepínače do modulu Menu pomocí následujícího řádku kódu:

toggleIcon.insertAfter(desktopMenu);

Přidejte funkci kliknutí

Přidáváme také funkci kliknutí.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

Uložte změny Divi Theme Builder

Nyní, když je vše na svém místě, zbývá pouze uložit všechny úpravy Divi Theme Builder a zobrazit výsledek!

Divi Theme Builder

přehled

Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na konečný výsledek.

ikonu hamburgeru v modulu Divi Menu

Stáhnout DIVI hned!!!

závěr

V tomto článku jsme vám ukázali, jak být kreativní s globální hlavičkou v Divi Theme Builder. 

Konkrétně jsme vám ukázali, jak přidat ikonu nabídky hamburgeru také na plochu. Ve výchozím nastavení se na tabletu a mobilu zobrazuje ikona hamburgeru.

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 dokončení projektů tvorby webových stránek. Nebo se podívejte také na našeho průvodce na 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.

...