Cómo crear una Landing Page con Divi

Cómo crear una Landing Page con Divi

Cómo crear una Landing Page con Divi en seis pasos usando el kit Wireframe

En este artículo vamos a ver cómo podemos crear una Landing Page con Divi, la idea de crear Landing Pages es «forzar» a nuestros visitantes a que tomen una determinada acción, ya sea comprar alguno de nuestros productos, suscribirse a nuestra nerwsletter, o cualquier otra acción importante para nosotros.

Hace unas semanas hemos hablado acerca de cómo crear una Landing Page en WordPress con LeadPages, crear una Landing Page en WordPress con el plugin Site Origin Page Builder y por últimom, cómo crear una Landing Page en WordPress con el plugin Landing Pages. Han sido un total de tres artículos en los que, como has podido ver, utilizábamos diferentes métodos para crearlas. En esta ocasión veremos cómo podemos crearlas utilizando el tema Divi de Elegant Themes.

A continuación vamos a ver las instrucciones paso a paso para ver cómo pasar de la versión inicial del Wireframe a la versión final a la que queremos llegar. La descarga anterior incluye todos los archivos necesarios para que puedas seguir y hacer las mismas instrucciones exactas al diseño de la Landing Page que deseamos.

Paso 0: Importar el archivo All.json y carga el diseño del Wireframe

Para seguir las instrucciones que indicamos a continuación primero tendremos que importar el archivo All.json accediendo a Divi, Librería de DiviImportar & Exportar. Puedes Puedes descargarte el kit del Wireframe desde aquí.

Aparecerá una ventanita y vamos a la pestaña de importación, haz clic en el botón de selección de archivo negro y seleccione el archivo All.json de la carpeta que acabamos de descargar y descomprimir.
Una vez que hayamos importado los diseños, tendremos que crear una nueva página, para ello vamos a Páginas, Añadir nueva. Recomendaría llamar a esta página: Tutorial de página de destino. A continuación, haz clic en el botón Usar el Constructor Divi, vete a Cargar desde la biblioteca, Agregar a la biblioteca y carga el diseño Landing Page (Wireframe).json.

Una vez guardado, si ves la vista previa de esta página, se debe ver algo parecido a esto:

crear una Landing Page con Divi vista inicial

 

Paso 1: Editar la sección 1

Section-1-Backend

Configuración de la sección:

Abre la configuración de la sección azul y añade la imagen 01.jpg de la carpeta tutorial-images como fondo de la sección.

section 1 settings

Configuración del módulo de imagen:

Agrega la imagen 02.png de la carpeta tutorial-images al módulo de imagen en la pestaña General Settings.

image module

Configuración del módulo de texto:

En la ficha Configuración avanzada de diseño, cambia el color de texto de todos los módulos de texto a #ffffff.
En el tercer módulo de texto (abajo), reemplaza la imagen del logo de la App Store con el archivo de imagen 03.png de la carpeta tutorial-images.
La forma más sencilla de hacerlo es simplemente reemplazar el enlace de imagen src en la pestaña de texto del área de contenido. Esto conservará los estilos en línea ya aplicados a la imagen.

text module

Si eliminas accidentalmente los estilos en línea, puedes copiarlos del siguiente fragmento:

<p><img class="size-full wp-image-25761" style="float: left; margin-right: 36px;" src="IMAGE LINK TO 03.JPG" alt="02" width="178" height="60"></p><p style="margin-top: 2%;">WATCH A DEMO</p>

Cuando guardes todas tus configuraciones, incluye la página en sí y previsualiza los resultados. Ahora debe tener una sección superior que se parece a esto:

final top hero section

Paso 2: Editar la sección 2

Section 2 Backend

Configuración del módulo divisor:

En los módulos de divisor de escritorio y móvil, añade este código de color en la ficha Configuración general: rgba(48,48,48,0,3)

Divider Module color

Configuración del módulo de texto:

En la pestaña Opciones avanzadas de cada módulo de texto cambia el color de texto a #303030.

Text Module color

Configuración del módulo de imagen:

Dentro del módulo de imagen cambia la imagen a 04.png de la carpeta tutorial-images y cambia su alineación al centro.

Image Module

Cuando todos estos ajustes se hayan configurado y guardado, guárdalo de nuevo y visualízalo, debe tener un aspecto como este.

Final Section 2 Design

Paso 3: Editar la sección 3

Section 3 Backend

Continuamos con la configuración de nuestros archivos para lograr crear una landing page con Divi.

Configuración del módulo de imagen:

Dentro del módulo de imagen reemplaza la imagen con el archivo llamado 05.png de la carpeta tutorial-images.

image module 3

Configuración del módulo divisor:

Dentro de cada módulo divisor, cambia el código de color a este otro código: rgba(48,48,48,0,3)

divider module

Todos los ajustes del módulo de texto:

Dentro de cada módulo de texto en la pestaña Configuración avanzada de diseño cambia el color de texto a #303030.

text module color change

Configuración de los módulos de texto segundo y tercero:

Dentro de los módulos de texto segundo y tercero (los dos últimos), reemplaza la imagen del icono de verificación situada dentro del área de contenido con el archivo de imagen 06.png de la carpeta imágenes tutociales.
Asegúrate de usar la misma técnica de reemplazar el vínculo src que utilizamos anteriormente para no perder los estilos en línea.

text module image link

Si eliminas accidentalmente los estilos en línea, puedes copiarlos del fragmento siguiente:

<p><img class=» size-full wp-image-25874″ style=»float: left; margin-top: 10px; margin-right: 33px; margin-bottom: 20px;» src=»http://www.divitests.dev/wp-content/uploads/2016/08/06-3.png» alt=»03″ width=»70″ height=»70″></p><div><p style=»padding-bottom: 0px;»>Feature two</p><p style=»margin-top: 16px; font-size: 18px;»>Integer elementum massa at nulla placera. Suspendisse in libero risus, in massa.</p></div>

Cuando se hayan configurado y guardado todos los ajustes, guarda la página y previsualizala. La tercera sección debería verse así.

Final Section 3 Design

Ya hemos llegado a la mitad del artículo de cómo crear una Landing Page con Divi.

Paso 4: Editar la sección 4

Section 4 Backend

Configuración del módulo de imagen:

Dentro del módulo de imagen, agrega el archivo de imagen denominado 07.png en la carpeta tutorial-images.

image module seccion 4

Configuración del módulo divisor:

Dentro de cada módulo divisor agrega este código de color: rgba(48,48,48,0.3)

divider module seccion 4

Configuración del módulo de texto:

Dentro de cada módulo de texto en la pestaña Configuración avanzada de diseño cambia el color de texto a #303030.

text module seccion 4

Una vez que todos los ajustes se han configurado y guardado, guarda la página y previsualiza el resultado en el navegador. Ahora debe verse como la imagen de abajo.

Final Section 4 Design

Ya falta poco para terminar este artículo en el que estamos viendo cómo crear una Landing Page con Divi.

Paso 5: Editar la sección 5

Section 5 Backend

Configuración de la sección:

En la configuración de sección en la pestaña Configuración general, cambia el color de fondo a: #f7f7f7.

section settings 5

Configuración del módulo divisor:

Dentro de cada módulo divisor agrega este código de color: rgba(48,48,48,0.3)

divider module

Configuración del módulo de texto:

Dentro del módulo de texto en la pestaña Configuración avanzada de diseño cambie el color de texto a #303030.

Text Module color

Configuración del módulo deslizante (slide):

Dentro de la pestaña Ajustes avanzados de diseño del módulo deslizante (slide), cambia los colores de texto a #303030.
Dentro de la configuración de diapositivas del módulo deslizante, en la pestaña Configuración avanzada de diseño, cambia todos los colores de texto a #303030 y cambia el Color personalizado de flechas así como el Color personalizado de color de punto a #303030.
En la sección de contenido de la diapositiva, reemplaza la imagen del usuario por el archivo denominado 08.png de la carpeta tutorial-images. Reemplaza el enlace sólo para mantener los ajustes intactos.

slide content

Si eliminaste accidentalmente el otro texto y el código en línea, puedes obtenerlo todo desde aquí.

