Cómo crear una página de destino en WordPress usando Elementor

Hay muchas formas de crear páginas de destino exitosas.

"¿Por qué seguir este tutorial en particular y no otros?" , podrías preguntar.

Este tutorial paso a paso tiene varias ventajas clave:

1. Creador de páginas de aterrizaje gratuito : creará una página de aterrizaje con nuestro creador de páginas de aterrizaje gratuito líder en WordPress sin complementos adicionales de WordPress.
2. Sin codificación : no tendrá que lidiar con una sola línea de código CSS o PHP, y tampoco tendrá que lidiar con temas secundarios, ni ningún conocimiento técnico para el caso.
3. Altas conversiones : en esta guía nos enfocamos en llegar a una página de destino que no solo se vea hermosa, sino que esté diseñada para generar conversiones más altas.

Comencemos con una descripción general rápida de la página de destino que crearemos hoy.

Una página de destino es una página de su sitio web que se ha creado específicamente para una determinada campaña de marketing. Las páginas de destino se crean con una clara llamada a la acción (CTA) en mente y, a menudo, generan mejores tasas de conversión que las publicaciones de blogs o páginas de sitios habituales. También son una buena fuente para generar clientes potenciales y crear una lista de correo electrónico con fines de marketing, así como para reforzar su presencia en las redes sociales.

Hay varios diferenciadores entre las páginas de destino y las páginas normales, como la página de inicio, por ejemplo, tienen menos o ningún enlace de menú de encabezado y pie de página, son más visuales y tienden a tener mensajes claros. La forma más común de categorizar las páginas de destino es las páginas de generación de clientes potenciales y las páginas de clics.

Para seguir con éxito esta guía, necesitará:

• Una instalación de WordPress (requerida)
• Instalación de Elementor (requerido)
• Instalación de Elementor Pro

Puede tener su página de destino en vivo y activa bajo su nombre de dominio y alojamiento, o almacenarla localmente en su computadora usando un software como Local by Flywheel.

Estarás creando una página que incluye:

1. Sección superior : ocupa la mayor parte de nuestro espacio de pantalla. Está compuesto por un título de título, algo de texto y un botón de llamada a la acción, que llevará al usuario a nuestro formulario.
2. Sección del menú de navegación : esta área ayuda al visitante del sitio a navegar rápidamente a cualquier parte de nuestra página de destino.
3. Sección Acerca de : una sección importante que les brinda a nuestros visitantes más información sobre nuestro negocio o servicio.
4. Sección de características : una lista de características, con una imagen grande a la izquierda.
5. Sección de galería : para esta sección, creamos un diseño de galería único usando una combinación de widgets, con algunas imágenes, texto, íconos sociales y fondo de video.
6. Sección de formulario : aquí, incluimos un formulario de contacto que permitirá a nuestros visitantes conectarse fácilmente con nosotros.

Así que eso es todo, ¡comencemos!

Antes de comenzar con el diseño real de la página de destino, es importante configurar correctamente el editor visual.

Comenzamos eligiendo el diseño de página de Elementor Canvas. Esto nos da una página "limpia", sin el encabezado, pie de página o barra lateral. Esa es una buena opción para la creación de una página de destino.

Luego establecemos los colores predeterminados de la siguiente manera: primario es blanco, secundario y texto - negro. Los colores predeterminados se establecerán automáticamente cuando agreguemos un nuevo widget, haciendo nuestro trabajo mucho más fácil.

Hagamos lo mismo con las fuentes. He configurado mi fuente de titulares primaria y secundaria en una fuente de Adobe Typekit, pero puede configurar su propia fuente como desee.

Con respecto al selector de color, configuramos nuestros colores, para que podamos acceder a ellos rápidamente mientras construimos la página.

Nuestra sección superior de color azul claro incluye el encabezado, el editor de texto y los widgets de botones.

Lo que es especial aquí: el modo de fusión de la imagen de fondo y los encabezados superpuestos.

Cómo lo hicimos: configuramos el color de fondo en azul. La superposición de fondo nos da la opción de establecer otra capa en la parte superior, esta vez establecer una superposición de imagen. El modo de fusión es una nueva opción en Elementor 2.1. Lo que hace es mezclar la superposición con el fondo azul claro. Elegimos Multiplicar u Oscurecer y ver cómo afecta esto a la imagen.

Para superponer el encabezado, vamos a la configuración avanzada del primer encabezado y agregamos un margen negativo en la parte inferior.

El área de navegación tiene 3 columnas e incluye un widget de imagen, un widget de menú de navegación y un botón.

Lo que es especial aquí: enlaces de navegación que ayudan al visitante a desplazarse hasta el punto relevante de la página.

Cómo lo hicimos: Lograremos esta funcionalidad más adelante usando el widget Anchor. El menú tiene 3 enlaces: acerca de, características y galería. Cada enlace está conectado a la sección correspondiente mediante un hashtag.

El área Acerca de será una sección de una columna. Incluirá el icono, el encabezado y el widget del editor de texto. Esta sección es bastante simple. El encabezado tiene el mismo estilo que el encabezado superior, solo cambiamos un poco la sombra.

Lo que es especial aquí : el icono que aparece cubierto por el encabezado

Cómo lo hicimos : Redujimos el tamaño del icono y establecimos un margen inferior menos.

Esta sección de características incluye una gran imagen de Vespa a la izquierda y una lista de 3 servicios a la derecha.

Lo que es especial aquí : Para esta sección de características, repetimos el efecto de icono de fondo que usamos en la sección anterior.

Cómo lo hicimos : para obtener este efecto, configuramos la configuración de margen para el widget de icono en 40px en el margen inferior y -20 en el margen izquierdo. Podemos duplicar este primer servicio 3 veces.

La siguiente área que agregaremos es la galería. Aquí tenemos un gran título y una cuadrícula compuesta de llamadas a la acción y otros widgets.

Lo que es especial aquí: una cuadrícula de galería compuesta por varios widgets

Como lo hicimos:

• Para crear esta cuadrícula similar a una galería, usaremos el widget de columnas para crear una sección interna.
• Combinaremos varios widgets y un video de fondo para crear una galería de estilo único.
• Usamos el widget espaciador, por lo que podríamos establecer un color de fondo en la columna de la izquierda. Hacemos lo mismo con la columna central.
• También agregamos otra sección de widget de columnas, y esta vez, en estilo, estableceremos un tipo de video de fondo. En el nuevo Elementor 2.1, puede establecer una hora de inicio y finalización para el video. Esto es ideal para crear un bucle de fondo.

Aquí está nuestra área de contacto, que es una parte vital de cada página que permite a los visitantes comunicarse con los propietarios del sitio. Con el creador de formularios visuales de Elementor, podemos configurar fácilmente un formulario de contacto y personalizar su estilo para que se ajuste a toda la página. También podemos conectarlo sin problemas a un servicio de marketing por correo electrónico como MailChimp utilizando las integraciones de formularios incorporadas de Elementor.

Lo que es especial aquí : efecto de modo de fusión de fondo

Cómo lo hicimos : Agregamos una superposición de imagen y la configuramos con la configuración Multiplicar del modo de fusión.

Queremos que nuestro menú sea pegajoso y que se mantenga en la parte superior cuando nos desplazamos hacia abajo.

Lo que es especial aquí : menú fijo con enlaces de navegación

Cómo lo hicimos: Configuraremos esto eligiendo la sección de edición, avanzado, efecto de desplazamiento, parte superior adhesiva. Podemos establecer en qué dispositivos lo tendremos fijo y también el espaciado desde la parte superior. También agregamos anclas para que los visitantes puedan navegar por la página fácilmente. Hacemos esto arrastrando un widget de anclaje en cada sección.

Ahora un pequeño truco con respecto a la navegación; Como puede ver, el área de navegación es visible en todo el sitio, pero ¿y si queremos ocultarla un poco?

Lo que es especial aquí: ocultar la navegación cuando el usuario se desplaza más allá de cierto punto en la página.

Cómo lo hicimos: Elegiremos la sección de navegación, avanzada, y debajo del índice z le daremos un 1. Debajo de la configuración de la sección de la galería, estilo, le daremos un fondo blanco. Y debajo de la pestaña avanzada, el índice z lo establece en 2. Esto significa que debería cubrir la sección del menú. Vamos a ver si esto funciona. Nos desplazaremos hacia abajo y lo comprobaremos: la navegación se ha ido.

Veamos lo que hemos creado. Se ve bien, ¿verdad?