¿Cómo puedo importar/exportar plantillas de temas con el Constructor de Temas Divi?

Publicado el 22/10/2019 | 4 comentarios

En este nuevo tutorial, descubra cómo importar/exportar plantillas de temas creadas con el nuevo Constructor de temas Divi.

Estas acciones son muy similares a la Función de importación/exportación de diseños Divi excepto por algunas opciones nuevas que han aparecido.

Veremos todo esto en detalle.

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es una plantilla temática?

No confundas una plantilla temática con un diseño.

Las maquetas se utilizan para crear el diseño dentro de una página web. Los diseños son el resultado de la construcción de la página utilizando un constructor de páginas, y en nuestro caso, utilizando el Constructor Visual de Divi.

Por otro lado, las plantillas temáticas se han introducido desde el Versión 4.0 de Divi. Permiten crear el diseño del sitio y construir plantillas de páginas.

Cada plantilla de página tiene una funcionalidad específica que ha sido definida en el Jerarquía de archivos de plantillas de WordPress.

Hiérarchie des fichiers modèle de WordPress
Jerarquía de archivos de plantillas de WordPress

Estos archivos de plantillas (plantillas de páginas) no pueden ser modificados con un constructor de páginas, ¡por eso Divi 4.0 fue tan esperado!

Ahora, puedes crear plantillas de temas directamente usando el Constructor de Temas de Divi, lo que elimina la necesidad de codificar a mano estas plantillas de páginas (como la página 404, la página de categorías, el encabezado, el pie de página, etc.).

Esto significa que ya no necesitamos dominar PHP para crear increíbles "temas" para WordPress.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA

2 - Importar una plantilla de tema: 3 posibilidades

Para importar (o exportar) plantillas de temas, basta con ir a la sección Divi > Constructor de temas.

Podrá importar plantillas individuales o lotes de plantillas (paquetes que contienen varias plantillas).

Para este tutorial, utilicé un paquete de plantillas ya hechas que descargué del sitio web de Elegant Themes. Al final del artículo te daré todos los enlaces.

La ventaja de importar/exportar plantillas de temas es que puedes migrar fácilmente un diseño de un sitio a otro. Ahorrará mucho tiempo y podrá incluso utilizar esta función cuando rediseño del sitio.

La importación de un paquete de plantillas (o de una plantilla simple) puede hacerse según 3 opciones:

  1. Importar una plantilla sin afectar al diseño actual
  2. Importar una plantilla sin afectar al diseño global
  3. Importar una plantilla de tema global
types d'import de template Divi
Resultados de los diferentes tipos de importación de plantillas temáticas

Veamos en detalle...

Opción 1: importar una plantilla de tema sin afectar al diseño actual

Esta forma de importar plantillas de temas es ideal si ya has construido el diseño de tu sitio y no quieres modificar lo esencial (cabecera, pie de página, etc.).

Onglet Theme Builder > Portabilité
Pestaña "Theme Builder" > Portabilidad (icono de flecha)

Ve a la pestaña Divi > Theme Builder y haz clic en el icono de la doble flecha.

Importer sans options
Importar sin opciones: desmarcar todas las casillas

Aparece una ventana emergente:

  1. Haga clic en la pestaña Importar
  2. Elija el archivo a importar: debe tenerlo en su ordenador. Son archivos .json. Para este ejemplo, he elegido la versión "paquete" (todos).
  3. Desmarcar todos los botones de opción
  4. Haga clic en "Importar plantilla de Divi Theme Builder".
choix alternatif d'import
Ventana emergente adicional que le invita a elegir entre 2 opciones. Aquí, elijo "relink".

Se abre una nueva ventana que le ofrece 2 opciones:

"Esta importación contiene referencias a las cabeceras globales, al cuerpo y/o a los pies de página del sitio web desde el que se exportaron. ¿Cómo quiere importar estas referencias?
1 - Vincularlos a la cabecera general, al cuerpo y/o al pie de página de este sitio web.
2 - Importarlos como diseños estáticos desde el sitio web del que fueron exportados. Esto puede tardar varios minutos dependiendo del número de referencias importadas. »

Opción 1: "Reenlace... le permite importar sólo el Opción "Cuerpo a medida". Esto significa que el sistema de importación omite todos los encabezados y pies de página contenidos en las plantillas de los temas.

importation sans option
Pestaña "Theme Builder" después de la importación sin la opción marcada.

Así, se mantiene el diseño de la cabecera y el pie de página de su sitio actual, como se muestra en las siguientes capturas "antes/después":

Page de l'article importée
Página del artículo antes y después
Page d'archive après import
Página de archivo del antes y el después

Puede observar que sólo ha cambiado el cuerpo de la página y que la cabecera (y el pie de página) han permanecido intactos.

Por supuesto, estas acciones sólo han afectado al diseño, pero el contenido (textos e imágenes) sigue estando presente.

Opción 2 : importar una plantilla de tema sin afectar al diseño global

Ve a la pestaña Divi > Theme Builder y haz clic en el icono de la doble flecha.

Aparece una ventana emergente:

importer sans option
Opción: ninguna casilla marcada
  1. Haga clic en la pestaña Importar
  2. Elija el archivo a importar (.json).
  3. Desmarcar todos los botones de opción
  4. Haga clic en "Importar plantilla de Divi Theme Builder".
import them as static layout
Opción "Importarlas como diseño estático

Aparece el mismo mensaje y veamos qué pasa si elegimos la otra opción:

Opción 2: "Importarlos como diseño estático..." le permite importar todas las partes de la plantilla (cabecera, cuerpo y pie de página) como un diseño independiente.

Onglet Theme Builder
Pestaña del constructor de temas después de la importación

Esto significa que los diseños importados sólo afectarán a la(s) página(s) asignada(s).

Las demás páginas de su sitio no cambiarán.

Opción 3: Importar una plantilla de tema global

La última opción (la más interesante si estás desarrollando tu sitio) te permitirá importar un diseño global que actuará sobre todo el sitio, o casi (todo depende del contenido del pack que importes).

Al igual que con las otras opciones, vaya a la pestaña Divi > Theme Builder y haga clic en el icono de la doble flecha.

Aparece una ventana emergente:

options d'import par défaut
Opciones de importación por defecto: "Anular" y "Permitir importación
  1. Haga clic en la pestaña Importar
  2. Elija el archivo a importar (.json).
  3. No desmarque las dos opciones por defecto: "Anular..." y "Permitir importación..."
  4. Haga clic en "Importar plantilla de Divi Theme Builder".
import des templates
Pestaña "Theme Builder" tras la importación de la plantilla

Espere a que se complete la descarga.

Como puede ver en la imagen de arriba, algunos módulos son verdes (componentes generales) pero sobre todo el Plantilla del sitio web por defecto (plantilla de la parte superior izquierda) ha sido importada: es ésta la que repercutirá en todo el diseño de su sitio.

Este es el aspecto del front-end con estas capturas del "antes/después":

template de page d'accueil
Antes y después de la página de inicio
Page des catégories du blog
Página de categorías del blog antes/después

El diseño de mis páginas ha cambiado, la cabecera y el pie de página también. Lo único que no ha cambiado es el contenido de mis páginas.

3 - ¿Qué hacer si la importación no es adecuada?

¿Acabas de importar las plantillas del tema Divi y no es lo que esperabas?

No te preocupes, simplemente vuelve a la pestaña Divi > Theme Builder y elimina (icono de la papelera) la(s) parte(s) de la plantilla que no te gusta. Incluso puede eliminarlos por completo y su sitio web volverá a parecer nuevo.

Otra opción: ¡puedes editarlos a tu gusto!

4 - Exportar una plantilla de tema : 2 posibilidades

Exportar una plantilla de tema también es muy fácil, sólo se necesitan 3 clics...

Opción 1: exportar una plantilla de tema simple

Esto siempre ocurre en el Divi > Constructor de temas

Exporter une template
Exportar una sola plantilla

Pase el ratón por encima de la plantilla que desea exportar: aparecerá un pequeño menú emergente. Haga clic en el icono de la doble flecha.

fichier d'export
Nombre del archivo de exportación

Aparece una ventana emergente:

  1. Dé un nombre al archivo que va a exportar
  2. Haga clic en " Exportar la plantilla del constructor de temas Divi
  3. Guarde su archivo .json localmente, en su ordenador.

Este archivo exportado se puede utilizar en otro sitio que utilice el tema Divi, sólo hay que volver a importarlo.

Opción 2: Exportar varias plantillas de temas a la vez

Ir a la pestaña Divi > Constructor de temas.

portabilité Divi
Importar o exportar una o varias plantillas de temas

En la barra púrpura, haga clic en el icono de la doble flecha (portabilidad).

Aparece una ventana emergente:

sélectionner les templates à exporter
Exportar todo o seleccionar plantillas para exportar
  1. Desde la pestaña Pestaña "Exportar".
  2. Asigne un nombre al archivo de exportación.
  3. Deje la casilla marcada si desea exportar todas sus plantillas.
  4. O desmarque la casilla para seleccionar sólo las plantillas que le interesan.
  5. Haga clic en " Exportar la plantilla del constructor de temas Divi y guardarlos localmente.

5 - ¿Dónde puedo encontrar plantillas gratuitas de temas Divi para descargar?

El Divi Theme Builder es aún muy nuevo, sin embargo, los diseñadores de Elegant Themes no están de brazos cruzados y el sitio ya permite descargar los primeros 5 packs de forma gratuita.

Seguramente le seguirán otras: para no perdérselas, consulte regularmente el Página de recursos de Divi disponible en el sitio web oficial.

Mientras tanto, puedes descargar los 5 primeros paquetes:

Queda por ver si una futura versión de Divi permitirá descargar plantillas de temas directamente desde el back-office, como hace el Visual Builder con los layouts?

¡Buena idea!

importer ou exporter un template de thème Divi
importer template de thème
import-export a theme template

1.544 palabras

6

A ti también te debería gustar:

4 Commentaires

  1. Leslie

    J’ai téléchargé 2 pages Layout de 2 thèmes différents.
    Je construit une 3eme page, ou j’intègre des blocs de l’un et de l’autre pour personnaliser la page comme je le veux.
    Cependant, je rencontre un problème : dès que je quitte mon visuel builder, tout se détruit.
    POURQUOI ?
    Avez-vous une astuce ?

  2. Lycia Diaz

    Salut Leslie, il peut y avoir plusieurs raisons à cela :

    1/ Essaye de désactiver l’option « Génération de fichiers CSS statiques » disponible dans l’onglet Divi > Option du Thème > Créateur > Avancé. Cela pourrait régler le problème.
    2/ Sinon, mets tes Thèmes et/ou plugins à jour
    3/ Vérifie que ton hébergement tourne sur une version récente de PHP (minimum 7.1).

    Voilà, tiens-nous au courant.

    Lycia

  3. 7hil

    BonjouR Lydia,

    et merci pour ce super travail que tu fait pour nous !

    Voici le message que je lis quand je veu faire des modif s sr ma page ?

    Module de contenu post manquant
    Un modèle a été attribué à cet article à l’aide du Générateur de thèmes. Toutefois, le modèle utilisé ne contient pas de module Publier le contenu.

    Un module de publication de contenu est requis pour ajouter un contenu unique dans le modèle de générateur de thèmes. Une fois qu’un module de contenu de publication a été ajouté au modèle, vous pourrez ajouter un contenu de publication unique dans cette zone pour chaque publication à l’aide du modèle.

    Modèle actuel: Modèle de site Web par défaut

    Editer Thème Builder

    merci de ton aide 🙂
    Belle soirée

    7hil

  4. Lycia Diaz

    Salut 7hil ! C’est normal. Quand tu crée un modèle avec le thème Builder, tu dois impérativement y inclure le module Publier un contenu. Tout est expliqué ici : https://astucesdivi.com/module-post-content/

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto