Ako pridať obrázok k textu v Elementore

Ako pridať obrázok k textu v Elementore

Potrebujete zistiť, ako pridať obrázok k textu v Elementore?

Elementor umožnil každému stať sa webdizajnérom bez toho, aby musel mať pokročilé zručnosti v CSS. Jeho vizuálny editor vám umožňuje vytvárať nádhernú webovú stránku bez toho, aby ste museli napísať jediný riadok kódu CSS. Môžete len pridať ľubovoľné požadované dizajnové prvky (widgety) a prispôsobiť ich na paneli nastavení.

Napriek tomu by zručnosti CSS boli skvelým bonusom pri používaní Elementoru. Pomocou tejto funkcie budete môcť na svoju webovú stránku použiť jedinečné štýly Vlastné CSS od spoločnosti Elementor. V tomto článku vám ukážeme, ako pridať obrázok do textu v Elementore pomocou funkcie Custom CSS Elementor.

V niektorých návrhových nástrojoch, ako sú GIMP a Photoshop, je na pridanie obrázka do textu zvyčajne potrebné pridať značku vrstvy. V Elementore to môžete dosiahnuť pridaním kódu CSS ako widgetu Názov a Textový widget v Elementore nemá možnosť nastavenia na pridanie obrázka ako pozadia.

Pridajte obrázok k textu Elementor

Skôr ako začnete, uistite sa, že ste inovovali svoju verziu Elementoru na profesionálnu verziu, ak ste to neurobili, pretože vlastná funkcia CSS je k dispozícii iba v Elementor Pro. Keď budete pripravení, vytvorte novú stránku alebo šablónu a upravte ich pomocou aplikácie Elementor. Môžete samozrejme tiež upraviť existujúcu stránku alebo šablónu.

Pozri tiež: Elementor: Ako pridať obsah

Pridajte miniaplikáciu Názov do editačného poľa.

Ako pridať obrázok k textu v Elementore

Prejdite na panel nastavení a nahraďte predvolený text pod kartou Obsah.

Prečítajte si tiež nášho sprievodcu: Elementor: Ako používať nástroj na výber farieb

Prejdite na kartu Štýl na prispôsobenie textu. Môžete nastaviť veľkosť textu, štýl písma atď ... kliknutím na ikonu ceruzky v Možnosť typografie pod blokom Názov. Pretože chcete ako pozadie textu použiť obrázok, nemusíte nastavovať farbu textu.

Potom prejdite na kartu pokročilý a otvor blok zvyk CSS a vložte nasledujúci kód CSS. Vymeňte webovú adresu obrázka za svoju vlastnú webovú adresu.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

Tu je príklad.

Ako pridať obrázok k textu v Elementore

Získajte teraz prvok Elementor!

záver

Tu je! To je všetko pre tento článok, ktorý ukazuje, ako pridať obrázok do textu v Elementore. Ak máte nejaké obavy, ako sa tam dostať, fdajte nám vedieť v Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...

Elementor: Ako používať nástroj na výber farieb

Elementor: Ako používať nástroj na výber farieb

Chcete použiť výber farieb v aplikácii Elementor?

Elementor práve som vydal novú funkciu, Výber farieb. Táto funkcia je veľmi praktická, pretože teraz môžete použiť rovnakú farbu na ktorejkoľvek časti svojho webu jediným kliknutím. Preto už nie je potrebné manuálne vkladať hexadecimálny kód ako predtým.

Ako však používať túto funkciu? Čítajte ďalej a dozviete sa.

Prečítajte si tiež: Ako používať globálne písma v Elementore

Ak ste zabudli, na svete je viac ako 10 miliónov farieb. Vo webovom svete môže byť farba reprezentovaná hexadecimálnym kódom alebo kódom RGB. Samotný Elementor podporuje oba farebné kódy. Ak chcete použiť rovnakú farbu, môžete skopírovať hexadecimálny alebo RGB kód požadovanej farby a vložiť kód do ktorejkoľvek časti, kde chcete farbu použiť.

Bolo to predtým.

Pomocou výberu farieb Elementor teraz môžete uložiť určitú farbu a použiť ju znova a znova pri každej práci s editorom Elementor. Iba jedným kliknutím. Táto nová funkcia je celkom v pohode, pretože hľadanie vhodnej farby je jednou z ošemetných úloh webdizajnu okrem výberu písma.

Pozri tiež: Ako používať globálne farby v Elementore

Ako používať výber farieb Elementor

Ak chcete použiť výber farieb Elementor, najskôr pridajte widget ako obvykle. Po pridaní miniaplikácie prejdite na kartu Štýl na ľavom paneli. Vyberte ľubovoľné nastavenie, ktoré zahŕňa farbu (napríklad farbu textu alebo farbu pozadia).

Čítajte tiež: Ako vytvoriť formulár na nahrávanie súborov v aplikácii Elementor

Vyberte si svoju obľúbenú farbu vo výbere farieb. Keď nájdete vhodnú farbu, kliknite na tlačidlo plus vo výbere farieb.

Zobrazí sa výzva na potvrdenie, či chcete vytvoriť novú globálnu farbu. Zadajte nový názov a kliknite na tlačidlo Vytvoriť.

Ako používať výber farieb v Elementore

Odteraz môžete farbu, ktorú ste práve pridali vyššie, znova použiť, kedykoľvek budete chcieť na Elementore nastaviť farbu. Či už ide o farbu pozadia, farbu písma alebo iné nastavenia, ktoré zahŕňajú farbu.

Čítajte tiež: Ako pridať stránkovanie v Elementore

Ak to chcete dokázať, môžete vyhľadať iný prvok, ktorý akceptuje farbu, napríklad nadpis, ktorú môžete znova použiť, ako uznáte za vhodné.

Ako používať výber farieb v Elementore

Ak chcete tieto farby spravovať, odporúčame vám prečítať si nášho sprievodcu Ako používať globálne farby v Elementore

Záverečné slová

Vo webdizajne je výber farby jednou z náročných úloh okrem výberu písma. Po nájdení vhodnej farby zvyčajne skopírujete hexadecimálny kód alebo kód RGB na použitie v iných častiach stránky, na ktorej pracujete.

Pozri tiež: Ako pridať obsah do Elementoru

Pri výbere farieb Elementor táto stará metóda už neplatí. Teraz môžete uložiť určitú farbu a znova ju použiť jedným kliknutím namiesto vkladania hexadecimálneho kódu.

Získajte teraz prvok Elementor!

záver

Tu je! To je všetko pre tento článok, ktorý vám ukáže, ako používať výber farieb v Elementore. Ak máte nejaké obavy, ako sa tam dostať, fdajte nám vedieť v Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...

Elementor: Ako pridať obsah

Elementor: Ako pridať obsah

Potrebujete vytvoriť alebo pridať obsah do Elementoru?

Pri písaní dlhého článku, napríklad zoznamu nástrojov alebo miest, môžete pridať obsah. Na WordPress existuje veľa doplnkov, ktoré môžete použiť vytvoriť obsah na vašom článku.

