El editor de WordPress es excelente para muchas cosas, pero crear páginas de destino no es una de esas cosas. Entonces, si desea crear una página de destino hermosa y de alta conversión en WordPress, necesitará otra herramienta. Es por eso que estoy a punto de mostrarte cómo crear una página de lanzamiento de producto con Divi Builder en esta publicación.
Aquí hay una guía paso a paso para pasar del lienzo en blanco a la página de destino terminada, completa con más de 25 capturas de pantalla. Todo lo que necesitará es el complemento Divi Builder ( o el tema Divi ), así como su elección de tema de WordPress.
¿Listo para crear una página de lanzamiento de producto con Divi Builder? ¡Vamos!
Esto es lo que construirá en esta guía
Antes de comenzar a crear nuestra página de destino de ejemplo , permítame mostrarle dónde terminará cuando termine esta guía:
Siempre puedes ser más creativo con diferentes colores, estilos o más elementos. Pero eso es solo una mirada rápida y sucia de cómo puede crear una página de lanzamiento de producto con Divi Builder en menos de una hora.
¿Por qué debería crear una página de lanzamiento de producto con Divi Builder?
Ya hemos cubierto cómo puede crear páginas de destino con Elementor , así como con el creador de páginas SiteOrigin .
Entonces, ¿por qué estamos lanzando Divi Builder a la mezcla? Porque, al igual que esas otras dos soluciones, es un generador visual de páginas de arrastrar y soltar enormemente popular . Eso significa que puede crear páginas de inicio y páginas de inicio complicadas sin tener que mirar el código.
Más allá de eso, Divi Builder está desarrollado por una empresa llamada Elegant Themes, que ha creado una comunidad masiva de útiles usuarios de Divi. Eso significa que puede encontrar toneladas de extensiones ordenadas y ayuda de terceros si alguna vez se topa con una pared.
Además tiene estas otras ventajas:
- Debido a que es un complemento ( además, también hay una versión de tema ), funciona con todos los temas de WordPress, incluidos todos los temas de Themeisle WordPress .
- Incluye una variedad de «módulos» que le permiten agregar bloques de contenido útiles como listas de funciones, formularios y más
- Todos los diseños que crea Divi Builder son responsivos. Es decir, quedan bien en móviles y tablets.
Básicamente, siempre que conozca los conceptos básicos de diseño detrás de una página de destino , tiene el poder de crear una página de lanzamiento de producto con Divi Builder.
Ok, ¡vamos a sumergirnos y construir algo!
Paso 0: Instala Divi Builder y elige un tema
Paso 1: Cree una nueva página con una plantilla de ancho completo e inicie Divi Builder
Las plantillas de página son las que determinan el diseño básico de su página. Esencialmente, definen el «lienzo» en el que Divi Builder puede trabajar.
Debido a que desea dar rienda suelta a Divi Builder para diseñar la página sin que la barra lateral de su tema se interponga en el camino, es importante elegir una plantilla de ancho completo .
Si su tema no ofrece una plantilla de ancho completo, es posible que desee considerar elegir un tema que sea un poco más moderno.
La plantilla de ancho completo todavía usa el área de encabezado normal de WordPress, así que no se preocupe por perder una estructura de navegación cohesiva .
Asegúrese de hacer clic en el botón Guardar borrador después de elegir su plantilla. Esto es importante para que Divi Builder use la plantilla adecuada cuando la cargamos en un segundo.
Para iniciar Divi Builder, haga clic en el botón grande Use the Divi Builder :
Divi Builder te permite crear páginas de dos maneras diferentes:
- Generador de backend : crea sus páginas con bloques abstractos que representan piezas de contenido
- Constructor visual : construye sus páginas en la misma vista que sus visitantes verán sus páginas
Si bien puede usar cualquiera de los dos para crear una página de lanzamiento de productos con Divi Builder, creo que el generador visual es más intuitivo para la mayoría de los usuarios, así que eso es lo que usaré para esta guía.
Para iniciar el generador visual, haga clic en la opción Usar generador visual:
Luego, te encontrarás en la interfaz visual:
Divi usa colores para dividir los diferentes tipos de contenido en tu página. Estos colores ayudarán cuando construyamos la página, así que aquí hay una guía rápida de lo que significan los diferentes colores en Divi Builder:
- Azul : designa secciones, el titular de contenido más grande.
- Verde : designa filas. Las filas van dentro de las secciones. Puede tener varias filas en una sección.
- Negro : designa módulos. Los módulos son piezas de contenido individuales que van dentro de las filas. Puede tener varios módulos dentro de cada fila.
En resumen, desde el elemento más grande hasta el más pequeño, va:
Sections → Rows → Modules
Paso 2: crea la estructura básica de tu página de destino
Ahora que está en Divi Builder, es hora de elegir la estructura básica real para su página de destino. Al igual que con la escritura, es útil tener en mente un «esbozo» aproximado de su página antes de comenzar.
Como ejemplo, aquí hay un boceto que hemos usado para nuestras otras dos guías:
Muestra una página básica de lanzamiento de productos con cuatro secciones diferentes:
- Sección de titulares principales
- Una sección de «lista de características»
- Acerca de la sección
- Sección de suscripción de correo electrónico
Seguiré esa estructura para esta guía, pero siempre puedes hacer ajustes si prefieres otra cosa.
Debido a que el ejemplo incluye cuatro áreas de contenido diferentes, usaremos cuatro de esas secciones azules en Divi Builder.
Un recorrido rápido por la interfaz de Divi Builder
Antes de comenzar a profundizar en el tutorial real, déjame darte un resumen rápido de cómo funciona la interfaz de Divi Builder.
Para agregar una nueva sección, fila o módulo, simplemente haga clic en el botón circular más para el elemento asociado ( ¡recuerde la codificación de colores de la que hablé antes! ):
Además, recuerda que cada elemento cabe “dentro” del otro. Por esa razón, solo verá el botón negro Insertar módulo si ya colocó una fila dentro de su sección. Es decir, no puede agregar un módulo directamente a una sección.
Cuando haga clic en el botón Insertar módulo , podrá elegir un tipo de módulo específico de la ventana emergente:
Luego, una vez que inserte un módulo, puede configurar ese módulo usando otra ventana emergente:
¿Te das cuenta de que hay tres pestañas en la parte superior? Eso es importante porque le permite personalizar el estilo, el espaciado y más para cada módulo. Puede usar esta configuración para afinar su diseño.
Finalmente, siempre puede acceder a los paneles de configuración para secciones, filas y módulos haciendo clic en el icono de engranaje para cada elemento:
Esto es importante porque a veces necesitará ajustar manualmente el espaciado de una sección o fila para que el diseño luzca perfecto.
Ok, eso debería darle una comprensión básica de la interfaz. ¡Ahora construyamos una página de lanzamiento de producto con Divi Builder!
Construyendo la sección de titulares
De forma predeterminada, ya comienza con una sección en su lugar. Entonces, para esta primera sección, podemos pasar directamente a agregar una Fila (el ícono verde). Elijamos el diseño de dos columnas iguales:
Ahora, agregue un módulo Imagen a la columna de la derecha e inserte una imagen relevante:
Luego, en la columna de la izquierda, agregue un módulo de texto . Use el menú desplegable Título 1 para convertirlo en un encabezado y centrar el texto:
Luego, vaya a Diseño → Espaciado para cambiar la posición del encabezado para que se vea un poco mejor:
Ahora, agregue otro módulo de texto debajo del encabezado para que actúe como subtítulo. Una vez más, puedes jugar con el tamaño y el espaciado del texto para que se vea bien:
Completemos las cosas agregando un módulo Botón debajo de nuestro subtítulo. Puede jugar con la alineación y el estilo del botón en la pestaña Diseño :
¡Y allá vamos! Tenemos una sección de titulares terminada.
Creación de la sección «Lista de funciones»
A continuación, construyamos la sección de la lista de funciones. Para hacer eso, agregue una Sección completamente nueva haciendo clic en el ícono azul «más».
Luego, agregue una nueva fila de 3 columnas dentro de la sección:
Una manera fácil de agregar una lista de características es usar el módulo de Blurb . Para configurar el módulo de Blurb para que se vea como el siguiente ejemplo, no use el cuadro Título . En su lugar, use el área de Contenido para agregar su título como un texto, su subtexto como texto normal y céntrelo todo: h3
Luego, en la misma pestaña, desplácese hacia abajo hasta Imagen e icono . Marque la casilla Usar icono y elija su icono. También puede optar por usar su propia imagen, si prefiere ese enfoque:
Repita el proceso para el resto de sus características y debería tener algo parecido a esto:
¡Y eso concluye nuestra sección de lista de funciones!
Creación de la sección «Acerca de»
Para construir la sección «acerca de», podemos usar prácticamente el mismo enfoque que usamos para la sección del encabezado.
Solo que esta vez, usemos un diseño de dos columnas algo desplazado:
En la columna de la izquierda, puede agregar un módulo Imagen con una foto personal o algo más que sea relevante:
Es posible que desee jugar con el posicionamiento para que se vea perfecto.
Luego, en la columna de la derecha, puede agregar dos módulos de texto para su encabezado y subtexto, como antes:
¡Y eso es! Estamos en la recta final.
Creación de la sección de suscripción de correo electrónico
¡Adivina qué! Divi Builder incluye un módulo de suscripción de correo electrónico preconstruido. Eso hace que esta sección sea bastante simple. Módulos como este son una de las razones por las que es tan fácil crear una página de lanzamiento de productos con Divi Builder.
Para usarlo, cree una nueva sección regular con un diseño de una columna:
Luego, agregue el módulo Email Optin . Puede usar los cuadros Título y Contenido para agregar texto al lado izquierdo de su opción de correo electrónico. Y también puedes cambiar el color de fondo y conectarte a tu servicio de email marketing desde esta misma interfaz:
¡Eso es todo al respecto!
Poniendolo todo junto
¡Felicitaciones! Acabas de aprender a crear una página de lanzamiento de productos con Divi Builder.
La única otra cosa que hice para que mi página se vea de la manera que lo hace es agregar un fragmento corto de CSS para reducir el espacio entre mis diferentes secciones de Divi Builder. Esto es opcional, pero creo que se ve mejor con menos espacio entre las secciones.
Si desea hacer lo mismo, puede agregar este pequeño fragmento a la pestaña CSS adicional del Personalizador de WordPress:
:not(.et_pb_fullwidth_section).et_pb_section {
padding-top: 0px !important;
padding-bottom: 0px !important;
}Aquí hay otro vistazo a la página de lanzamiento del producto final:
Si desea convertir la página de lanzamiento de su producto en la página de inicio de su sitio, todo lo que necesita hacer ahora es configurar una página de inicio estática .
Recuerde, para crear una página de lanzamiento de producto con Divi Builder que imite el ejemplo, todo lo que necesita es:
- El complemento Divi Builder , que forma parte de la membresía de Elegant Themes
- Nuestro tema Hestia gratuito ( solo para seguir los ejemplos; puede usar cualquier tema que desee para su sitio )
¡Ahora sal y construye tu página!
