¿Quieres crear un organigrama en Divi?
Saber cómo crear un diseño de diagrama de flujo en Divi abre muchas oportunidades para comunicar procesos e ideas en un Sitio web. En algunos casos, los diagramas de flujo se pueden usar para explicar ideas extremadamente complejas que involucran una gran cantidad de elementos.
Sobre un Sitio web, sin embargo, estos diagramas de flujo más complejos pueden ser difíciles de lograr, especialmente si desea que responda.
En este tutorial, le mostraremos cómo crear un práctico diseño de diagrama de flujo que puede usar en su Sitio web, simple, eficaz y responsivo.
Además, solo usaremos las opciones integradas de Divi para crearlo, por lo que no tienes que preocuparte por agregar código o complementos personalizados.
Vamos a empezar!
vista
Este es un vistazo rápido al diseño del diagrama de flujo que crearemos en este tutorial.
Crear una nueva página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá 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: crea una fila con un comentario centrado
Para comenzar a crear el diseño del diagrama de flujo en Divi, comenzaremos creando una fila que contenga una propaganda centrada. Este será el primer elemento del diagrama de flujo.
Relleno de sección
Primero, abra la configuración de la sección para la sección predeterminada y establezca el relleno inferior en 0px.
- Relleno (inferior): 0px
La línea
Dentro de la sección, agregue una fila a una columna.
Abra la configuración de línea y actualice la siguiente configuración de diseño:
- Ancho del canalón: 1
- Relleno (superior e inferior): 0 px
Diseño de Mod Blurb
Para crear nuestro primer elemento de diagrama de flujo, usaremos un módulo de Blurb.
Inserte un módulo de Blurb en línea.
Configuraciones del módulo
Abra la configuración del módulo de Blurb. Debajo de la pestaña Contenido, puede mantener el título y el cuerpo del texto predeterminados.
Luego actualice la imagen con una imagen de ícono pequeño o use uno de los íconos Divi incorporados. Para este tutorial, usamos iconos de la Paquete de diseño de financiación colectiva .
Luego dale al módulo un color de fondo:
- Fondo: #f8f8f8
En la pestaña Diseño, actualice lo siguiente:
- Alineación de texto: centrado
- Ancho máximo: 400 px (escritorio y tableta), 90 % (teléfono)
- Módulo de alineación: Centro
- Relleno: 6 % (superior e inferior), 3 % (izquierdo y derecho)
A continuación, dale al módulo de Blurb un borde de la siguiente manera:
- Ancho del borde: 2px
Paso 2: Creando la línea de conexión con una línea vertical y una flecha
Para la siguiente parte del diseño de nuestro diagrama de flujo, crearemos una fila de conectores que tengan una línea vertical centrada y una flecha. Esta línea se utilizará para conectar las líneas de contenido del organigrama que debe continuar hacia la parte inferior de la página.
En este caso, queremos comenzar el diagrama de flujo agregando una línea y una flecha debajo de la línea anterior con el módulo Blurbn centrado.
Cree una nueva línea y copie/pegue los estilos de la línea anterior
Para hacer esto, agregue una nueva fila a una columna debajo de la fila anterior.
Utilizando el " Otros ajustes del módulo (o haga clic con el botón derecho en las opciones), copie los estilos de la fila anterior y péguelos en la nueva fila.
Crear un separador de línea vertical
Para crear el separador de línea vertical, agregue un nuevo módulo Divisor a la línea.
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
- Módulo de alineación: Centro
- Margen: -1px (abajo)
En la pestaña Avanzado, oculta el desbordamiento de la siguiente manera:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Crea una flecha con un módulo de Blurb
A continuación, crearemos un icono de flecha que se ubicará sobre la línea divisoria usando un módulo de presentación.
Para crear la flecha, agregue un nuevo módulo de Blurb debajo del divisor.
Ajustes de la modificación de Blurb
En la configuración del módulo, elimine el título predeterminado y el texto del cuerpo y haga clic en Usar icono, luego elige el icono de la flecha (ver captura de pantalla).
En la pestaña Diseño, actualice lo siguiente:
- Color del icono: #bbbbbb
- Alineación de imagen/icono: centro
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 50 px (escritorio), 40 px (tableta y teléfono)
- Ancho máximo: 50%
- Módulo de alineación: centro
- Altura: 50 px (escritorio), 40 px (tableta y teléfono)
En la pestaña Avanzado, agregue el siguiente CSS a Imagen de publicidad :
margin-bottom: 0px;
background: #ffffff;
Para colocar la flecha encima de la línea, actualice lo siguiente:
- Posición: Absoluta
- Ubicación: Centro
- Índice Z: 10
Paso 3: crear una línea para las partes adyacentes del diagrama de flujo
Una vez que la fila de conectores esté completa, agregaremos otra fila de varios módulos de Blurb adyacentes para continuar con el diseño del diagrama de flujo.
Para agregar la línea, simplemente copie y pegue la primera línea (la línea con la propaganda centrada que creamos en la parte superior del diseño) debajo de la línea del conector.
Abra Configuración de línea y actualice lo siguiente:
- Ancho máximo: 50%
- Ancho del borde: 2px
Lado izquierdo del diagrama de flujo
Ahora que nuestro borde está agregado a la línea, colocaremos el módulo de Blurb sobre la línea del borde izquierdo.
Para hacer esto, actualice los siguientes parámetros de diseño:
- Módulo de alineación: izquierda
- Margen: 70px (superior e inferior)
- Transformar Traducir eje X: -50%
Esto es clave para que el módulo de Blurb esté centrado horizontalmente sobre la línea del borde.
Lado derecho del diagrama de flujo
Para agregar otro módulo de publicidad en la línea del borde derecho, duplique la publicidad existente.
Para colocar la publicidad en la línea del borde derecho, vaya a la pestaña Avanzado y darle una posición absoluta:
- Posición: Absoluta
- Ubicación: Centro derecha
A continuación, actualice las siguientes opciones:
- Márgenes: ninguno
- Transformar Traducir eje Y: -50%
- Transformar Traducir eje X: 50%
Se agregaron flechas 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 filas, agregaremos íconos de flecha adicionales en las filas del borde de la fila.
Flecha arriba a la izquierda
Para agregar una flecha a la fila del borde superior izquierdo, duplique el módulo de flecha de Blurb que creamos en la fila del conector y arrástrelo a la fila que contiene los módulos de Blurb adyacentes.
Abra el módulo Duplicate Arrow Blurb y cambie el ícono a una flecha que apunta hacia la izquierda.
A continuación, actualice la ubicación de la posición del módulo:
- 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 arriba a la derecha
Para crear una flecha que se asiente en la línea del borde superior derecho, duplique la flecha " arriba a la 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
También actualice el ícono de la flecha con una flecha que apunta hacia la derecha.
Flecha abajo a la 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 Transform Translate:
- Transformar Traducir eje Y: 50%
Flecha abajo a la derecha
Para crear una flecha que se asiente en la línea del borde inferior derecho, duplique la flecha " abajo a la 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
También actualice el ícono de la flecha con una flecha que apunta hacia la izquierda.
Una vez que se colocan todas las flechas, puede actualizar las etiquetas para cada una usando el vista de capa .
Paso 4: agregar otra línea de conector
Una vez que hemos completado la línea con las dos partes adyacentes del diagrama de flujo y todas las flechas, podemos continuar el diagrama de flujo agregando otra línea conectora.
Para hacer esto, duplique la línea de conexión que creamos arriba y péguela debajo de la línea que contiene los módulos de Blurb de la parte adyacente del diagrama de flujo.
Paso 5: Personalización del flujo con un conector de línea de borde recto
En el diseño de diagrama de flujo existente, el flujo comienza con el elemento superior, luego se bifurca hacia los elementos adyacentes derecho e izquierdo, luego regresa al centro y va al siguiente elemento central.
Para personalizar el flujo, duplicaremos la sección para que podamos personalizar el diagrama de flujo para detenernos en los elementos de presentación adyacentes a la izquierda y continuar desde el elemento de presentación a la derecha.
Sección duplicada
Para hacer esto, primero duplique toda la sección que contiene el diagrama de flujo.
Agregar otro módulo de Blurb izquierdo
En la sección duplicada (abajo), ubique el módulo Blurb izquierdo en la fila que contiene los dos módulos adyacentes. Luego, duplique la propaganda de la izquierda para crear una nueva directamente debajo.
Quitar las flechas inferiores y el borde
A continuación, elimine la flecha inferior izquierda y la flecha inferior derecha.
Abra la configuración de línea para la línea que contiene múltiples anuncios publicitarios y elimine el borde inferior:
- Ancho del borde inferior: 0px
Crear una línea con un conector de línea de borde recto
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 línea con la línea de conector de abajo.
Para hacer esto, crearemos otra línea y agregaremos una línea divisoria personalizada y una flecha de contorno en el lado derecho.
Agregue una nueva fila una columna debajo de la fila existente con los tres diseños.
Actualice la configuración de la fila de la siguiente manera, en la pestaña Diseño :
- Ancho del canalón: 1
- Ancho máximo: 50%
- Relleno: 0px (superior e inferior)
A continuación, agregue un borde recto a la línea.
- Ancho del borde derecho: 2px
Luego agregue un módulo Divisor a la línea.
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 (abajo)
En la pestaña avanzada, actualice la posición del separador:
- Posición: Absoluta
- Ubicación: Abajo a la derecha
Con el divisor en su lugar, copie el módulo Blurb de la flecha inferior derecha de la tercera fila de la primera sección y péguelo en la fila con la línea divisoria derecha.
Abra la configuración del módulo Blurb de la flecha que acaba de duplicar y mover y actualice lo siguiente:
- Posición: Por defecto
- Módulo de alineación: derecho
Parada de flujo de la línea del borde izquierdo
Actualmente, parte del borde izquierdo está expuesto debajo de la propaganda en la parte inferior izquierda. Para ocultarlo, simplemente elimine el margen inferior de esta publicidad inferior.
Paso 6: Actualización de la línea con un conector de línea de borde izquierdo
Su diagrama de flujo también puede necesitar un conector de línea de borde izquierdo. Para crearlo, podemos actualizar la línea con el conector de línea de borde derecho de la siguiente manera:
- Ancho del boprder izquierdo: 2px
- Ancho del borde derecho: 0
Actualice el separador dentro de la línea con una nueva ubicación:
- Ubicación: abajo a la izquierda
A continuación, actualice la alineación de la flecha:
- Módulo de alineación: izquierda
Y cambie el ícono a una flecha hacia la derecha.
Resultado final
Mira el resultado final.
Descarga DIVI ahora!!!
Conclusión
En este tutorial, hemos creado un diseño de diagrama de flujo útil que cualquiera puede usar para comunicar procesos e ideas a visitantes con un impresionante diseño receptivo.
Úselo para mostrar los servicios o el proceso de diseño, crear una infografía o guiar a los clientes a través del contenido en una nueva forma.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
