Cómo agregar una sección a tu página
Una vez que hayas habilitado el constructor visual en tu página, como lo hemos explicado en posts anteriores, puedes hacer clic en el botón azul más (+) para agregar una nueva sección a tu página. Allí encontraras una ventana emergente que te permitirá agregar cualquiera de los tres tipos de secciones de Divi. Estos tipos incluyen: estándar, especial y de ancho completo.
Figura 1. Tipos de secciones en divi.
Opciones de contenido de la sección
Una vez que se haya agregado la sección, podrás acceder la lista de opciones de la sección. Estas opciones se dividen en tres grupos principales: Contenido , Diseño y Avanzado. Dentro de la pestaña de contenido, encontrarás todos los elementos de contenido de la sección. Para las secciones, estos elementos de contenido se limitan a elementos de fondo, como imágenes y videos de fondo.
Figura 2. Configuracion de contenido de la sección.
Imagen de fondo
Si se define, esta imagen se utilizará como fondo para este módulo. Para eliminar una imagen de fondo, simplemente elimina la URL del campo de configuración.
Color de fondo
Si se define, este color se utilizará como fondo para este módulo. Para eliminar un color de fondo, simplemente elimina la opción en el campo cambiar color.
Vídeo de fondo MP4 y WEBM
Todos los videos deben ser cargados preferiblemente en formatos MP4 o WEBM para asegurar la máxima compatibilidad en todos los navegadores. Cargua la versión .MP4 O WEBM según sea tu elección. Los fondos de video están deshabilitados desde dispositivos móviles. En su lugar, se utilizará su imagen de fondo. Por esta razón, se debe definir tanto una imagen de fondo y un vídeo de fondo para garantizar los mejores resultados.
Ancho del vídeo de fondo
Para que los videos tengan el tamaño correcto, debes ingresar el ancho exacto (en píxeles) de tu video aquí.
Altura del vídeo de fondo
Para que los videos tengan el tamaño correcto, debes ingresar la altura exacta (en píxeles) de tu video aquí.
Etiqueta de administrador
En este menú desplegable, puedes agregar una etiqueta de administrador que aparecerá en el generador de back-end, así como en la vista de esqueleto del generador visual.
Opciones de diseño de sección
Dentro de la pestaña de diseño encontrarás todas las opciones de estilo de la sección, como el tamaño y el espaciado. Esta es la ficha que vas a utilizar para cambiar el aspecto de tu sección. Cada tipo de sección Divi tiene una larga lista de opciones de diseño que se pueden utilizar para cambiar casi cualquier cosa.
Figura 3. Configuracion de diseño la sección.
Mostrar sombra interior
Aquí puedes seleccionar si tu sección tiene o no una sombra interior. Esto puede verse muy bien cuando tienes fondos de colores o imágenes de fondo.
Usar efecto de paralaje (Parallax Effect)
Si está habilitado, tu imagen de fondo permanecerá fija mientras se desplaza, creando un divertido efecto de paralaje. También puedes elegir entre dos métodos de paralaje: CSS y True Parallax.
Acolchado personalizado (Custom Padding)
Aquí puedes ajustar el relleno de la sección a valores específicos o dejarlo en blanco para usar el relleno predeterminado.
Sección Opciones Avanzadas
Dentro de la pestaña avanzada, encontrarás opciones que los diseñadores web más experimentados pueden encontrar útiles, como atributos CSS y HTML personalizados. Aquí puedes aplicar CSS personalizado a tu sección. También puedes aplicar clases e ID’s de CSS personalizados a la sección, que se pueden usar para personalizar la sección dentro del archivo style.css de tu tema secundario.
Figura 4. Configuracion avanzada de la sección.
ID de CSS
Ingresa una ID de CSS opcional para usar en esta sección. Se puede usar una ID para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de tu página.
Clase CSS
Ingresa las clases de CSS opcionales que se utilizarán para esta sección. Se puede usar una clase CSS para crear un estilo CSS personalizado. Puedes agregar varias clases, separadas por un espacio. Estas clases se pueden usar en tu tema hijo de Divi o dentro del CSS personalizado que agregues a tu página o tu sitio web usando las Opciones de Divi Theme o la Configuración de página de Divi Builder.
CSS personalizado
El código de CSS personalizado se puede aplicar a la sección aquí. Dentro de la sección CSS personalizado, encontrarás un campo de texto donde puedes agregar CSS personalizado directamente a cada elemento. La entrada de CSS en esta configuración ya está incluida en las etiquetas de estilo, por lo que solo necesitas ingresar las reglas de CSS separadas por punto y coma.
Visibilidad
Esta opción te permite controlar en qué dispositivos aparece tu sección. Puedes optar por deshabilitar tu sección en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si deseas utilizar diferentes secciones en diferentes dispositivos o si deseas simplificar el diseño móvil eliminando ciertas secciones de la página.
Uso de secciones de ancho completo
Las secciones de ancho completo te dan acceso a un nuevo conjunto de módulos de ancho completo. Estos módulos actúan de manera un poco diferente porque aprovechan todo el ancho del navegador. Los módulos de ancho completo solo se pueden colocar dentro de las secciones de ancho completo.
Figura 5. Secciones de ancho completo.
Una vez que agregues una nueva sección de ancho completo a tu página, puedes hacer clic en el botón «Agregar módulos» dentro de la sección para agregar un módulo de ancho completo. A diferencia de la sección normal, no existe el concepto de filas o columnas, ya que los módulos de ancho completo siempre aprovechan el 100% de la pantalla. ¡Los módulos de ancho completo son una excelente manera de agregar un corte visual impactante a tu página!
Figura 6. Seccion de ancho completo con opciones.
Un gran ejemplo de un módulo de ancho completo es el control deslizante de ancho completo. Este control deslizante de ancho completo funciona como un control deslizante normal, excepto que se expande al 100% del ancho. Mostrar un control deslizante a tal escala puede ser bastante impactante por lo cual es útil para usar en avisos promocionales importantes.
Figura 7. Ejemplo de sección de ancho completo.
Uso de secciones especiales
Las secciones especiales permiten estructuras de columnas más avanzadas. A diferencia de las secciones normales, cuando utilizas una sección especializada, puedes crear variacione complejas en el diseño de columnas, junto a las barras laterales verticales de expansión completa, sin agregar saltos no deseados a la página. Este tipo de diseños no es posible utilizando secciones normales. Ejemplo:
Figura 8. Ejemplo de diseño haciendo uso de la sección especial.
Una vez que agregues una sección especial a la página, notarás que el área tiene un botón «agregar módulo», mientras que la otra tiene un botón «insertar fila». El área de «insertar módulo» representa su barra lateral vertical. Puedes agregar tantos módulos aquí, en una sola fila, y abarcarán el ancho vertical de la sección, junto a la estructura de columnas que construyas junto a ella. Hacer clic en «insertar fila» te permitirá insertar filas adicionales a la izquierda/derecha de su barra lateral. En cierto modo, ¡esto se puede considerar como agregar filas dentro de filas.
Figura 9. Configuración de la sección especial.
El resultado es la capacidad de crear casi cualquier estructura de columna con la que puedas soñar. Con el uso del constructor divi lograrás que tus diseños resalten y tu contenido exprese lo que tu deseas comunicar en una forma eficiente y divertida!
Esto ha sido todo por el momento, nos veremos mas tarde en otra entrega del blog artlike.
Hasta pronto!
👨🏽🎤
Comentarios recientes