Divi: Jak vytvořit karty s efektem hoveru z čar

, vyrábí jej Gaetan | WordPress

Chcete vytvořit karty s efektem hover z čar pomocí Divi?

Karty jsou rozhodně užitečné pro zpřístupnění důležitých informací ve stručné oblasti vašeho webu. To snižuje potřebu pro uživatele procházet obsahem dlouhé stránky. Modul Divi's tabs se snadno používá a je skvělý pro procházení jednoduchého obsahu jediným kliknutím.

Ale v tomto tutoriálu vám ukážeme, jak převést celé řádky Divi na karty, které se zobrazí po najetí myší. 

Ukážeme vám také, jak vytvořit vodorovné a svislé karty. Tím se odemkne síla Divi pro vytváření úplných rozvržení s více moduly pro každou oblast obsahu karty. 

Nejsou potřeba žádné pluginy!

Začněme.

přehled

Zde je přehled karet, které v tomto tutoriálu společně vytvoříme.

Stáhnout DIVI hned!!!

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.

Vytváření vodorovných záložek s přechodem pomocí „řádků Divi“

V přítomné výchozí sekci přidejte řádek se dvěma sloupci.

Linka pozadí, pole výplň a stín

Než přidáme naše moduly, nejprve si trochu přizpůsobíme nastavení řádků. Otevřete Nastavení linky a aktualizujte následující:

• Barva levého přechodu: #284f91
• Barva pravého přechodu: #4646c4

• Výplň: 50 pixelů (nahoře a dole), 50 pixelů (vlevo a vpravo)

• Box Shadow: viz snímek obrazovky
• Barva stínu krabice: rgba (70,70,196,0.66)

Přidejte obsah do řádku

Nyní do našeho řádku přidáme zástupný obsah. Do sloupce 1 přidejte obrázek podle svého výběru pomocí modulu Obrázek. Zde jsme použili obrázek z balíčku rozložení « Designový balíček rozvržení konference« .

V pravém sloupci přidejte modul Výzva k akci a aktualizujte následující:

• Adresa URL odkazu tlačítka: # (prozatím jen pro zobrazení tlačítka)

• Použít barvu pozadí: NE

• Zarovnání textu: vlevo
• Písmo názvu : Lato
• Velikost textu nadpisu: 60px (počítač), 50px (telefon)

Vytvoření záložky

Chcete-li vytvořit skutečnou kartu, na kterou uživatelé umístí ukazatel myši, aby se zobrazil obsah daného řádku, musíme vytvořit modul Text a umístit jej vpravo nahoře pomocí nějakého vlastního CSS.

Pokračujte a přidejte nový textový modul pod obrázek ve sloupci 1 a aktualizujte následující:

• Text: "Tab 1"

• Pozadí: #284f91 (to by mělo odpovídat barvě levého přechodu čáry)
• Zarovnání textu: na střed
• Barva textu: #ffffff
• Šířka: 100px
• Výška: 50px
• Okraj: -100px (nahoře), -50px (vlevo)
• Výplň: 14px (nahoře)

Nakonec přidejte následující vlastní css do hlavního prvku, abyste mu dali absolutní pozici v horní části řádku.

position: absolute !important;
top: 0;

Výška a rozteč sekce

Prozatím otevřete nastavení sekce a aktualizujte následující:

• Minimální výška: 500 pixelů (počítač), 900 pixelů (tablet), 750 pixelů (telefon)
• Okraj: 100 pixelů (nahoře a dole)
• Odsazení: 0px (nahoře a dole)

Vytvoření druhého řádku

Chcete-li vytvořit druhý řádek, duplikujte řádek, který jste vytvořili dříve. Přesuňte textový modul do sloupce 1 a obrázek do sloupce 2. Poté aktualizujte obrázek novým. To vám pomůže získat představu o tom, jak vypadá různý obsah na každé kartě.

Poté otevřete nastavení modulu Text použitý k vytvoření záložky ve sloupci 1 a přesuňte záložku doprava tak, že tam, kde tento řádek překrývá řádek výše, uvidíte záložku přímo napravo od záložky prvního řádku.

• Okraj: 50 pixelů (vlevo)

Přidán efekt hoveru

Otevřete nastavení řádku a přidejte následující filtr:

• Neprůhlednost: 70 % (výchozí), 100 % (nájezd)

Poté přidejte dobu trvání přechodu a křivku rychlosti pro efekt přechodu filtru krytí.

• Doba přechodu: 500 ms
• Křivka rychlosti přechodu: Lineární

Vytvoření třetí záložky

Nyní můžeme přidat naši poslední kartu. Chcete-li to provést, zkopírujte druhý řádek, který jste právě vytvořili. Potom přesuňte textový modul do sloupce 1 a obrázek do sloupce 2. A aktualizujte modul obrázku novým obrázkem.

Aktualizujte nastavení čáry novým gradientem pozadí.

• Barva přechodu vlevo na pozadí: #333333
• Barva přechodu pravého pozadí: #4646c4

Poté otevřete nastavení modulu Text použité k vytvoření karty ve sloupci 1 a aktualizujte barvu a okraj.

• Pozadí: #333333
• Okraj: 150 pixelů (vlevo)

Zde je návod, jak by vaše stránka měla vypadat, než umístíme naše řádky tak, aby se překrývaly.

Překrývající se linie s absolutním umístěním

Abychom překryli naše linie, musíme použít absolutní umístění. Nejprve aktualizujte výšku všech tří řádků na 100 %.

• Výška: 100 %

Poté přidejte následující vlastní CSS do hlavního prvku všech tří řádků:

position: absolute !important;
left: 0;
right: 0;
margin: auto;

Takto aktuálně vypadají naše karty.

Změna pořadí řádků při umístění kurzoru pomocí Z indexu

V tuto chvíli jste si možná všimli, že třetí řádek/záložka je v popředí. Potřebujeme tedy přeskupit řádky pomocí Z Index tak, aby se první karta zobrazovala jako první, dokud nenajedete na jinou kartu.

Čtěte také: Jak vytvořit vlastní překryvné obrázky v Divi

Chcete-li to provést, otevřete nastavení prvního řádku a aktualizujte z-index následovně:

Z-index: 10

Poté umístěte kurzor na Z index dalších dvou řádků.

Z-Index: 11 (přejetí myší)

Hotovo ! Pojďme se podívat na konečný výsledek.

Konečný výsledek

Stáhnout DIVI hned!!!

Vytváření vertikálních záložek

Pokud chcete do řádků přidat svislé tabulátory, postupujte takto.

Pokračujte a duplikujte sekci obsahující karty s přechodem, které jsme právě vytvořili, abyste měli nový design, se kterým můžete pracovat.

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

• Polstrování: 10 % (vlevo a vpravo)

Aktualizujte následující parametry pro všechny tři řádky duplicitní sekce následujícím způsobem:

• Šířka: 70 % (počítač), 70 % (tablet), 80 % (telefon)
• Maximální šířka: 980 pixelů

Dále aktualizujte směr přechodu na 90 stupňů pro všechny tři čáry.

• Směr gradientu: 90 stupňů

Nyní je čas umístit naše karty modulu Text nalevo od našich řádků, abyste získali požadované vertikální karty.

Viz také: Jak vytvořit nabídku rotujícího kola na Hover v Divi

Otevřete nastavení karty textového modulu na prvním řádku a aktualizujte následující:

• Okraj (počítač): -50 pixelů (nahoře), -150 pixelů (vlevo)

Dále otevřete kartu Nastavení modulu Text řádku 2 a aktualizujte následující:

• Okraj (počítač): 0 pixelů (nahoře), -150 pixelů (vlevo)

A pro poslední kartu ve třetím řádku aktualizujte následující:

• Okraj (počítač): 50 pixelů nahoře, -150 pixelů vlevo

Konečný výsledek

Nyní se podívejme na konečný výsledek.

Stáhnout DIVI hned!!!

závěr

S trochou kreativity a sílou Divi můžete vytvořit pěkné vlastní karty pomocí Divi linek. Existují určitá omezení toho, co můžete zobrazit. 

Například s touto konfigurací musí mít všechny řádky stejnou výšku jako sekce. Ale abyste nemuseli používat plugin, je to skvělé řešení. 

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.

...

Jak přizpůsobit WordPress pro zvýšení počtu konverzí

, vyrábí jej Passy Guy | WordPress

Jak přizpůsobit WordPress pro zvýšení počtu konverzí?

Studie ukazují, že víc 68% kupujících začít zkoumat produkty online. Když zadají název vaší firmy nebo produkt, který hledají na Googlu, a přistanou na vašem webu, je nesmírně důležité, abyste jim poskytli relevantní informace, které hledají.

Trvá méně než sekundu, než se uživatelé rozhodnou o vašem webu, který určí, zda zůstanou nebo odejdou. 

Pokud si vaši potenciální zákazníci najdou cestu na váš web jen proto, aby se vrátili zpět, ani o sekundu později, ztrácíte prodej.

Skvělý způsob bojovat proti této míře okamžitého opuštění extrémně rychlé je poskytnout vašim potenciálním zákazníkům relevantní osobní informace a obsah.

