Primers passos amb l'editor de landing pages

Primers passos amb l'editor de landing pages

ÍNDEX

• Pas 1: Configuració de la landing page
• Pas 2: La pantalla principal
  • 1. Barra lateral esquerra: elements i estructura
  • 2. Bloc central: previsualització en directe i edició
  • 3. Barra lateral dreta: estils i configuració (Estil)
  • 4. Publica la landing page
• Afegeix un formulari a la teva landing page
• Flux de treball recomanat

En aquest tutorial, veurem els passos més habituals per crear una landing page senzilla amb un formulari d'inscripció.

El primer que has de tenir en compte és que el formulari s'ha de crear prèviament al menú Subscriptors>>Formularis d'inscripció, ja que seran aquests formularis ja creats els que s'inseriran a les landing pages. Revisa com crear un formulari.

Aquest editor és el mateix que el de Crea un newsletter amb l'editor visual, que pots consultar aquí

 

Pas 1: Configuració de la landing page

Per fer-ho, fes clic a l'opció Landing page del menú principal i després fes clic al botó +Afegeix.

Després, el sistema mostrarà una finestra en què podràs seleccionar una de les plantilles que serà la base de la teva landing page. Entre elles hi ha una plantilla buida anomenada plantilla bàsica.

Selecciona'n una fent clic a Seleccionar plantilla i es mostrarà una finestra emergent en què hauràs de triar un nom per identificar la landing page. (Trieu un nom per a la nova landing page:) i fes clic a Desa. Amb això, ja has creat la base de la teva landing page; ara només cal que facis els canvis que calgui.

IMPORTANT: per desar els canvis que hagis fet, pots fer clic al botó blau Desa en qualsevol moment.

Pas 2: La pantalla principal

Aquest editor visual et permet dissenyar i publicar landing pages optimitzades mitjançant una interfície intuïtiva d'arrossegar i deixar anar.

1. Barra lateral esquerra: elements i estructura

La barra lateral esquerra reuneix tots els components necessaris per crear una pàgina des de zero o afegir blocs de contingut.

• Pestanyes de navegació superior:

Element: mostra components de contingut individuals.

 Capa: et permet gestionar la jerarquia i les capes dels elements superposats.

 Pàgina: configuració bàsica de la pàgina actual.

• Biblioteca de components (Element):

Text i estètica: Text (paràgrafs/encapçalaments), Imatge (imatges), Divisor (línies separadores), Espaiador (espais buits).

Interacció i navegació: Botó (botons d'acció), Barra de navegació (menú superior amb enllaços), Social (icones de xarxes socials).

• Contingut avançat: Hero (bloc destacat de la pàgina d'inici), Vídeo (reproductor de vídeo), Codi (inserció de codi HTML/JS personalitzable), Compte enrere (temporitzador de compte enrere), Taula (taules de dades).

• Captació de contactes: Formulari de registre (formularis d'inscripció), Codi QR (codis QR per escanejar).

• Seccions i disseny:

• 1 columna: bloc d'amplada completa (100%).

• 2 columnes / 3 columnes: estructures de graella dividida per organitzar el contingut en columnes paral·leles.

2. Bloc central: previsualització en directe i edició

L'àrea central ofereix una previsualització en temps real de la landing page.

• Barra de control superior:

Vista de dispositiu: canvia entre les vistes d'escriptori i mòbil per comprovar que el disseny sigui responsiu.

Desfer/Refer: fletxes per desfer o tornar a aplicar els canvis recents.

• Espai de treball: mostra l'estructura interactiva de la pàgina. Pots fer clic a qualsevol bloc, per exemple, un bloc de text per editar-lo, o un botó de crida a l'acció per editar-ne les propietats i afegir o editar imatges.

3. Barra lateral dreta: estils i configuració (Estil)

Et permet personalitzar l'aparença i la configuració tècnica de l'element seleccionat o de tota la pàgina.

• Atributs de pàgina:

Nom de la pàgina / Títol de la pàgina: defineix el nom intern i el títol públic visible a la pestanya del navegador.

URL slug: personalitza l'adreça web final (per exemple, /webinar-transformation).

Publicat: interruptor per publicar o despublicar la pàgina a l'instant.

• Configuració general:

Fons de la plantilla / Fons del contingut: selecciona el color de fons del llenç global i del contenidor de contingut mitjançant codis HEX (per exemple, #FFFFFF).

Amplada: ajusta l'amplada del contenidor en píxels (per exemple, 700 px).

Marges: controla el marge superior (Marge superior) i inferior (Marge inferior).

• Menús desplegables d'estil avançat:

TEXT I ENCAMPÇALAMENTS: tipografia, mida de la lletra, alineació i colors del text.

Botons: estils de vora, farci, color del botó i color del text en passar el cursor per sobre.

Enllaços: comportament i estil dels hipervincles.

4. Publica la landing page

Fes clic a Guardar canvis perquè l'enllaç de la landing page estigui disponible i, després, fes clic a Desar.

Afegeix un formulari a la teva landing page

Fes clic i arrossega la icona Formulari a l'editor de landing pages i tria el formulari que vulguis des del panell de la dreta.

 Si estàs utilitzant una plantilla, comprova si ja inclou un formulari i selecciona el que vulguis mostrar.

Flux de treball recomanat

1. Estructura: arrossega una secció de columnes des del panell esquerre fins al llenç.

2. Insereix: col·loca els elements desitjats (imatges, títols, botons o formularis) dins de les columnes.

3. Personalitza: selecciona cada element per ajustar-ne els marges, les tipografies i els colors des del panell dret.

4. Comprova: canvia a la vista mòbil per verificar la llegibilitat i publica activant l'interruptor Publicat.