¿Qué es una Landing Page?

Una landing page, o página de aterrizaje, en Divi es una página diseñada específicamente para captar la atención de los visitantes y guiarlos hacia una acción específica, como realizar una compra o suscribirse a una lista de correo. Estas páginas suelen ser el punto de entrada a una campaña de marketing digital y están optimizadas para convertir visitantes en clientes o leads.

Pasos para Importar una Landing Page:

1. Creación o Selección de una Página: Crea una nueva página en tu sitio de WordPress donde desees importar la landing page. Si ya tienes una página creada, simplemente accede a ella.

2. Activación del Constructor Visual de Divi: Una vez en la página, activa el constructor visual de Divi.

3. Importación del Archivo .JSON: Ve a la parte inferior de la página, en el menú contextual de Divi, y haz clic en el símbolo de las «dos flechitas». En la pantalla que aparece, selecciona la pestaña «importar», elige el archivo .JSON que has descargado y deseas importar, y haz clic en el botón azul de «importar archivo de diseño».

4. Espera el Proceso de Importación: El tiempo que tarda este proceso depende del tamaño del archivo .JSON y la cantidad de imágenes que contiene. La capacidad de tu servidor para procesar estos archivos también influye en este proceso.

Errores Comunes y Soluciones:

Error al Importar: Asegúrate de que el archivo .JSON no esté corrupto y que sea compatible con Divi.
El Diseño No Se Muestra Correctamente: Verifica que estás utilizando la versión más reciente de Divi.
Larga Espera Durante la Importación: Esto puede deberse a limitaciones del servidor. Considera aumentar los recursos de tu servidor.

Existen varias maneras en las que puedes importar nuestros Diseños. La importación de diseños a través de los archivos .JSON es una de las más comunes y fáciles que encontrarás acá, y en este documento te explicaremos como hacerlo. Si tienes errores al importar te recomendamos ver la última parte de este artículo.

Lo primero es entender cuantos tipos de archivos .JSON existen para Divi.

Tipos de Archivo JSON

1. – Archivos JSON de diseños exportados directamente desde páginas
2. – Archivos JSON con ajustes de las opciones de Divi
3. – Archivos JSON de diseños exportados desde el Theme Builder o Generador de Temas
4. – Archivos JSON de diseños exportados desde la biblioteca
5. – Archivos JSON de opciones del personalizador de temas de Divi

 

Esto es importante, porque el sistema de portabilidad de Divi trabaja de esta manera: Cada archivo Json se deberá importar directamente en el contexto del que fue exportado.

Dicho de otra manera, si un diseño fue exportado directamente desde una página, el archivo JSON que genera esa exportación debe importarse directamente en una página. De la misma manera que pasa con los archivos exportados desde la biblioteca, Opciones del tema o Theme Builder.

Nuestros archivos JSON estarán identificados correctamente según el contexto desde el cual fueron exportados:

De esta manera, podrás saber a qué contexto podrás importar los archivos.

Importar JSON a Páginas

Para importar un layout de página, solo tienes que crear la página en cuestión, y abrir el Divi Builder. Una vez lo hagas, abrirás la opción de importar archivo en el menú contextual inferior:

En la siguiente pantalla, harás clic en la pestaña de «importar» escogerás el archivo JSON de página que quieras importar:

Y a continuación harás clic a importar archivo de diseño en el botón Azul inferior.

El proceso de importación tardará en función del tamaño del archivo JSON y la cantidad de imágenes que importará el mismo. También dependerá de la capacidad de tu servidor de procesar estos archivos. Debes tener un servidor con la suficiente capacidad para procesar estos archivos, de otra manera la importación no se llevará a cabo.

Una vez que termine el proceso de importación, verás el diseño final ya listo y completo en tu página.

Importar JSON a las Opciones de Tema Divi

Este archivo funciona principalmente para importar los ajustes predefinidos al tema Divi. Muchos de nuestros diseños trae estos ajustes, pues los consideramos importantes para que tengas un sitio completamente funcional y con nuestros ajustes recomendados.

Para importar este archivo debes ir a las opciones de tema Divi y seleccionar el ícono de las flechitas en el menú principal del mismo:

A continuación debes hacer el mismo proceso de importación anterior, seleccionar la pestaña importar, seleccionar el archivo marcado como «Opciones del tema Divi» y dar clic en importar archivo.

Una vez que se haga el proceso de importación, los ajustes del tema Divi te quedará como los que usamos en cada uno de los demos de nuestros diseños.

Importar JSON desde el Theme Builder o Generador de Temas

Estos archivos, al igual que los anteriores, estarán correctamente identificados, y los deberás importar en el contexto del generador de temas de Divi.

Para importar estos archivos, debes ir a Divi > Generador de temas > Importar.

Acá das clic en el botón importar, y realizas el proceso de importación de cada uno de los archivos del Theme Builder que tengas:

Importante: Acá te aparecerán varias opciones, como anular la plantilla del sitio predeterminada o permitir importación para anular asignaciones existentes. Esto significa que si dejas seleccionadas estás opciones y tienes una plantilla asignada a este elemento que estás intentando importar, el mismo, sobreescribirá esta plantilla y la eliminará.

Por ejemplo: Si tú ya has diseñado un Header personalizado con el Theme Builder, e importas un diseño nuevo que está configurado para que se le asigne a tu «Header» el que tenías diseñado, se eliminará, y se sobreescribirá por este nuevo.

Es recomendable que estás opciones las dejes activas, pues de esa manera te quedarán los diseños asignados a lo que corresponde y sin errores.

Una vez que importe un elemento, puedes repetir el proceso para el resto de plantillas que hayas descargado de nuestro portal, que correspondan al contexto del Theme Builder.

JSON de diseños exportados desde la biblioteca (ocasional)

Estos archivos fueron exportados directamente desde la biblioteca. Mencionamos que es un archivo ocasional porque lo encontrarás solo en algunos de nuestros diseños descargables. Para importarlos lo único que debes hacer es ir a Divi > Biblioteca de diseño > Importar y allí importar el archivo completo que encontrarás en al descargar los templates de nuestro sitio (en caso de que los hubiese)

 

JSON con Opciones del personalizador de temas (ocasional)

Este JSON es poco común y lo encontrarás en algunos diseños. Sobre todo, en templates o sitios donde usemos los ajustes de manera global para todo el sitio. Mencionamos que es un archivo ocasional porque lo encontrarás solo en algunos de nuestros diseños descargables.

Es importante que sepas que si importas los layouts de manera individual, pero no ves los estilos como en la demo, es porque necesite este archivo de opciones de personalizador de temas de Divi para importar todos estos ajustes de manera global.

También es crucial que sepas que al importar este archivo, se sobreescribirán todos los ajustes que hayas hecho anteriormente en el mismo, por lo que debes estar seguro de realizar este paso.

Para importar este archivo debes ir a Divi > Personalizador de temas > importar

 

Y al darle en el botón, darle clic en importar, y luego seccionar el archivo que has descargado desde nuestro sitio.

¡Y listo! Con ello tendrás los justes generales que le hayamos dado al tema de manera global en tu sitio.

Layouts en tiendas online (Importante leer)

Como sabes, las tiendas online son ecosistemas sumamente complejos de manejar. Es por ello que te recomendamos que para estos tipos de sitio, cargues el sitio completo en tu instalación de WordPress y a partir de allí comiences a trabajar.

Sin embargo, sabemos que algunas personas querrán usar solo el diseño que hay en cada .JSON que han descargado en su compra, y te tenemos buenas noticias, los puedes importar sin problema 😎

Acá solo es importante tener varias consideraciones:

• 1. Los diseños hechos en nuestras tiendas online usan plugins para generar funcionalidad y estilos que no se importarán si solo importas un layout .JSON
• 2. Debes tener un sitio creado, con Woocommerce instalado y productos ya creados y categorizados para que, al momento de importar los layout .JSON, el diseño se vea como en la demo.
• 3. Finalmente, debes tener instalado los plugins que necesita el diseño para verse como en la demo. Puedes ver la lista de plugins que lleva cada sitio en la ficha de producto de cada diseño, al final de la descripción, por ejemplo:

 

 

En nuestros diseños, tenemos este documento donde podrás ver la documentación de cada plugin usado según la plantilla que has comprado. Consúltalo para obtener los recursos necesarios para editar o manejar los plugins usados en nuestros diseños.

Tomando en cuenta estas consideraciones, podrás usar solo los layouts .JSON para darle diseño y aspecto a tus tiendas online, para que queden con un diseño tan genial como el de la demo de nuestros productos.

Por otro lado, en las tiendas online seguramente usamos CSS personalizado que encontrarás en los layouts .JSON del theme builder, de páginas como mi cuenta, carrito o finalizar compra.

Para cambiar estos estilos deberás saber algo de código CSS, y revisar cada layout en opciones > body template configuration > avanzado > CSS personalizado, aquí es donde encontrarás todo el css que toca las clases de los botones y módulos modificamos con CSS personalizado, te dejamos una imagen de guía:

Errores o problemas al importar.

Si sigues las instrucciones anteriores, es difícil que llegues a tener algún error, pero en caso de que así sea, lo más común que puede sucedes, es que estés intentando importar un archivo en un contexto que no corresponde.

Si te aparee este error, es porque estás intentando importar un archivo JSON en un contexto que no es permitido. Un ejemplo de ello sería que estés intentando importar una página a la biblioteca, o un archivo del Theme Builder a una página.

Para corregirlo solo debes verificar en el tipo de archivo a qué contexto pertenece, si es un diseño de página, opciones de Divi o Theme Builder, e ir a importarlo en el contexto que corresponde, siguiendo los pasos anteriores.

Por otro lado, si el error te aparece al momento de querer importar el layout directamente en la página, como este:

Es porque seguramente no tienes los recursos suficientes asignados a tu sitio web desde tu hosting para que funcione correctamente. Para comprobarlo puedes ir a Divi > support center y verificar los recursos que tienes asignados a tu sitio web desde el hosting:

Para corregir esto, debes asignar los recursos faltantes a tu sitio web desde tu hosting. Puedes conocer más detalle sobre esto en esta guía donde hablamos sobre los recursos que necesita Divi para funcionar correctamente (español).