<p><img class="aligncenter size-full wp-image-27020" style="margin-top: 26px; margin-bottom: 6px;"src="http://www.divitests.dev/wp-content/uploads/2016/08/08-2.png" alt="11" width="100"height="100"></p><p style="text-align: center;"><strong>Aubert Y.</strong><br> <span style="font-size: 16px;">New York, NY</span></p>

Cuando hayas configurado todas estas configuraciones y las hayas guardado la página, previsualiza el resultado en el navegador. Esta sección ahora debe verse como la imagen de abajo.

Final Section 5 Design

Y por fin llegamos al último paso para crear una Landing Page con Divi.

Paso 6: Editar la sección 6

Section 6 Backend

Configuración del módulo divisor:

Dentro de cada módulo divisor agrega este código de color: rgba(48,48,48,0.3)

divider module

Configuración del módulo de texto:

Dentro del módulo de texto cambia el color del texto a #303030.

text module color change

Configuración del módulo de botones:

Dentro del módulo del botón cambia el fondo del botón y los colores del borde a #41bb99.

button module

Cuando todas las configuraciones estén realizadas y guardadas, guarda la página y visualice la sección en el navegador. Con esto ya hemos llegado al final de este artículo y hemos aprendido a crear una Landing Page con Divi.

Final Section 6 Design

El resultado final

Llegados a este punto, ahora debes tener un diseño final de nuestro kit Wireframe inicial, convertido a algo que puedes utilizar en un sitio web real. Por supuesto, en este caso seguimos utilizando contenido de ejemplo, pero cuando hagas el mismo proceso por ti mismo, usarás tu propio contenido original o contenido que te haya dado tu cliente.

Resultado final

Recuerda que puedes descargarte Divi (tema original con licencia GPL) de forma gratuita desde el apartado Recursos de esta web.

¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

2 Comentarios

  1. Todo está muy bien explicado PERO???, falta algo que considero fundamental: explicarle al lector, qué hacer con esta página recién creada?
    Cómo gestionarla a nivel de Wordpress? Es decir, indicarle al lector, dónde ubicar (y cómo) los ficheros correspondientes a esa página.

    Cómo implementar la ruta de acceso a esa página? Porque se supone que la misma, NO hará parte de la web, sino que será independiente, en consecuencia, debería ocupar un lugar físico determinado dentro de la estructura de directorios del dominio, del cual, obviamente, dependerá la url a la que se asociará, cuando se reciba una visita a la misma.

    Un saludo!!

    1. Hola Jose, ante todo te agradezco tu comentario y que leas mis artículos.
      Respondiendo a lo que propones, te diré que tienes razón, habría que explicarle al usuario qué hacer con esa Landing Page y cómo modificarla según sus necesidades, pero yo creo que el título ya dice bastante por sí mismo: Cómo crear una Landing Page con Divi en seis pasos usando el kit Wireframe.
      Con esto quiero decir que es una forma sencilla de crear una Landing Page para una persona que ya utiliza Divi, por lo que no he creído necesario explicar qué es, para qué sirve y cómo utilizar una Landing Page. He supuesto que quien leyera el artículo ya sabría que es una Landing Page y ya habría trabajado con ellas (culpa mía quizás por dar por sentado esto).
      Respecto a ese lugar que debe tener dentro de la estructura del dominio, al estar integrado dentro de la instalación de WordPress, formará parte del dominio principal, a no ser que se quiera hacer un subdomnio e instalar en él otro WordPress para crear Landing Pages con una finalidad marketiniana. Así mismo, también se pueden seguir sus estadísticas con Google Analytics por ejemplo o con las estadísticas proporcionadas por servicios de email marketing como Mailchimp o Mailrelay.
      El objetivo del artículo no era hacer algo tan riguroso y profundo como lo que me propones, tan sólo quería dar una alternativa prediseñada a las personas que utilizan WordPress y Divi.
      Espero haberte explicado mi punto de vista, pero de todas formas, estaré encantado de que me propongas cualquier sugerencia o tema y yo con gusto lo incluiré en un artículo del blog.
      Muchas gracias de nuevo por leer mi blog y recibe un saludo de mi parte.

      P.D.
      En este artículo, que fue el primero de la serie dedicada a la creación de Landing Pages, explico qué es y qué propósito tiene crearlas y utilizarlas.

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *