Agregar diseño de materiales a su sitio web con Divi

Hoy, te mostraré cómo implementar algunos elementos de diseño de materiales en tu sitio web usando el constructor Divi y un poco de CSS.

Empecemos.

Suscríbete a nuestro canal de Youtube

Implementando Material Design con Divi

En el diseño de hoy, estoy usando colores llamativos e imágenes sobre un fondo blanco para atraer al usuario. También estoy agregando sombras y movimiento al pasar el mouse sobre ciertos elementos para involucrar aún más al usuario. Estoy agregando un botón que se extiende a ambos lados de la línea entre la imagen y el contenido, ya que ambos son relevantes para la llamada a la acción. Y, por último, agregué un pequeño movimiento al ícono del botón que los «apunta» a propósito en la dirección correcta. Todos estos elementos son consistentes con el diseño de materiales y se implementan fácilmente.

Los elementos de diseño utilizados son imágenes de unsplash.com. La imagen del encabezado tiene un ancho de 1288px y una altura de 737px. Las cuatro imágenes de cuadro tienen 800 px de ancho por 450 px de alto. El resto del diseño se logra a través del constructor Divi y CSS personalizado.

Diseñando el encabezado

Usando la sección estándar predeterminada que se muestra en Divi Builder, inserte una columna de ancho completo.

Haga clic en la sección configuración del módulo. En Configuración general, inserte su imagen de fondo.

Luego haga clic en la configuración del módulo de fila para darle un relleno personalizado:

Arriba: 150px Abajo

: 50px

En Configuración de diseño avanzada, agregue un margen inferior personalizado de -100 px.

Guardar la salida

Dado que esta sección solo servirá como fondo, no necesita agregar ningún módulo.

Ahora agregue otra sección estándar usando Divi Builder y asígnele una columna de ancho completo. Luego haga clic en Configuración del módulo de fila.

Cambie la configuración general de la siguiente manera:

Usar ancho personalizado: Sí

Ancho personalizado: 700 px

Relleno personalizado: 50 px superior e inferior 50 px

En Configuración de diseño avanzada, asigne a la fila un margen personalizado de la siguiente manera:

Arriba: -144px Abajo

: 0px

Color de fondo: #ffffff

En la pestaña CSS personalizado, agregue el siguiente CSS al cuadro de texto Elemento principal:

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);

Guardar la salida

A continuación, agregue un módulo de texto a la fila. En Configuración general, agregue su contenido dentro del cuadro Contenido. Asegúrate de envolver tu encabezado en una etiqueta h1. Esto es lo que estoy agregando (asegúrese de seleccionar la pestaña de texto al ingresar html):

<h1 style="text-transform: captialize;">Material Design</h1>
Aenean consectetur ipsum ante, vel egestas enim tincidunt quis.

En Configuración de diseño avanzada, cambie lo siguiente:

Fuente del encabezado: Negrita (B)

Tamaño de fuente del encabezado: 40 px;

Color del texto del encabezado: #e91e63

Espaciado entre letras del encabezado: 2px

Ahora su encabezado está terminado.

Diseño de las columnas y cuadros de contenido

Una vez que el encabezado esté en su lugar, es hora de agregar sus columnas y cuadros de contenido.

Primero agregue una sección estándar con un diseño de media columna y media

Edite la configuración de la sección. En Configuración general, cambie la opción de relleno personalizado a lo siguiente:

Arriba: 0px

Derecha: 20px

Izquierda: 20px

Ahora haga clic en Configuración del módulo de fila. En Configuración de diseño avanzada, busque la opción Igualar alturas de columna y cámbiela a «SÍ». También es una buena idea agregar un relleno inferior de 20 px a cada una de sus columnas para el espaciado.

Vaya a la pestaña CSS personalizado y asigne a este módulo de fila una clase CSS personalizada llamada «material». Este será nuestro identificador para todos nuestros elementos CSS personalizados que agregaremos más adelante. Esto es importante para que los elementos de diseño no se apliquen en todo el sitio, sino solo donde agrega la clase «material».

Guardar la salida

Ahora puede comenzar a agregar módulos a su fila. Quiero incluir 3 módulos apilados uno encima del otro: un módulo de imagen, un módulo de botones y un módulo de texto. Primero agregue un módulo de imagen a la mitad de la columna izquierda de la fila.

En Configuración del módulo de imagen, en Configuración general, cambie o agregue lo siguiente:

Cargar/Ingresar imagen

Eliminar espacio debajo de la imagen: Sí

Animación: Fundido

Alineación de imagen: Centro

Guardar la salida

Debajo del Módulo de imagen, agregue un módulo de botones. Cambie la configuración del módulo de botones en Configuración general de la siguiente manera:

URL del botón: [ingresar url] (solo estoy poniendo # por ahora)

La URL se abre: en la nueva pestaña

Texto del botón: Más

Alineación del botón: Centro

En Configuración de diseño avanzada, cambie lo siguiente:

Usar estilos personalizados para el botón: Sí

Tamaño del texto del botón: 24px

Color del texto del botón: #ffffff;

Color de fondo del botón: #e91e63

Ancho del borde del botón: 0

Radio del borde del botón: 0

Ícono de agregar botón: Sí

Ícono de botón: Ícono de cheurón hacia abajo en un círculo (asegúrese de seleccionar un ícono de flecha hacia abajo)

Finalmente, agregue un módulo de texto debajo del módulo de botones.

Vaya a la configuración del módulo de texto. En Configuración general, cambie la Orientación del texto a Centro e ingrese su contenido en la sección de contenido.

En Configuración de diseño avanzada, proporcione a su módulo de texto un relleno personalizado de la siguiente manera:

Arriba: 10px

Derecha: 10px

Abajo: 10px

Izquierda: 10px

Guardar la salida

A continuación, va a duplicar los módulos de imagen, botón y texto que acaba de crear y arrastrarlos a la mitad de la columna derecha de la fila.

Después de duplicar sus módulos, continúe y duplique la fila de dos columnas seleccionando el ícono de fila duplicada.

Ahora su diseño debería verse así:

Regrese y cambie el contenido de sus módulos a lo que necesite para su sitio web.

Agregar el CSS personalizado

El siguiente paso es agregar CSS personalizado para esos elementos de diseño de materiales adicionales. Vaya a Divi → Opciones de tema y agregue el siguiente css en el cuadro de texto CSS personalizado:

.material .et_pb_image {
overflow: hidden;
}
.material .et_pb_column img{
vertical-align:top;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.material .et_pb_column:hover img{
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
 
.material .et_pb_button_module_wrapper {
margin-top: -26px;
margin-bottom: 10px !important;
}
.material .et_pb_button {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
 
}
.material .et_pb_button:hover {
    box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
margin-top: -5px;
margin-bottom: 5px !important;
 
}
  
.material .et_pb_button:hover:after {
line-height: 1.7em;   
-webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
   
.material.et_pb_row {padding: 27px 15px;}
  
 
.material .et_pb_column {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
 
}
 
.material .et_pb_column:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);
 
}

Guarda los cambios y ve a ver el resultado final.

Algunos consejos

Además del uso de colores llamativos sobre un fondo blanco, ahora tiene un poco de movimiento adicional que ayuda a que el «material» cobre vida para el usuario. Cada uno de los cuatro cuadros de columnas tiene una ligera elevación de descanso (mediante sombreado) que aumenta al pasar el mouse por encima. El botón se extiende a ambos lados de la imagen y el contenido, y tiene una elevación en reposo que aumenta aún más al pasar el mouse a medida que sube 5 píxeles. Además, al pasar el cursor sobre el botón, el icono del botón gira en sentido contrario a las agujas del reloj 90 grados desde que apunta hacia abajo hasta que apunta a la derecha. Y la imagen se amplía al pasar el cursor sobre el cuadro de la columna.

Tenga en cuenta que cada una de las transiciones y movimientos tienen un propósito y son rápidos. Deben ser lo suficientemente coherentes para captar la atención, pero lo suficientemente rápidos para no interrumpir la continuidad de la experiencia del usuario.

En lo que respecta al diseño de este diseño, puede usarlo para varias cosas diferentes, como carteras destacadas, servicios destacados o CTA. El cielo es el límite.

Si desea agregar contenido adicional a los cuadros, puede hacerlo fácilmente ya que el efecto de sombreado y desplazamiento se realiza a nivel de columna. Simplemente agregue módulos adicionales a sus columnas. También puede agregar más columnas a su fila si lo desea. Un diseño de tres columnas se ve muy bien.

Si desea cambiar el fondo de los cuadros, puede ir a Configuración del módulo de filas en Configuración de diseño avanzada y cambiar el color de fondo de cada columna.

Pensamientos finales

No soy un experto en diseño de materiales, pero disfruto aprendiendo más al respecto e implementando los elementos de diseño cuando se presenta la oportunidad. Para obtener más información sobre el diseño de materiales, puede visitar https://material.io/ . También tienen una paleta de colores útil.

Espero que hayas encontrado útil este tutorial. Espero escuchar de usted en los comentarios a continuación.

Implementando Material Design con Divi

Diseñando el encabezado

Diseño de las columnas y cuadros de contenido

Agregar el CSS personalizado

Algunos consejos

Pensamientos finales

Publicaciones relacionadas: