Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
WPBakery Page Builder, anteriormente conocido como Visual Composer, es un plugin de WordPress que te permite crear páginas personalizadas para tu sitio WordPress sin escribir ningún código HTML o CSS. Sus intuitivos editores son ideales para diseñadores que quieren transformar rápidamente sus diseños en páginas de WordPress totalmente funcionales sin utilizar código. Sin embargo, los desarrolladores web experimentados también pueden ahorrar mucho tiempo y esfuerzo al añadir este plugins a sus flujos de desarrollo.
En un tutorial anterior, realicé una introducción a la interfaz de usuario de WPBakery Page Builder. Hoy, te mostraré cómo usarlo para crear una página de aterrizaje sencilla y responsiva.
Requisitos previos
Para seguir el tutorial, asegúrate de tener lo siguiente:
- la versión 5.0 de WordPress o superior
- la última versión de WPBakery Page Builder
Si necesitas ayuda para configurar el plugin, consulta el siguiente tutorial:
1. Crear una nueva página
Una página de aterrizaje suele ser una página creada para convertir el tráfico generado a partir de una campaña de marketing en clientes potenciales o en ventas. Para que sea eficaz, debes tener un objetivo bien definido. En este tutorial, para exponer un ejemplo realista, vamos a crear una página de aterrizaje que persuada a tus visitantes a comprar un libro electrónico o eBook.
Comienza abriendo el escritorio de tu instalación de WordPress y navega a la pestaña Páginas. A continuación, pulsa el botón Añadir nueva para crear una página en blanco.
Debido a que actualmente los tiempos de atención son breves, una página de aterrizaje bien optimizada es aquella que tiene pocas distracciones y una llamada a la acción muy obvia. Sin embargo, la mayoría de los temas de WordPress añaden automáticamente elementos como cabeceras, columnas laterales o sidebars, pies de página y barras de navegación a una página recién creada. Estos elementos pueden distraer a tus visitantes, por lo que por lo general es una buena idea eliminarlos.
La forma más sencilla de conseguirlo consiste en usar la sección Atributos de página para aplicar a la página una plantilla en blanco de una sola columna. Aunque el nombre exacto de la plantilla dependerá de tu actual tema. Por ejemplo, si estás utilizando el tema WP Bootstrap Starter, que es gratuito y de código abierto, puedes seleccionar la plantilla Blank with Container.
Ahora estamos preparados para empezar a añadir contenido en la página.
2. Crear una sección hero
La primera y más prominente sección de nuestra página va a ser una sección hero. En ella situaremos el título del eBook, la imagen de su portada, algunos detalles sobre él y un botón Comprar. No dudes en utilizar cualquier foto para la imagen de portada. Alternativamente, puedes crear una rápidamente usando Canva.
Usaremos el editor de front-end WYSIWYG ofrecido por WPBakery Page Builder para crear nuestra página. Para activarlo, haz clic en el botón Editor de front-end.
Usaremos ampliamente los elementos Row (fila) en nuestra página de aterrizaje. Al hacerlo, se garantiza que la página sea modular y responsiva. Nuestra primera fila servirá como contenedor para la sección de la hero. Créalo ahora yendo a Add Element > Row (Añadir elemento > Fila).
En el cuadro de diálogo Row Settings (configuración de fila), cambia a la pestaña Design Options (opciones de diseño) y aplica un padding (relleno) superior de aproximadamente 16 px a la fila.
A continuación, divide la fila en dos columnas abriendo el cuadro de diálogo Row Layout (diseño de fila) y seleccionando la segunda opción de diseño.
Vamos a mostrar la imagen de portada en la primera columna de la fila. Así que haz clic en el signo más que se muestra en su interior y selecciona la opción Single image (una sola imagen). En el cuadro de diálogo que aparece, carga la imagen de portada y pulsa el botón Set Image (establecer imagen).
En este punto, te sugiero que utilices el cuadro de diálogo Single Image Settings (configuración de imagen única) para establecer el tamaño de imagen (Image size) en medio (medium) y la alineación de imagen (Image alignment) en centrada (center). Si aún no estás satisfecho con el tamaño de la imagen, no dudes en especificar directamente las dimensiones deseadas en píxeles.
La segunda columna de la fila albergará el título, la descripción y el botón. Para el título, usaremos un elemento Custom Heading (título personalizado). Este elemento, a diferencia del elemento habitual Text Block (bloque de texto), nos permite utilizar Google Fonts mientras aplicamos estilo al texto.
Una vez que aparezca el cuadro de diálogo Custom Heading Settings (configuración de titular personalizado), escribe el título del libro en el campo Text (texto) y usa la lista desplegable Font Family (familia de fuentes) para seleccionar la familia de fuentes de Google que desees utilizar.
Si crees que el tamaño de fuente es demasiado pequeño, puedes cambiarlo mediante el campo Font Size (tamaño de fuente) o utilizar el campo Element Tag (etiqueta de elemento) para elegir un estilo de titular más grande, como h1.
Para la descripción, sigue adelante y añade un bloque de texto (Text Block) en la misma columna. Usando el editor de texto enriquecido que aparece, no sólo puedes escribir todo el texto, sino también aplicarle sencillos estilos.
Como último elemento de la columna, añade un elemento botón (Button). En su cuadro de diálogo de configuración, asigna una etiqueta al botón y especifica la dirección URL de la página que deseas que se abra. Por ahora, puedes utilizar cualquier URL ficticia.
Para que el botón se vea más pulido, establece su Style (estilo) en moderno (Moderno), su forma (Form) en redonda (Round) y su tamaño (Size) en grande (Large). De forma predeterminada, el botón tiene un sutil fondo gris. Si cambias su Color a verde clásico (Classic Green) puedes conseguir que destaque más.
Por supuesto, eres libre de experimentar con todos los otros estilos y formas que ofrece WPBakery Page Builder.
Vale la pena señalar que si deseas que el botón sea tan ancho como la columna, también tendrás que establecer la propiedad Alignment (alineación) en centrado (Center) y marcar la opción Set full width button? (¿establecer ancho completo?).
WPBakery Page Builder te permite añadir fácilmente iconos de varias bibliotecas de iconos diferentes a tus botones. Para añadir un icono al botón, primero debes marcar la propiedad Add Icon (añadir icono). A continuación, podrás seleccionar la biblioteca de iconos y el icono que quieras.
Nuestra sencilla sección hero está ya lista. Debería tener un aspecto similar al siguiente:
3. Crear una sección de reseñas
Las reseñas o testimonios son una parte importante en la mayoría de las páginas de aterrizaje. Algunas buenas y genuinas críticas suelen ser suficientes para ganar la confianza de tus visitantes. Por ahora, vamos a añadir tres reseñas a nuestra página.
Usaremos otro elemento Row como contenedor para todas las reseñas. Añádelo justo bajo la fila de la sección hero y usa su cuadro de diálogo Row Layout para dividirlo en tres columnas.
Para que la sección de reseñas parezca distinta a la sección hero, cambia a la pestaña Design Options (opciones de diseño) y cambia su color de fondo a un gris claro.
Podríamos usar elementos de bloque de texto (Text Block) para mostrar las reseñas. Sin embargo, para probar algo distinto, vamos a usar en su lugar elementos de cuadro de mensaje (Message Box). La principal diferencia entre los dos es que un cuadro de mensaje puede mostrar un icono grande junto a su texto. Además, los cuadros de mensaje vienen con estilos y colores más predefinidos.
Añade el primer cuadro de mensaje dentro de la primera columna. En el cuadro de diálogo Message Box Settings (configuración del cuadro de mensaje), establece el estilo Style en 3D y elige el icono que desees mostrar. A continuación, escribe el texto de reseña utilizando el editor de texto como de costumbre.
Para las otras dos reseñas, no tienes que crear los cuadros de mensaje desde cero. En lugar de eso, utilice el botón Copy (copiar) para crear dos copias del primer cuadro de mensaje. Después de cambiar su contenido de texto, puedes simplemente arrastrarlos y soltarlos en la segunda y la tercera columna.
La sección de reseñas ahora debería tener este aspecto:
4. Crear un formulario
Es posible que algunos visitantes aún no estén seguros de si quieren realizar la compra. Para convencerlos, existen algunos distintos enfoques que puedes seguir. Por ejemplo, podrías intentar enviarles el primer capítulo del libro de forma gratuita en forma de correo electrónico. O podrías invitarles a suscribirse a tu newsletters y darles la oportunidad de ganar el libro. Sea cual sea el enfoque que elijas, necesitarás un formulario para obtener la información de contacto del usuario.
WPBakery Page Builder es compatible con la mayoría de los modernos plugins de creación de formularios. Para crear nuestro formulario en este tutorial, usaremos el plugin gratuito WPForms, que tiene más de 2 millones de usuarios activos. Para instalarlo, dirígete al escritorio y navega a Plugins > Añadir nuevo. Allí busca wpforms y pulsa el botón Instalar ahora para iniciar la instalación.
Una vez se haya completado la instalación, pulsa el botón Activar para empezar a usar el plugin.
Para mantener las cosas sencillas, vamos a crear un formulario que acepte solo el nombre del usuario y la dirección de correo electrónico. Así que dirígete a WPForms > Añadir nuevo. En el asistente de creación de formularios, asígnale un nombre y selecciona la plantilla Formulario en blanco.
En la siguiente pantalla, arrastra y suelta un campo Nombre y un campo Correo electrónico en el formulario.
El formulario está ya listo, así que guárdalo y vuelve a la página Todos los formularios para obtener su shortcode único.
Todo lo que tienes que hacer ahora es incrustar el formulario dentro de la página de aterrizaje. Para ello, vuelve al editor front-end de WPBakery Page Builder y añade un tercer elemento Row en la parte inferior de la página. Dentro de él, añade un elemento Text Block.
En el cuadro de diálogo Text Block Settings, primero añade un texto que explique a los visitantes por qué deben rellenar el formulario y, a continuación, escribe el shortcode del formulario. Después de pulsar el botón Save Changes (guardar cambios), deberías poder ver tu nuevo formulario:
Conclusión
En este tutorial, aprendiste a usar varios elementos distintos ofrecidos por WPBakery Page Builder para crear una sencilla página de aterrizaje. También aprendiste a usar shortcodes para interconectar con plugins de terceros.
CodeCanyon rebosa de plugins premium para WPBakery Page Builder. Al usarlos, podrás añadir más rápidamente funcionalidades complejas en tus páginas. El siguiente artículo te señala los addons más interesantes que hemos encontrado para WPBakery:
By
