Cómo trabajar con una sección en Divi Builder (guía completa)

Divi Builder es un complemento de generación de páginas que puede usar para crear una hermosa página en su sitio web de WordPress. Al igual que otros complementos similares, Divi Builder también viene con un editor visual que puede usar para crear una hermosa página sin tener que lidiar con CSS. Simplemente puede agregar los elementos que necesita y hacer personalización en consecuencia. En Divi Builder, los elementos de diseño se dividen en tres tipos: sección, fila y módulo. En este artículo, cubriremos más sobre el elemento de sección en Divi Builder. ¿Qué es una sección en Divi Builder? Como se dijo anteriormente, la sección es uno de los tipos de elementos de diseño disponibles en Divi Builder. Es un contenedor grande para alojar otros elementos de diseño (filas y módulos) en su página. Puede pensar en ello como un bloque que puede agrupar su contenido en áreas que pueden distinguirse visualmente. La sección en sí es un elemento necesario. No puede crear una página con Divi Builder sin agregar una sección. Por lo tanto, al crear una nueva página usando Divi Builder, automáticamente tendrá una sección.
Cuando trabaje en una página usando Divi Builder, puede agregar cuántas secciones desea, dependiendo de sus necesidades para echar un vistazo a la pantalla de pantalla a continuación.

La página en el screencast anterior consta de 7 secciones (como puede ver en la vista de estructura alámbrica), cada sección aloja una serie de filas y módulos. La sección en sí todavía se divide en tres tipos de la siguiente manera:
Regular
Especialidad
Ancho máximo

La sección habitual de la sección habitual es una sección estándar de Divi Builder. Al crear una nueva página con Divi Builder, automáticamente tendrá una sección normal. En Divi Builder, las secciones habituales están representadas con azul. Puede agregar filas a una sección normal. Hay 20 estilos de fila que puede agregar a una sección ordinaria, cada estilo tiene una estructura de columna diferente. Luego puede agregar módulos a cada columna de la fila. La sección especializada como su nombre indica, una sección especializada es una sección diseñada para fines específicos. En una sección especializada, puede agregar columnas en un estilo de cuadrícula. Hay 9 estilos de cuadrícula que puedes elegir.

Las secciones especializadas son excelentes para crear la página inicial de una revista en línea o sitios similares. Puede usarlos para agregar una sección de héroes a la página inicial de la revista en línea que crea. La sección especializada está representada en naranja. Sección de ancho completo La sección de ancho completo es el tipo de sección que está diseñada para agregar un módulo de pantalla completa. Desde la diapositiva, el mapa, el menú, etc. Hay 9 módulos de ancho completo que puede agregar a una sección de ancho completo. Como esta sección está destinada al contenido de ancho completo (módulos en este caso), no puede agregar una fila o columna a una sección de ancho completo. La sección de ancho completo está representada en púrpura.

Cómo agregar y eliminar una sección en la división del constructor Al crear una nueva página, Divi Builder agregará automáticamente una nueva sección habitual. Luego puede agregar líneas y módulos a la sección agregada. Si necesitas más secciones? Simplemente puede hacer clic en el botón Blue Plus en el área de lienzo (o naranja/púrpura, dependiendo del último tipo de sección agregada). Entonces puede seleccionar una fila. Puede seleccionar una fila con la estructura de la columna de acuerdo con sus necesidades. Para eliminar una sección existente del área de lienzo, simplemente puede pasar con el mouse sobre la sección que desea eliminar y hacer clic en la basura del icono de coș.

Cómo personalizar una sección Después de agregar una sección al área de lienzo, puede personalizarla de acuerdo con el concepto del diseño que desea crear. Puede realizar personalización a través del panel de configuración que aparece inmediatamente después de agregar una sección. O también puede hacer clic en el icono de la rueda en el mango de sección para abrir este panel. Como puede ver, hay 3 pestañas que puede abrir en el panel: contenido, diseño y avanzado.

La pestaña contenida de la pestaña de contenido es la pestaña que puede abrir para realizar la configuración básica para una sección. Hay 3 bloques de configuración que puede abrir aquí:

Enlace

Puede abrir este bloque para agregar un enlace a su sección. Puede agregar una conexión estática o dinámica.
antecedentes
Puede abrir este bloque para agregar un fondo a su sección. Hay 4 tipos de fondo que puede agregar: color sólido, color de gradiente, imagen y video. Si usa un fondo de imagen, también puede establecer un efecto de paralaje.

Etiqueta de administrador Abra este bloque para agregar una etiqueta de administrador a su sección La etiqueta del administrador en sí es un tipo de nombre de identificación para una sección. Agregar una etiqueta de administrador a una sección sería útil para facilitar su identificación en una página que consta de varias secciones. Puede ver las etiquetas del administrador al ver su página en modo de vista de estructura alámbrica.
Pestaña Diseño Puede abrir esta pestaña para estilizar una sección. Hay 9 bloques de configuración que puede abrir en esta pestaña.

apariencia
Puede abrir este bloque para mostrar/ocultar la sombra interna de una sección. La sombra interna en sí aparece en la parte inferior de la sección.

dividido
En el contexto del generador de páginas, el separador se refiere a una especie de arte en línea en la parte superior o inferior de una sección.
Divi Builder le permite agregar un separador en la parte inferior o en la parte superior de la sección. O, si lo desea, también puede agregar separadores a ambos lados. Simplemente puede hacer clic en el menú desplegable en la opción de estilo Diviner para abrir los estilos de separación disponibles. Luego puede configurar el color y el tamaño del separador.

