Cada semana, le proporcionamos un paquete de diseño Divi nuevo y gratuito que puede usar para su próximo proyecto. Junto con cada paquete de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.
Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear una página de proceso elegante utilizando el paquete de diseño de la empresa de arquitectura de Divi . Para crear esta página, reutilizaremos elementos que ya están presentes en el paquete de diseño y los modificaremos sobre la marcha. También crearemos un ‘divisor’ vertical o ‘línea de tiempo’ que creará una conexión entre los pasos y ayudará a sus visitantes a seguir el proceso. Puede crear tantos pasos como necesite para su proceso utilizando este método. ¡Empecemos!
Antes de sumergirnos en el tutorial de casos de uso, echemos un vistazo rápido al resultado final en diferentes tamaños de pantalla:
Parte 1: crear una nueva página usando la página de inicio de la firma de arquitectura
Paso 1: cree una nueva página y cambie a Visual Builder
Comience creando una nueva página, dándole un título a su página y cambiando a Visual Builder.
Paso 2: Cargue la página de destino de la empresa de arquitectura
Estamos utilizando la página de inicio del paquete de diseño de la firma de arquitectura para crear la página de proceso. Nos ayudará a mantener el mismo estilo y también nos ahorrará mucho tiempo. Vaya a sus diseños prefabricados, desplácese hacia abajo hasta que encuentre el paquete de diseño de la firma de arquitectura y use el diseño de la página de destino.
Paso 3: elimina las secciones innecesarias
Esta página de destino contiene bastantes secciones. Adelante, borra los que no creas necesarios. Hemos eliminado las siguientes secciones de nuestro diseño:
Parte 2: Modificar la sección de pasos del proceso
Paso 1: busque la sección que usaremos y modificaremos
La única sección que definitivamente reutilizaremos durante este tutorial es la siguiente:
Paso 2: cambiar el espaciado de la sección
Comience abriendo la configuración de esta sección y agregue ‘0px’ al relleno inferior de la misma.
Paso 3: Retire el módulo de imagen
Retire el módulo de imagen en la primera columna a continuación.
Paso 4: cambiar la estructura de la columna
Y cambie la estructura de la columna en una fila con una sola columna.
Paso 5: cambiar el espacio entre filas
Abra la configuración de la fila y agregue el siguiente relleno personalizado:
- Relleno superior e inferior: 60px
- Relleno izquierdo y derecho: 50 px (solo tableta y teléfono)
Paso 6: agregue la sombra del cuadro a la fila
También agregaremos un poco de sombra de cuadro a nuestra fila para crear profundidad. En este tutorial, hemos habilitado la primera sombra de cuadro sin modificar su configuración predeterminada.
Paso 7: cambiar la alineación del texto del módulo de texto n.º 1
Queremos centrar todos los módulos de esta fila, comenzando con el primer Módulo de texto. Abra su configuración y habilite la Orientación del texto central.
Paso 8: Retire el relleno izquierdo negativo del módulo divisor
A continuación, abra la configuración del Módulo divisor y elimine el relleno izquierdo negativo en la configuración de espaciado agregando ‘0px’ en su lugar.
Paso 9: Utilice la alineación del módulo central para el módulo divisor
También usaremos la alineación del módulo central para este módulo divisor.
Paso 10: cambiar la orientación del texto del módulo de texto n.º 2
A continuación, abra el Módulo de texto que contiene toda la información y use la Orientación del texto del centro.
Paso 11: cambiar el tamaño del módulo de texto n.º 2
También reduciremos el ancho de este módulo de texto en el escritorio usando la siguiente configuración:
- Ancho: 54 % (escritorio), 99 % (tableta y teléfono)
- Alineación del módulo: Centro
El último módulo de su fila, el módulo de botones, también necesita una alineación de botones central. En este punto, todos sus módulos están centrados y podemos pasar a la siguiente parte.
Parte 3: agregar un ‘divisor’ vertical
Paso 1: agregue una nueva fila de una columna a la sección existente
La siguiente parte de este tutorial se enfoca en conectar los diferentes pasos entre sí. Vamos a usar un módulo de texto para eso y lo colocaremos en una nueva fila justo debajo del anterior que hemos editado. Elija la siguiente estructura de columna para ello:
Paso 2: modificar el espacio entre filas
Antes de agregar cualquier módulo, abra la configuración de la fila y agregue ‘0px’ al relleno superior e inferior de esta fila.
Paso 3: agregue el módulo de texto a la nueva fila
Continúe agregando un módulo de texto a la columna de esta fila. Vamos a utilizar los siguientes caracteres dentro del cuadro de contenido que aparecerán como una línea vertical una vez que terminemos de editarlo:
|
|
|
|
|
Paso 4: Configuración de texto
Hay una cosa, en particular, que lo ayudará a hacer que este módulo de texto se superponga en filas. Estamos hablando de la altura de la línea de texto. El valor predeterminado presiona su contenido cuando hay un gran tamaño de texto involucrado. Por lo tanto, no modifique el valor de Altura de la línea de texto y utilice la siguiente configuración de texto en su lugar:
- Peso de fuente de texto: ultra negrita
- Color del texto: rgba(194,171,146,0.04)
- Tamaño del texto: 600px
- Orientación del texto: Centro
Parte 4: Clonar la sección con la frecuencia necesaria
Paso 1: Clonar Sección
¡Hemos terminado con el primer paso del proceso! Una sección contiene todos los elementos necesarios. Continúe y clone esta sección tantas veces como necesite (dependiendo de la cantidad de pasos en el proceso).
Paso 2: cambiar el contenido
Por supuesto, puede cambiar el contenido de acuerdo con su propio sitio web. Estamos usando el primer módulo de texto para indicar el paso y el segundo módulo de texto para brindar más información sobre ese paso y su función en el proceso.
Paso 3: eliminar la fila divisoria vertical de la última sección del proceso
Una vez que llegue a la última sección y, por lo tanto, al último paso, en su página, deberá realizar algunas pequeñas modificaciones. En primer lugar, vamos a eliminar la fila que contiene nuestro divisor vertical. No necesitamos esta fila ya que no hay ningún otro paso después de esta sección.
Paso 4: elimine el relleno inferior cero de la última sección
También eliminaremos el relleno inferior ‘0px’ que se asignó al relleno inferior de la sección. Esto permitirá que la sombra del cuadro también se muestre en la parte inferior.
Avance
¡Eso es todo! Hemos seguido todos los pasos. Echemos un vistazo final al resultado en diferentes tamaños de pantalla:
Pensamientos finales
En esta publicación de blog de caso de uso, le mostramos cómo crear una página de proceso impresionante utilizando el paquete de diseño de la firma de arquitectura de Divi . Puede personalizar esta página de proceso e incluir tantos pasos como necesite. Este caso de uso es parte de nuestra iniciativa Divi en curso, en la que nuestro equipo de diseño comparte contigo un nuevo paquete de diseño cada semana. Si tiene alguna pregunta, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!