Tvorba landing page v Thrive Architect

Miška Struhárová Landing pages

AZalA?ie A?asti seriA?lu o tvorbe landing pages

1. diel: PreA?o je Thrive Architect skvelA? nA?stroj na tvorbu landing pages

2. diel:A�PrA�prava na tvorbu landing page: myA?lienkovA? mapa a wireframe

3. diel:A�13 tipov, ako napA�saA? presvedA?ivA? text

4. diel: prA?ve A?A�tate

5. diel:A�PlatenA� aj neplatenA� spA?soby, ako propagovaA? landing page

Ide do tuhA�ho. Po poctivej prA�prave a brainstormingu je A?as otvoriA? Thrive Architect a pustiA? sa do prA?ce. UkA?A?em vA?m reA?lnu prA?cu s builderom a vA?sledkom bude moja landing page.

V minulA?ch A?lA?nkoch ste mohli vidieA? nA?vrh mA?jho wireframu, ktorA? sa stal predlohou pri tvorbe samotnej strA?nky. Wireframe som otextovala a vA?sledok vo formA?te PDF si mA?A?ete pozrieA? kliknutA�m na tento odkaz.

ZaA?A�name tvoriA? strA?nku

PrvA? krok je vytvorenie novej strA?nky cez zA?loA?ku StrA?nka. MusA�te si ju pomenovaA? a uloA?iA?, aby ste mohli strA?nke v Thrive Architecte editovaA?. KeA? sa strA?nka uloA?A�, cez zelenA� tlaA?idlo Edit with Thrive Architect sa dostanete do rozhrania, kde mA?A?ete strA?nku zaA?aA? tvoriA?.

VA?ber A?ablA?ny

Ak ste si navrhli wireframe ako ja, zaA?A�nate prA?cu s prA?zdnou A?ablA?nou, v ktorej budeme pridA?vaA? vA?etky elementy od zaA?iatku a upravovaA? ich. Thrive Architect je skvelA? v tom, A?e peknA? landing page si vie vytvoriA? aj A?plnA? zaA?iatoA?nA�k. StaA?A� si vybraA? niektorA? z preddizajnovanA?ch A?ablA?n a nahradiA? fotky a texty vaA?imi vlastnA?mi.

A�ablA?nu si vyberiete po kliknutA� na koliesko v A?avom hornom rohu a prejdete na zA?loA?ku Template Setup a Change a Landing Page Template.

OtvorA� sa vA?m okno so vA?etkA?mi A?ablA?nami. StaA?A� kliknA?A? na tA?, ktorA? sa vA?m pA?A?i, naA?A�ta sa a mA?A?ete sa pustiA? do pridA?vania alebo A?prav elementov.

PridA?vanie a A?prava elementov

KeA? sa pozrieA? na boA?nA? panel, Thrive Architect ponA?ka rA?zne elementy, z ktorA?ch si vyskladA?te profesionA?lnu strA?nku. 3 najdA?leA?itejA?ie, ktorA� sa objavujA? na kaA?dej pekne naformA?tovanej strA?nke sA? obrA?zky, texty a ikony.

Elementy pridA?vate do strA?nky z boA?nA�ho panelu drag & drop A?tA?lom. MA?A?ete meniA? ich poradie, nastavovaA? A?tA?l tak, aby vA?sledok spA?A?al vaA?u alebo klientovu predstavu.

PrA?ca s obrA?zkami

Moja landing page mA? v A?vode jeden veA?kA? obrA?zok, na ktorom vA?m ukA?A?em prA?cu s elementom Image. ObrA?zok si vopred nahrajte do galA�rie vo WordPresse, upravte jeho veA?kosA? pod 100 Kb, vyplA?te nA?zov a alt tag.

Na zmenA?enie veA?kosti pouA?A�vam online nA?stroj picresize.com. Ak tento A?lA?nok A?A�ta niekto, kto doteraz alt tagy nevyplA?oval, robA� veA?kA? chybu a teraz mA? A?ancu ju napraviA?. Alt tag by mal obsahovaA? presne to, A?o uA?A�vateA? na obrA?zku uvidA�. V prA�pade, A?e sa obrA?zok nepodarA� naA?A�taA?, zobrazA� sa text, ktorA? vpA�A?ete do alt tagu.

Takto pripravenA? obrA?zok z WordPress galA�rie budeme vkladaA? na strA?nku.

Z boA?nA�ho panelu som pridala element Image, kliknem na Insert image a automaticky sa otvorA� galA�ria WordPressu, odkiaA? pridA?m vybranA? fotku. Po kliknutA� na element priamo na strA?nke sa na boA?nom paneli objavia moA?nosti editA?cie. Do obrA?zku mA?A?ete vloA?iA? URL, nastavovaA? orA?movanie, odsadenie zo vA?etkA?ch strA?n a podobne. NajlepA?ie je, A?e kaA?dA? jednu zmenu hneA? vidA�te.

PrA?ca s textom

Na pridA?vanie rA?znych druhov textov je v Thrive Architect hneA? niekoA?ko elementov. Pracuje sa s nimi rovnako, preto vA?m ukA?A?em formA?tovanie na hlavnom nadpise, ktorA? je v mojej landing page.

Z boA?nA�ho panelu pridA?m element Heading. KeA?A?e chcem, aby text prekrA?val obrA?zok, nastavA�m podA?a toho jeho umiestnenie. ZobrazA� sa mi vA?zva na vloA?enie textu. Ten si skopA�rujem z mA?jho wireframe a vloA?A�m na strA?nku.

NA?sledne mA?A?em upravovaA? odsadenie zo strA?n, veA?kosA? pA�sma, fontu, zarovnania a tak A?alej.

PrA?ca so zoznamom a obsahovA?mi boxami

AZalA?ia A?asA? mA?jho wireframe bol text s ikonou. V Thrive Architect si viem takA?to zoznam vytvoriA? pomocou elementu Styled list. V A?om si viem vybraA? A?ubovolnA? ikonu a pridA?vaA? jednotlivA� poloA?ky zoznamu. Text mA?A?em naformA?tovaA? rovnako ako pri nadpisoch.

Okrem elementu Styled list je k dispozA�cii Styled box. Ten som vyuA?ila na vytvorenie A?alA?ej A?asti, kde nahrA?vam referencie. VybraA? si mA?A?ete z rA?znych A?tA?lov, podA?a toho, A?o prA?ve idete na strA?nku pridA?vaA?. 3 referencie od klientov sa mi zdajA? ako optimA?lne mnoA?stvo, preto som si vybrala A?tA?l, rozdelenA? na 3 stA?pce, kaA?dA? mA? box s obsahom, nadpisom a ikonou. Tento obsahovA? box si vymaA?em a nahradA�m ho obrA?zkom.

MoA?nostA� na editA?ciu je neskutoA?ne veA?a. Thrive Architect obsahuje dostatok elementov, s ktorA?mi vytvorA�te nielen jednoduchA� strA?nky, ale aj obsiahle homepages. PoA?as prA?ce si mA?A?ete kontrolovaA? a upravovaA? vzhA?ad na tablete alebo mobile. Okrem A?pravy A?A�rky tlaA?idla som vA?ak nemala A?iadny problA�m a vA?etky elementy sa zobrazovali responzA�vne.

VloA?enie kontaktnA�ho formulA?ra

KeA?A?e mojA�m cieA?om je zA�skanie kontaktov na spoluprA?cu, na konci strA?nky vloA?A�m kontaktnA? formulA?r, ktorA? som si vytvorila cez plugin Contact Forms 7. Ak by vA?m tA?to alternatA�va nefungovala, odporA?A?am plugin Ninja Forms.

V Thrive Architect je na tento A?A?el vytvorenA? element WordPress Content. KeA? ho vloA?A�te na strA?nku, zobrazA� sa vA?m okno, do ktorA�ho staA?A� vloA?iA? vopred vygenerovanA? shortcode kontaktnA�ho formulA?ra.


Samozrejme, ak je cieA?om landing page zbieraA? leady, na zA?ver budete vkladaA? element na Lead Generation.

ZA?ver

NeukA?zala som vA?m, samozrejme, tvorbu celej strA?nky, pretoA?e elementy sa opakujA?. Tu nA?jdete vA?sledok mojej prA?ce - pokojne mi napA�A?te, A?o si myslA�te (aspoA? odskA?A?ame kontaktnA? formulA?r 🙂 )

Thrive Architect je celkom zA?bava, na zaA?iatok vA?ak odporA?A?am, aby ste si vyhradili dostatok A?asu. KA?m si na rozhranie zvyknete, chvA�A?u to potrvA?.

SkA?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

*

*

Thrive Architect: skvelA? nA?stroj na tvorbu landing pages | Zarábajúciweb.sk

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

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 […]