Bloque para diagramar procesos o pasos.

Tabla de Contenido

Les dejo por acá un diseño sencillo, pero bastante útil si queremos maquetar una sección de varios pasos o procesos. Pueden duplicar las filas si cuentan con más de los 6 pasos mostrados en el ejemplo. ¡Espero les sirva!

¿Cómo Importar esta plantilla?

Para utilizar esta plantilla en tu WordPress deberás contar con Elementor instalado, si no lo tienes puedes instalarlo gratuitamente en la sección de plugins de tu wordpress. Una vez instalado procedemos a descargar la plantilla, se te descargara un archivo «.rar» que deberas descomprimir para obtener el archivo JSON.

Una vez que lo tengamos nos vamos a nuestro WordPress, ubicamos la página en donde queramos colocar nuestra plantilla, le damos a la carpetica de «Agregar Plantilla», luego click a la flechita arriba «Importar Plantilla», seleccionamos el archivo JSON que descomprimimos y listo, le damos insertar y ya lo tendremos en nuestra página.

Un paso importante, una vez que importen la plantilla les va a salir un cuadrito preguntando si quieren sobrescribir los ajustes de su página por las de la nueva plantilla, es importante que le den a NO, de lo contrario su página podría sufrir cambios de estructura.

Si tienes Elementor (versión gratuita)

Esta plantilla esta diseñada con Elementor Pro, ya que se requiere acceso al editor CSS de cada cuadro, si bien funciona tambien con elementor gratuito la versión es un poco mas simple y no cuenta con las flechas, dejo una imagen de como se ve con Elementor Free:

Si tienes Elementor PRO

Si cuentas con la versión PRO de Elementor podrás acceder a la pestaña de Avanzado y CSS Personalizado, esto lo puedes encontrar en cada una de las columnas de los «Pasos». Es importante que solo modifiques el código hexadecimal de colores a menos que sepas de código CSS. Te dejo el código que te encontraras en la sección. OJO, el código cambia dependiendo de si el cuadro debe llevar la flecha a la derecha o a la izquierda, es decir, se modifica su posición absoluta. (top, right, bottom, left.)

selector:before{
    content:"";
    position: absolute;
    top: 10px;
    right: -40px;
    z-index: 1;
    width: 0; 
    height: 0; 
    border-left: 50px solid #00695F;
    border-top: 33px solid transparent;
    border-bottom: 33px solid transparent; 
}

@media screen and (max-width: 767px) {
  selector:before {
    content:"";
    position: absolute;
    top:inherit;
    bottom: -73px;
    right: 10px;
    z-index: 1;
    width: 0; 
    height: 0; 
    border-top: 50px solid #00695F;
    border-left: 33px solid transparent;
    border-right: 33px solid transparent; 
  }
}

¿Cómo editar la plantilla?

Si queremos añadir mas pasos a nuestra plantilla solo debemos duplicar la subsección que queramos y que vaya acorde a las flechas, cambiar el color de fondo de la columna de pasos y tomar el hexadecimal que nos arroja el color para ponerlo cambiar en la pestaña de Avanzado -> CSS Personalizado.

Para las imagenes solo debemos dirigirnos a esa columna y buscar en la pestaña de Estilos la imagen de fondo, la reemplazamos y listo, tenemos nuestra nueva fila.

Resumen

  1. Descarga la plantilla y decomprime para obtener el JSON
  2. Instala Elementor PRO (para una versión completa de la plantilla) pero tambien te sirve en la versión básica de Elementor
  3. Importa el JSON donde tu quieras en tu web.
  4. Para editar los colores solo cambia el fondo en estilos y utiliza ese mismo hexadecimal para el personalizador CSS (cambiar el color de las flechas si tienes Elementor PRO)

Recursos


¿Te sirvió? ¡Compártelo!
Facebook
Twitter
LinkedIn
Reddit
WhatsApp
¿Te sirvió? ¡Compártelo!
Facebook
Twitter
LinkedIn
Reddit
WhatsApp
Scroll al inicio