12. diel - Kontaktná stránka

V predchádzajúcej lekcii, Editor Gutenberg , sme si ukázali ako pracovať s editorom Gutenberg, ako pridať nový prvok na stránku a ako ho následne upraviť. Zoznámili sme sa s osnovou stránku a prešli sme si aj nastavenia editora.

V dnešnej lekcii základov WordPress sa naučíme ako vytvoriť kontaktnú stránku, ukážeme si ako pracovať so skupinou, odsekom, oddeľovačom a stĺpcami. Vložíme si na stránku tlačidlá, naučíme sa pracovať s odkazmi a akčnými odkazmi. Vysvetlíme si čo je to iframe a ako s ním vo WordPress pracovať a vložíme si na stránku Google mapy.

Skupina

V editore Gutenberg predstavuje blok "Skupina" nástroj, ktorý slúži na združovanie viacerých blokov dohromady. Funguje ako kontajner, čo znamená, že vo vnútri neho môžu byť umiestnené rôzne typy blokov – napríklad text, obrázky, tlačidlá alebo stĺpce – a tieto prvky je možné následne spravovať ako celok.

Skupina a kontajner sú si veľmi blízke pojmy – v praxi sa často používajú ako synonymá, aj keď niektoré šablóny alebo vizuálne editory (napr. Elementor, Spectra) môžu ponúkať kontajner ako pokročilejší prvok s viacerými možnosťami nastavenia.

Prečo používať blok "Skupina":

• Vizuálna prehľadnosť - Pomáha logicky rozdeliť obsah stránky na oddiely.
• Spoločné nastavenie - Umožňuje hromadne meniť pozadie, farbu textu, okraje, šírku či zarovnanie všetkých blokov vo vnútri.
• Responsivita - Lepšie sa prispôsobuje rôznym veľkostiam obrazoviek.
• Prenositeľnosť a opakovateľnosť - Skupinu je možné uložiť ako znovupoužiteľný blok.

Pridanie skupiny

Skupinu si pridáme ako akýkoľvek iný element kliknutím na tlačidlo +:

Vyberieme element Skupina a na stránke sa nám zobrazí okno, v ktorom by sme mali vybrať rozvrhnutie. Vyberieme prvú možnosť, zhromaždenie bloku do kontajnera:

Odsek

Prvý element, ktorý si na kontaktnú stránku pridáme, bude odsek. Vnútri kontajnera klikneme na veľké tlačidlo + a vyberieme možnosť Odsek:

Do tohto nového odseku si pridáme text:

Jsem WordPress vývojář se zaměřením na moderní weby. Pokud máte zájem o spolupráci, ozvěte se mi pomocí následujících údajů.

Text si zarovnáme na stred kliknutím na ikonu troch vodorovných čiar a voľbou Zarovnať na stred:

A nakoniec si ešte zmeníme veľkosť fontu. V ľavom stĺpci si pri položke typografie rozklikneme ikonku pre rozšírené nastavenia a nastavíme tu veľkosť 26px:

Oddeľovač

Do rovnakého kontajnera, kde sme vložili odsek, si vložíme ešte oddeľovač pre vizuálne rozdelenie textu. V pravom spodnom rohu kontajnera klikneme na symbol +:

A vyhľadáme a vložíme si element Oddeľovač:

V pravom stĺpci sa nám zobrazia rôzne možnosti nastavenia oddeľovača. Môžeme zmeniť jeho štýl, farbu, alebo okraje:

Stĺpce

Pomocou stĺpcov môžeme horizontálne rozdeľovať obsah stránky. Vytvoríme si pod existujúcou skupinou novú skupinu. Klikneme na tlačidlo + a vyberieme možnosť Skupina:

Vyberieme možnosť kontajner:

Do nového kontajnera vložíme element Stĺpce:

V ďalšom kroku si zvolíme rozvrhnutie stĺpcov. My budeme chcieť dva stĺpce rovnakej šírky, preto zvolíme možnosť 50 / 50:

Kontajner sa nám tak rozdelí na dva rovnako široké stĺpce.

Do ľavého stĺpca si pomocou tlačidla + pridáme logo. Vyberieme teda možnosť Obrázok:

Zvolíme možnosť vloženia Knižnica médií a vyberieme obrázok nášho loga, ako sme zvyknutí:

Pomocou ikony zarovnania a voľby Zarovnať na stred si obrázok zarovnáme av ľavej stĺpci mu nastavíme šírku 195px:

Do rovnakého stĺpca si pridáme ešte odsek s kontaktnými údajmi. Klikneme na tlačidlo + v pravom spodnom rohu stĺpca:

Vyberieme možnosť Odsek:

A vložíme do neho tento text:

E-mail: [email protected]
Telefon: +420 777 888 999
Sídlo: Praha, Česká republika
K dispozici: Po–Pá, 9:00–17:00

Text si zarovnáme a stred:

Do stĺpčeka si pod text pridáme oddeľovač:

Tlačidlá

Posledným elementom v tomto stĺpčeku budú dve tlačidlá. Pomocou tlačidla + pridáme do stĺpčeka nový element - Tlačidlá:

Do nového tlačidla vložíme text:

Napsat e-mail

Pomocou tlačidla + vo vnútri elementu pridáme ďalšie tlačidlo:

Do druhého tlačidla vložíme text:

Zavolat

Tlačidlá si ešte zarovnáme na stred. Klikneme na ikonu pre horizontálne zarovnanie a vyberieme voľbu Zarovnať na stred:

Odkazy

Budeme chcieť, aby sa po kliknutí na tlačidlo niečo stalo. Pridáme si teda do tlačidiel odkazy.

Akčné odkazy

Okrem bežných odkazov na webové stránky (napr. https://...) existujú aj tzv. špeciálne odkazy, ktoré spúšťajú rôzne funkcie v zariadení užívateľa. Tieto odkazy sa označujú ako schématické odkazy a začínajú iným výrazom ako "http".

Každý takýto odkaz musí mať špeciálnu predponu:

• mailto: - Spustí e-mailového klienta s vyplnenou adresou. Príklad: mailto:info@e­xample.com
• tel: - Spustí volanie na mobile. Príklad: tel:+420123456789
• sms: - Spustí aplikáciu pre SMS správy (na telefónoch). Príklad: sms:+420123456789 (Podpora záleží na zariadení a prehliadači.)
• whatsapp: - Otvorí konverzáciu vo WhatsApp (ak je aplikácia nainštalovaná). Príklad: https://wa.me/420123456789
• skype: - Spustí volanie alebo chat v Skype. Príklad: skype:meno_uzi­vateľa?call alebo ?chat
• geo: - Zobrazí mapu s konkrétnymi súradnicami (napr. v Google Maps na mobile). Príklad: geo:50.087451,14­.420671 (Praha)

Tieto odkazy nám môžu pomôcť zvýšiť interaktivitu a funkčnosť webu. V kontaktných stránkach alebo na CTA tlačidlách (výzva na akciu) sú ideálne, pretože uľahčujú návštevníkom spojenie s prevádzkovateľom webu jedným kliknutím – priamo z telefónu alebo počítača.

Pridanie odkazov

My si pridáme odkaz na odoslanie emailu a odkaz, ktorý spustí volanie. Klikneme na tlačidlo Napísať e-mail, klikneme na ikonu pre vloženie odkazu, vložíme tu text "mailto:info@moj­prvniweb.sk" a potvrdíme kliknutím na ikonu šípky, alebo stlačením klávesu Enter:

Rovnakým spôsobom pridáme odkaz na tlačidlo Zavolať. Klikneme na tlačidlo, potom klikneme na ikonu na vloženie odkazu, vložíme tu text "tel:+420777888999" a potvrdíme kliknutím na ikonu šípky, alebo stlačením klávesu Enter:

Vlastný HTML

Do druhého stĺpčeka si budeme chcieť pridať Google mapu s našou adresou. Niektoré editory umožňujú vložiť mapu priamo (napr. Elementor). Gutenberg v aktuálnej verzii neobsahuje vlastný blok na vkladanie Google Map. My si ale takú mapu môžeme vložiť pomocou HTML a iframu.

Element Vlastné HTML (alebo Custom HTML) je blok, ktorý umožňuje vložiť priamo vlastný kód v jazyku HTML. Tento blok je určený pre užívateľov, ktorí majú aspoň základnú znalosť značkovacieho jazyka HTML a chcú si na stránku pridať niečo špeciálne, čo bežné bloky nevedia.

Na čo sa tento blok hodí:

• Vloženie vlastných formulárov, iframe videí, máp alebo widgetov tretích strán
• Vytvorenie vlastného rozloženia stránky
• Pridanie externých skriptov alebo značiek (napr. YouTube, Google Forms)
• Úprava výstupu, ktorý WordPress bežne neponúka cez blokové rozhranie

Kedy tento blok nepoužívať:

• Pokiaľ nevieme presne, čo HTML robí – chyba v kóde môže rozhodiť celý layout.
• Pokiaľ existuje iný blok, ktorý to isté dokáže bez písania kódu – napr. Vložený kód YouTube alebo blok Mapy.

Iframe

HTML značka iframe (skratka pre inline frame) slúži na vloženie zobrazenia inej webovej stránky alebo obsahu z iného zdroja priamo do stránky nášho webu. Môžeme si to predstaviť ako "okno", ktoré ukazuje obsah z inej adresy bez toho, aby používateľ musel odísť z nášho webu.

Základný zápis vyzerá takto:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Týmto sa do stránky vloží webová stránka z domény example.com.

Iframe sa najčastejšie používa pre:

• YouTube video
• Google Mapy
• Formulár z externej služby (napr. Google Forms)
• Zobrazenie obsahu iného webu

Pokiaľ používam blok Vlastné HTML, môžeme do neho tento iframe priamo vložiť. Alebo pri vkladaní videí/máp môžeme využiť špeciálny blok Vložený obsah (Embed) – tam často stačí iba skopírovať bežný odkaz a WordPress si iframe vytvorí sám.

Vloženie mapy

V druhom stĺpčeku klikneme na tlačidlo + pre pridanie nového elementu a vyhľadáme Vlastné HTML:

Prejdeme na Google mapy a vyhľadáme si príslušnú adresu, na naše účely si vyhľadáme adresu firmy ITnetwork. Napíšeme teda do poľa na vyhľadávanie v google mapách "ITnetwork.cz". Akonáhle nájdeme správnu adresu, klikneme na tlačidlo zdieľať:

Otvorí sa nám okno na zdieľanie adresy. V hornom riadku si prepneme na záložku Vloženie mapy. Môžeme si tu zvoliť veľkosť mapy, my si tu necháme možnosť "strednej" a skopírujeme si iframe kliknutím na tlačidlo Kopírovať HTML:

Tento odkaz si vložíme do nášho elementu "Vlastné HTML" pomocou klávesovej skratky Ctrl + V, alebo klikneme pravým tlačidlom a vyberieme možnosť Vložiť:

Ešte si tento element vertikálne zarovnáme na stred. Klikneme na ikonu pre vertikálne zarovnanie a vyberieme možnosť Zarovnať na stred:

Máme hotovo. Teraz ešte stránku uložíme, kliknutím na tlačidlo Uložiť v pravom rohu stránky:

Kliknutím na ikonu štvorčeka so šípkou si potom môžeme zobraziť náhľad našej stránky: