Las tendencias de diseño web que surgen cada año ayudan a expandir las posibilidades de diseño para diseñadores y usuarios de bricolaje en todas partes. Cada vez se aprecian más los elementos colocados asimétricamente, los colores brillantes y las familias de fuentes utilizadas tradicionalmente en la impresión. En esta publicación, le proporcionaremos un tutorial que utiliza estos elementos. El diseño que recrearemos se puede usar para cualquier sitio web, pero funciona especialmente bien para los sitios web de comercio electrónico. Mientras mantenemos las imágenes de sus productos en el centro de atención, vamos a recrear un diseño que se adapte perfectamente a 2018.
en el escritorio
En el escritorio, vamos a recrear el siguiente resultado sorprendente usando Divi :
en tableta
Necesitaremos una alternativa para tableta y teléfono que sea más simple y efectiva al mismo tiempo. Por lo tanto, estamos recreando el siguiente diseño:
En el teléfono
Estamos usando el mismo diseño para el teléfono que usamos para la tableta:
Que necesitas
- Una imagen de producto con 1600 de alto y 1187 de ancho
- Otra imagen de producto con 1600 de ancho y 1200 de alto
- Puede descargar la imagen exacta del producto (y modificarla con Photoshop) en el siguiente enlace
- La imagen del triángulo que puedes guardar a continuación:
Lo primero que puede hacer, según sus preferencias, es deshabilitar la opción Barra de navegación fija para mantener el menú principal en la parte superior de su página en todo momento. Para hacer eso, vaya a su Tablero de WordPress> Divi> Opciones de tema> General> Deshabilitar barra de navegación fija .
Luego, deberá realizar algunos cambios en la barra de menú principal yendo a su Panel de control de WordPress> Apariencia y personalización . Una vez que esté allí, navegue a la barra de menú principal y aplique la siguiente configuración a su menú principal para lograr exactamente el mismo resultado:
- Hacer ancho completo: Sí
- Altura del menú: 66
- Altura máxima del logotipo: 54
- Tamaño del texto: 24
- Espaciado entre letras: -1
- Fuente: fuente de tema predeterminada
- Estilo de fuente: mayúsculas y subrayado
- Color del texto: #140056
- Color del enlace activo: #140056
- Color de fondo: rgba(255,255,255,0)
- Color de fondo del menú desplegable: rgba(255,255,255,0)
Desactivar icono de búsqueda
Otra cosa que puede hacer es deshabilitar el ícono de búsqueda yendo a Encabezado y Navegación > Elementos del encabezado > Deshabilitar la opción ‘Mostrar ícono de búsqueda’ . Pero, de nuevo, esto depende de cuáles sean tus preferencias. No hay nada de malo en dejar que se muestre el icono de búsqueda.
Recrear versión de escritorio
Crear nueva sección
Color de fondo
Ahora que hemos modificado el menú principal, podemos comenzar con el diseño del escritorio que vamos a recrear. Abra una página nueva o existente, agregue una nueva sección y elija ‘#f2f2f2’ como color de fondo.
Espaciado
Pase a la pestaña Diseño de esa misma sección y asegúrese de que el relleno superior e inferior estén configurados en ‘0px’. De esa manera, no habrá ninguna distancia entre la sección y la fila que agregará después.
Visibilidad
Por último, abra la subcategoría Visibilidad dentro de la pestaña Avanzado y deshabilite esta sección en el teléfono y la tableta. Como pudo notar al comienzo de esta publicación, estamos recreando una sección principal más simple para estos tamaños de pantalla para mantener un diseño receptivo en todos los tamaños de pantalla.
Agregar nueva fila
Estructura de la columna
Ahora que hemos terminado con la configuración de la sección, podemos continuar y agregarle una nueva fila con la siguiente estructura de columna:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila, vaya a la subcategoría Tamaño de la pestaña Diseño y habilite la opción ‘Hacer esta fila de ancho completo’. Esto nos permitirá ocupar la mayor parte de la pantalla para todos los módulos que agregaremos.
Espaciado
Luego, abra la subcategoría Espaciado y aplique el siguiente relleno personalizado a su fila:
- Superior: 0px
- Derecha: 0px
- Abajo: 135px
- Izquierda: 0px
Agregue el primer módulo de texto a la primera columna
Configuración de texto
¡La configuración de la fila está lista! Ahora podemos agregar los diferentes módulos que necesitamos para crear el resultado sorprendente. Lo primero que deberá hacer es agregar un módulo de texto a la primera columna de la fila. La copia de ‘Vibraciones creativas’ que puede leer se divide en dos módulos de texto. Esto nos permite usar diferentes colores de subrayado para cada módulo de texto. Una vez que agregue la primera copia a su módulo de texto, pase a la pestaña Diseño y aplique la siguiente configuración a la subcategoría Texto:
- Fuente del texto: Adamina
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Subrayado
- Color de subrayado de texto: #769cc9
- Estilo de subrayado de texto: Sólido
- Tamaño del texto: 73px
- Color del texto: #140056
- Altura de línea de texto: 1em
- Orientación del texto: Centro
Espaciado
Luego abra la subcategoría Espaciado y agregue ‘120px’ al margen superior. Esto creará suficiente espacio entre su barra de menú principal y este módulo de texto.
Agregar segundo módulo de texto a la primera columna
Configuración de texto
Simplemente puede clonar el módulo de texto anterior, eliminar el margen superior y cambiar el color del subrayado de texto a ‘#f5d2cc’, o puede crear el mismo módulo de texto desde cero nuevamente usando la siguiente configuración de texto:
- Fuente del texto: Adamina
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Subrayado
- Color de subrayado de texto: ##f5d2cc
- Estilo de subrayado de texto: Sólido
- Tamaño del texto: 73px
- Color del texto: #140056
- Altura de línea de texto: 1em
- Orientación del texto: Centro
Agregar módulo de imagen a la primera columna
Guardar la imagen transparente
Para facilitar un poco este tutorial, le proporcionamos la imagen del triángulo transparente que también se coloca en la primera columna. Guarde la siguiente imagen en su computadora y continúe desde allí:
Cargar imagen
Una vez que haya guardado la imagen, agregue un módulo de imagen a su primera columna (este es el último módulo dentro de esta fila) y cargue el archivo de imagen triangular que ha guardado.
Fondo degradado
Puede darle a este triángulo cualquier tipo de fondo degradado o color de fondo que desee. Pero para que coincida con la paleta de colores que estamos usando, estamos aplicando la siguiente configuración:
- Primer color: #f5d2cc
- Segundo Color: rgba(118,156,201,0.32)
- Tipo de gradiente: lineal
- Dirección del gradiente: 224 grados
- Posición inicial: 42%
- Posición final: 76%
Espaciado
Pase a la pestaña Diseño, abra la subcategoría Espaciado y agregue ’10px’ al margen superior. Esto creará suficiente distancia para que el triángulo se muestre debajo de la imagen del producto que agregaremos en los próximos pasos. La razón por la que usamos porcentaje en lugar de píxeles es para que coincida con diferentes tamaños de pantalla. La opción de porcentaje tiene eso en cuenta y se asegura de que la distancia se calcule correctamente.
Agregue el primer módulo de imagen a la segunda columna
Dimensiones de la imagen
Ahora que hemos terminado de agregar módulos a la primera columna y modificarlos según nuestro diseño, podemos pasar a la segunda columna. Para esta columna, lo primero que necesitaremos es una de las imágenes del producto con las siguientes dimensiones:
- Ancho: 1600px
- Altura: 1187px
Las imágenes de productos que hemos utilizado para este ejemplo son un recurso gratuito que puede encontrar aquí . Cada una de las imágenes tiene un archivo de Photoshop que puedes modificar a tu gusto, cambiar los productos es una de esas cosas que puedes hacer.
Cargar imagen
Una vez que tenga la imagen de su producto en su lugar, continúe, agregue un nuevo módulo de imagen y cargue su imagen de producto.
Espaciado
Luego, pase a la pestaña Diseño, abra la subcategoría Espaciado y agregue ‘-20%’ al margen superior. Como recordará, hemos usado un color de fondo transparente para nuestra barra de menú principal en la primera parte de este tutorial. Al hacerlo, permitimos que este módulo de imagen aparezca justo debajo de la barra de menú principal sin estar cubierto por un color de fondo del menú principal.
Agregar segundo módulo de imagen a la segunda columna
Dimensiones de la imagen
Justo debajo de la imagen que agregamos en el paso anterior de este tutorial, agregaremos otra imagen del producto. Esta vez, estamos usando las siguientes dimensiones para la imagen:
- Ancho: 1600px
- Altura: 1200px
Cargar imagen
Continúe, agregue un módulo de imagen y cargue la imagen del producto que ha elegido.
Espaciado
Luego, pase a la pestaña Diseño y abra la subcategoría Espaciado. Vamos a hacer que este módulo se superponga tanto a la imagen anterior como a la primera columna para crear un diseño más complejo. Para lograr eso, use el siguiente margen personalizado:
- Superior: -50%
- Derecha: 350px
- Izquierda: -350px
Estilos de borde
También estamos usando estilos de borde superior y derecho con el mismo color que el fondo de la sección:
- Ancho del borde: 15px
- Color del borde: #f2f2f2
- Estilo de borde: Sólido
Recrear versión de tableta y teléfono
Crear nueva sección
Color de fondo
La versión para tabletas y teléfonos que creamos para este ejemplo es mucho más sencilla y adecuada para los tamaños de pantalla de tabletas y teléfonos. Aunque la versión de escritorio puede ser más atractiva, simplemente no es funcional en la pantalla de una tableta o teléfono. Agregue una nueva sección justo debajo de la anterior y agregue ‘#f2f2f2’ como color de fondo.
Espaciado
Luego, abra la subcategoría Espaciado de esta sección y agregue ’50px’ al relleno superior e inferior para crear el espacio necesario entre la sección y la fila que está a punto de seguir.
Visibilidad
Por último, deshabilite esta nueva sección en el escritorio, ya que ya tenemos una versión de escritorio para esta sección principal.
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila con una columna:
Color de fondo
Abra la configuración de la fila y agregue el siguiente color al fondo de la fila: ‘rgba(237,237,237,0.73)’. Estamos usando este color encima de la imagen de fondo para que el texto sea más legible.
Imagen de fondo
Cambie a la pestaña de imagen de fondo y agregue una de las imágenes de su producto como fondo junto con las siguientes opciones:
- Tamaño de la imagen de fondo: Tamaño real
- Posición de la imagen de fondo: centro izquierda
- Repetición de la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: superposición (esto hace que la superposición suceda)
Dimensionamiento
Continúe abriendo la subcategoría Tamaño y habilite la opción ‘Hacer esta fila de ancho completo’.
Espaciado
Por último, asegúrese de que las siguientes configuraciones también se apliquen a la subcategoría Espaciado:
- Superior: 0px
- Derecha: 0px
- Abajo: 120px
- Izquierda: 0px
Clonar el primer módulo de texto de la versión de escritorio
Configuración de texto
Básicamente, puede clonar los dos módulos de texto anteriores que creó para la versión de escritorio y agregarlos a esta nueva fila (o crearlos desde cero). Si elige clonar y modificar los módulos de texto, lo único que deberá cambiar es el tamaño del texto tanto para la tableta como para el teléfono:
- Tableta: 70px
- Teléfono: 60px
Clonar segundo módulo de texto de la versión de escritorio
Configuración de texto
Haga lo mismo para el Tamaño de texto del segundo Módulo de texto y listo:
- Tableta: 70px
- Teléfono: 60px
Resultado
Echemos un vistazo final al resultado que hemos recreado en diferentes tamaños de pantalla.
en el escritorio
en tableta
En el teléfono
Pensamientos finales
Bueno, ¡eso es todo por este tutorial! Esta sección de héroes de comercio electrónico le ahorrará tiempo y estimulará su creatividad para crear sus propios diseños utilizando esta técnica. Puede usar esta sección principal de comercio electrónico para cualquier tipo de sitio web, pero coincide específicamente con un sitio web de comercio electrónico que se enfoca en mostrar imágenes de productos de una manera creativa y moderna. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.