Documentación de Divi - Usar el constructor visual

Divi - Documentación en español

Actualizada v3.28

Usar el constructor visual

El constructor de Divi se presenta en dos formas: el constructor estándar de la interfaz de administración y el Constructor visual. Ambas interfaces le permiten construir el mismo tipo de sitios web, con los mismos elementos y ajustes de diseño para el contenido. La única diferencia es la interfaz. El constructor estándar reside en el administrador de WordPress y se puede acceder a él como a cualquier otro ajuste de WordPress: reemplaza el editor de entradas y páginas predeterminado. Es muy bueno para hacer cambios rápidos mientras se encuentra dentro del escritorio. Este tutorial se enfocará únicamente en el constructor visual.

Divi - Usar el constructor visual

La nueva experiencia del constructor de Divi

La nueva experiencia dentro del editor será muy familiar. No se trata de un gran cambio en cuanto al flujo básico de trabajo se refiere, sino que incluye más opciones, varios modos de edición e incontables características nuevas. De manera predeterminada se presentará un constructor basado en bloques, que se parece mucho al constructor clásico. Sin embargo, también se puede pasar al modo de edición visual en cualquier momento, sin salir de la interfaz de administración.

La nueva experiencia del constuctor

Esta nueva experiencia reemplaza el constructor clásico, y se presenta de manera predeterminada, pero es totalmente opcional. Se puede volver al constructor clásico en cualquier momento, desde el editor de la página actual, o desde Divi > Opciones del tema > Constructor > Avanzado > Activar la última experiencia del constructor de Divi.

El constructor visual le permite crear páginas desde la interfaz de usuario. Es una experiencia asombrosa y ofrece un proceso de diseño mucho más rápido. Cuando añade contenido o ajusta las opciones de diseño dentro del constructor visual, los cambios se ven de forma instantánea. Puede hacer clic en la página y comenzar a escribir. Puede resaltar texto y ajustar la fuente y el estilo. Puede agregar contenido nuevo, construir la página y observar cómo todo sucede ante sus ojos.

Divi - El constructor visual

Activar el constructor visual

Si ha iniciado sesión en WordPress, puede navegar hacia cualquier página del sitio en la interfaz de usuario y hacer clic en el botón Activar constructor visual de la barra de herramientas.

Si está editando una página en la interfaz de administración, puede cambiar al constructor visual haciendo clic en el botón celeste Construir en la interfaz de usuario que se encuentra en la parte superior del constructor de Divi (tenga en cuenta que antes deberá haber activado el constructor de Divi para que el botón aparezca).

Divi - Activar el constructor visual

Las bases del constructor de Divi

El poder de Divi está en el constructor, una herramienta “arrastrar y soltar” que le permite crear casi cualquier tipo de sitio al combinar y ordenar elementos del contenido.

El constructor usa tres bloques principales: secciones, filas y módulos. Al emplear estos tres al unísono podrá crear incontables diseños de páginas. Las secciones son los bloques de construcción más grandes, y albergan un grupo de filas; las filas se colocan dentro de las secciones y se usan para contener módulos, y los módulos van dentro de las filas: esta es la estructura de todo sitio web hecho con Divi.

Repasemos los conceptos:

Secciones

Los bloques más básicos y de mayor tamaño para usar en el diseño son las Secciones. Estas se usan para crear las áreas de nivel superior en su sitio. Hay dos tipos de secciones: normal y de ancho completo. Las secciones normales se llenan con filas que contienen columnas, y las secciones de ancho completo se llenan con módulos de ancho completo. Sepa más sobre las filas y los módulos a continuación.

Filas

Las filas se encuentran dentro de las secciones, y usted puede llenar cada sección con un número ilimitado de filas. Hay varios tipos de fila entre los que puede elegir. Una vez que defina el tipo de fila, puede llenarla con módulos en la columna que seleccione. No hay límite para la cantidad de módulos que puede incluir dentro de una columna.

Módulos

Los módulos son los elementos visuales que componen su sitio. Cada módulo de Divi puede entrar en cualquier ancho de columna, y estas son de diseño adaptable (responsive).

Ajustes del constructor

Divi - Ajustes del constructor

Personalizar la barra de herramientas

La barra de herramientas del constructor visual es personalizable, permitiéndole controlar cuáles serán los modos de interacción y de visualización, que estarán fácilmente accesibles al construir una página. Obtenga acceso rápido al modo de vista de estructura, al Modo clic, al Modo grilla, al zoom y a todas las vistas previas adaptables con un solo clic. También estos modos se pueden eliminar de la barra de herramientas para liberar espacio, o en caso de que no planee usarlos.

Divi - Panel de ajustes del constructor

Modo de interacción

De manera predeterminada, la principal forma de interacción del constructor visual se centra en el hover (la acción de posar el puntero/cursor del ratón sobre un elemento del diseño). Al posar el puntero sobre los módulos, filas y secciones se muestran sus controles correspondientes, los cuales se accionan mediante clics. Esto es muy bueno para acceder rápidamente a los controles, y es nuestro método preferido para construir páginas. Dicho esto, nos hemos dado cuenta de que no todos disfrutan por igual de esta modalidad de interacción, y que puede ser frustrante cuando se está por hacer un clic y el botón o el área desaparecen durante el movimiento del ratón.

Es por eso que creamos un modo de interacción nuevo para el constructor visual, denominado Modo clic. A diferencia del Modo “hover”, cuando active el Modo clic, los controles se mostrarán al hacer clic en el elemento, en lugar de aparecer al posar el ratón. Una vez hecho clic sobre el elemento, los controles permanecen visibles hasta que se hace clic en otra área o se sale.

El Modo clic también facilita la búsqueda de elementos en la página, proporcionando un contorno claro de todos al posar el puntero del ratón. Esto hace que encontrar y hacer clic en el elemento exacto sea mucho más simple, en especial cuando se trabaja con una serie de módulos pequeños.

Además del Modo clic y el Modo “hover”, hemos añadido el Modo grilla. Cuando este está activado, todos los controles de los módulos, filas y secciones de la página se muestran juntos. No hay necesidad de hacer clic ni de posar el puntero del ratón. Una vez abiertos los ajustes del elemento, la grilla desaparece y se verá un panorama más claro de la página mientras hace los ajustes en el diseño. Incluso si nota que el Modo grilla lo distrae en el uso continuo, es útil activar y desactivar este modo sobre la marcha para apreciar mejor la estructura de la página, en especial cuando se trabaja con muchas personalizaciones de tamaños y espaciados.

Elegir el modo de interacción predeterminado

Con la introducción del Modo grilla y el Modo clic, el constructor visual ahora presenta tres maneras únicas en las que podrá interactuar con el contenido. La predeterminada cargará el Modo “hover”, pero si prefiere algún otro de los métodos, puede definirlo como predeterminado. La próxima vez que abra el constructor, la interacción deseada se activará automáticamente.

Controlar la frecuencia de creación de estados del historial

De manera predeterminada, el constructor visual creará un estado de historial para cada acción que se lleve a cabo el constructor. Puede así revertir a un estado guardado con la ventana de ajustes del historial. Luego de una larga sesión de edición, esta lista de puntos de restauración puede tornarse un tanto excesiva, y localizar el punto deseado puede dificultarse. La opción Intervalo de estados del historial le permitirá usar una lista más reducida para mejorar el rendimiento en equipos más antiguos.

Elegir la posición predeterminada de la ventana modal

Las ventanas de ajustes en el constructor visual son personalizables. Se puede cambiar la posición, el tamaño, y se pueden llevar a los lados de la pantalla. De manera predeterminada, el constructor recordará la última posición y tamaños usados, y la próxima vez que edite un módulo, la ventana aparecerá de esa misma manera. Con la opción Posición predeterminada de ventana modal de ajustes podrá definir qué modalidad se ajusta mejor a sus necesidades: Última posición usada, Tamaño mínimo de ventana flotante, Pantalla completa, Barra lateral izquierda fija, Barra lateral derecha fija o Panel inferior fijo.

Flujo de creación de páginas

Este ajuste es totalmente opcional, y le permite elegir la modalidad para usar al momento de crear una página nueva con el constructor visual: comenzar de cero, elegir un diseño predefinido, o clonar una página existente. Si no desea que se le presente la pantalla con las tres alternativas al activar el constructor, seleccione aquella que prefiera. Si quiere que el constructor funcione como siempre, elija Construir de cero como opción predeterminada. Si cree que con mayor frecuencia comenzará buscando un diseño predefinido de la biblioteca, elija Cargar diseño predefinido. Y si suele trabajar a partir de páginas ya creadas, la opción Clonar página existente será la más conveniente.

Eliminar las animaciones de la interfaz del constructor

La interfaz del constructor contiene algunas animaciones tenues. En equipos y navegadores más antiguos estas animaciones pueden afectar el rendimiento y quitarle respuesta al constructor. Al seleccionar No en la opción Animaciones de la interfaz del constructor se desactivarán todas las animaciones para acelerar el uso.

Ocultar por completo los módulos desactivados

El constructor de Divi le permite ocultar módulos en algunos o todos los dispositivos. En el constructor visual, los módulos desactivados se muestran con una opacidad del 50%. Esto significa que el elemento está oculto pero aun le permite verlo en el constructor para que pueda tener acceso a los controles y hacer cambios de diseño de manera visual. Sin embargo, esto puede ser una distracción ya que no le permite ver exactamente cómo quedará la página en la interfaz del usuario. Al seleccionar No en la opción Mostrar módulos desactivados al 50% podrá ocultar por completo los módulos desactivados dentro del constructor visual.

Abrir todas las opciones de manera predeterminada

Cuando se abre una ventana modal de ajustes del constructor, todas las opciones están organizadas en grupos. Estos grupos están cerrados de manera predeterminada y se pueden desplegar con un clic. Con el ajuste Agrupar ajustes en conmutadores cerrados puede cambiar este comportamiento. Al seleccionar No, todos los grupos estarán abiertos de manera predeterminada, mostrando todas las opciones juntas.

Añadir contenido demo al insertar nuevos módulos

Cuando añada elementos al constructor visual, los módulos se llenarán con una cantidad mínima de contenido demo, para que pueda tener una idea gráfica de los mismos dentro de la página. Esto permite que todos los ajustes de diseño más relevantes estén en uso tan pronto como se añade el módulo, además de facilitar la manera de entender su funcionamiento para los usuarios principiantes.

Podrá desactivar esta herramienta en la interfaz del constructor, al seleccionar No en la opción Añadir contenido de marcador de posición a los módulos nuevos.

Construir la primera página

De manera predeterminada, al crear una página nueva con el constructor visual, se le presentarán tres opciones distintas: puede comenzar de cero, puede abrir directamente la biblioteca de diseños predefinidos, o puede duplicar una página que haya creado con anterioridad.

Divi - Opciones para crear página nueva

Ver más información en la sección de ajustes del constructor.

Los tres bloques básicos de construcción (secciones, filas y módulos) se usan para construir las páginas.

Divi - Construir la primera página

Añadir la primera sección

Antes de poder agregar algo a la página, tendrá que añadir una sección. Las secciones se pueden agregar haciendo clic en el botón azul (Divi - Botón sección). Cuando pose el ratón sobre una sección que ya existe, un botón azul aparecerá debajo. Si se hace clic en el botón, se añadirá debajo una nueva sección.

Si está comenzando una página de cero, la primera sección estará presente de manera automática.

Divi - Añadir la primera sección

Añadir la primera fila

Después de que haya agregado la primera sección, puede comenzar a añadir filas y columnas. Una sección puede contener un número indefinido de filas, y puede mezclar y combinar filas de varios tipos de columnas con una gran variedad de diseños.

Para añadir una fila, haga clic en el botón verde (Divi - Botón fila) de una sección vacía, o haga clic en el botón verde que aparece al posar el puntero del ratón sobre cualquier fila ya creada. Una vez que haya hecho clic en el botón verde, aparecerá una lista de tipos de columnas. Elija el que desee y así estará listo para añadir el primer módulo.

Divi - Añadir la primera fila

Añadir el primer módulo

Los módulos se pueden agregar dentro de las filas, y cada fila puede contener un número indefinido de módulos. Los módulos son elementos de contenido dentro de la página, y Divi incluye 40 elementos distintos con los que puede construir. Puede usar módulos básicos como el de Texto, Imagen o Botón, o módulos más avanzados como Carruseles, Galería y Tienda. Existen tutoriales individuales para cada módulo de Divi, así que si desea saber más sobre los tipos de módulos disponibles, asegúrese de visitar la sección Los Módulos.

Para agregar el primer módulo haga clic en el botón gris (Divi - Botón módulo) que se encuentra dentro de cualquier columna vacía, o el botón que se ve al posar el puntero del ratón sobre un módulo de la página. Una vez que haya hecho clic en el botón gris, aparecerá la lista de módulos. Elija el que desee, el cual se agregará a la página y mostrará el panel de ajustes desde donde podrá configurar el módulo.

Divi - Añadir módulo

Configurar y personalizar secciones, filas y módulos

Cada sección, fila y módulo puede ser personalizado de distintas maneras. Puede acceder al panel de ajustes de un elemento haciendo clic en el icono del engranaje que aparece al posar el puntero del ratón sobre cualquier elemento de la página.

Divi - Ajustes del módulo

Esto lanzará el panel de ajustes para el elemento específico. Cada panel de ajustes se divide en tres pestañas: Contenido, Diseño y Avanzado. Como ya es sabido, todo lo necesario para construir un gran sitio está en la pestaña Contenido. Aquí puede hacer cosas tales como ajustar el contenido y diseño del módulo, y hasta aplicar algunas opciones básicas de diseño como el color de la fuente y del fondo. Si necesita un control adicional sobre el diseño, puede ir a la pestaña Diseño. Allí podrá personalizar absolutamente todo. Para un vistazo más profundo sobre esta pestaña, visite el tutorial sobre diseño avanzado.

Finalmente, si desea más control puede ir a la pestaña Avanzado y aplicar CSS personalizado a cualquier parte del módulo.

Filtros de búsqueda de opciones

Dentro de todas las ventanas de ajustes está disponible un botón de Filtros. Los filtros limitan la visibilidad de muchas opciones disponibles que aparecen dentro de cada ventana. Estos filtros incluyen: Estilos modificados, Contenido / Estilos adaptables, Contenido / Estilos al pasar el cursor y Contenido activo.

Divi - Filtros de búsqueda

Tal vez el más útil es el de Estilos modificados. Una vez seleccionado, aparecerán solo los ajustes de diseño que hayan sido editados, permitiéndole localizar rápidamente las opciones deseadas y hacer los cambios correspondientes a medida que el diseño se desarrolla. Si necesita hacer un ajuste rápido al diseño personalizado, no tendrá que explorar miles de opciones para encontrar aquellas que están actualmente en uso. El filtro de Estilos modificados lo llevará directamente a los estilos activos y podrá trabajar desde allí. Si está familiarizado con las herramientas de desarrollador del navegador, tales como el Inspector de Google, esta característica es como los “computed styles”, o en otras palabras, los estilos que actualmente afectan la apariencia de un elemento en particular.

Divi - Estilos modificados del módulo

Así como el de Estilos modificados, el filtro de Contenido activo lo llevará directamente a todo el contenido que haya añadido en el módulo. Si quiere cambiar el texto del título de un Encabezado de ancho completo, al filtrar por Contenido activo, solo se mostrarán los elementos de contenido que están en uso actualmente y se eliminará el exceso de “ruido” de tantos elementos sin usar.

El filtro de Estilos adaptables sirve para acceder directamente a todos aquellos ajustes en los que se configuraron valores distintos para la vista de tablet o móvil.

Acceso rápido a elementos de diseño

Las opciones de acceso rápido sirven para comprender cuáles son los ajustes de diseño que afectan a determinados elementos. Además, permite al usuario acceder a esos ajustes más rápidamente.

Al abrir los ajustes de un módulo, parte de la belleza del constructor visual se perdía en la tarea tediosa de buscar dentro de una larga lista de opciones, mientras se intentaban modificar elementos específicos. Por suerte, esto ya no es así.

Divi - Botones de acceso rápido a ajustes de diseño

Ahora, al editar un módulo, podrá apoyar el cursor sobre sus componentes para revelar los subelementos al tiempo que se muestran los botones de acceso rápido de edición. Al hacerles clic, estos botones de acceso lo llevarán directamente a los ajustes de diseño correspondientes a ese elemento del módulo en particular. Ya no hay necesidad de buscar en todos los ajustes para dar con el grupo de opciones deseado. Esto facilita la comprensión de la estructura del módulo y cómo cada opción se relaciona con el elemento de diseño.

Este sistema también simplifica la tarea de identificar elementos en la página mientras se exploran los ajustes del módulo. Al buscar en las opciones, Divi indicará a cuál elemento corresponde el grupo de opciones en cuestión. Puede apoyar el cursor sobre la lista de opciones y usar las pistas visuales para identificar los ajustes deseados y comenzar a personalizar cada elemento.

Multiselección y edición en lote

Esta característica le permite acelerar la construcción de un sitio web. Puede seleccionar varios elementos al mismo tiempo y ejecutar acciones en lote para un grupo entero de elementos. Tendrá opción de arrastrar y soltar, copiar y pegar, borrar y hasta editar el diseño y contenido de todo al mismo tiempo. En lugar de hacer cambios a un grupo de elementos, uno por uno, una y otra vez, simplemente selecciónelos y edite todo en una sola acción. Use las teclas Shift o Ctrl/CMD y haga clic en cada elemento que desee seleccionar.

Divi - Multiselección

Buscar y reemplazar

Todos los elementos del constructor de Divi incluyen una herramienta Buscar y reemplazar. Simplemente haga clic derecho en un ajuste y elija la opción Buscar y reemplazar. Esto le permitirá hacer una búsqueda de un valor específico en toda la página, o en una parte de la página en particular, y reemplazarlo por uno nuevo. Esto significa que podrá cambiar el esquema de color de la página completa o las fuentes en cuestión de segundos.

Divi - Buscar y reemplazar

Cuando busque y reemplace un valor, tendrá el control total sobre el alcance y la ubicación del reemplazo. Puede buscar y reemplazar valores específicos dentro de ciertas áreas, o puede buscar y reemplazar valores en la página entera. Puede limitar el reemplazo a tipos de opciones en particular, o puede reemplazar todos los valores que se encuentran en todos los módulos y opciones.

Siempre habrá ocasiones en las que necesite usar estilos específicos para una página o una sección, y así lograr un diseño armonioso e interesante. Por ejemplo, consideremos las diferencias entre secciones que usan colores de fondo claros u oscuros. Los módulos colocados sobre fondos oscuros deben tener colores de texto claros y pesos de fuente un poco mayores. Hasta se puede elegir variar la familia de fuente para crear una sensación de ritmo. Si aplica individualmente un color de fondo oscuro a una sección que ya contiene varios módulos, tomaría mucho tiempo repasar uno por uno para editar los colores de texto, botones, bordes, etc., para que aparezcan con mayor legibilidad sobre el nuevo color de fondo. Buscar y reemplazar facilita y acelera esta tarea.

Divi - Buscar y reemplazar - Diseño predefinido

Es ideal para editar los paquetes de diseños predefinidos. Una vez insertados desde la biblioteca, cambiar los colores o las fuentes de cada uno de los módulos llevaría bastante tiempo y trabajo. Con la herramienta Buscar y reemplazar se pueden hacer ediciones “en lote” dentro de la página entera, casi al instante. E incluso reemplazar contenidos de texto recurrentes, como los que se encuentran en los botones.

Divi - Buscar y reemplazar - Texto en diseño predefinido

Usar contenido dinámico en Divi

El contenido dinámico se extrae de la base de datos del sitio y es gestionado mediante WordPress o los plugins. Ejemplos de contenido dinámico típico incluyen el título, descripción y logo del sitio, y los títulos, extractos e imágenes destacadas de las entradas. El contenido dinámico también incluye contenido personalizado creado manualmente con los campos personalizados, o con campos personalizados registrados por los plugins.

Hasta Divi 3.16 todo el contenido creado con el constructor en una entrada era estático. Con la introducción del contenido dinámico, todas las entradas de contenido estático pueden conectarse a las entradas de contenido dinámico.

Todas las entradas de contenido importantes en Divi ahora son compatibles con el uso de contenido dinámico. Tan solo un clic en el icono de contenido dinámico Divi - Usar contenido dinámico abrirá una lista completa de todo el contenido disponible. Puede elegir el elemento que desee, personalizar su apariencia y conectarlo con el módulo. Cada vez que una porción de contenido cambie, automáticamente se actualizará dentro del módulo, en la página y en todo el sitio web.

Por ejemplo, si añade un módulo de Imagen a una página, y usa contenido dinámico para conectar la fuente de la imagen a la imagen destacada de la entrada, se mostrará automáticamente la imagen destacada en la interfaz del usuario y se actualizará la página cuando la imagen destacada cambie. También puede enlazar el título de la entrada a un módulo de texto, el logo a un módulo de encabezado, el precio de un producto a un módulo Tabla de precios, y mucho más. El contenido de un diseño entero puede ser generado desde fuentes dinámicas, permitiendo que las entradas se construyan automáticamente, sin tocar en ningún momento el constructor de Divi.

Divi - Contenido dinámico

Conectar datos de campos personalizados a los módulos

Divi no solo ofrece soporte para el uso de contenido dinámico estándar de WordPress, sino también para datos de campos personalizados. Ya sea que haya creado sus propios campos personalizados, o los haya registrado mediante un plugin, como Advanced Custom Fields, esos datos dinámicos podrán ser usados dentro del constructor de Divi y conectados con el área de contenido de cualquier módulo. Cada vez que actualice el valor del campo personalizado, el módulo se actualizará automáticamente. Esto le permite controlar cualquier tipo de contenido en cualquier parte del sitio, sin siquiera abrir el constructor.

Guardar la página y acceder a los ajustes de página

Para acceder a los ajustes generales de la página, haga clic en el botón morado de la parte inferior de la pantalla. Esto ampliará la barra de ajustes y le proporcionará varias opciones. Puede abrir los ajustes de página con un clic en el icono del engranaje, y allí podrá ajustar elementos tales como el color de fondo de la página y el color del texto. También encontrará los botones Guardar y Publicar, así como los alternadores de vista para dispositivos móviles.

Divi - Ajustes de página

Arranque el diseño desde plantillas

Una manera muy buena de comenzar una página nueva es arrancar desde una plantilla. Divi ofrece 20 diseños predefinidos que cubren la variedad de tipos de página más comunes, tales como “Quiénes somos”, “Contacto”, “Blog”, “Portfolio”, etc. Puede cargar esas plantillas y reemplazar el contenido de demostración con el suyo propio. ¡La página nueva estará terminada antes de que pueda darse cuenta! Para saber más sobre los diseños predefinidos, asegúrese de visitar la sección correspondiente de esta documentación.

Divi - Cargar diseño de la biblioteca

Guardar sus propios diseños en la biblioteca

Además de poder usar los diseños predefinidos que incluye Divi, también puede guardar sus propias creaciones en la biblioteca. Cuando se guarda un diseño de Divi en la biblioteca, se puede cargar en páginas nuevas. Cuanto más haga crecer la biblioteca con sus diseños favoritos, más rápido podrá crear nuevos sitios. Para saber más sobre la biblioteca de Divi, asegúrese de visitar la sección correspondiente de esta documentación.

Para guardar un elemento en la biblioteca haga clic en el icono que aparece en la barra de ajustes del elemento al posar el puntero del ratón.

Divi - Guardar en la biblioteca

Perfecto, ya tiene lo básico, ¡y ahora es hora de empezar a diseñar!

Ha añadido sus primeras secciones, filas y módulos a la página; ha ajustado las opciones y comenzado a construir y personalizar su diseño: ya tiene lo básico, pero hay mucho más por aprender. Tenemos decenas de tutoriales que abarcan cada aspecto de Divi. Lo animamos a seguir leyendo cada uno de los capítulos de esta documentación. Cuando termine, será un maestro de Divi.

Arrastrar y soltar archivos

Divi - Arrastrar y soltar archivos

Es posible arrastrar y soltar archivos desde el equipo directamente al constructor. Divi detecta los tipos de archivos subidos y los transforma automáticamente en una serie de módulos distintos, o los aplica en la página de manera creativa. Se pueden subir imágenes, vídeos, audio, texto y más. Aquello que por lo general tomaría decenas de clics, se puede efectuar en una sola acción.

Soporte creativo para tipos de archivo únicos

La idea de la carga de archivos mediante «arrastrar y soltar» ha sido expandida, permitiendo un soporte creativo para una variedad de nuevos tipos de archivo, tales como CSS, HTML, JSON y archivos de fuentes. Cuando suba un archivo CSS, el código se aplicará directamente a la página. Cuando suba un archivo HTML, será añadido como un módulo Código. Cuando suba archivos de fuentes, estarán disponibles como fuentes personalizadas al momento de editar el diseño del módulo. Y si sube archivos JSON se podrán importar diseños de Divi rápidamente.

Arrastrar y soltar múltiples archivos a la vez

Puede arrastrar y soltar varios archivos al mismo tiempo, y Divi procesará la cola entera e incluso combinará los tipos de archivo en módulos avanzados, como galerías de imágenes. Crear una galería entera en un solo movimiento del ratón es una experiencia muy satisfactoria comparada con el tedioso proceso de elaborarla manualmente desde el módulo Galería. También es genial para subir HTML y CSS personalizado de una sola vez.

Facebook
WhatsApp
Twitter
LinkedIn
Pocket
Reddit
Enviar por correo
Imprimir

21 comentarios en “Usar el constructor visual”

  1. buenos días, he cargado el divi y el pugin divi builder, manualmente desde el cpanel, he activado ambos sin embargo no me carga el constructor visual y el editor de paginas

    mi pagina: bracochicken.com
    mi proveedor : hosting peru

  2. Hola,
    He instalado todo pero a la hora de modificar el texto de las páginas, luego no me aparece el botón de «Guardar» y por tanto no se me guardan los cambios. ¿Qué puedo hacer? Muchísimas gracias!!

  3. Hola! Consulta, puedo realizar un portfolio con las mismas categorias del menú principal?
    O debo cargar nuevamente en proyecto? Veo en ese caso que la url añade project/ esto puede obviarse?
    Gracias!

    1. Hola, Amalia.

      Proyectos es un tipo de entrada personalizada, y por lo tanto es independiente de las entradas estándar. El slug del proyecto no se puede eliminar, pero sí cambiar por otro término más acorde, con el siguiente código en el archivo functions.php del tema hijo (reemplazando project por la palabra):

      function custom_project_post_name() {
          return array(
          'feeds' => true,
          'slug' => 'project',
          'with_front' => false,
      );
      }
      add_filter( 'et_project_posttype_rewrite_args', 'custom_project_post_name' );
      

      Saludos.

  4. Hola, espero se encuentren muy bien y acudo a la comunidad para ver si pueden orientarme a solucionar un par de problemas que tengo con el Divi Builder:
    1) Resulta que agregué dentro de una fila un elemento de texto y otro elemento de imagen. Al elemento de imagen le agregué un efecto scroll vertical que funciona perfecto y se ve excelente, pero que luego de guardar y refrescar no aparece en el sitio web. Solo se visualiza el elemento de texto.
    2) Tengo una sección con un slider donde estoy hablando de experiencias con clientes. En el Divi Builder puedo cargar las imágenes de sus logos y se visualizan perfecto, pero al momento de guardar y refrescar no se ven en el sitio web.

    Por favor, estaría muy agradecido si alguien me pudiese ayudar con esto. Soy muy muy nuevo en esto de crear sitios web.

    Saludos.

    Manuel

    1. Hola, Manuel.

      Gracias por tu comentario.

      En primer lugar fijate que Divi esté actualizado a su última versión, y que no sea un plugin el que está ocasionando un conflicto. También probalo con el Modo seguro activado. Si el problema persiste, te recomiendo consultar con soporte.

      Saludos.

  5. Buenas tardes;
    Cuando pulso al botón de Habilitar el Contructor visual me aparece una ventana con el siguiente texto:
    «Módulo de contenido de publicación faltante
    A esta publicación se le ha asignado una plantilla utilizando el generador de temas, sin embargo, la plantilla que se está utilizando no contiene un módulo de contenido de publicación.
    Se requiere un módulo Publicar contenido para agregar contenido único dentro de la plantilla del generador de temas. Una vez que se haya agregado un módulo de Contenido de publicación a la plantilla, podrá agregar contenido de publicación único dentro de esa área para cada publicación utilizando la plantilla.
    Plantilla actual: Plantilla de sitio web predeterminada»
    ¿Cómo puedo agregar el Módulo de Publicar contenido?
    Gracias

    1. Hola, Jorge.

      Disculpas por la demora.

      Cuando hacés clic en Insertar módulo (el icono del signo más en gris), tiene que figurar el módulo Contenido de entrada o Contenido de publicación para añadir a la plantilla.

      Saludos.

  6. hola
    tengo instalado divi y activado en la pestaña constructor pero no me aparece divi builder en la pantalla ni el boton de activar editor
    pueden ayudarme a saber queme falta
    gracias
    un saludo

  7. Hola
    Tengo un problema con un shortcode que he programado. Éste contiene código PHP, donde trabajo con session y redirecciona a una página si no está iniciada.
    Cuando se ejecuta en la web funciona perfectamente, el problema está en cuando entro en el constructor visual, creo que, al ejecutar el shortcode y al no haber sesión iniciada, intenta redireccionar y se mete en un bucle infinito.
    Me gustaría saber si hay alguna función PHP para indicar que está en modo «constructor visual» o «diseño» y así controlarlo y que no ejecute este código

    Gracias y un saludo

  8. Hola, gracias por crear este espacio de nuestro maravillosos constructor.
    El caso es que necesito resolver un pequeño problema en las web trufasibericas.es y es que cuando navegas a través del móvil (no en el ordenador modo móvil) se ha creado una franja a la derecha que sale al hacer scroll hacia la izquierda (no quiero que haga scroll) y yo no he creado ese espacio y está en todas las páginas.
    ¿Sabrías a que se debe o cómo debo corregirlo?
    Muchas gracias de antemano
    Un saludo.

    1. Hola, Vicente.

      Disculpas por la demora.

      El problema está en el módulo de las variaciones. Fijate si hay algún margen o relleno que esté de más en el contenedor.

      Si no, podés achicar un poco el desplegable con el siguiente código CSS:

      .woocommerce div.product form.cart .variations select {
          max-width: 96%;
      }
      

      Saludos.

  9. Hola,

    Estoy en la sección de «generador de temas» y al parecer llegué a un limite de plantillas, porque aunque creo nuevas, ya no las guarda (aunque dice «todos los cambios guardados) lo que intento hacer es colocar un botón en cada producto que redirecciona a un link en específico.

    ¿Saben a qué se debe?

Deja un comentario

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

 

Scroll al inicio