Seleccionar página

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:

divi-guardar-previsualizar

Después podrás elegir ver cómo luce tu diseño en modo de Teléfono, Tablet o Pantalla de Computadora:

divi-previsualizar-pantallas

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.