Primers passos amb l'editor de landing pages

•  Secció d'elements: són els diferents blocs que es poden afegir a la landing page.
•  Contingut: aquesta és l'àrea de visualització i treball on podem afegir contingut a la landing page.
•  Opcions: la columna de la dreta mostrarà les diferents opcions de l'element seleccionat o de tota la pàgina si no hi ha cap element seleccionat.

Ara treballarem amb aquestes opcions.

Pas 3: Selecció del color de fons

Una de les primeres opcions que podem utilitzar és seleccionar el color de fons de tota la pàgina:

El color de fons de la teva landing page es pot triar a la columna de la dreta, a la secció Document i després a l'opció Color de fons. Aquesta selecció canviarà el color de fons de la landing page.

Pas 4: Selecció del color de fons del contenidor principal

Ara fem una ullada a una altra de les eines principals de l'editor, la Vista de llista:

La Vista de llista es mostra fent clic a una de les icones de la part superior esquerra, la quarta icona. En fer-hi clic, ens mostrarà una llista de tots els elements de la landing page organitzats jeràrquicament.

Això ens permetrà mostrar les opcions de bloc de cadascun dels elements (a la pestanya Bloc de la banda dreta) i fins i tot moure'ls perquè es mostrin abans o després en l'editor. Agrupar-los, etc.

Un cop seleccionat l'element, veurem com la columna de la dreta mostra les opcions d'aquest bloc en concret. Per exemple, podem seleccionar un color diferent per al text (Color) o canviar l'amplada (Dimensions).

L'estructura per defecte que es mostra un cop creada la landing page és la següent

• Una columna principal més gran
• Amb una altra columna interna més petita

Això es fa perquè la columna interna quedi sempre centrada a la pantalla. A la columna de la dreta pots veure dos valors:

•  Contingut: seria l'amplada del contingut.
•  Amplada: és l'amplada màxima de la columna.

D'aquesta manera, en definir una amplada de contingut una mica més petita, tindríem un marge entre la vora del contenidor i el contingut mateix.

A la imatge anterior, podem veure com s'han definit alguns paràmetres i el contingut bàsic, amb una amplada una mica més gran que la predeterminada.

Pas 5: arrossegar elements

Ara vegem com afegir nous elements a l'espai de treball:

El primer que cal fer és seleccionar l'element, en aquest cas un separador, i arrossegar-lo amb el ratolí fins a la ubicació desitjada.

A mesura que mous el ratolí per l'àrea de contingut, veuràs una barra blava que indica la ubicació desitjada per al contingut.

Pas 6: Estructuració del contingut

Una de les maneres més senzilles d'estructurar la landing page és utilitzar columnes:

Una opció útil és la de tres columnes, ja que ens permetrà utilitzar la columna del mig com a separador de contingut:

Després d'afegir les columnes, podem anar a la Vista de llista i seleccionar la columna del mig; a la dreta, a la columna de bloc, tindrem el camp Amplada buida. Però si hi definim una Amplada de 30px, aquesta columna es reduirà i podrà actuar com a separador

A continuació, fes clic al símbol més per afegir contingut a les columnes.

La selecció et permet triar entre els blocs disponibles; en aquest cas, per exemple, un paràgraf.

En l'exemple, també hem afegit un element "Llista" a sota del paràgraf. Pots continuar afegint elements a aquesta columna.

Ara afegirem un formulari a la tercera columna seleccionant aquesta columna, fent clic a "+" i seleccionant Formulari d'inscripció:

Com hem comentat abans, podrem triar entre els formularis existents al compte des del menú desplegable que ens permet seleccionar un formulari d'entre els que ja hem creat (Selecciona un formulari):

I s'afegirà de la manera següent:

IMPORTANT: No pots canviar el color de fons ni cap altre aspecte visual del teu formulari d'inscripció en crear una landing page. Això s'ha de fer en crear el formulari d'inscripció, que vas fer abans de crear la landing page. Qualsevol canvi que facis al formulari d'inscripció es reflectirà a la landing page.

Pas 7: afegir imatges

Primer, afegirem dues columnes més i, un cop creades, podrem fer clic als seus respectius signes "+" per afegir-hi contingut. Ara afegim una imatge amb text al costat.

Utilitzarem la columna esquerra per afegir una imatge i la columna dreta per afegir un paràgraf.

Pots utilitzar una imatge que ja s'hagi pujat (Biblioteca de mitjans) o pujar un fitxer des del teu ordinador (Pujar).

Quan fas clic a la imatge, es mostren dos cercles que et permeten arrossegar-la per donar-li la mida que vulguis.

A la dreta, a les opcions de bloc, també pots canviar l'amplada o definir un atribut de text alternatiu.

En aquest punt, afegirem text a la columna de la dreta fent clic a "+" i seleccionant Paràgraf; després, hi podrem afegir el text que vulguem.

Pas 8: Afegir un botó

Finalment, afegirem un botó just a sota de les dues columnes. Per fer-ho, fes clic a Botons (a l'opció Disseny) i el botó es mostrarà en negre just a sota, amb el text Afegeix text...

Fes clic a Afegeix text i, just a sobre, veuràs les opcions per modificar el botó, d'esquerra a dreta: Seleccionar botons, Botó, Arrossegar, Canviar la justificació de l'element, Canviar l'alineació vertical, Alinear, Enllaç, Negreta, Cursiva, Més i Opcions.

Pots fer qualsevol canvi que vulguis. En el nostre exemple, l'hem alineat al centre, hem canviat el text a Fes clic per comprar, hem definit el text en negre i el fons en blanc.

Ara només has de fer clic a Desa i la teva landing page estarà a punt.