Tvorba landing page v Thrive Architect

Miška Struhárová Landing pages

Ďalšie časti seriálu o tvorbe landing pages

1. diel: Prečo je Thrive Architect skvelý nástroj na tvorbu landing pages

2. diel: Príprava na tvorbu landing page: myšlienková mapa a wireframe

3. diel: 13 tipov, ako napísať presvedčivý text

4. diel: práve čítate

5. diel: Platené aj neplatené spôsoby, ako propagovať landing page

Ide do tuhého. Po poctivej príprave a brainstormingu je čas otvoriť Thrive Architect a pustiť sa do práce. Ukážem vám reálnu prácu s builderom a výsledkom bude moja landing page.

V minulých článkoch ste mohli vidieť návrh môjho wireframu, ktorý sa stal predlohou pri tvorbe samotnej stránky. Wireframe som otextovala a výsledok vo formáte PDF si môžete pozrieť kliknutím na tento odkaz.

Začíname tvoriť stránku

Prvý krok je vytvorenie novej stránky cez záložku Stránka. Musíte si ju pomenovať a uložiť, aby ste mohli stránke v Thrive Architecte editovať. Keď sa stránka uloží, cez zelené tlačidlo Edit with Thrive Architect sa dostanete do rozhrania, kde môžete stránku začať tvoriť.

Výber šablóny

Ak ste si navrhli wireframe ako ja, začínate prácu s prázdnou šablónou, v ktorej budeme pridávať všetky elementy od začiatku a upravovať ich. Thrive Architect je skvelý v tom, že peknú landing page si vie vytvoriť aj úplný začiatočník. Stačí si vybrať niektorú z preddizajnovaných šablón a nahradiť fotky a texty vašimi vlastnými.

Šablónu si vyberiete po kliknutí na koliesko v ľavom hornom rohu a prejdete na záložku Template Setup a Change a Landing Page Template.

Otvorí sa vám okno so všetkými šablónami. Stačí kliknúť na tú, ktorá sa vám páči, načíta sa a môžete sa pustiť do pridávania alebo úprav elementov.

Pridávanie a úprava elementov

Keď sa pozrieť na bočný panel, Thrive Architect ponúka rôzne elementy, z ktorých si vyskladáte profesionálnu stránku. 3 najdôležitejšie, ktoré sa objavujú na každej pekne naformátovanej stránke sú obrázky, texty a ikony.

Elementy pridávate do stránky z bočného panelu drag & drop štýlom. Môžete meniť ich poradie, nastavovať štýl tak, aby výsledok spĺňal vašu alebo klientovu predstavu.

Práca s obrázkami

Moja landing page má v úvode jeden veľký obrázok, na ktorom vám ukážem prácu s elementom Image. Obrázok si vopred nahrajte do galérie vo WordPresse, upravte jeho veľkosť pod 100 Kb, vyplňte názov a alt tag.

Na zmenšenie veľkosti používam online nástroj picresize.com. Ak tento článok číta niekto, kto doteraz alt tagy nevyplňoval, robí veľkú chybu a teraz má šancu ju napraviť. Alt tag by mal obsahovať presne to, čo užívateľ na obrázku uvidí. V prípade, že sa obrázok nepodarí načítať, zobrazí sa text, ktorý vpíšete do alt tagu.

Takto pripravený obrázok z WordPress galérie budeme vkladať na stránku.

Z bočného panelu som pridala element Image, kliknem na Insert image a automaticky sa otvorí galéria WordPressu, odkiaľ pridám vybranú fotku. Po kliknutí na element priamo na stránke sa na bočnom paneli objavia možnosti editácie. Do obrázku môžete vložiť URL, nastavovať orámovanie, odsadenie zo všetkých strán a podobne. Najlepšie je, že každú jednu zmenu hneď vidíte.

Práca s textom

Na pridávanie rôznych druhov textov je v Thrive Architect hneď niekoľko elementov. Pracuje sa s nimi rovnako, preto vám ukážem formátovanie na hlavnom nadpise, ktorý je v mojej landing page.

Z bočného panelu pridám element Heading. Keďže chcem, aby text prekrýval obrázok, nastavím podľa toho jeho umiestnenie. Zobrazí sa mi výzva na vloženie textu. Ten si skopírujem z môjho wireframe a vložím na stránku.

Následne môžem upravovať odsadenie zo strán, veľkosť písma, fontu, zarovnania a tak ďalej.

Práca so zoznamom a obsahovými boxami

Ďalšia časť môjho wireframe bol text s ikonou. V Thrive Architect si viem takýto zoznam vytvoriť pomocou elementu Styled list. V ňom si viem vybrať ľubovolnú ikonu a pridávať jednotlivé položky zoznamu. Text môžem naformátovať rovnako ako pri nadpisoch.

Okrem elementu Styled list je k dispozícii Styled box. Ten som využila na vytvorenie ďalšej časti, kde nahrávam referencie. Vybrať si môžete z rôznych štýlov, podľa toho, čo práve idete na stránku pridávať. 3 referencie od klientov sa mi zdajú ako optimálne množstvo, preto som si vybrala štýl, rozdelený na 3 stĺpce, každý má box s obsahom, nadpisom a ikonou. Tento obsahový box si vymažem a nahradím ho obrázkom.

Možností na editáciu je neskutočne veľa. Thrive Architect obsahuje dostatok elementov, s ktorými vytvoríte nielen jednoduché stránky, ale aj obsiahle homepages. Počas práce si môžete kontrolovať a upravovať vzhľad na tablete alebo mobile. Okrem úpravy šírky tlačidla som však nemala žiadny problém a všetky elementy sa zobrazovali responzívne.

Vloženie kontaktného formulára

Keďže mojím cieľom je získanie kontaktov na spoluprácu, na konci stránky vložím kontaktný formulár, ktorý som si vytvorila cez plugin Contact Forms 7. Ak by vám táto alternatíva nefungovala, odporúčam plugin Ninja Forms.

V Thrive Architect je na tento účel vytvorený element WordPress Content. Keď ho vložíte na stránku, zobrazí sa vám okno, do ktorého stačí vložiť vopred vygenerovaný shortcode kontaktného formulára.


Samozrejme, ak je cieľom landing page zbierať leady, na záver budete vkladať element na Lead Generation.

Záver

Neukázala som vám, samozrejme, tvorbu celej stránky, pretože elementy sa opakujú. Tu nájdete výsledok mojej práce - pokojne mi napíšte, čo si myslíte (aspoň odskúšame kontaktný formulár 🙂 )

Thrive Architect je celkom zábava, na začiatok však odporúčam, aby ste si vyhradili dostatok času. Kým si na rozhranie zvyknete, chvíľu to potrvá.

Skúste si Thrive Architect

Zistite viac o Thrive Architect

Miška Struhárová

Copywriterka a content manažérka. Bojuje proti nudnému obsahu písaním užitočného, ktorý pomôže alebo vyrieši problém. S WordPressom kráča ruka v ruke každodennou prácou na voľnej nohe.

Diskusia ku článku

Zanechať komentár

*

*

Príprava na tvorbu landing page: myšlienková mapa a wireframe | Zarábajúciweb.sk

[…] 4. diel: Tvorba landing page v Thrive Architect […]

13 tipov, ako napísať presvedčivý text | Zarábajúciweb.sk

[…] 4. diel: Tvorba landing page v Thrive Architect […]