Ale s Elementor nemusíte inštalovať TOC plugin, ak chcete pridať TOC. Elementor má predvolený widget, ktorý vám umožňuje pridať obsah k dlhému článku. Ideme to tu pokryť.

Obsah je nový widget v poslednej dobe predstavil Elementor. Pomocou tohto widgetu môžete poskytnúť ďalšiu navigáciu na svojej dlhej stránke článku, čo umožňuje vašim návštevníkom ľahký prechod medzi časťami článku.

Miniaplikácia Obsah Elementora vám umožňuje zvoliť presné značky hlavičky, ktoré sa majú zobraziť v obsahu. Môžete tiež použiť hlavičky z konkrétneho kontajnera na stránke.

Poznámka: Obsah je profesionálny widget. Ak chcete používať Elementor, musíte si nainštalovať jeho profesionálnu verziu.

Ako používať miniaplikáciu Obsah v Elementor

Existujú dva ideálne spôsoby, ako použiť miniaplikáciu Obsah v Elementore. Najskôr to môžete použiť na stránkach a príspevkoch (stránkach a príspevkoch vytvorených výlučne pomocou Elementoru). Prípadne môžete vytvoriť miniaplikáciu Obsah v hornej časti jedinečnej šablóny príspevku na vašom webe WordPress.

Čítajte tiež: Ako vytvoriť formulár na nahrávanie súborov v aplikácii Elementor

Samozrejme, jedinečná šablóna príspevku sa musí robiť s Elementorom. Implementáciou miniaplikácie Obsah do šablóny pre jeden príspevok sa vo vašom príspevku automaticky vygeneruje obsah, pokiaľ príspevok obsahuje značky hlavičiek na základe úrovní, ktoré ste nastavili na miniaplikácii Obsah.

Pridajte miniaplikáciu Obsah do jednej šablóny príspevku

V tomto článku si ukážeme, ako pridať miniaplikáciu Obsah do jednej šablóny príspevku. Môžete vytvoriť novú šablónu pre jeden príspevok alebo upraviť existujúcu šablónu. V tomto príklade vytvoríme novú šablónu pre jeden príspevok.

Ak chcete začať, prihláste sa na svojom paneli WordPress a prejdite na stránku Šablóny -> Tvorca tém. Na stránke Tvorca tém prejdite na Jedna karta a stlačte tlačidlo PRIDAJTE JEDEN vytvoriť šablónu.

V časti Vyberte sekciu typ modelov, vybrať Téma. Pomenujte svoj model a kliknite na tlačidlo VYTVORTE MODEL.

Vytvoríme šablónu jedného príspevku od nuly; zatvorte knižnicu šablón.

Pozri tiež: Ako pridať reCAPTCHA do formulára Elementor

Pridajte novú sekciu kliknutím na tlačidlo plus v editačnom poli Elementoru a vyberte štruktúru troch stĺpcov.

Nastavte šírku stĺpcov s porovnaním približne 28%: 61%: 10%.

Ako pridať obsah do Elementoru

Do druhého stĺpca pridajte bežné prvky, ako je názov príspevku, informácie o príspevku a obsah príspevku, a podľa toho sa prispôsobte. Po dokončení pridajte miniaplikáciu Obsah do prvého stĺpca.

V tejto časti definujte názov svojho obsahu nadpis a nastavte úrovne hlavičiek, ktoré chcete zahrnúť do sekcie Kotvy podľa značiek.

Ak viete o CSS, môžete vylúčiť selektory CSS, aby ste zabránili ich zobrazeniu v zozname obsahu.

Prečítajte si tiež: Ako pridať delič na vytvorenie sekcie v Elementore

V sekcii Zobrazenie značky, môžete nastaviť značku pre položky obsahu (odrážky alebo čísla). Ak vyberiete odrážky, môžete ikonu nastaviť z knižnice ikon.

otvorené dodatočný možnosti zobrazíte ďalšie možnosti nastavenia a vyberte požadované nastavenia.

Ako pridať obsah do Elementoru

Teraz prejdite na kartu Štýl prispôsobiť svoj obsah. V sekcii môžete nastaviť farbu pozadia, farbu ohraničenia, šírku ohraničenia a polomer ohraničenia Krabica.

Zatiaľ čo nastavíte farbu hlavičky, typografiu hlavičky a text hlavičky, môžete prejsť do sekcie Hlavička.

V sekcii list, Môžete nastaviť farbu textu aktívneho prvku, farbu textu prvku, keď nad ním umiestnite kurzor myši, a farbu textu prvkov v normálnom režime. Tu môžete tiež nastaviť farbu značky a typografiu prvkov obsahu.

Pozri tiež: Ako nainštalovať Elementor na WordPress

Aby bol váš obsah užitočnejší, môžete ho zviditeľniť, keď sa vaši návštevníci posunú nižšie. Ak to chcete urobiť, otvorte kartu pokročilý a otvorte túto možnosť Pohybový efekt. Definujte lepkavý na vrchu a nastavte posun okolo 80. Ak chcete, môžete v sekcii nastaviť aj vstupnú animáciu Vstupná animácia.

Môžete sa pohrať s ľavým panelom, kým nebudete spokojní so svojím obsahom. Po dokončení kliknite na tlačidlo PUBLISH a nastavte podmienku zobrazenia.

Tu je príklad obsahu, ktorý sme vytvorili.

Ako pridať obsah do Elementoru

Ak nastavíte podmienku zobrazenia šablóny pre jeden príspevok, ktorú ste vytvorili vyššie Všetko singulárne, automaticky budete mať obsah vždy, keď napíšete dlhý článok, ktorý bude obsahovať značky hlavičky podľa vami zadanej úrovne hlavičky.

Nakoniec

Pridanie obsahu k dlhému článku poskytuje a najlepšia používateľská skúsenosť vašim návštevníkom. Môžu ľahko preskočiť z jednej sekcie na druhú vo vašom článku kliknutím na položky v obsahu. S novým widgetom Elementor nemusíte inštalovať ďalší doplnok, aby ste do článku mohli pridať obsah.

Miniaplikáciu Obsah môžete použiť pri vytváraní stránky alebo príspevku pomocou aplikácie Elementor. Prípadne môžete pridať widget Obsah na svoju jedinečnú šablónu príspevku na vašom webe WordPress, takže zakaždým, keď napíšete dlhý príspevok, ktorý obsahuje značky hlavičiek, automaticky sa vygeneruje obsah.

Získajte teraz prvok Elementor!

záver

Tu je! To je všetko pre tento článok, ktorý ukazuje, ako pridať obsah do Elementoru. Ak máte nejaké obavy, ako sa tam dostať, fdajte nám vedieť v Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...

Ako optimalizujte rozloženie svojej webovej stránky s Elementorom

Ako optimalizujte rozloženie svojej webovej stránky s Elementorom

Chcete vedieť, ako optimalizovať rozloženie svojich webových stránok pomocou Elementor?

Optimalizácia výkonu webových stránok je jedným z jeho najdôležitejších aspektov užívateľské skúsenosti. Web s pomalým načítaním môže frustrovať akéhokoľvek používateľa, čo často vedie k a miera odchodov vysoká, čo môže nepriaznivo ovplyvniť úspech nášho podnikania.

Výkonnosť webových stránok môže byť ovplyvnená mnohými faktormi, napríklad: veľkými veľkosťami obrázkov, konfiguráciou servera, príliš veľkým počtom doplnkov a ďalšími faktormi.

Výkonnosť webových stránok je jednou z našich najsilnejších hodnôt ako tvorcov webových stránok. Preto sme vytvorili tento kurz v 5 častiach.

Teraz sa môžete naučiť, ako vytvárať rozloženia a príspevky pomocou optimálnych techník. Tieto znalosti zaistia, že vaše webové stránky nebudú obsahovať nadbytočné sekcie, stĺpce alebo miniaplikácie, ktoré práve nie sú potrebné. Tiež preskúmame niektoré vstavané funkcie miniaplikácií, aby sa skrátila doba načítania.

Na konci tohto tutoriálu budete úplne pripravení optimalizovať výkonnosť všetkých webových stránok Elementor, ktoré vytvoríte, a okamžite zožnete ovocie.

Lekcia 1: Optimálne postupy pre optimalizáciu rozloženia

inšpektor výkonu webových stránok

V našej prvej lekcii sa pozrieme na najúčinnejší spôsob vytvárania stránok a príspevkov v editore Elementor. Často vidíme použitie príliš veľkého počtu sekcií, stĺpcov, vnútorných sekcií a miniaplikácií, keď bolo možné dosiahnuť rovnaké rozloženie s použitím oveľa menšieho počtu prvkov.

Používanie nadmerného množstva prvkov spomaľuje výkon vašich webových stránok, preto sa poďme ponoriť a naučme sa, ako vytvárať webové stránky pomocou programu Elementor tým najefektívnejším spôsobom.

Budeme sa venovať nasledujúcim témam:

  • Bližší pohľad na štruktúru správnej stránky
  • Zobrazenie a testovanie výkonnosti vašich webových stránok
  • Optimalizácia obsahu hlavičky, päty a stránky
  • Príklady dobrých a zlých praktík rozloženia webových stránok
  • Správne používanie miniaplikácií, určovania polohy a globálnych štýlov
  • Tipy, ako sa vyhnúť oneskoreniu záťaže, zlepšiť SEO a predĺžiť dobu načítania
  • Optimalizácia dostupnosti
  • Zníženie počtu prvkov DOM
  • A oveľa viac !

Aby sme lepšie porozumeli optimálnym rozloženiam v Elementore, preskúmame šablónu Elementor, ktorá ukazuje bežné zneužívanie sekcií, stĺpcov a miniaplikácií. Do konca tejto lekcie kompletne prestavíme celú túto stránku znížením počtu stĺpcov a miniaplikácií. Naša úvodná stránka obsahuje deväť sekcií, 31 stĺpcov, päť vnútorných sekcií a 44 miniaplikácií.

Na konci tutoriálu sa naša optimalizovaná stránka zmenší na šesť sekcií, sedem stĺpcov a 16 miniaplikácií.

Použijeme zadarmo, svetlo Ahoj témaa pomocou osvedčených postupov znova vytvoríme každú časť šablóny a zlepšíme celkový výkon webovej stránky.

optimalizujte rozloženie svojich webových stránok pomocou Elementor

Testovanie na zlé praktiky

Predtým, ako sa ponoríme do optimalizácie rozloženia webových stránok, spustíme na našej stránke test, aby sme úplne pochopili, čo sa stane, keď niekto navštívi náš web. Po dokončení všetkých našich optimalizácií test zopakujeme a výsledky porovnáme.

Krok 1: Overte svoj web v okne inkognito

  • Otvorte nové okno v režime inkognito a zadajte webovú adresu testovanej webovej stránky.

Krok 2: Overte, či používate priamu cestu k adrese URL

Ak si nie ste istí odkazom na svoju stránku, môžete ho ľahko nájsť na hlavnom paneli WP:

  • Kliknutím na položku „Stránky“ zobrazíte všetky stránky na vašom webe.
  • Ukážte kurzorom na svoju stránku a kliknite na možnosť „Zobraziť“. Tým sa dostanete priamo na svoju stránku.
  • Skopírujte a prilepte túto adresu URL do okna inkognito a po načítaní webovej stránky ste pripravení ju otestovať!

Testovanie a zobrazenie výsledkov výkonnosti

Krok 1: Otestujte výsledky výkonnosti

inšpektor výkonu elementor testu

V minulosti ste mohli používať Nástroje pre vývojárov Chrome.

Ak nie, za účelom kontroly a zobrazenia obsahu HTML a CSS na vašej stránke:

  • Kliknite pravým tlačidlom myši kdekoľvek na svojej stránke a kliknite na položku „Skontrolovať“. Zobrazí sa niekoľko záložiek, kde si môžete prečítať svoje HTML a CSS, hľadať chyby, získavať výsledky SEO a vykonávať rôzne testy.
  • Vyberte kartu Sieť a stlačením klávesov cmd alebo ctrl + R načítajte výsledky.

Ako vidíte, načítanie nášho aktuálneho rozloženia trvá 2,88 sekundy a vykoná 81 požiadaviek.

Krok 2: Zobrazte výsledky výkonnosti

zlé výsledky optimalizácie inšpektora
  • Prepnite na kartu Maják, kde na našej stránke môžeme spustiť správu z auditu.

Získame tak viac informácií o aktuálnom výkone stránky.

  • Vyberte možnosť „Generovať správu“. Po chvíli sa zobrazí vaša správa.

Aktuálne dostávame výkonnostné hodnotenie 73/100, na ktorom určite môžeme zapracovať.

V ideálnom prípade by sme chceli, aby všetky tieto čísla boli zelené. Teraz prejdeme k optimalizácii našej stránky a zlepšeniu našich štatistík.

Majte na pamäti, že po každom kroku optimalizácie, ktorý vykonáme, môžeme zo zmien vyvodiť niektoré osvedčené postupy a mať ich na pamäti pre budúce weby, ktoré vytvoríme.

Optimalizácia prvkov stránky

Krok 1: Optimalizujte hlavičku

Začnime s hlavička.

Ako vidíte na tomto návrhu, hlavička bola vyrobená z troch stĺpcov.

Naše logo v prvom stĺpci pozostáva z dvoch miniaplikácií:

  1. Un Miniaplikácia obrázku ktorý zobrazuje súbor s obrázkom .png nášho loga
  2. Widget pre názov.

V druhom stĺpci sa ponuka záhlavia skladá z nášho widgetu ponuky navigácie.

Tretí stĺpec obsahuje:

  1. Interný widget sekcie (ktorý ovláda polohu miniaplikácie ikon).
  2. Naše kontaktné údaje na hlavičku

Pozrime sa, ako tu môžeme minimalizovať počet sekcií, miniaplikácií a sekcií.

Krok 2: Vytvorte novú hlavičku

hrdina dizajnu domu

Stĺpec 1:

Osvedčené postupy pre obrázky:

  • Priraďte každému súboru s obrázkom na vašom webe relevantný názov a alternatívny text v knižnici médií.

To zlepší prístupnosť vašej stránky a hodnotenie vášho vyhľadávača. V logu, ktoré sme pôvodne použili, názov nezodpovedá skutočnému obrázku a neexistuje žiadny alternatívny text.

  • Definujte rozmery obrázka vo vnútri miniaplikácie.

To umožňuje, aby bola stránka rozložená s dostatočným priestorom pred načítaním obrázkov, čím sa zabráni oneskoreniu rozloženia (faktor meraný prehliadačmi).

V príklade, na ktorom spoločne pracujeme, vyriešte tento problém tak, že prejdete na kartu Štýl a nastavíte šírku obrázka na 200 pixlov.

Stĺpec 2

Návrat na panel miniaplikácií:

  • Pod logo presuňte miniaplikáciu navigačnej ponuky
  • Nastavte ukazovateľ na „Žiadne“
  • Prejdite na kartu „Štýl“ a zadajte požadované písmo (aby zodpovedalo nášmu predchádzajúcemu dizajnu)

Osvedčené postupy pre celkový styling:

  • Nepoužívajte viac ako 2 rôzne písma, ktoré obsahujú viacero váh (Globálne písma).
  • Vyhnite sa výberu rôznych farieb pre každú položku pomocou výberu farieb (Globálne farby).
  • Zlepšite rýchlosť načítania svojich webových stránok generovaním menšieho počtu dopytov (celkových písiem).
  • Zbytočný kód opakujte dvakrát (globálne farby).
  • Udržujte konzistentnosť a kontrolu nad svojim modelom (celkový štýl).

Globálne písma:

To je možné vykonať pomocou funkcie Globálne písma:

  • Prejdite na kartu „Štýl“ a pridajte požadované písmo (aby zodpovedalo nášmu predchádzajúcemu dizajnu) tak, že ho vyberiete, urobíte malú zmenu a umiestnite kurzor myši na ikonu plus.
  • Kliknite na ikonu plus a vyberte požadovanú rodinu písem
  • Uložte štýly, ktoré budete používať v šablóne, ako globálne písma

Tento štýl potom môžete použiť vo všetkých widgetoch, ktoré vytvoríte.

Globálne farby:

Rovnakú metódu môžete použiť aj pre svoje celkové farby:

  • Kliknite na „Globálne“
  • Ukážte na výber farieb a kliknite naň
  • Vyberte farbu a ukážte na ikonu plus
  • Kliknite na „Globálne“ >> vyberte „Riaditeľ“

Keď to urobíte, farba sa uloží do palety farieb vašej šablóny, takže si ju môžete vybrať zo svojho zoznamu Globálne farby, kedykoľvek to potrebujete pre položku alebo miniaplikáciu.

Predtým, ako budeme pokračovať v hlavičke, nastavme vertikálne vypchávky na nulu.

Krok 3: Upravte hlavičku

Stĺpec 3

  • Prejdite na panel „Widgety“
  • Presuňte miniaplikáciu Zoznam ikon v ponuke Nav.
  • Odstráňte ďalšie položky zoznamu
  • Pridajte svoj text
  • Vyberte ikonu podľa vlastného výberu
  • Prejdite na kartu „Štýl“
  • Definujte celkové farby a písma podľa vlastného výberu

Teraz musíme opraviť ešte jednu vec - tri prvky hlavičky sú v súčasnosti naukladané a nie sú navzájom zarovnané. Tento problém môžeme vyriešiť zmenou šírky každého prvku na jeho skutočnú veľkosť, aby nezabral všetok priestor v stĺpci.

Ak chcete vyriešiť tento problém:

  • Vyberte miniaplikáciu Logo stránky >> kartu „Rozšírené“
  • Vyberte „Umiestnenie“ a nastavte jeho šírku na „Vstavané“

Tento presný krok zopakujte pre miniaplikáciu Navigačná ponuka a pre miniaplikáciu Zoznam ikon.

Teraz, keď sú všetky prvky hlavičky v súlade, zostáva iba správne ich umiestnenie.

Definovanie umiestnenia stĺpca pomocou vložených prvkov

  • Vyberte svoj stĺpec >> prejdite na kartu "Rozloženie"
  • V časti „Vertikálne zarovnanie“ vyberte „Spodok“
  • „V horizontálnom zarovnaní“ vyberte „Medzera medzi“

Vyberte zarovnanie „Medzera medzi“, aby bol prvý a posledný widget na oboch koncoch, aby medzi všetkými ostatnými widgetmi boli rovnaké medzery.

Prvý a posledný widget však majú rôznu šírku, takže rovnaký priestor nemusí vždy vycentrovať náš interný widget.

Tento problém môžeme vyriešiť úpravou okrajov:

  • Vyberte miniaplikáciu Navigačná ponuka >> kartu "Rozšírené"
  • Zrušte zoskupenie okraja a odstráňte medzery so zápornou hodnotou

Krok 4: Nastavte hlavičku na odozvu

Teraz sa pozrime, ako vyzerá aktuálna verzia nášho webu na mobilných zariadeniach.

Osvedčené postupy pre odozvu na mobilné zariadenia:

  • Zjednodušte svoj návrh a premýšľajte o spôsoboch, ako zareagovať na rovnaké sekcie, aby ste nepoužívali dvojnásobné množstvo kódu, ktoré ovplyvní rýchlosť vašej stránky.

Presne tak, ako vidíte v tejto hlavičke - je bežné, že rovnakú sekciu zmeníte špeciálne pre tablety a mobilné zariadenia. Tu to vidíme: Boli vytvorené dve verzie dizajnu: jedna verzia pre stolné počítače a jedna pre mobilné zariadenia.

Namiesto toho, keď váš dizajn a kód reagujú, rýchlosť stránky sa zvýši, pretože použije menej kódu.

Pozrime sa, ako to môžeme dosiahnuť pomocou nastavenia „Vlastná šírka“ pre naše miniaplikácie a prvky.

Nastavenie vlastnej šírky pre tablet

  • Kliknite na položku „Ponuka Nav“ >> karta „Rozšírené“
  • Vyberte položku „Umiestnenie“ >> nastavte šírku na „Vlastné“.
  • Vyberte „%“ >>, aby mala miniaplikácia rovnakú šírku (v percentách) prázdneho priestoru okolo nej.
  • Kliknite na kartu „Obsah“ >> „Toggle Align“ >> vyberte „Right“.

To vám umožní zarovnať prepínaciu ponuku kdekoľvek v rámci šírky miniaplikácie.

Teraz dokončme prispôsobenie prepínacej ponuky.

  • „Obsah“ >> Kliknite na prepínač „Celá šírka“ a nastavte ho na „Áno“.
  • „Štýl“ >> Odstráňte pozadie potiahnutím pruhu „Výber farby“ úplne doľava.

Teraz sa pozrime, ako to vyzerá na mobilnej obrazovke.

Definovanie vlastnej šírky pre mobil

V tomto prípade ponecháme tri widgety hlavičky vo výreze. Majte však na pamäti, že pri niektorých webových stránkach môže mať zmysel vynechať niektoré prvky z hlavičky pri prezeraní na mobile alebo tablete.

V tomto prípade sa pri zobrazení na mobilnom zariadení stane hlavička, že miniaplikácie Navigačná ponuka a Logo sa nezmestia do jedného riadka.

Ak chcete vyriešiť tento problém:

Umiestnenie ponuky Nav

  • Kliknite na „Ponuka Nav“ >> karta „Rozšírené“
  • Vyberte „Umiestnenie“ >> nastavte šírku na „Vlastné“
  • Vyberte „%“ >> Dajte miniaplikácii šírku 30%, aby sa zmestila vedľa nášho loga

Umiestnenie zoznamu ikon

  • Kliknite na „Zoznam ikon“ >> „Karta Rozšírené“
  • Vyberte položku „Vyplniť“ >> Zrušiť zoskupenie hodnôt
  • Pridajte polstrovanie 12 pixelov na „TOP“

Veril by si tomu?

Naša hlavička pôvodne používala 2 sekcie, 12 miniaplikácií a 10 stĺpcov. Teraz naša hlavička používa 1 sekcia, 3 miniaplikácie a 1 stĺpec.

A výsledok je rovnaký!

Krok 5: Optimalizujte sekciu Hero

Prejdeme k ďalšej sekcii nášho webu: sekcia hrdina

Osvedčené postupy pre sekcie hrdinov:

  • Zaistite, aby bol text sekcie hrdinu dobre viditeľný, najmä ak má obrázok na pozadí.

Ovládajte pozíciu miniaplikácie v stĺpci

Bežnou chybou, ktorú vidíme v editore Elementor, je používanie extra stĺpcov a medzier na ovládanie umiestnenia miniaplikácie.

V našom príklade model imidž hrdinu pozostáva z časti s obrázkom na pozadí. Nadpis a text sú umiestnené horizontálne pomocou dvoch stĺpcov. Vnútri sekcie je tiež vložka na vertikálne umiestnenie prvkov.

Pozrime sa, ako môžeme vytvoriť rovnaký dizajn iba s jednou sekciou:

  • Odstráňte ďalší stĺpec napravo od textu.
  • Odstráňte rozperu.

Namiesto toho, aby sme umiestnili náš hrdinský text na požadované miesto, použijeme možnosti zarovnania stĺpcov:

  • Vyberte stĺpec.
  • Nastavte „Vertikálne zarovnanie“ na „Stred“.
  • Prejdite na kartu "Rozšírené".
  • Vyberte položku „Vyplniť“ >> Zrušiť zoskupenie hodnôt
  • Nastavte pravé vypchávky na 50%.
  • Vyberte sekciu.
  • Vyberte „Minimálna výška“ >> nastavte ju na 80.

Opravený kontrast medzi textami a pozadím

Je dôležité, aby každá webová stránka mala dobrý kontrast medzi textom a pozadím. Nečitateľné informácie ovplyvňujú skóre vašich webových stránok a môžu tiež odháňať návštevníkov. Tak či onak, text by mal byť vždy dobre čitateľný.

Existuje niekoľko spôsobov, ako zlepšiť prehľadnosť sekcie, ktorej pozadím je farebný obrázok (ako vidíme v tejto šablóne):

  • Kliknite na hlavičku.
  • Prejdite na kartu „Štýl“ >> Vyberte „Textový tieň“.

To zlepší čitateľnosť textu tým, že bude vynikať z obrázku na pozadí.

Ďalší spôsob, ako spresniť text, je použiť prekrytia.

  • Vyberte sekciu >> karta "Štýl" >> "Prekrytie pozadia"
  • Vyberte si jednu zo svojich celkových farieb a hrajte sa s neprehľadnosťou, kým nedosiahnete požadovaný výsledok

Krok 6: Optimalizujte časť pomocou políčok s ikonami

navrhnúť polia domovských ikon

Teraz prejdeme k našej ďalšej sekcii, kde v súčasnosti máme vnútornú sekciu so štyrmi stĺpcami. V súčasnosti má každý stĺpec tri miniaplikácie: Miniaplikácia obrázku, miniaplikácia a miniaplikácia textového editora.

Pozrime sa, ako môžeme túto časť zjednodušiť, aby sa zlepšila jej výkonnosť.

Obsah oblasti ikon

  • V ponuke miniaplikácií vyberte tlačidlo »Pole ikon widgetu« a presuňte ho do stĺpca
  • Vyberte „pole s ikonami“
  • Ukážte na obrázok ikony
  • Vyberte „Stiahnuť SVG“ **
  • Vložte vlastnú ikonu

** Poznámka: Odznaky sú súbory SVG. Ak nie, prejdite na informačný panel WordPress a potom na položku Elementor >> Nastavenia. Budete musieť povoliť Povoliť sťahovanie nefiltrovaných súborov.

  • Zadajte svoj "názov"
  • Zadajte svoj „Popis“
  • Vyberte položku „Štýl“ >> Vyberte celkovú farbu
  • Vyberte položku „Veľkosť“ a potiahnite lištu na požadovanú veľkosť
  • Vyberte „Padding“ a potiahnite lištu na číslo, ktoré si vyberiete

Krok 8: Optimalizujte sekciu „Služby“

služby projektovania domov

Teraz sa chystáme znova vytvoriť sekciu „Služby“, ktorá v súčasnosti používa dva stĺpce, dva obrázky, miniaplikáciu s názvom a miniaplikáciu textového editora.

Vytvorme rovnaký dizajn v novej sekcii, ale iba s jedným stĺpcom.

  • Vytvorte novú sekciu so stĺpcom
  • V časti „Rozloženie“ >> nastavte „Šírka obsahu“ na „Celá šírka“
  • Na paneli miniaplikácií vyberte položku „Widget Image Box“ a presuňte ju do stĺpca

(Do tohto widgetu budeme môcť integrovať všetky aktíva sekcie)

  • Napíšte názov
  • Napíšte popis

Pre obrázok ponecháme súčasný dizajn, ktorý sme použili pre naše obrázky.

  • Vložte rovnaký obrázok z knižnice médií
  • Prejdite na kartu „Obsah“ >> Nastavte „Pozícia obrázka“ na „Vpravo“
  • Prejdite na kartu „Štýl“
  • Zvýšte vzdialenosť medzi prvkami
  • Zväčšite „Šírku“ obrázku
  • Rozbaľte sekciu „Obsah“
  • Vyberte zarovnanie „v strede“
  • Nastavte „Vertikálne zarovnanie“ na „Stred“
  • Definujte celkové farby a písma podľa vlastného výberu
  • Prejdite na kartu "Rozšírené"
  • Pridajte do miniaplikácie 10% výplň

Sekcia Služby má teraz rovnaký dizajn, ale s menším počtom aktív.

Krok 9: Optimalizujte časť s výzvou na akciu

Osvedčené postupy pre odkazy na výzvu na akciu:

  • Uistite sa, že všetky vaše odkazy na sociálne siete fungujú správne a tlačidlo obsahuje odkaz.
  • Keď pridáte odkaz na inú webovú stránku, zadajte tento atribút: „rel | noopener“

(Môžete to urobiť kliknutím na ikonu ozubeného kolieska a zadaním atribútu do položky „Vlastné atribúty“). Odkaz sa tým otvorí na novej karte prehliadača a zvýši sa vaše skóre výkonnosti.

Nasledujúca časť predstavuje výzvu na akciu pre naše služby.

Sekcia má v súčasnosti dva stĺpce, ktoré obsahujú:

  1. Obrázok na pozadí s rozperou
  2. Dve hlavičky, interná sekcia, textový editor a tlačidlo

Vytvorme rovnaký dizajn v novej sekcii, ale iba s jedným stĺpcom.

  • Prejdite na kartu „Rozloženie“ >> nastavte „Šírku obsahu“ na „Celú šírku“
  • Prejdite na kartu „Rozšírené“ >> Odstráňte všetky ďalšie náplne
  • Na paneli miniaplikácií vyberte „Widget na výzvu na akciu“ a presuňte ho do stĺpca
  • Nastavte „Pozíciu obrázka“ na „Vľavo“
  • Vyberte svoj obrázok z knižnice médií
  • Rozbaľte sekciu „Obsah“
  • Napíšte hlavičku
  • Napíšte popis
  • Zadajte text tlačidla
  • Prejdite na kartu „Štýl“
  • Medzi prvky pridajte „polstrovanie“
  • Upravte šírku obrázka
  • Rozbaľte sekciu „Obsah“
  • Vyberte globálne písmo pre svoj názov
  • Zväčšite medzeru medzi popisom a tlačidlom
  • Vyberte globálne farby vhodné pre každý zdroj
  • Rozbaľte sekciu „Tlačidlo“
  • Nastavte jeho veľkosť na „Veľká“
  • Prispôsobte si ho podľa svojich potrieb, napríklad podľa farby pozadia a polomeru orámovania

Doteraz to bola 2 stĺpcová sekcia so 6 widgetmi. Teraz je to sekcia s 1 stĺpcom a iba 1 miniaplikáciou!

Krok 10: Optimalizujte karusel s obrázkom

optimalizácia kolotoča obrázkov

Súčasný dizajn našej sekcie Image Carousel má bežnú chybu v spôsobe zobrazovania viacerých obrázkov.

Tento dizajn pozostáva z 5 stĺpcov, čo je praktika, ktorou sa mnohí používatelia riadia veľkosťou svojich obrázkov.

Pozrime sa na jednoduchší spôsob, ktorý tiež optimalizuje výkon vašich webových stránok.

  • Vytvorte novú sekciu s 1 stĺpcom
  • Prejdite na kartu „Rozloženie“ >> nastavte „Šírku obsahu“ na „Celú šírku“
  • Na paneli miniaplikácií vyberte tlačidlo »Image Carousel Widget« a presuňte ho do stĺpca
  • Pridajte požadované obrázky z knižnice médií
  • Prejdite na kartu „Obsah“
  • Nastavte „Veľkosť obrázka“ na „Stredné - 300 x 300“
  • Podľa svojich preferencií upravte „Prezentácie na zobrazenie“, „Posúvanie snímok“ a „Navigácia“
  • Prejdite na kartu „Štýl“
  • Nastavte „Vertikálne zarovnanie“ na „Stred“
  • Prispôsobte medzery
  • Prejdite na kartu "Rozšírené"
  • Pridajte potrebnú náplň

To, čo bolo kedysi sekciou s piatimi stĺpcami, je teraz iba 5 stĺpec.

Prejdeme k ďalšej sekcii, kde môžeme optimalizovať videá na našom webe.

Krok 11: Optimalizujte sekciu videa

Osvedčené postupy pre videoobsah:

  • Lazy Load používajte vždy, keď je to možné, aby sa skrátila doba načítania vašich webových stránok.

Čo sa stane, keď použijeme možnosť „Lenivé zaťaženie“?

Technicky povedané, kód na vloženie videa je nahradený statickým obrázkom. Video sa tak načítava iba vtedy, keď používateľ klikne na obrázok - čo skutočne pomáha pri dobách načítania stránky.

To, čo teraz urobíme, je zmeniť spôsob, akým používame miniaplikáciu Video, aby to nezdržovalo rýchlosť našej stránky alebo výkonnosť webových stránok.

  • Vyberte „Miniaplikácia videa“
  • Prejdite na kartu „Štýl“
  • Vyberte „Lazy Load“

Krok 12: Optimalizujte pätu a aktualizujte ju

optimalizácia päty elementu

Bežnou chybou, ktorá sa vyskytuje na mnohých webových stránkach, je, že ich päta používa viac záhlaví pre dátum a popis, ako aj ikonu symbolu autorských práv.

Pozrime sa, ako optimalizovať pätu a zaistiť, aby bola vždy aktuálna.

Tento proces nepretržitej aktualizácie nakonfigurujeme pomocou Dynamické značky. Vďaka tomu nebudeme musieť každý rok meniť obsah hlavičky, pretože dynamické značky sa automaticky aktualizujú na aktuálny rok.

Aby sme to urobili, budeme postupovať nasledovne:

  • Odstráňte ďalšie miniaplikácie a ponechajte iba miniaplikáciu Nadpis
  • Vyberte miniaplikáciu Názov
  • Kliknite na symbol „Dynamické značky“ napravo od poľa „Názov“ (známy aj ako „tlačidlo pre rodičov“)
  • V rozbaľovacej ponuke vyberte položku ponuky „Aktuálny dátum a čas“
  • Kliknite na rodičovskú ikonu kľúča
  • Kliknite na kartu „Formát dátumu“ a vyberte položku ponuky „Vlastné“
  • Odstráňte to, čo je aktuálne v poli „Vlastný formát“, okrem „Y“
  • Vyberte kartu „Rozšírené“
  • Zvýraznite pole „Vpred“ a súčasne podržte tlačidlá „možnosti“ a „G“ (alebo súčasne „ovládanie“, alt „a“ C), aby ste zadali symbol „©“.
  • Pridajte medzeru za znak „©“
  • Vyberte pole „Po“
  • Zadajte medzeru a napíšte text, ktorý sa má zobraziť po roku, napríklad „Všetky práva vyhradené“

