Cómo crear un diseño de diagrama de flujo en Divi

Vistazo

Aquí hay un vistazo rápido al diseño del diagrama de flujo que construiremos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Cómo crear un diseño de diagrama de flujo en Divi

Paso 1: crear una fila con una propaganda centrada

Para comenzar a crear el diseño del diagrama de flujo en Divi, comenzaremos con la creación de una fila que contenga una propaganda centrada. Este será el primer elemento en el diagrama de flujo.

El relleno de la sección

Primero, abra la configuración de la sección para la sección predeterminada y establezca el relleno inferior en 0px.

La fila

Dentro de la sección, agregue una fila de una columna.

Abra la configuración de la fila y actualice la siguiente configuración de diseño:

• Ancho del canalón: 1
• Relleno: 0px arriba, 0px abajo

Estas dos configuraciones de diseño se usarán para todas las filas en este diseño de diagrama de flujo para asegurarse de que no se agregue espacio adicional entre los módulos y las filas.

El diseño del módulo Blurb

Para crear nuestro primer elemento de diagrama de flujo, vamos a utilizar un módulo de publicidad.

Agregue un nuevo módulo publicitario a la fila.

Ajustes de publicidad

Abra la configuración de publicidad. En la pestaña de contenido, puede mantener el título y el texto del cuerpo predeterminados.

Luego actualice la imagen con una imagen de ícono pequeño o use uno de los íconos Divi incorporados. Para este tutorial, usaré íconos del paquete de diseño de Crowdfunding .

Luego dale a la publicidad un color de fondo:

• Color de fondo: #f8f8f8

En la pestaña de diseño, actualice lo siguiente:

• Alineación de texto: Centro
• Ancho máximo: 400 px (computadora de escritorio y tableta), 90 % (teléfono)
• Alineación del módulo: Centro
• Relleno: 6% arriba, 6% abajo, 3% izquierda, 3% derecha

NOTA: Este tamaño de publicidad será compartido por todas las publicidades en el diseño del diagrama de flujo. Este tamaño funciona para este diseño porque el diagrama de flujo nunca tendrá más de dos anuncios publicitarios adyacentes (uno al lado del otro). Esto nos permite mantener el diseño receptivo y verse bien en tabletas y teléfonos también.

A continuación, dale a la publicidad un borde de la siguiente manera:

• Ancho del borde: 2px

Paso 2: Creando la Fila Conectora con Línea Vertical y Flecha

Para la siguiente parte de nuestro diseño de diagrama de flujo, vamos a crear una fila de conector que tenga una línea vertical y una flecha centradas. Esta fila se usará para conectar filas de contenido del diagrama de flujo que deben continuar hacia abajo en la página.

En este caso, queremos comenzar el diagrama de flujo agregando una línea y una flecha debajo de la fila anterior con el módulo de publicidad centrado.

Crear nueva fila y copiar/pegar estilos de fila de la fila anterior

Para hacer esto, agregue una nueva fila de una columna debajo de la fila anterior.

Usando el menú «Más opciones» (o las opciones del botón derecho), copie los estilos de fila de la fila anterior y péguelos en la nueva fila.

Creación de un divisor de línea vertical

Para crear el divisor de línea vertical, agregue un nuevo módulo divisor a la fila.

En la configuración del divisor, actualice la configuración de diseño de la siguiente manera:

• Color de línea: #333333
• Posición de línea: Abajo
• Peso del divisor: 150px
• Ancho: 2px
• Alineación del módulo: Centro
• Margen: -1px inferior

En la pestaña avanzada, oculta el desbordamiento de la siguiente manera:

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Creación de una flecha con un módulo de Blurb

A continuación, vamos a crear un icono de flecha para colocarlo en la parte superior de la línea divisoria usando un módulo de publicidad.

Para crear la flecha, agregue un nuevo módulo publicitario debajo del divisor.

Ajustes de flechas publicitarias

En la configuración de la publicidad, elimine el título predeterminado y el texto del cuerpo y haga clic para usar el icono de la flecha inferior (ver captura de pantalla).

En la pestaña de diseño, actualice lo siguiente:

• Color del icono: #bbbbbb
• Alineación de imagen/icono: centro
• Tamaño de fuente del icono: 50 px (escritorio), 40 px (tableta y teléfono)

• Ancho máximo: 50%
• Alineación del módulo: centro
• Altura: 50 px (escritorio), 40 px (tableta y teléfono)

En la pestaña avanzada, agregue el siguiente CSS a la imagen de Blurb:

Esto eliminará el margen predeterminado de la publicidad y agregará un fondo blanco para crear la apariencia de un espacio entre el ícono y la línea una vez que coloquemos el ícono en la parte superior de la línea.

Para colocar la flecha en la parte superior de la línea, actualice lo siguiente:

• Posición: Absoluta
• Ubicación: Centro
• Índice Z: 10

Paso 3: Creación de una fila con flechas y desenfoques de diagrama de flujo adyacentes

Una vez que la fila del conector esté completa, agregaremos otra fila de varios anuncios publicitarios adyacentes para continuar con el diseño del diagrama de flujo.

Para agregar la fila, simplemente copie y pegue la primera fila (la fila con una propaganda centrada que creamos en la parte superior del diseño) debajo de la fila del conector.

Abra la configuración de la fila y actualice lo siguiente:

• Ancho máximo: 50%
• Ancho del borde: 2px

El ancho máximo del 50% es importante para que el diseño funcione de manera receptiva. Se asegurará de que los anuncios publicitarios que se desbordan a la derecha e izquierda de la fila no excedan el ancho del navegador.

Creación de una descripción de diagrama de flujo en la línea del borde izquierdo

Ahora que nuestro borde está agregado a la fila, vamos a colocar la propaganda encima de la línea del borde izquierdo.

Para hacer esto, actualice la siguiente configuración de diseño:

• Alineación del módulo: Izquierda
• Margen: 70px arriba, 70px abajo

• Transformar Traducir Eje X: -50%

Esta es la clave para hacer que la propaganda quede centrada horizontalmente en la parte superior de la línea del borde.

Creación de una referencia de diagrama de flujo adyacente en la línea del borde derecho

Para agregar otra publicidad en la línea del borde derecho, duplique la publicidad existente.

Para colocar la propaganda en la línea del borde derecho, vaya a la pestaña avanzada y asígnele una posición absoluta:

• Posición: Absoluta
• Ubicación: centro derecho

Luego actualice el margen y transforme las opciones de traducción de la siguiente manera:

• Margen: ninguno
• Transformar Traducir eje Y: -50%
• Transformar Traducir eje X: 50%

Adición de flechas borrosas a las esquinas de cada línea de borde

Para que el diagrama de flujo sea más claro sobre la dirección en que avanzan las líneas, agregaremos íconos de flecha adicionales en las líneas del borde de la fila.

Flecha superior izquierda

Para agregar una flecha a la línea del borde superior izquierdo, duplique el anuncio de flecha que creamos en la fila del conector y arrástrelo a la fila que contiene los anuncios publicitarios adyacentes.

Abra la publicidad de la flecha duplicada y cambie el ícono a una flecha hacia la izquierda.

Luego actualice la ubicación de la posición de la flecha publicitaria:

• Ubicación: Arriba a la izquierda

Finalmente, actualice la opción de traducción de transformación de la siguiente manera:

• Transformar Traducir eje Y: -50%

Flecha superior derecha

Para crear una flecha que se encuentre en la línea del borde superior derecho, duplique la flecha «superior izquierda» que acabamos de crear. Luego abra la configuración y cambie la ubicación de la posición:

• Ubicación: arriba a la derecha

Además, actualice el icono de flecha con una flecha hacia la derecha.

Flecha inferior izquierda

Para crear una flecha que se asiente en la línea del borde inferior izquierdo, duplique la flecha «arriba a la derecha» que acabamos de crear.

Luego abra la configuración y cambie la ubicación de la posición:

• Ubicación: abajo a la izquierda

A continuación, actualice la opción de traducción de transformación:

• Transformar Traducir eje Y: 50%

Flecha inferior derecha

Para crear una flecha que se asiente en la línea del borde inferior derecho, duplique la flecha «inferior izquierda» que acabamos de crear.

Luego abra la configuración y cambie la ubicación de la posición:

• Ubicación: abajo a la derecha

Además, actualice el ícono de la flecha con una flecha hacia la izquierda.

Una vez que se hayan colocado todas las flechas, puede actualizar las etiquetas de cada una usando la vista de capas .

Paso 4: agregar otra fila de conector

Una vez que hayamos completado la fila con los dos diagramas de flujo adyacentes y todas las flechas, podemos continuar el diagrama de flujo agregando otra fila de conectores.

Para hacer esto, duplique la fila del conector que creamos arriba y péguela debajo de la fila que contiene los diagramas de flujo adyacentes.

Paso 5: Personalización del flujo con un conector de línea de borde derecho

En el diseño de diagrama de flujo existente, el flujo comienza con el elemento superior y luego se ramifica hacia los elementos adyacentes derecho e izquierdo y luego regresa al medio y continúa con el siguiente elemento centrado. Para personalizar el flujo, vamos a duplicar la sección para que podamos personalizar el diagrama de flujo para que se detenga en los elementos publicitarios adyacentes a la izquierda y continúe desde el elemento publicitario derecho.

Sección duplicada

Para hacer esto, primero duplique toda la sección del contenido del diagrama de flujo.

Agregar otro elemento de Blurb izquierdo

En la sección duplicada (inferior), localice la publicidad izquierda en la fila que contiene las dos publicidades adyacentes. Luego, duplique la propaganda izquierda para crear una nueva directamente debajo de ella.

Eliminar flechas inferiores y borde

A continuación, elimine la flecha inferior izquierda y la flecha inferior derecha.

Abra la configuración de fila para la fila que contiene múltiples anuncios publicitarios y elimine el borde inferior:

• Ancho del borde inferior: 0px

Crear una fila con un conector de línea de borde derecho

Ahora queremos personalizar el diseño del diagrama de flujo con un conector de línea de borde derecho que conectará la línea de borde derecho de la fila con la fila de conector de abajo.

Para hacer esto, crearemos otra fila y agregaremos una línea divisoria personalizada y una flecha publicitaria en el lado derecho.

Agregue una nueva fila de una columna debajo de la fila existente con los tres anuncios publicitarios.

Actualice la configuración de diseño de la fila de la siguiente manera:

• Ancho del canalón: 1
• Ancho máximo: 50%
• Relleno: 0px arriba, 0px abajo

A continuación, agregue un borde derecho a la fila.

• Ancho del borde derecho: 2px

Luego agregue un módulo divisor a la fila.

Actualice la configuración del divisor de la siguiente manera:

• Color de línea: #333333
• Posición de línea: Abajo
• Peso del divisor: 2px
• Ancho: 50%
• Margen: -2px inferior

En la pestaña avanzada, actualice la posición del divisor:

• Posición: Absoluta
• Ubicación: abajo a la derecha

Una vez que el divisor esté en su lugar, copie la flecha inferior derecha de la tercera fila en la primera sección y péguela en la fila con la línea divisoria derecha.

Abra la configuración de la publicidad de flecha que acaba de duplicar y mover y actualice lo siguiente:

• Posición: por defecto

• Alineación del módulo: derecha

Deteniendo el Flujo de la Línea Fronteriza Izquierda

En este momento, hay parte de la línea del borde izquierdo expuesta debajo de la propaganda inferior izquierda. Para ocultarlo, simplemente elimine el margen inferior de esa publicidad inferior.

Paso 6: actualizar la fila con un conector de línea de borde izquierdo

Es posible que su diagrama de flujo también necesite tener un conector de línea de borde izquierdo. Para crearlo, podemos actualizar la fila con el conector de la línea del borde derecho de la siguiente manera:

• Ancho del borde izquierdo: 2px
• Ancho del borde derecho: 0

Actualice el divisor dentro de la fila con una nueva ubicación:

• Ubicación: abajo a la izquierda

Luego actualice la alineación de la flecha publicitaria:

• Alineación del módulo: Izquierda

Y cambie el ícono a una flecha hacia la derecha.

Resultado final

Mira el resultado final. Continué y dupliqué la segunda sección y le agregué el conector de la línea del borde izquierdo para que pueda ver ambos.

Pensamientos finales

En este tutorial, creamos un diseño de diagrama de flujo útil que cualquiera puede usar para comunicar procesos e ideas a los visitantes con un diseño receptivo impresionante. Úselo para mostrar el proceso de servicios o diseño, crear una infografía o guiar a los clientes a través del contenido de una manera nueva. Con suerte, será útil para su próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!