Lo Básico
El constructor Divi está integrado en la plataforma de WordPress para ayudar a construir visualmente el contenido de Páginas y Entradas.
El constructor utiliza tres bloques principales: Secciones, Filas y Módulos. Utilizando estos tres elementos in unísono permitirá al usuario crear una ilimitada cantidad de diseños de páginas. La jerarquía básica de estos elementos son:
Secciones (Sections)
Los bloques de construcción más básicos y grandes utilizados en los diseños son las Secciones. Estos son usados para crear las áreas de jerarquía más alta en tu página o entrada. Hay dos tipos de secciones: Regulares y Ancho Completo. Las Secciones Regulares están hechas de filas de columnas y las Secciones de Ancho Completo están hechas de módulos de ancho completo. Más sobre esto abajo.
Filas (Rows)
Las filas se colocan dentro de las Secciones y puedes colocar cualquier número de filas en una sección. Existen muchas Tipos de Filas distintos para elegir. Una vez que definas un Tipo de Fila, entonces podrás colocar Módulos en la estructura de columna seleccionada. No hay límite en el número de módulos que puedas poner dentro de una Columna.
Módulos (Modules)
Los Módulos son elementos visuales que hacen tu página o entrada. Cada módulo puede encajar en cualquier ancho de columna y todos se adaptan completamente al tipo de pantalla que el usuario final esté utilizando para ver tu sitio Web.
Comenzando
Después de crear una nueva página o entrada, podrás ver la ventana normal de tu plataforma WordPress. Cuando utilices el constructor de módulos Divi, verás un botón azul que dice [Usar el constructor Divi] ([Use the Divi Builder]). Al hacer click en este botón, se habilitará el Constructor Divi.
NOTA: Si tienes contenido existente en tu entrada o página, el Constructor Divi colocará ese contenido en un Módulo de Texto de ancho completo por defecto. Si deseas separar el contenido en sus respectivos módulos, necesitarás colocarlo en sus módulos individuales manualmente.
Opciones de Diseño del Constructor
Guardar en biblioteca (Save to Library)
En cualquier momento puedes grabar un diseño que hayas construido a tu Biblioteca Divi para ser utilizado en otro momento. Esta opción es excelente para usar el mismo diseño en otras páginas, en otras secciones de páginas, o incluso en otro sitio Web construido con Divi.
Cargar de la biblioteca (Load From Library)
También puedes cargar un diseño que hayas guardado en el pasado en tu Biblioteca Divi en cualquier momento. Divi trae consigo docenas de diseños pre-hechos que pueden ser agregados a tu página o entrada. Cuando cargas un nuevo diseño tienes la opción de elegir de un número de diseños pre-hechos o cualquier diseño que hayas guardado o importado anteriormente.
Vaciar diseño (Clear Layout)
Si en cualquier momento sientes la necesidad de comenzar desde cero, simplemente haz click en el botón Vaciar Diseño. Esta acción eliminará todo lo que has construido en la página o entrada.
Opciones de Sección
Cada vez que agregues una sección necesitarás definir sus propiedades. Podrás ir a los Ajustes de Sección haciendo click en el ícono del menú de sección en la parte superior del panel azul.
Imagen de fondo (Background Image) – Si está definida, esta imagen será utilizada como el fondo para esta Sección. Para eliminar la imagen de fondo, simplemente borra el URL del campo de esta configuración.
Las imágenes de fondo de Sección abarcan el ancho del navegador, así que recomendamos que tus imágenes de fondo sean por lo menos de 1080 pixeles de ancho.
Color de Fondo Transparente (Transparent Background Color) – Habilitar esta opción eliminará el color de fondo de esta sección, permitiendo que se muestre el color o imagen de fondo del sitio Web.
Color de Fondo (Background Color) – Si sólo deseas utilizar un color sólido para el fondo de tu sección, utiliza el seleccionador de color para elegir un color de fondo, o escribe el código HEX manualmente.
Video MP4 de Fondo (Background Video MP4) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .MP4 aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato MP4 puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.
Video WEBM de Fondo (Background Video WEBM) – Todos los videos deben ser cargados tanto en formato .MP4 como en formato .WEBM para asegurar la compatibilidad máxima en todos los navegadores. Carga la versión .WEBM aquí. Los fondos de video están deshabitados para los dispositivos móviles, y se utilizará tu imagen de fondo en vez de tu video. Por esta razón, debes definir tanto una imagen de fondo como un video de fondo para asegurarte de tener los mejores resultados. Importante: Para que los videos en formato WEBM puedan funcionar en todos los navegadores, tu servidor debe tener designados correctamente los tipos MIME. Puedes aprender más acerca de utilizar .htaccess para definir los tipos MIME aquí. Si notas que tus videos no están funcionando en ciertos navegadores, esta pudiera ser la razón.
Anchura de Video de Fondo (Background Video Width) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la anchura exacta en pixeles de tu video.
Altura de Video de Fondo (Background Video Height) – Para que los tamaños de tus videos puedan ser manipulados correctamente por el sistema Divi, debes escribir aquí la altura exacta en pixeles de tu video.
Pausar Video (Pause Video) – Permite que otros reproductores pausen el vídeo cuando comiencen a reproducir.
Mostrar Sombra Interna (Show Inner Shadow) – Aquí puedes escoger si tu sección tiene o no sombra interna. Esto puede tener un aspecto genial cuando tienes fondos de colores o imágenes de fondo.
Usar Efecto de Paralelaje (Use Parallax Effect) – Cuando esté habilitado, tu imagen de fondo se quedará fija cuando te desplaces, creando un divertido efecto de paralaje. Ten en cuenta que cuando esta configuración esté habilitada, tus imágenes se ajustarán a la altura del navegador.
NOTA: Si habilitas el efecto de paralelaje, te recomendamos que tus imágenes sean al menos del tamaño de una pantalla estándar ya que tus imágenes tomarán la anchura o la altura de la ventana del navegador (por ejemplo, 1280 pixeles por 768 pixeles).
Relleno Personalizado (Custom Padding) – Ajusta el relleno a valores específicos o déjalo en blanco para usar el relleno por defecto.
Conservar el Relleno Personalizado en Dispositivos Móviles (Keep Custom Padding on Mobile) – ermitir que el relleno personalizado se conserve en pantallas de dispositivos móviles.
Identificador CSS (CSS ID) – Introduce un identificador CSS opcional que usar para este módulo. Puede usarse un identificador para crear un estilo CSS personalizado o para crear enlaces a secciones determinadas de tu página.
Classe CSS (CSS Class) – Introduce clases CSS opcionales que usar para este módulo. Puede usarse una clase CSS para crear un estilo CSS personalizado. Puedes añadir múltiples clases separadas por un espacio.
Diseñador de Administración – Aquí puedes agregar un nombre descriptivo para esta sección de manera que puedas reconocerla fácilmente.
Previsualización de Diseño
Una vez que hayas diseñado tu Sección con módulos y contenido, podrás previsualizar tu diseño sin cerrar la ventana de la sección que estés editando, con el propósito de poder ver cómo lucirá tu diseño en una pantalla de computadora, en una pantalla de tablet, y en una pantalla de teléfono móvil.
Simplemente haz click en el botón con el ícono de un ojo entre los botones Guardar y Añadir a la biblioteca y el de Guardar y salir que están en la parte inferior de la ventana:
Después podrás elegir ver cómo luce tu diseño en modo de Teléfono, Tablet o Pantalla de Computadora:
Cuando termines, cierra el previsualizador y no olvides guardar tus cambios al diseño haciendo click en Guardar y salir.
Agregar y Definir una Fila
Después de guardar la configuración de tu sección necesitarás insertar una fila y definir el tipo de fila. Haciendo click en Insertar Columnas (Insert Columns) podrás elegir de una selección de tipos de filas. Las filas también tienen muchas opciones que puedes usar para personalizar su apariencia y alterar la estructura del diseño.
Agregar un Módulo
Una vez que hayas elegido un tipo de fila, el constructor Divi te pedirá que insertes módulos en esa fila. En el ejemplo inferior hemos agregado una fila de dos columnas en las cuales puedes insertar módulos.
Cada vez que desees insertar un módulo, necesitarás hacer click en ‘Insertar Módulo’ (‘Insert Module’) y elegir uno de la lista de módulos de Divi. Una vez que has elegido un módulo, serás llevado a la ventana modal con las opciones específicas de ese módulo que elegiste. Cada módulo tiene un propósito diferente y un grupo de opciones distintas.
Expandiendo Tu Diseño
En el ejemplo inferior, hemos llenado las dos columnas con un módulo de imagen a la izquierda y un módulo de texto a la derecha.
Ahora has definido una sección exitosamente con una Fila que tiene Módulos en un tipo de fila de dos columnas. Puedes accesar a cualquiera de las opciones de estos elementos haciendo click en su ícono de menú o borrarla haciendo click en el ícono «X». Para expandir tu diseño puedes elegir agregar una sección a la página, una fila a una sección existente, o un módulo a una columna existente.
Agregando Secciones de Anchura Completa y Secciones Especiales
Debajo de cada sección tienes la opción de agregar una Sección Estándar (Standard Section), una Sección de Anchura Completa (Fullwidth Section), una Sección Especial (Specialty Section) y Añadir desde biblioteca (Add From Library).
Las secciones de Anchura Completa no tienen filas. Debido a esto, sólo funcionarán en ellas los módulos de anchura completa. Las secciones de anchura completa están definidas visualmente por un panel color púrpura y pueden ser colocadas en cualquier parte de tu diseño. En el ejemplo inferior hemos agregado una sección de anchura completa con un ‘Control deslizante de anchura completa’ (Fullwidth Slider) a nuestro diseño.
Las ‘Secciones Especiales’ (Fullwidth Section) tienen una fila horizontal que se expande a la altura de toda la sección completa. Esto te permite crear diseños con el ‘margen’ (sidebar) clásico, donde un margen se coloca adyacente a una estructura de columnas más compleja. En el ejemplo inferior hemos agregado una sección especial hasta abajo del diseño de la página.
También puedes cargar Secciones que hayas guardado en tu Biblioteca en el pasado, haciendo click en el enlace ‘Añadir desde biblioteca’ (Add From Library»).
Modificando y Acomodando tu Diseño
Editar tu diseño es muy sencillo utilizando las características de arrastrar y soltar en el constructor. Si deseas mover una sección por encima o por debajo de otra, simplemente arrástrala y suéltala en lugar deseado. Lo mismo va para filas y módulos. Incluso puedes mover filas a diferentes secciones, y módulos a diferentes columnas. La única limitación es que no puedes arrastrar módulos de Anchura Completa y soltarlos en secciones regulares, y viceversa.
En el ejemplo siguiente puedes ver que hemos movido nuestra sección de Anchura Completa a la parte superior del diseño y hemos movido nuestra Sección Especial en medio de las tres secciones existentes.
¡Guardar y Publicar!
Una vez que hayas terminado de construir tu diseño, asegúrate de hacer click en el botón de Actualizar/Publicar en tu panel de WordPress.
Regresando al Editor Original
Si cambias al editor de página por defecto de WordPress, recibirás una advertencia de que todo el contenido que creaste en el constructor Divi se perderá y que el contenido previamente creado en el editor de WordPress será restaurado. Como seguridad, puedes grabar la página antes de borrar el diseño por si alguna vez deseas restaurar dicha versión.
Buen trabajo, muchas gracias.
Muchas gracias Dida.
Hola Lalo, muchas gracias por una web tan completa y clara. Te consulto un atasco importante que tenemos tras investigar diversas webs (en inglés y castellano).
Usando el Constructor Divi en otro theme (Spacious), resulta que no hay forma de que los hipervínculos insertados en módulos Divi se destaquen en otro color distinto del texto (sí funcionan al pincharlos, pero no se detectan visualmente si no sabes que están ahí). Los hipervínculos insertados en el editor por defecto sí se ven correctamente. Tal vez haya que añadir algún código CSS, pero no encuentro este problema resuelto en ningún lado…
¡Muchas gracias!
Hola Sergio. Sí, tal vez insertando el código CSS manualmente ¿puedes mostrarme un ejemplo de tu página con los enlaces que refieres?
Gracias, te escribo correo porque aún no es una web pública.
Hola Sergio, veo que agregaste ya ciertos estilos manualmente a tu CSS. Prueba agregar
!important
al final de cada instrucción, justo antes del punto y coma;
y dime si te funciona por favor.¡Solucionado! Sí, tenía CSS añadido pero Divi no le hacía caso. Ha funcionado al añadir lo que dices en esta ruta: Apariencia > Personalizar > Diseño > CSS personalizado.
Por ejemplo, a:link {color:#EB26D4 !important;}
¡Muchísimas gracias! Me/nos has desatascado un bloqueo importante y ya podemos continuar con la web.
¡Genial! Me alegra haber podido apoyarte con esto. Saludos y buen inicio de semana.
Que tal Lalo.. muchas gracias por el tuto… uso el constructor divi en otros temas pero no me deja usarlo full width el diseño se queda sólo al tamaño de la caja de texto. Me pasa en cada tema que uso que no es el de elegant themes, que hago?
Buenas tardes,
te expongo el problema que me he encontrado al intentar editar una página desarrollada con WP y Divi, por si tienes idea de cual puede ser la solución, o dónde podría encontrarla:
No me aparece el botón “Usar el constructor visual” que venía usando habitualmente.
Tan sólo ofrece en constructor de módulos de Divi o el básico de WO, pero no el visual.
Alguna idea?
Muchas gracias por tu atención.
Saludos
Hola Enric, no estoy seguro si este sea el caso, pero el botón de «Usar el Constructor Visual» sólo aparece una vez que presionaste el botón «Usar el Constructor Divi» al crear una página nueva. Saludos.
Hola Lalo,
el botón de «Usar el constructor Divi» sí que aparecía , pero al pulsarlo no mostraba el constructor visual.
Finalmente lo pude resolver gracias a otras indicaciones recibidas: el problema era de licencia.
Una vez regularizada la situación, ya apareció el que encontraba a faltar.
Igualmente, muchas gracias por tu atención y respuesta.