Pravda za personalizací

Přizpůsobte si svůj web WordPress Nejenže se sníží vaše míra okamžitého opuštění, ale nakonec se zvýší vaše konverze.

Díky tisícům možností na výběr a tisícům firem, které mohou utrácet peníze za digitální marketing, jeden web obecný nedostatečný výkon se nepřevede do konverzí a prodeje.

Když potenciální zákazníci najdou přesně ty informace, které hledají, je větší pravděpodobnost, že zůstanou, komunikují a nakonec nakupují.

Objevte naše 4 triky snížit míru opuštění na svém blogu WordPress

Studie ukazují, že zákazníci s větší pravděpodobností nakupují od společnosti, která nabízí přizpůsobené uživatelské prostředí, a že přizpůsobený obsah může zvýšit efektivitu vašich marketingových výdajů o 10 až 30 procent.

S takovými čísly si nemůžete dovolit nepřizpůsobit si svůj web.

Obsah, který potřebujete přizpůsobit

Trávíte spoustu času budováním a zdokonalováním svého webu WordPress, takže může být ohromující, když se snažíte rozhodnout, které části obsahu přizpůsobit.

Fotografie na vašem webu jsou mimořádně silné a mohou mít obrovský dopad na vaše míry převodu. Ať už vaše snímky dodávají vaší značce lidský prvek, zobrazují podrobnosti nebo navádějí spotřebitele tam, kam chcete, aby hledali, přizpůsobení této části vašeho webu umožní vašim návštěvníkům vztah k vašemu podnikání.

Kontaktní informace - Zatímco snímky vám umožňují navázat emocionální spojení s vašimi návštěvníky, poskytnutí správných kontaktních údajů je snadný způsob přizpůsobení vašeho webu. Ať už máte jednorázové obchodní zástupce pro různá místa nebo konkrétní linku nápovědy přes noc, zobrazování návštěvníků vašeho webu správnými kontaktními údaji jim okamžitě umožňuje kontaktovat vás a usnadnit nakupování. 

Recenze a posudky zákazníků - zákazníci si před nákupem přečtou recenze. Z tohoto důvodu je stále důležitější mít na svých webových stránkách komentáře. Přizpůsobení těchto komentářů je může ještě zvýšit. Můžete to udělat tak, že ukážete recenze relevantních produktů někomu, kdo si koupil dříve, nebo zobrazíte recenze od někoho v určité oblasti země někomu jinému v této oblasti.

Informace o produktu - Pokud prodáváte produkt nebo službu, které nejsou k dispozici v určitých regionech nebo pro určité věkové skupiny, může být dokonalým způsobem, jak se s těmito informacemi seznámit, personalizace popisů produktů. Tato technika vám umožňuje poskytovat relevantní informace relevantním zákazníkům bez přeplnění webové stránky pro lidi, kteří ji nepotřebují.

Objevte kliknutím na tento odkaz Proč je vaše míra okamžitého opuštění tak vysoká?

Výzvy k akci - V závislosti na zařízení, které návštěvník webu používá, kde se nachází a co ho zajímá, a tlačítko výzvy k akci není vždy relevantní nebo lákavá. Přizpůsobení textu výzvy k akci a odkazu, na který pošle vašeho zákazníka, může být efektivnější než univerzální možnost.

Články na přední stránce blog a další obsah - V tomto šíleném světě WordPress SEO, příspěvky na blogu, které píšete, a další obsah, který na svém webu vytvoříte, by měly být pro uživatele relevantní a poutavé. Zobrazování obsahu návštěvníkům webových stránek a blogovým příspěvkům, které jsou pro ně zajímavé a relevantní, poskytuje návštěvníkům nejen hodnotu, ale také zvyšuje úroveň zapojení vašich blogových příspěvků.

Chcete-li získat na svém webu popularitu, může být velmi důležité zaujmout diváky, kteří se již zajímají o to, co píšete, což je praktičtější využití vašeho času.

Jak přizpůsobit svůj web

V závislosti na vašem produktu nebo službě existuje mnoho způsobů, jak přizpůsobit web WordPress, aby se zvýšil počet konverzí. Tady je několik nápadů, jak rozproudit vaši kreativitu při přizpůsobování webu:

Geografické cílení

Přizpůsobení obsahu na základě polohy návštěvníků je skvělý způsob, jak přizpůsobit svůj web. Můžete změnit snímky tak, aby odrážely obrázky relevantní pro návštěvníka, změnit telefonní čísla a prodejní informace tak, aby zobrazovaly správné kontaktní údaje podle toho, kde nakupují, a mnohem více.

Viz také Jak zvýšit míru konverze pomocí zásuvného modulu OptinLinks Email Capture

Jedna velikost nemusí vyhovovat všem, pokud jde o váš web a informace, které návštěvníci vašeho webu z různých míst hledají.

Na tomto obrázku vidíte, jak mohla univerzita v Montaně pomocí geotargetingu přizpůsobit své webové stránky na základě umístění studenta, který má zájem navštívit web. Místo obecné zprávy „ Další informace o tom, proč je UM pro vás to pravé„Návštěvníci Bostonu by zprávu viděli“ Montana navštíví Boston A měli by možnost domluvit si schůzku se zástupcem kampusu, když jsou v regionu. Míra prokliku personalizovaného obsahu je téměř dvojnásobná ve srovnání s obecným příspěvkem.

GeoFli

GeoFli je skvělý nástroj WordPress pro geografické cílení a geo-personalizace. Jejich plugin WordPress vám umožní snadno přizpůsobit vaše webové stránky na základě polohy návštěvníka. S GeoFli si můžete vybrat místo, na které cílíte, pomocí PSČ, státu, země nebo dokonce nakreslit svůj vlastní geo-plot.

Umožňuje také geo-redirect návštěvníky z určitých míst na různé adresy URL. Chcete-li použít GeoFli, stačí vybrat obsah, který chcete upravit, vybrat oblast, na kterou chcete cílit, a upravit kopii nebo obsah tak, aby poskytoval hodnotu cílovému publiku.

Přizpůsobení typu zařízení

Zobrazování relevantního obsahu uživatelům na základě zařízení, které používají k vyhledávání na webu, je skvělý způsob, jak snížit míru okamžitého opuštění, zvýšit počet konverzí a poskytnout návštěvníkům vašeho webu informace. že potřebují.

Čtěte také: Jak zvýšit počet konverzí: zvýšit omezené nabídky

Pochopení zvyků vašich zákazníků vám může pomoci s touto formou personalizace. Například u spotřebitelů je pravděpodobnější, že nakoupí ze stolního počítače než ze smartphonu. Toto by vás mohlo povzbudit k tomu, abyste zobrazovali informace o nákupu produktu na počítači, přičemž zdůrazníte své obchodní hodnoty a výhody produktů na mobilních zařízeních.

Logický hop

Logic Hop vám umožňuje přizpůsobit obsah webových stránek podle toho, jak se návštěvník na web dostal a jaký obsah si prohlížel. Jejich WordPress Plugin je mocný způsob, jak návštěvníkům vašeho webu doručovat přizpůsobený obsah.

Chcete-li použít Logic Hop, vše, co musíte udělat, je vytvořit podmíněnou logiku v určitých částech vašeho webu a váš web tyto části zobrazí, když budou splněny podmínky.

Přizpůsobení času

Zobrazování jedinečných výzev k akci a obsahu na základě denní doby, týdne nebo roku, kdy se návštěvník na vašem webu nachází, vám umožní používat uživatelské modely k zvýšit počet konverzí.

Přečtěte si také našeho průvodce Jak používat FOMO na WordPress pro lepší konverze

Pokud víte, že se určitý produkt nebo služba v určitém okamžiku prodává lépe, můžete svůj web přizpůsobit tak, aby jej během této doby představoval.

Pokročilé přizpůsobení od FlowCraft

Pokročilé přizpůsobení od FlowCraft umožňuje přizpůsobit obsah webových stránek na základě času, počtu návštěv a dalších. Jejich plugin WordPress umožňuje snadno kombinovat sekce a přizpůsobit je ještě konkrétnějším skupinám lidí.

Podobné Pokud anoChcete-li použít pokročilé přizpůsobení Flow Craft, stačí vytvořit podmínku a určit, co se zobrazí, pokud je podmínka splněna nebo ne.

Personalizace interakce s webem

Způsob, jakým spotřebitel interaguje s vaším webem, je také skvělou příležitostí ukázat mu přizpůsobený obsah. Pokud jsou připojeni a provedli precedentů nákupy, můžete navrhnout podobné položky, pokud jsou to první návštěvníci, můžete jim ukázat nejoblíbenější položky a pokud našli váš web kvůli konkrétní reklamě, můžete zobrazit informace, které jsou relevantní k této reklamě.

Pokud ano

If-So vám umožňuje přizpůsobit obsah webových stránek na základě profilu vašeho návštěvníka nebo interakce s webem. Tento plugin WordPress umožňuje zobrazit jedinečný obsah na základě data, uživatelského profilu a dalších.

Chcete-li použít If-So, vše, co musíte udělat, je vybrat podmínku, na kterou chcete cílit, a poté definovat obsah, který chcete zobrazit, zda je podmínka splněna.

Když potenciální zákazníci přijdou na váš web, máte jen zlomek sekundy na to, abyste upoutali jejich pozornost a zaujali je. Přizpůsobení obsahu na vašem webu WordPress je proto skvělý způsob, jak poskytnout návštěvníkům informace, které hledají, a v konečném důsledku zvýšit počet konverzí.

Objevte také Jak sledovat konverze na WordPress: Průvodce krok za krokem

Ať už se jedná o přizpůsobení kontaktních údajů podle umístění návštěvníků nebo přizpůsobení obrázků podle ročního období, hodnotný obsah je klíčem ke konverzi vysoce kvalitních zákazníků.

Doporučené zdroje

Zjistěte další doporučené zdroje, které vám pomohou vytvořit a spravovat váš web.

• Jak odstranit téma WordPress z webu
• 10 zásuvných modulů WordPress WooCommerce pro použití ve vašem blogu
• Jak najít sponzora a zpeněžit svůj blog?
• Jak importovat a exportovat navigační nabídky v WordPress
• Jak se chránit přihlašovací stránku svého blogu WordPress

závěr

Tady je ! Tím končí náš průvodce, jak přizpůsobit WordPress pro zvýšení počtu konverzí. Pokud nějaké máte commentaires nebo návrhy, neváhejte nám to sdělit v sekci vyhrazené pro tyto.

Můžete však také konzultovat naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek, nahlédněte do našeho průvodce Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

 Ale především sdílejte tento článek na různých sociálních sítích.

... 

Jak nainstalovat pluginy WordPress

, vyrábí jej Passy Guy | WordPress

V tomto článku vám ukážeme, jak nainstalovat pluginy WordPress

Jako jeden z nejpopulárnějších systémů pro správu obsahu (CMS) nabízí WordPress velkou flexibilitu a spoustu možností přizpůsobení. Nabízí širokou škálu WordPress pluginů, které vám umožní upravit funkčnost vašeho webu.

WordPress má svůj vlastní adresář, který je dodáván s bezplatnými a prémiovými pluginy. Tyto pluginy vám umožňují přidávat různé funkce, od kontaktních formulářů a personalizovaných zpravodajů až po ukládání webových stránek do mezipaměti a zabezpečení WordPress.

Některé pluginy mohou také upravit váš web WordPress na funkční internetový obchod s a WooCommerce plugin nebo e-learningová platforma s LMS pluginy. Ve skutečnosti můžete dokonce vytvořte si vlastní WordPress plugin.

V tomto tutoriálu vám ukážeme krok za krokem proces instalace pluginů WordPress pomocí tří různých metod.

Na konci tohoto článku také zahrneme několik tipů, kterými se můžete řídit při hledání nových pluginů WordPress pro vylepšení vašeho webu.

Než ale začneme, zjistěte to, pokud jste WordPress nikdy nenainstalovali 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.

Jak nainstalovat pluginy WordPress z oficiálního adresáře pluginů

Nejjednodušší způsob, jak nainstalovat pluginy WordPress, je vstoupit do oficiálního adresáře pluginů prostřednictvím vaší administrátorské oblasti WordPress. Tento adresář pluginů WordPress je však omezen pouze na bezplatné možnosti pluginu.

Přihlaste se ke svému panelu WordPress a přejděte na Rozšíření->Přidat. Pokračujte hledáním pluginu v vyhledávací lišta. Můžete také procházet doporučené, oblíbené nebo doporučené pluginy kliknutím na karty vlevo.

Například pokud hledáte plugin MonsterInsights, uvidíte, že se objeví jako první výsledek. Klikněte na tlačítko Instalační nyní začněte instalovat plugin.

Počkejte na dokončení procesu a klikněte na tlačítko aktivovat začít používat tento plugin WordPress.

Jakmile plugin aktivujete, zkontrolujte a nakonfigurujte nastavení pluginu tím, že přejdete na Rozšíření -> Nainstalované pluginy. 

Jak ručně nainstalovat pluginy WordPress

Dalším způsobem, jak nainstalovat pluginy WordPress, je ruční nahrání souborů pluginů prostřednictvím řídicího panelu WordPress.

Tato metoda vám umožňuje nainstalovat plugin, který nemusí být v oficiálním adresáři WordPress, ale je dostupný z tržišť třetích stran, např. CodeCanyon et Kodér.

Před zahájením procesu instalace pluginu musíte nejprve stáhnout soubor ZIP pluginu ze zdroje dle vašeho výběru.

Dále přejděte do oblasti správy WordPress a klikněte Rozšíření -> Přidat. Další, lokalizovat T-tlačítkozvýšit prodloužení v levé horní části stránky.

Vyberte soubor v počítači ZIP plugin, který chcete stáhnout, a poté klikněte nainstalovat nyní.

Počkejte na dokončení instalace pluginu a klepněte na Povolit rozšíření.

Použití FTP klienta k instalaci pluginů WordPress

Existuje několik prémiových a vlastních pluginů WordPress, které vyžadují, abyste je instalovali ručně pomocí a FTP klient. Pro začátečníka může být proces o něco složitější, protože se nejprve budete muset naučit, jak nastavit FTP klienta.

Nebojte se, následující průvodce vás provede krok za krokem. Jediné, co musíte udělat, je postupovat podle pokynů.

Za prvé, výpis soubor ZIP pluginu a uložte jej do složky v počítači. Mějte na paměti, že extrahovaná složka souboru pluginu bude ta, kterou budete muset nahrát prostřednictvím FTP klienta.

Poté připojte svůj web k serveru FTP. Chcete-li to provést, vyhledejte podrobnosti o FTP svého poskytovatele hostingu.

Po přihlášení přejděte do svého FTP klienta – pro tento příklad používáme FileZilla. Zde zadejte své přihlašovací údaje a stiskněte tlačítko Rychlé připojení. Poté přejděte na panel vzdálené místo a hledání složku wp-content / plugins /.

V panelu místní webové stránky, nahrajte extrahovanou složku pluginu z vašeho počítače do složku wp-content/plugins/ z vašeho serveru.

Po dokončení přenosu se na váš web nainstaluje plugin WordPress.

Chcete-li plugin aktivovat, musíte mít přístup k ovládacímu panelu WordPress. Přejděte do sekce Rozšíření-> Pluginy nainstalovány, vyhledejte plugin a klikněte na aktivovat.

Na co pamatovat při výběru pluginu WordPress?

V adresáři pluginů WordPress je mnoho pluginů a ještě více dostupných na webech třetích stran. Tento počet možností se může zdát ohromující, zvláště pro začátečníky, kteří se snaží zjistit, co je pro jejich web to pravé.

Následující části vám ukážou některé zásadní věci, které je třeba zvážit při výběru pluginu pro váš web.

Pravidelné aktualizace.

WordPress vydává pravidelné aktualizace, aby byl jeho systém stále aktuální. Takto zlepšují výkon, udržují zabezpečení, opravují problémy s chybami a přidávají nové funkce.

Před instalací jakéhokoli pluginu tedy zvažte tyto body:

Ujistěte se, že je pro tu práci vhodný

• Poslední aktualizace. Výběr pluginu WordPress, který je často aktualizován, vám může zabránit narušení bezpečnosti. Ukazuje také, že vývojáři plugin stále aktivně udržují a vylepšují.
• Počet instalací. Toto číslo ukazuje, jak populární je zmíněný plugin WordPress. Obecně platí, že čím aktivnější instalace pluginu má, tím lepší je jeho kvalita.
• Publikum. Uživatelské recenze a komentáře vám mohou pomoci zvážit klady a zápory konkrétního pluginu. Díky tomu získáte přehled o tom, jak plugin funguje v situacích v reálném čase.
• Kompatibilita. Plugin, který dostává pravidelné aktualizace od svých vývojářů, je obvykle kompatibilní s nejnovější verzí WordPressu. Vždy se podívejte na záložku s popisem, abyste viděli, která verze WordPressu je potřeba ke spuštění pluginu.

Před stažením a instalací jakéhokoli pluginu na váš web WordPress si nezapomeňte zkontrolovat tvrzení vývojářů. Přečtěte si dokumentaci k pluginu, podívejte se na fóra podpory pluginu a přečtěte si recenze.

Prohledávání blogových příspěvků je také dobrým zvykem, protože mnoho webů poskytuje recenze pluginů.

Na BlogPasCher, také kontrolujeme a testujeme pluginy WordPress s různými funkcemi, včetně pluginy menu, Zásuvné moduly Google Analytics et recenzní pluginy.

...

Nainstalujte jeden plugin najednou

Při testování pluginu ve WordPressu nezapomeňte nainstalovat a otestovat každý plugin samostatně. Tímto způsobem rychle zjistíte, zda to vašemu webu nezpůsobuje nějaké problémy a zda je můžete opravit.

Pokud se rozhodnete otestovat několik různých pluginů na WordPressu, nezapomeňte deaktivovat předchozí plugin, než vyzkoušíte jiný.