Talla
Puede abrir este bloque para establecer el tamaño de la sección. Puede establecer el ancho, así como la altura de la sección en esta pestaña. Por defecto, el ancho y la altura de una sección se establecen automáticamente. Para establecer un cierto ancho o altura, simplemente puede ingresar su valor preferido. Puede usar la unidad porcentual o la unidad de píxeles (puede insertar la unidad manual).

sangría

Puede abrir este bloque para establecer la distancia y el borde de la sección. Simplemente puede agregar los valores a cada campo para establecer el margen, así como el llenado de la sección.
Puede abrir este bloque para establecer el borde de la sección. Desde el estilo de la frontera, el tamaño del borde, el color del borde y el rayo de la frontera. El radio del borde en sí se refiere al nivel de inclinación de las esquinas de la sección. Cuanto mayor sea el nivel de inclinación, más inclinada es la esquina.


Sombra de la caja
Puede abrir este bloque para aplicar una sombra de un cassette a una sección. Hay 7 estilos de sombras para cajas ofrecidas por Divi Builder. Simplemente puede seleccionar el estilo de tono de caja que le gusta. Después de seleccionar un estilo de sombra de la caja, puede establecer la posición vertical y horizontal, la potencia y el color de expansión.

Filtros
Puede abrir este bloque para aplicar filtros CSS a una sección. También puede aplicar un modo de mezcla si lo desea.

Convertir
Desde esta pestaña, puede aplicar una sección 2D o 3D. Simplemente seleccione el estilo de transformación que desea aplicar (haciendo clic en las pestañas disponibles) y luego usando el mouse para establecer el valor de transformación.

Animación
Puede abrir este bloque para establecer la animación de entrada de la sección. Hay 7 efectos de animación ofrecidos por Divi Builder. Simplemente puede seleccionar la animación que desee y luego hacer la configuración necesaria (duración, retraso, etc.) en la configuración disponible.

Pestaña avanzada La pestaña avanzada es el lugar donde están las configuraciones avanzadas. Puede abrir esta pestaña para agregar un CSS personalizado, para establecer efectos del desfile, etc. Hay 6 bloques que puede abrir en estas clases de IID y CSS
Puede abrir esta pestaña para agregar una clase CSS ID o CSS a la sección. Puede agregar una ID de CSS o una clase CSS si desea agregar un CSS personalizado a través del módulo COD.

CSS personalizado
Puede abrir este bloque para agregar un CSS personalizado directamente a la sección, no a través del módulo COD.

Visibilidad
Puede abrir este bloque para establecer la visibilidad de la sección. Si lo desea, puede ocultar una sección en un tipo particular de dispositivo (teléfono inteligente, tableta o escritorio). Para deshabilitar la sección en un tipo particular de dispositivo, simplemente verifique la opción del dispositivo que desea apagar la sección. Desde este bloque, también puede establecer el desbordamiento horizontal y la superación vertical.
Transiciones

Puede abrir este bloque para establecer la transición de la sección. Hay 3 opciones de configuración que puede configurar como se muestra en la imagen a continuación.
Posición

Puede abrir este bloque para establecer la posición de sección. Por defecto, la posición de la sección se establece en Static (predeterminado). Hay otras tres opciones de posición que puede usar: relativo: si selecciona esta opción, la sección seguirá el flujo normal de la página. Esta opción ofrece propiedades superior, inferior y derecha. También puede establecer el índice Z. Absolutamente: si selecciona esta opción, no se creará espacio real para la página de sección. Puede pensar en ello como una sección flotante sobre otras secciones que ocupan un espacio real. Remedio: si selecciona esta opción, la sección interrumpirá el flujo de página normal y no tiene espacio real en la página.
Puede abrir este bloque para aplicar efectos de contaminación a una sección. Los efectos del desfile le permiten aplicar varios efectos de animación de una sección.

Guardar una sección en la Biblioteca Divi Builder La eficiencia del tiempo es una de las cosas que ofrece Divi Builder y otras páginas que generan páginas en general. En Divi Builder, puede guardar una sección en la biblioteca para su uso recurrente. Esta función le ahorrará mucho tiempo si tiene que agregar las mismas secciones a varias páginas en el sitio web en el que está trabajando. Para guardar una sección en la biblioteca, haga clic en el icono de flecha en el mango de sección. Dé un nombre a su sección y haga clic en el botón Guardar en la biblioteca.
Para usar la sección que guardó, puede hacer clic en Agregar desde la biblioteca cada vez que agrega una nueva sección. Simplemente haga clic en la sección que desea usar.

Bloqueando una sección Después de terminar de trabajar con una determinada sección de su página, puede bloquearla. La sección bloqueada no se puede editar. Puede bloquear una sección para evitar la edición accidental de la sección incorrecta. Para bloquear una sección, puede hacer clic en el icono de tres puntos en el mango de la sección y seleccionar bloqueo. Para desbloquear una sección bloqueada, haga clic en el icono de bloqueo en la esquina superior izquierda de la sección que desea desbloquear.
La conclusión si eres nuevo en la división del constructor, comprender el concepto de sección es crucial. Es el elemento más vital de Divi Builder. No puede agregar un módulo antes de agregar una sección. Divi Builder le permite agregar cuántas secciones necesita. Si desea crear una página larga, es aconsejable dar a cada sección una etiqueta de administrador para facilitar la identificación de las secciones. También puede maximizar funciones como la capacidad de duplicar una sección, copiar una sección, guardar una sección en la biblioteca para obtener eficiencia en el tiempo.