Me encanta poder exportar e importar un diseño de página Divi. Con solo unos pocos clics, puedo tener todos los elementos de diseño en un archivo json convenientemente empaquetado que se puede almacenar para otro proyecto. Pero, ¿qué sucede si el diseño de su página depende de un código externo personalizado (CSS o Javascript)? Por supuesto, querrá incluir ese código dentro de la exportación del diseño de su página para mantener el estilo y la funcionalidad de los elementos de la página en su lugar.
En este tutorial, voy a mostrar cómo incluir código personalizado (externo) dentro de su diseño de página para que el diseño y la funcionalidad del diseño se mantengan al exportar e importar el diseño en un sitio diferente.
¡Empecemos!
Si ha agregado CSS personalizado (ya sea en el Personalizador de temas o en la Configuración de la página) que se usa para diseñar un diseño de página Divi específico , el CSS se almacena externamente en un archivo diferente. Lo mismo ocurre con cualquier javascript que se haya agregado a su encabezado en las opciones de tema. Dado que este código se almacena externamente, no se exportará automáticamente con el diseño de su página Divi.
Para exportar código personalizado junto con el diseño de su página Divi, podemos usar el módulo de código Divi para almacenar el código dentro del contenido de su página. De esta forma, el código dentro del módulo Código se exportará con el diseño de la página. Esto es útil para almacenar sus diseños personalizados en su propia computadora. De esta manera, cada vez que importe el diseño en otro proyecto, tendrá la funcionalidad personalizada y el estilo de su página en su lugar. También puede usar esta técnica para guardar y exportar secciones, filas o módulos individuales que también usan código personalizado.
Este método realmente solo tiene sentido para páginas individuales o elementos de una página que desea guardar para uso futuro. Esta no sería la mejor manera de guardar diseños para un sitio completo. Tendría más sentido aprovechar las opciones de portabilidad de Divi que le permiten exportar la configuración del personalizador de temas y/o las opciones de temas.
Suscríbete a nuestro canal de Youtube
Cómo exportar un diseño de página Divi que tiene código personalizado usando módulos de código Divi
Supongamos que tiene un diseño de página Divi que usa CSS y Javascript personalizados y desea incluir ese código personalizado en su archivo de exportación (.json). Primero deberá abrir la página que desea exportar e implementar el constructor Divi.
Para este ejemplo, tengo una página que usa el diseño de página de destino de panadería . Agregué algunos CSS y Javascript personalizados para alternar un formulario de contacto al hacer clic en un botón.
El CSS personalizado se ha agregado a la configuración de la página CSS personalizado en la pestaña avanzada.
El Javascript personalizado se ha agregado a la etiqueta del encabezado dentro de las Opciones del tema Divi en la pestaña Integración.
Agregue el CSS personalizado a la página usando un módulo de código
Para exportar el CSS con el diseño de la página, debemos agregarlo a un módulo de código dentro de la página. Para hacer esto, abra la configuración de la página y copie el CSS personalizado en el portapapeles.
Aquí está el CSS personalizado que estoy copiando para este ejemplo:
|
01
02
03
04
05
06
|
#toggle-container { display:none;}.toggle-active { display: block !important;} |
Luego agregue un módulo de Código a su página. Puede agregar el módulo Código en cualquier lugar que desee. Por ejemplo, si desea agregarlo en la parte superior de la página, podría ser más fácil encontrarlo y editarlo más adelante. O bien, puede colocar el módulo de código junto al elemento al que sabe que apunta el CSS. En este caso, el CSS se usa para ocultar y mostrar el módulo de mi formulario de contacto. Entonces, agregaré el módulo de código directamente debajo del módulo Formulario de contacto.
En la configuración del módulo de código, pegue el CSS personalizado externo que copió y luego péguelo en el contenido del módulo de código. Debido a que está agregando el CSS al contenido de la página, deberá envolver el CSS en una etiqueta de estilo. Así es como se verá el código css en el módulo de código:
|
01
02
03
04
05
06
07
08
|
<style>#toggle-container { display:none;}.toggle-active { display: block !important;}</style> |
Una vez hecho esto, es una buena idea agregar una etiqueta de administrador al módulo de código para referencia más adelante. Por ejemplo, podría darle el nombre de «código CSS» para que sepa qué es cuando mira el diseño en la vista de estructura alámbrica.
Después de eso, guarde la configuración del módulo de código y listo.
Agregue el Javascript a la página usando un módulo de código
A continuación, querrá hacer lo mismo para el Javascript personalizado que es el encabezado en Opciones de tema. Copie el código en su portapapeles y luego regrese a su página con Divi Builder activo. Luego agregue otro módulo de código en cualquier lugar de la página. Puse el mío directamente debajo del módulo de formulario de contacto porque sé que este javascript se aplica solo a ese elemento, pero puede agregarlo en cualquier lugar.
Una vez que agregue el módulo de código, pegue el Javascript que copió en el cuadro de contenido. Asegúrese de que el código esté envuelto dentro de una etiqueta de secuencia de comandos, ya que es Javascript.
|
01
02
03
04
05
06
07
|
<script>jQuery(document).ready(function(){ jQuery(".toggle-trigger").click(function(){ jQuery("#toggle-container").toggleClass("toggle-active"); });});</script> |
Asigne al módulo de código una etiqueta de administrador (como «Código JS») para una fácil referencia.
Dado que estos dos módulos de código no tienen ningún código que agregue contenido real a la página, los módulos no romperán el diseño de la página, por lo que no debe preocuparse por eso.
Cómo exportar el diseño de página
Ahora está listo para exportar el diseño de página. Para exportar un diseño de página con Divi Builder, abra el menú de configuración y haga clic en el icono de portabilidad. En la ventana emergente de portabilidad, ingrese un nombre («Diseño de página personalizado») y haga clic en el botón Exportar diseño de Divi Builder.
Esto exportará el archivo json a su computadora.
Ahora su archivo json está listo para otro proyecto con el código personalizado completamente funcional.
Cómo importar el diseño de página
Para cargar el archivo json en una nueva página, abra la página en la que desea importar el diseño. Asegúrate de que Divi Builder esté activo. Luego, todo lo que necesita hacer es arrastrar y soltar el archivo json en la página. El modal de portabilidad aparece automáticamente, lo que le permite elegir la opción de reemplazar el contenido existente o crear una copia de seguridad de antemano. Como no necesita reemplazar ningún contenido, todo lo que tiene que hacer es hacer clic en el botón de importación y se cargará instantáneamente en la página.
Vuelva a colocar el código donde pertenece
Una vez que haya importado con éxito el diseño de la página a su página, es posible que deba volver a colocar el CSS y JS en el lugar al que pertenece. Si desea que el CSS aplique estilo solo a la página actual, puede agregar el CSS a la configuración de la página CSS personalizado donde estaba antes de que comenzáramos. Y, si desea que el CSS esté disponible en todas las páginas de su sitio, puede agregar el CSS a CSS adicional en la configuración del personalizador de temas.
También es posible que desee volver a agregar su código Javascript al encabezado de su tema en Opciones de tema > Integración donde estaba originalmente. O puede considerar dejar el código dentro del módulo de código para que el script solo se aplique a esa página.
Pensamientos finales
Al almacenar diseños de página para su uso posterior, es importante almacenar también cualquier código personalizado necesario para la página. El truco es usar el módulo Divi Code para almacenar el código dentro de la propia página. Luego, el código permanecerá en el archivo json exportado. También ayuda etiquetar esos módulos de código para que sea más fácil encontrarlos cada vez que importe el diseño más adelante.
Además, me doy cuenta de que hay otras formas en las que puede encontrar un mejor trabajo para usted. Por ejemplo, puede decidir guardar su código como archivos separados. Con un editor de código, puede pegar el código personalizado y guardar un archivo .css y un archivo .js. Luego puede almacenarlos en una carpeta junto con su (s) archivo (s) json.
De todos modos, espero que esto sea útil y espero escuchar sus pensamientos en los comentarios a continuación.
¡Salud!