Také, když máte několik neaktivních pluginů, je nejlepší je odstranit, protože příliš mnoho instalací může přetížit váš web WordPress a ovlivnit jeho výkon.

Pro každou funkci použijte pouze jeden plugin

Přestože pluginy WordPress přidávají nové funkce a zlepšují funkčnost vašeho webu, příliš mnoho z nich může zpomalit váš web.

Pokaždé, když nainstalujete pluginy WordPress, přidáte na svůj web nový kód. Při nadměrném používání budou pluginy odesílat příliš mnoho požadavků HTTP na načtení svých zdrojů, jako jsou šablony stylů CSS, soubory JavaScript a obrázky, což zpomalí rychlost načítání vašeho webu.

Navíc instalace pluginů WordPress, které provádějí podobnou funkci, může způsobit konflikty a potenciálně poškodit jeden nebo oba pluginy. Nejlepším postupem je tedy nainstalovat plugin WordPress pro každou funkci.

Například, Yoast SEO et AISEO mít podobné sady funkcí – stačí vybrat jednu, abyste předešli konfliktům pluginů.

Doufáme, že vám tento tutoriál pomohl naučit se nainstalovat pluginy WordPress na váš blog nebo web. Nyní máte možnost zlepšit funkčnost svých webových stránek, i když nemáte žádné předchozí technické znalosti nebo dovednosti.

Pokud si nejste jisti, se kterým pluginem začít, zvažte, co vašemu aktuálnímu webu chybí. Dále zkontrolujte dostupné pluginy a porovnejte důležité faktory, jako je kompatibilita, recenze a nejnovější aktualizace.

Zde jsou některé z našich doporučených základních pluginů WordPress, které vám pomohou začít:

• Yoast SEO. Tento plugin pomáhá zlepšit váš blogový příspěvek na WordPressu a SEO stránky pomocí optimalizace klíčových slov a meta popisů
• Elementor ou Beaver Builder. Pomáhá vám vytvořit váš web tím, že poskytuje snadno použitelné rozhraní přetahování.
• W3 Celkem Cache ou WP Super Cache. Zvyšuje výkon vašeho webu a zkracuje dobu načítání díky ukládání do mezipaměti a integraci s CDN.
• Google XML Sitemaps. Automaticky generuje XML sitemapy pro lepší optimalizaci pro vyhledávače.
• Akismet. Tento plugin detekuje a filtruje spam ve vašich komentářích a odeslaných kontaktních formulářích, aby zabránil jakýmkoli škodlivým útokům.

Další doporučené zdroje

Zveme vás také, abyste si prostudovali níže uvedené zdroje, abyste se dostali dále do sevření a kontroly nad svým webem a blogem.

• Jak vytvořit krátký kód ve WordPressu
• Jak vytvořit jednoduchý plugin Gutenberg Block WordPress
• Jak porozumět ovládacímu panelu WordPress
• Jak vytvořit jednoduchý plugin WordPress

závěr

To je vše pro tuto příručku, která vám ukáže, jak nainstalovat pluginy WordPress. Máte-li jakékoli obavy nebo návrhy, dejte nám vědět commentaires.

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.

Mezitím sdílejte tento článek na různých sociálních sítích.   

...  

Divi: Jak přidat obrázky do Mega Menu

, vyrábí jej Gaetan | WordPress

Chtěli byste mít Mega Menu Divi s obrázky pro ilustraci obsahu menu? Postupujte podle našeho návodu, jak přidat obrázky do Mega Menu?

Milujeme interakci s obrázky online. S ohledem na to má smysl přidat obrázek na svůj web, kdykoli je to možné. 

Přidání obrázků do velkého menu je navíc další skvělou příležitostí, jak poskytnout uživatelům interakci, kterou potřebují.

Obrázky také vylepšují nabídku tím, že přitahují jejich pozornost a dále zjednodušují proces navigace.

přehled

Než se vrhneme na tento tutoriál, podívejme se na výsledek, kterého chceme dosáhnout.

Vytvoření mega menu

Abychom mohli začít, musíme nejprve vytvořit menu. 

Pro tento příklad vytvoříme hlavní nadřazenou položku nabídky s názvem “Mega Menu” se čtyřmi položkami podnabídky níže. Každá ze čtyř položek podřízené nabídky má tři položky podřízené nabídky.

Přejděte na hlavní panel WordPress a klikněte na Vystoupení> Nabídky

Klepněte na tlačítko 'Vytvořit nové menu', pojmenujte jej a klikněte na 'Vytvořit menu'.

Nezapomeňte povolit vlastnost nabídky Třídy CSS kliknutím na kartu možnosti v pravém horním rohu obrazovky Menu a zaškrtněte CSS třídy.

Nyní můžete přidat položky nabídky do nově vytvořené nabídky.

Nejprve vytvořte položku nabídky, která bude rodičem všech ostatních položek nabídky. Toto je odkaz, který zobrazí vaši mega nabídku při najetí myší.

Chcete-li vytvořit tuto položku nabídky, vytvořte vlastní odkaz s následujícími parametry:

• URL: http://#
• Název navigace: Mega Menu
• CSS třídy: mega-menu

Nyní uspořádejte/přetáhněte čtyři položky nabídky (každá se třemi vlastními podpoložkami), aby se staly podpoložkami hlavního nadřazeného odkazu Mega Menu.

Po přidání odkazů do nabídky přejděte dolů na „Nastavení menu' ve spodní části obrazovky nabídky a vyberte 'Hlavní menu' pro umístění zobrazení. Nakonec klikněte na 'Uložit menu'

Naše mega menu zatím vypadá takto:

Přidávání obrázků do mega menu

Nyní, když je nabídka hotová, je čas přidat obrázky.

Čtěte také: Jak převedu blogové příspěvky v DIVI?

Získejte obrázky

Začněte tím, že získáte čtyři obrázky. Tyto obrázky by se měly týkat čtyř položek podnabídky (O nás, poskytování služeb, naše práce a kontaktujte nás).

Pomocí editoru fotografií zmenšete a ořízněte každý obrázek tak, aby byl 500 pixelů široký a 300 pixelů vysoký.

Přidejte tyto obrázky do knihovny WordPress. Klikněte na Média > Přidat.

Přetáhněte obrázky na stránku a přidejte je nebo klikněte na 'Vyberte soubory"

Vložte obrázky do Mega Menu

Vraťte se na stránku nabídek na hlavním panelu WordPress.

V tomto příkladu je odkaz v horní části prvního sloupce " O ". 

Klikněte na šipku napravo od položky " O ". Do pole Navigační štítek přidejte požadovaný obrázek pomocí značky html img přímo před textem " O ". Značka obrázku by měla vypadat takto:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />

Chcete-li najít adresu URL obrázku, přejděte na Média > Knihovna médií, klikněte na obrázek, který chcete přidat. 

Na vyskakovací obrazovce Podrobnosti přílohy, najděte adresu URL v pravé části a klikněte 'Kopírovat URL do schránky'

Nyní se vraťte do konfigurace položky nabídky " O " na stránce nabídky a nahraďte text "Vložit URL obrázku" vložením adresy URL obrázku pomocí ctrl + v.

Před opuštěním možností konfigurace pro položku nabídky " O ", najděte textové pole Třídy CSS a zadejte třídu „mega-link“.

To nám umožní později přidat vlastní styl.

Opakujte tento postup pro přidání následujících tří obrázků do každé položky podnabídky s třídou "mega-link". (V tomto příkladu jsou zbývající tři prvky "Dodávka služeb", "Naše práce" et " Kontaktujte nás ".)

Výsledek

Přejděte na svůj web a najeďte myší na odkaz mega menu. Nyní by vaše mega menu mělo vypadat takto:

Všimněte si, že když najedete myší na každý z obrázků, obrázky se zesílí pomocí položky podnabídky přímo pod ním. Je to proto, že obrázek je součástí tohoto odkazu, takže kliknutím na něj se dostanete na přidruženou adresu URL.

Poslední úpravy

Pro tento poslední krok přidejte do nabídky vlastní css, aby bylo písmo textu větší a vycentrované. Také dejte kolem obrázku poloměr okraje, aby vypadal čistěji.

Na hlavním panelu WordPress přejděte na Divi> Možnosti motivu . 

Přejděte dolů do pole Vlastní CSS, níže zadejte CSS a klikněte 'Uložit změny' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

Konečný výsledek

Skončili jste!

Pokud jste postupovali podle všech kroků v tomto tutoriálu, zde je výsledek, který byste měli dostat.

Stáhnout DIVI hned!!!

závěr

Máte k dispozici Divi mega menu s obrázky, aniž byste museli používat plugin. Tento typ nabídky funguje zvláště dobře pro webové stránky elektronického obchodu, které mají hodně obsahu a vyžadují obrázky produktů. Doufáme, že tento tutoriál bude užitečný pro vaše další projekty Divi.

Pokud potřebujete více prvků k dokončení svých projektů tvorby webových stránek, prohlédněte si také našeho průvodce na webu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.

Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.

Ale mezitím, sdílejte tento článek na různých sociálních sítích.

...