Cómo exportar una apariencia de página que tiene un código personalizado

Me gusta poder exportar e importar una apariencia de la página de división. En solo unos pocos clics, pueden tener todos los elementos de diseño en un archivo de paquete conveniente, que se puede almacenar para otro proyecto. ¿Pero si el aspecto de su página depende del código externo personalizado (CSS o JavaScript)? Por supuesto, querrá incluir ese código para exportar la apariencia de la página para mantener el estilo y la funcionalidad de los elementos de la página en su lugar. En este tutorial, mostraré cómo incluir un código personalizado (externo) en la apariencia de su página, para que el diseño y la funcionalidad del aspecto permanezcan al exportar e importar la apariencia en otro sitio.
¡Vamos a empezar! La idea básica explicada si ha agregado CSS personalizado (ya sea en la configuración de la página del tema de Customizer) que se utiliza para estilizar una página de página específica, CSS se almacena externamente en un archivo diferente. Lo mismo es cierto para cualquier JavaScript que podría haberse agregado a su encabezado bajo las opciones de base. Debido a que este código se almacena externamente, no se exportará automáticamente con la apariencia de la página de la Divicidad. Para exportar un código personalizado junto con el aspecto de la página de la Divica, podemos usar el módulo de código de código para almacenar el código en el contenido de su página de esta manera, el código en el módulo de código se exportará con la apariencia de la página . Esto es útil para almacenar aspectos personalizados en su propia computadora. De esta manera, cada vez que importe la apariencia en otro proyecto, tendrá la funcionalidad y el estilo personalizados de la página. También puede usar esta técnica para guardar y exportar secciones, líneas o módulos individuales que también usan código personalizado.
Este método solo tiene sentido para las páginas o elementos individuales de una página que desea guardar para uso futuro. Esta no sería la mejor manera de guardar los modelos para un sitio completo. Tendría más sentido aprovechar las opciones de portabilidad de la división, que le permiten exportar el personalizador temático y / o las opciones de temas. Suscríbase a nuestro canal de YouTube cómo exportar una apariencia de página que tiene un código personalizado que utiliza módulos de código DIV para suponer que tiene una página de página que usa CSS y JavaScript y desea incluir ese código personalizado en su archivo. De exportación (. json). Primero tendrá que abrir la página que desea exportar e implementar el Builder Divi. Para este ejemplo, tengo una página que usa la página de la panadería. Agregué algunos CSS y JavaScript personalizados para cambiar un formulario de contacto al hacer clic en un botón.
Se ha agregado CSS personalizado a la configuración de página CSS personalizada en la pestaña Avanzada.

El JavaScript personalizado se agregó a la etiqueta del encabezado de las opciones de división de pestaña Tab.

Agregue CSS personalizado a la página utilizando un módulo de código para exportar CSS con la apariencia de la página, debemos agregarlo a un módulo de código en la página. Para hacer esto, abra la configuración de la página CSS CSS en el portapapeles.

Aquí está el CSS personalizado que copio para este ejemplo: #Togle-Conseiner {

Pantalla: ninguno;
}
.Togle-Actives {
Display: Bloque! Importante;
}
Luego agregue un módulo de código a su página Puede agregar el módulo de código donde quiera. Por ejemplo, si desea agregarlo a la parte superior de la página, podría ser más fácil de encontrar y editarse más adelante. O puede colocar el módulo de código al lado del elemento que conoce sobre CSS. En este caso, CSS se usa para ocultar y mostrar mi módulo de formulario de contacto. Por lo tanto, agregaré el módulo de código directo en el módulo de formulario de contacto. En la configuración del módulo de código, pegue el CSS personalizado que copió y luego lo pegue en el contenido del código. Debido a que agrega CSS al contenido de la página, deberá envolver CSS en una etiqueta de estilo. Así es como se verá el código CSS en el módulo de código:
#toggle-continer {

Pantalla: ninguno;
}
.Togle-Actives {
Display: Bloque! Importante;
}

Después de haber terminado, es una buena idea agregar una etiqueta de administrador al módulo de código de referencia posterior. Por ejemplo, puede darle el nombre “código CSS”, para que sepa qué es cuando mira el aspecto en Wireframe.
Después de eso, guarde la configuración del módulo de código y termine. Agregue JavaScript a la página usando un módulo de código, entonces, querrá hacer lo mismo para el JavaScript personalizado, que es el encabezado bajo temas. Copie el código al portapapeles y luego vuelva a su página con Activ Builder. Luego agregue otro módulo de código en cualquier lugar de la página. Pongo 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. Después de agregar el módulo de código, pegue el código JavaScript que copió en el cuadro de contenido. Asegúrese de que el código esté envuelto en una etiqueta de script porque es JavaScript.


JQuery (documento) .Ready (function () {

JQuery (“. Toggle-thrigger”). Click (function () {
JQuery (“#toggle-contener”). Togglecass (“togle-active”);
});
});

Proporcione al módulo de código una etiqueta de administrador (como “código JS”) para una fácil referencia.
Debido a que estos dos módulos de código no tienen código que agrega contenido real a la página, los módulos no romperán el diseño de la página, por lo que no necesita preocuparse allí. Cómo exportar la apariencia de la página Ahora está listo para exportar la apariencia de la página. Para exportar una apariencia de página utilizando Divi Builder, abra el menú Configuración y haga clic en el icono de portabilidad. En la ventana de portabilidad emergente, ingrese un nombre (“Apariencia de página”) y haga clic en el botón Exportar Divi Builder Diseño.
Esto exportará el archivo JSON a su computadora. Ahora su archivo JSON está listo para otro proyecto con un código personalizado completamente funcional. Cómo importar la página Busque para cargar el archivo JSON en una nueva página, abra la página donde desea importar el aspecto. Asegúrese de que Divin Builder esté activo. Entonces, todo lo que tiene que hacer es deslizar y sujetar el archivo JSON a la página. El modo de portabilidad aparece automáticamente, lo que le permite elegir la opción de reemplazar el contenido existente o crear una copia de copia de seguridad. Debido a que no necesita reemplazar ningún contenido, todo lo que tiene que hacer es hacer clic en el botón Importar y se carga instantáneamente en la página. Vuelva a colocar el código donde pertenece una vez que haya importado con éxito la página. necesario para restaurar CSS y JS donde pertenece. Si desea que CSS modele solo la página actual, puede agregar CSS a la configuración de página CSS personalizada, donde estaba antes de comenzar. Y, si desea que CSS esté disponible en todas las páginas de su sitio, puede agregar CSS a CSS adicionales en la configuración de temas personalizados. También le recomendamos que agregue el código JavaScript a su encabezado de tema a Tema> Integración donde era originalmente. O puede pensar en dejar el código en el módulo de código para que el script solo se aplique a esa página.