Cómo trabajar con una fila en Divic Builder (guía completa)

Hay tres tipos de elementos ofrecidos por Divi Builder para facilitar el diseño de una plantilla o temas de generador de páginas: sección, fila y módulo. En el artículo anterior, traté sobre la sección Divi Builder. Puedes leerlo para obtener más información. En este artículo, cubriremos la fila de elementos. Tanto la sección como la fila son los elementos necesarios. Necesita ambos elementos para agregar módulos (elementos de diseño real para construir su diseño). En Divi Builder, se puede agregar una fila a una sección ordinaria y una sección especializada. Cuando agrega una nueva sección habitual al Builder Divin, se le pedirá que agregue una fila.
En una fila, hay columnas. Puede usar las columnas en una fila para colocar los módulos que necesita en su diseño. Cuando agrega una nueva línea, puede seleccionar la estructura de la columna de acuerdo con sus necesidades. Cómo agregar una nueva fila al Builder Div en la división del constructor, el elemento de fila se representa con verde. Entonces, para agregar una nueva línea, simplemente puede hacer clic en el icono verde más en el área de lienzo. Luego puede seleccionar la estructura de la columna en el cuadro de diálogo que aparece.

Como puede ver en el screencast anterior, puede agregar un módulo inmediatamente después de agregar una fila. Si prefiere estilar el giro primero y agregar los módulos más tarde, simplemente puede cerrar el panel. Si ha agregado un módulo al lugar incorrecto en su página, puede moverlo. Incluso puede mover una fila de una sección a otra, siempre que las secciones tengan el mismo tipo (sección regular, por ejemplo). Para facilitar el movimiento de una fila, puede cambiar a una vista de marco de cable. Limpie una fila para eliminar una fila existente, simplemente puede pasar con el mouse que desea eliminar y hacer clic en el contenedor de basura del icono en el mango de la fila (verde resolver).

La personalización de una fila y otros elementos en el Builder Div, el proceso de personalización de una fila también se realiza a través del panel de configuración. Puede hacer clic en el icono de la rueda en el mango para abrir el panel de configuración.

Si ha seleccionado una estructura de columnas incorrecta, puede cambiarla desde el panel de configuración ordinario. Simplemente seleccione la nueva estructura de columna en el menú desplegable en la opción Estructura de la columna.

Hay 3 pestañas en el panel de configuración ordinario que puede abrir para personalizar el giro. Cada pestaña alberga bloques de configuración en los que se ofrecen las opciones de configuración. La pestaña de contenido

Enlace
Puede abrir el enlace en la pestaña Contenido para agregar un enlace al giro que personaliza. Puede agregar una conexión estática o una conexión dinámica.
antecedentes

Puede abrir este bloque para establecer el fondo de la fila que edita. Puede agregar un fondo de color sólido, un fondo de color de gradiente, un fondo de imagen o un fondo de video. Especialmente para el fondo de la imagen, puede aplicar un efecto de paralaje. Ética del administrador
Puede abrir este bloque para agregar una etiqueta de administrador en una fila. ¿Qué es una etiqueta de administrador? Puedes pensar en ello como un nombre común. Las etiquetas del administrador aparecerán cuando vaya al modo de visualización de cables. Le ayuda a identificar una cierta fila en una página larga que consiste en una pila de filas.

La pestaña de diseño hay 7 bloques de configuración que puede abrir en la pestaña de diseño.
Talla

Puede abrir este bloque para establecer el ancho y la altura de la fila. Por defecto, el ancho de la fila se establece en 80%. Puede cambiar el ancho en la opción de ancho. Si desea usar la unidad de píxeles en lugar de un porcentaje, puede manejarla manualmente (es decir, 900px). Mientras establezca la altura, puede hacerlo en la opción de altura. También puede establecer el ancho de la canaleta y la alineación de las filas en este bloque.
Una pequeña nota. Si desea tener una fila de ancho completa, puede establecer el ancho de los valores y el ancho máximo en 100%.
sangría
Puede abrir este bloque para establecer el margen y el llenado de la fila.

Frontera
Puede abrir este bloque para establecer el marco de fila. 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 (arriba mención, arriba, abajo, abajo, abajo a la izquierda) de la fila.

Sombra de la caja
Puede abrir este bloque para aplicar un tono de caja a su fila. Hay 7 estilos de sombras para cajas que puede elegir. Después de seleccionar un cuadro de sombra, puede establecer el color de la sombra, la longitud del desenfoque, la posición horizontal y la posición vertical.

Puede abrir este bloque para agregar filtros CSS a su vez. También puede agregar un modo de mezcla si lo desea.
Transformar

Puede abrir este bloque para aplicar un efecto 2D o 3D. Simplemente seleccione el efecto de transformación que le guste (haciendo clic en la pestaña) y use el mouse para establecer el nivel de transformación.
Animación

Puede abrir el bloque de animación para establecer la animación de entrada de color. Después de seleccionar un estilo de animación, puede establecer la duración de la animación, el retraso y otras configuraciones disponibles.
Pestaña Avanzada Puede acceder a la pestaña Avanzada para realizar una configuración avanzada, como agregar un CSS personalizado, configurar visibilidad, aplicar los efectos del desfile, etc. Hay 6 conjuntos de configuraciones que puede abrir en esta pestaña.

Clases de identificación y CSS
Puede abrir este bloque para agregar una clase CSS ID o CSS. Puede abrir este bloque si desea agregar un CSS personalizado en una fila por el módulo de código.

CSS personalizado

Puede abrir este bloque para agregar directamente un CSS personalizado en lugar del módulo de código. Simplemente puede pegar el código CSS a los campos disponibles.
Visibilidad

Si lo desea, puede deshabilitar una fila en un tipo particular de dispositivo (escritorio, tableta o teléfono inteligente). Puede hacer esto desde el bloque de visibilidad. Simplemente marque el tipo de dispositivo que desea apagar. También puede establecer el desbordamiento vertical y horizontal de este bloque.
Puede abrir este bloque para establecer la velocidad de transición y el retraso de transición. También puede establecer la curva de velocidad de transición en este bloque.

Posición
Puede abrir este bloque para establecer la posición de línea. Por defecto, la posición de la fila (y otros elementos de la división del constructor) se establece en Static (predeterminado). Puedes cambiarlo si es necesario. Hay 3 opciones de posición que puede establecer: relativo: si selecciona esta opción, la fila seguirá el flujo normal de la página. Esta opción ofrece propiedades superior, inferior y derecha. También puede establecer el índice Z.

Absoluto: si selecciona esta opción, no se creará espacio real en la página. Puedes pensarlo como una fila flotante sobre otras filas que ocupan un espacio real. Remedio: si selecciona esta opción, la fila interrumpirá el flujo de página normal y no tiene espacio real en la página.
Efectos de folación

Si desea aplicar más efectos de animación a una fila, puede abrir este bloque.
Personalización de columnas en una fila Cuando agrega una sección ordinaria al Builder Div, se le pedirá que agregue al menos una fila. Cuando agrega una fila, puede seleccionar una estructura de columna dependiendo de sus necesidades. Como se mencionó anteriormente, hay 20 opciones de estructura de columnas desde las cuales puede elegir. ¿Es posible cambiar la estructura de la columna de una fila? Sí, puede cambiar la estructura de la columna de una fila. Para cambiar la estructura de la columna de una fila, puede hacer clic en la rueda en el mango para abrir el panel de configuración. En el panel de configuración, seleccione una nueva estructura de columna deseada en el menú desplegable en la opción de estructura de columna. Incluso puede agregar una nueva columna haciendo clic en Agregar una nueva columna.
Cada columna en una fila puede tener estilos individuales. Supongamos que tiene dos columnas en una fila. Si lo desea, puede aplicar un fondo diferente, animación de entrada, etc., en cada columna. Puede hacer clic en el icono de la rueda para personalizar una columna. Puede personalizar exactamente como lo hizo en una fila.

RESTRACIMIENTO DE UNA COLUMNA EN UNA FILA Si desea cambiar el tamaño de una columna en una fila, puede hacerlo. Desafortunadamente, Divi Builder no ofrece ninguna operación de deslizamiento y colocación como elemento para cambiar el tamaño de una columna. Para cambiar el tamaño de una columna en una fila, debe agregar un CSS personalizado. Primero, seleccione una columna que desee cambiar el tamaño y haga clic en la rueda (como se muestra en la captura de pantalla de arriba). Una vez que el panel se convierta en el panel de configuración de la columna (desde el panel de configuración ordinario), vaya a la pestaña avanzada y abra el bloque CSS personalizado. Pegue el siguiente código CSS en el campo Artículo principal. Ancho: 10%! Importante; puede reemplazar el valor de ancho (10% en este caso) con su propio valor. También puede usar la unidad de píxeles (es decir, 500px) en lugar de porcentajes. Guardando una fila en la biblioteca para la eficiencia del tiempo, puede guardar una fila (que ha personalizado, completamente con los módulos) en una biblioteca Divi Builder. La posibilidad de guardar un elemento (incluida una fila) es suficientemente útil al crear una página larga a través de la cual necesita agregar el mismo contenido en diferentes páginas (como la lista de características, la tabla de precios, los miembros del equipo, etc.) . Para guardar una fila en la biblioteca, puede hacer clic en el icono de flecha en el mango.
Dé un nombre a su turno y haga clic en el botón Guardar en la biblioteca. También puede establecer una categoría si lo desea.

Para usar una fila que guardó en la biblioteca, haga clic en la pestaña Agregar desde la biblioteca al agregar una nueva línea y seleccione el giro que desea usar.
Bloqueando una fila una vez que haya terminado de personalizar una fila, y los módulos dentro de ella, puede bloquearla.Al hacerlo, evitará que lo publique accidentalmente.Para bloquear una fila, puede hacer clic en el icono de tres puntos en el mango de la fila y seleccionar bloqueo. Una fila bloqueada (y otros elementos) está marcada con un bloqueo rojo.Puede hacer clic en Lăcăt para desbloquear la fila bloqueada.

También puede copiar y duplicar una fila desde el mango.La conclusión trabajando con Divi Builder, debe familiarizarse con Row.Es un elemento de diseño ofrecido por Divi Builder para facilitar su configuración de la página.Se puede agregar una fila a una sección ordinaria y una sección especializada.El concepto de línea en Divi Builder (y otros complementos para el generador de páginas en general) es excelente para ayudarnos a diseñar una página más fácil.