Môžete si všimnúť, že na ukážkovej webovej stránke v tomto návode má každý widget svoju vlastnú sekciu. Urobili sme to, aby bol návod jasnejší a jednoduchšie ho dodržať.

V ideálnom prípade čím menej sekcií máte, tým menej dodatočného kódu HTML budete mať.

Niektoré miniaplikácie môžete zlúčiť do tej istej sekcie tak, že ich presuniete myšou do vyššie uvedenej sekcie a potom odstránite prázdnu sekciu.

A to je všetko, vaše rozloženie je optimalizované!

Nové hodnotenie výkonnosti webových stránok

Výsledky skontrolujeme v okne DevTools (Inšpektor):

  • Vyberte kartu „Sieť“:

Tu je niekoľko pekných a pozitívnych zmien:

  • Web sa teraz načítava 568 milisekúnd
  • Prešli sme z 81 žiadostí na 46
  • Vyberte kartu „Maják“, kde uvidíte, že naše skóre výkonnosti sa zvýšilo zo 73 na 98

Majte na pamäti, že sme optimalizovali náš výkon bez použitia doplnkov tretích strán. Stačili len jednoduché vyladenia a osvedčené postupy.

Krok 13: Otestujte výsledky pomocou pohybových efektov

Chceme, aby bol náš web interaktívnejší a zábavnejší, ako to však ovplyvní naše výsledky? Pozrime sa, čo môžeme urobiť.

Z hlavičky urobte „pevný“ prvok:

  • Vyberte hlavičku
  • Prejdite na kartu "Rozšírené"
  • Rozbaľte kartu „Efekty pohybu“
  • Nastavte možnosť „Lepkavé“ na „Hore“

Urobte zo sekcie hrdinu „pevný“ prvok:

  • Vyberte sekciu hrdina
  • Prejdite na kartu „Štýl“
  • Vyberte rozbaľovací zoznam „Príloha“ a zvoľte „Opravené“

použite Vstupná animácia pre hrdinov text (hlavička):

  • Vyberte miniaplikáciu Hlavička
  • Prejdite na kartu "Rozšírené"
  • Rozbaľte kartu „Efekty pohybu“
  • Vyberte vstupnú animáciu a nastavte ju na „Fade In“

Na textový popis hrdinu (widget Textový editor) použite vstupnú animáciu:

  • Vyberte miniaplikáciu Textový editor
  • Prejdite na kartu "Rozšírené"
  • Rozbaľte kartu „Efekty pohybu“
  • Vyberte „Vstupnú animáciu“ a nastavte ju na „Fade In“

To isté urobte s miniaplikáciami, ktoré nasledujú, pre jemné efekty pri načítaní stránky.

Teraz spustime test výkonnosti znova, aby sme zistili, ako pohybové efekty ovplyvnili naše skóre:

  • Vráťte sa do okna „Inšpektor“
  • Vyberte kartu „Maják“
  • Kliknite na „Vytvoriť správu“

Teraz vidíme, že naše skóre výkonnosti bolo znížené na 97 - to rozhodne nie je veľký rozdiel a robí webovú stránku zaujímavejšou a zábavnejšou.

Môžete veriť nášmu novému skóre výkonnosti?

Sme radi, že ste teraz plne vybavení na zvýšenie svojho skóre výkonnosti na každom webe Elementor, ktorý vytvoríte. Bude to mať veľký vplyv na ciele v oblasti budovania vašich webových stránok a na úspech vášho podnikania.

Odporúčame vám uložiť si tento návod ako záložku pre budúce použitie, aby ste mohli preskúmať výkonnosť svojich webových stránok a použiť osvedčené postupy na optimalizáciu rozloženia.

A to je len začiatok - ďalšia časť tohto kurzu sa točíoptimalizácia obrazu.

V tutoriále si prejdeme každý obrázok na ukážkovom webe a naučíme sa, ako ich vylepšiť, aby boli načítania ešte efektívnejšie.

Získajte teraz prvok Elementor!

záver

Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako optimalizovať rozloženie webových stránok pomocou Elementor. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...

 
Elementor: Ako pridať strúhanku na webovú stránku

Elementor: Ako pridať strúhanku na webovú stránku

Chceli by ste na webovú stránku Elementor pridať cestičku omrviniek – Breadcrumbs?

Všetci poznáme rozprávku Hansel and Gretel, však? Dvaja stratení súrodenci, ktorí zanechávali stopu s kúskami chleba, aby nasledovali cestu späť domov.

Koncept strúhanky webových stránok je úplne rovnaký. Drvina v podstate ukazuje návštevníkom ich stopu na webe a hovorí vašim návštevníkom, kde sa nachádzajú. Pomocou strúhanky môžu návštevníci prejsť na svoju polohu na webovej stránke, kde sa môžu vrátiť na cestu, ktorú prešli. Stručne povedané, funguje to ako prehliadač na webovej stránke, ktorý sa zlepšuje užívateľskú skúsenosť.

V tomto článku sa dozviete viac o strúhanke, pretože budeme diskutovať o miniaplikácii Elementor Breadcrumbs, prečo ju používať a ako ju používať.

Čo sú to strúhanky na webovej stránke?

Drvina Elementoru je malá textová cesta, ktorá funguje ako virtuálny kompas pre webové stránky. Pomocou tohto sekundárneho navigačného systému sa návštevníci môžu vrátiť na stránky, ktoré si prezerali.

pridajte strúhanku – Breadcrumbs – na webovú stránku Elementor

Napríklad navštívite internetový obchod a kúpite si slúchadlá, povedzme iPod. Prejdete teda na domovskú stránku, potom na stránku príslušenstva a nakoniec na stránku produktu. V tomto prípade bude strúhanka nasledovná: Domov> Príslušenstvo > Slúchadlá > iPod.

Zobrazuje cestu, ktorou ste prešli na stránku. A každá jeho časť je klikateľná. Ak sa napríklad chcete vrátiť na stránku príslušenstva, stačí kliknúť na „Príslušenstvo“ v strúhanke. A prejdete na stránku.

Čo ponúka miniaplikácia strúhanka Elementor?

Tvorca webových stránok Elementor uľahčuje pridávanie strúhanky na váš web WordPress. Miniaplikáciu stačí pretiahnuť a nakonfigurovať. Tento widget ponúka niekoľko úžasných funkcií.

Toto sú:

  • Prispôsobiteľné štýly strúhanky.
  • Prispôsobenie typografie, farby a ďalšie.
  • Možnosť pridania individuálnych vlastných ikon pre domovskú stránku a iné stránky.
  • Výber štýlu oddeľovača pre text alebo ikonu

Ako používať Breadcrumb s Elementor Pro

Widget navigácie Elementor pracuje s Yoast plugin pre SEO. Najprv si teda musíte nainštalovať doplnok Yoast a potom na svojej webovej stránke vytvoriť strúhanku.

Krok 1: Nainštalujte doplnok Yoast SEO

Prístup k pluginy z hlavného panela WordPress a potom kliknite na tlačidlo Pridať. Ďalej vyhľadajte Yoast a stlačte tlačidlo inštalácie. Po inštalácii aktivujte doplnok.

Objavte nášho sprievodcu Ako nainštalovať doplnok WordPress

Krok 2: Nakonfigurujte strúhanku z nastavení Yoast

Po nainštalovaní a aktivácii doplnku prejdite na  SEO >> Nastavenia SEO. Potom prepnite na " Strúhanka a povoľte strúhanku a zmeňte jej nastavenie.

pridajte strúhanku – Breadcrumbs – na webovú stránku Elementor

Krok 3: Pridajte na webovú stránku strúhanku

Po povolení nastavení strúhanky prejdite na stránku, na ktorú chcete pridať strúhanku, a otvorte stránku pomocou Elementor. Potom potiahnite miniaplikáciu do editora Elementor

pridajte strúhanku – Breadcrumbs – na webovú stránku Elementor

Na paneli miniaplikácií navigácie môžete nastaviť jeho vyrovnanie a vyberte si HTML tag v strúhanke.

Na karte Breadcrumb Style ho môžete nastaviť typografiePotom farba textu. Máte tiež možnosť nastaviť jednotlivé farby pre stavy Normálny a Hover drobečkový stav.

pridajte strúhanku – Breadcrumbs – na webovú stránku Elementor

To je všetko. Teraz kliknite na tlačidlo Publikovať alebo Aktualizovať, aby ste použili svoje zmeny.

Prečo používať strúhanku Elementor na svojom webe

Drobenka Elementor vám pomôže povedať používateľom, kde sa nachádzajú. Cestička v strúhanke je základným nástrojom na zlepšenie užívateľskú skúsenosť vašej webovej stránky a optimalizácia pre vyhľadávače.

Drobková navigácia má mnoho výhod.

SEO: Možno poznáte návštevníkov, ktorí majú radi strúhanku, ale to pozná aj Google. Google ich môže použiť vo výsledkoch vyhľadávania a vďaka tomu bude váš výsledok pre používateľov oveľa príťažlivejší. Slová použité v strúhanke môžu byť tiež cieľovými kľúčovými slovami vašej webovej lokality.

Pozri tiež: Ako pridať reCAPTCHA do formulára

Breadcrumb zlepšuje UX: Ľudia nenávidia stratu. Musíte udržať návštevníkov spokojných a čo najviac znížiť trenie. Môže to pomôcť vašej používateľskej skúsenosti, pretože ide o bežný prvok rozhrania, ktorý ľuďom okamžite ukazuje cestu von.

Nižšie miery odchodov : Len málokto pristupuje na webovú stránku cez domovskú stránku. Všetko je to o organickom vyhľadávaní. To znamená, že vstupným bodom môže byť ktorákoľvek časť vášho webu.

posledná myšlienka

Miniaplikácia Elementor Breadcrumbs uľahčuje pridávanie strúhanky na váš web WordPress. Široká škála funkcií Elementor vám umožňuje vytvárať vlastné strúhanky, aby ste ešte viac zlepšili používateľský zážitok.

Získajte teraz prvok Elementor!

záver

Takže ! To je všetko pre tento článok, ktorý vám ukáže, ako pridať strúhanku – strúhanku – na váš web. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...

Elementor: Ako pridať reCAPTCHA do formulára

Elementor: Ako pridať reCAPTCHA do formulára

Chcete pridať reCAPTCHA do svojho formulára Elementor?

Jedným z problémov, ktorým musíte čeliť pri vytváraní formulára na vašom webe, je robot. Našťastie si to tím Elementor uvedomil. Keď vytvoríte formulár na svojom webe WordPress pomocou aplikácie Elementor, môžete pridať reCAPTCHA, aby ste chránili formulár pred robotmi.

Nie, nemusíte inštalovať ďalší doplnok. Elementor už podporuje integráciu s reCAPTCHA. Všetko, čo musíte urobiť, je pripojiť svoj web k reCAPTCHA a pridať do formulára pole reCAPTCHA.

Prepojenie vášho webu s reCAPTCHA

Skôr ako začneme, predpokladáme, že ste upgradovali svoju bezplatnú verziu Elementoru na verziu Pro, pretože integrácia reCAPTCHA je k dispozícii iba na Elementore Pro.

Najskôr navštívte web webová stránka reCAPTCHA a kliknite na tlačidlo Od administračná konzola v pravom hornom rohu. Prihláste sa pomocou svojho účtu Google.

Kliknutím na tlačidlo plus zaregistrujte nový web.

pridajte reCAPTCHA do svojho formulára Elementor

Zadajte štítok, vyberte typ reCAPTCHA, pridajte svoju doménu a prijmite všetky reCAPTCHA, potom kliknite na tlačidlo PREDLOŽIŤ.

Malá rada. Pretože chcete do formulára pridať reCAPTCHA, odporúčame vám výber reCAPTCHA v2 -> Začiarkavacie políčko „Nie som robot“ . Táto možnosť vyžaduje od vašich návštevníkov, aby pred overením svojho príspevku dokončili overenie prostredníctvom výzvy.

Po kliknutí na tlačidlo VYTVORIŤ, uvidíte kľúč webu a tajný kľúč. Skopírujte tieto kľúče.

Potom sa prihláste na svoj hlavný panel WordPress a prejdite na Elementor -> Nastavenia, Cliquez sur na karte Integrácie a do príslušných polí zadajte kľúč lokality a tajný kľúč. Posuňte zobrazenie nadol a kliknite na tlačidlo Uložiť zmeny.

pridajte reCAPTCHA do svojho formulára Elementor

Pridajte reCAPTCHA do formulára Elementor

Pridanie reCAPTCHA do formulára v Elementore je veľmi ľahké, pretože Elementor už má pole reCAPTCHA. Ak chcete pridať jeden, vytvorte formulár (presunutím miniaplikácie Formulár do editačného poľa Elementoru) alebo upravte existujúci formulár. Ak ste nikdy predtým v Elementore nevytvorili formulár, môžete čítať v tomto článku.

Ak chcete pridať reCAPTCHA, pridajte do formulára nové pole kliknutím na tlačidlo PRIDAJTE PRVOK. Nastavte typ poľa na reCAPTCHA.

Definujte veľkosť a štýl (svetlý alebo tmavý).

pridajte reCAPTCHA do svojho formulára Elementor

Takže. Váš formulár navrhnutý spoločnosťou reCAPTCHA je teraz pripravený na zverejnenie. Kliknite na tlačidlo ZVEREJNIŤ / AKTUALIZOVAŤ po dokončení prispôsobovania formulára.

Získajte teraz prvok Elementor!

záver

Tu je! To je všetko pre tento článok, ktorý ukazuje, ako pridať reCAPTCHA do vášho formulára Elementor. Ak máte nejaké obavy, ako sa tam dostať, fdajte nám vedieť v Komentáre.

Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.

...