El uso de maquetas es una de las formas más fáciles de brindar un sentido de profesionalismo muy necesario a su sitio web. Hay muchos sitios que ofrecen maquetas gratuitas que puede ajustar a sus necesidades específicas; Hemos creado una lista de algunos de los mejores que existen en esta publicación .
Y para ayudarlo a comenzar con las maquetas, le mostraremos cómo puede usar una maqueta de la pantalla de una computadora portátil, junto con Divi y sus mejores opciones de diseño integradas, para que su sitio web brille. Este tutorial es excelente si está creando una página de cartera donde muestra el trabajo anterior.
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado que lograremos.
Resultado en el escritorio
Resultado en móvil
Descargue la maqueta de pantalla gratuita de este tutorial
Para ayudarlo a llevar este tutorial a buen término, le proporcionaremos la maqueta que se utiliza en este tutorial de forma gratuita. En realidad, le proporcionamos dos maquetas de dispositivos y varias imágenes de alta calidad, ya que el recurso que (re)compartimos es en realidad de nuestro paquete de diseño de la agencia de diseño . Cuando descargue los recursos de imagen a continuación, puede descomprimir la carpeta y ubicar el archivo llamado MB-purefront.psd para seguir.
Descarga la maqueta de pantalla gratis
Cómo usar creativamente maquetas de pantallas de dispositivos dentro de diseños Divi
Suscríbete a nuestro canal de Youtube
Cambiar Mockup con Photoshop
Una vez que haya descargado la maqueta, puede cambiarla según sus necesidades. Comience abriendo el archivo.
Ocultar capa de fondo
Una vez que haya abierto el archivo, lo primero que deberá hacer es deshabilitar la capa con el color de fondo en la parte inferior de sus capas:
Haga doble clic en la capa de pantalla
A continuación, haga doble clic en el icono de la siguiente capa:
Verá aparecer una nueva pestaña que contiene la imagen que aparece en la maqueta de su pantalla.
Arrastra tu imagen para crear una nueva pestaña
Luego, arrastre la imagen que desea usar para su pantalla a las pestañas. Verás aparecer una nueva pestaña que contiene esta imagen. La imagen que está utilizando debe tener preferiblemente un ancho de ‘1440px’ y una altura de ‘900px’ para que se ajuste perfectamente a la pantalla.
Copiar imagen y pegar en capa de pantalla
A continuación, copie la imagen y péguela en la capa de pantalla que ha abierto. Verás que, si estás usando el ancho y la altura correctos, la imagen encajará perfectamente y se creará una nueva capa. Sin embargo, si su imagen es más grande de lo esperado, siempre puede ajustarla usando CTRL + T (en Windows) o Comando + T (Mac) para que la imagen encaje.
Fusionar capas
Una vez que haya agregado la nueva imagen a su capa de pantalla, seleccione ambas capas y combínelas.
CTRL + S o COMANDO + S
Una vez que se fusionan las capas, puede continuar y guardar la capa usando CTRL + S (en Windows) y Comando + S (en Mac).
Guardar imagen para web
Si vuelves a tu maqueta, verás que tu pantalla ha sido cambiada.
Ahora está listo para exportar la imagen. Para ello, vaya a Archivo > Exportar > Guardar para Web > Guardar como archivo PNG.
Agregar nueva sección
Ahora que hemos pasado por la parte en la que usamos Photoshop, es hora de cambiar a Divi.
Para este tutorial, solo necesitaremos una sección estándar. Continúe, agregue una nueva página y cree una nueva sección estándar sin ninguna configuración adicional.
Crear fila de escritorio
Como se mencionó anteriormente en esta publicación, le mostraremos cómo crear una página de cartera con maquetas de pantalla que coincidan con computadoras de escritorio, tabletas y teléfonos. Comenzaremos con la versión de escritorio y, una vez que complete esta parte, verá que crear la versión móvil será mucho más fácil, ya que reutilizaremos la mayoría de las configuraciones de escritorio.
Configuración de fila
Comience agregando una nueva fila a su sección con dos columnas iguales.
Color de fondo de la fila
Abra la configuración de la fila y elija ‘#035372’ como color de fondo.
Imagen de fondo de la fila
Luego, cambie a la pestaña de la imagen de fondo, cargue la maqueta de la pantalla y elija las siguientes configuraciones:
- Tamaño de la imagen de fondo: Ajuste
- Posición de la imagen de fondo: Centro
- Repetición de la imagen de fondo: sin repetición
- Mezcla de imagen de fondo: Normal
Color de fondo de la columna 2
Desplácese hacia abajo en la pestaña Contenido y use ‘rgba(25,46,58,0.85)’ como Color de fondo de la Columna 2.
Dimensionamiento
Luego, vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Tamaño:
- Hacer esta fila de ancho completo: Sí
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Continuando, agregue un relleno personalizado de ‘0px’ en la parte superior e inferior.
Visibilidad
Por último, deshabilite la fila en el teléfono y la tableta.
Agregar módulo de texto de título
Una vez que tenga todas las configuraciones de fila en su lugar, agregue un primer módulo de texto a la segunda columna de su fila.
Configuración de texto
Después de haber agregado el texto al cuadro de contenido, vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Texto:
- Fuente del texto: Cormorant Unicase
- Peso de fuente de texto: Negrita
- Tamaño del texto: 70px
- Color del texto: #FFFFFF
- Altura de línea de texto: 1em
- Orientación del texto: Izquierda
Espaciado
Y use el siguiente relleno personalizado:
- Relleno superior: 150px
- Relleno inferior: 50px
- Relleno izquierdo: 50px
Agregar módulo de texto de descripción
Agregue otro módulo de texto justo debajo del anterior.
Configuración de texto
Utilice la siguiente configuración para la subcategoría Texto de este módulo de texto:
- Fuente de texto: Actor
- Peso de fuente de texto: regular
- Tamaño del texto: 13px
- Color del texto: #ededed
- Altura de línea de texto: 1,7 em
- Orientación del texto: Izquierda
Dimensionamiento
Luego use un ancho de ‘67%’ dentro de la subcategoría Tamaño.
Espaciado
Por último, agregue un relleno inferior de ’30px’ y un relleno izquierdo de ’50px’.
El último módulo que necesitaremos agregar a esta fila es el Módulo de botones.
Alineación
Lo primero que deberá hacer después de agregar el Módulo de botones es elegir una Alineación de botones a la izquierda.
Botón
Luego, vaya a la pestaña Diseño y use la siguiente configuración para la subcategoría Botón:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Color del texto del botón: #035372
- Color de fondo del botón: #FFFFFF
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100px
- Espaciado entre letras de botones: 0px
- Fuente del botón: Actor
- Peso de fuente: Negrita
- Estilo de fuente: Mayúsculas
Espaciado
A continuación, agregue el siguiente margen personalizado y relleno al Módulo de botones:
- Margen inferior: 150px
- Margen izquierdo: 50px
- Relleno superior: 10px
- Relleno derecho: 30px
- Relleno inferior: 10px
- Relleno izquierdo: 30px
Sombra de la caja
Por último, agregue la siguiente sombra de cuadro para darle al botón un brillo extra:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 2px
- Fuerza de desenfoque de sombra de cuadro: 41px
- Fuerza de propagación de la sombra del cuadro: 4px
- Color de sombra: rgba(255,255,255,0.3)
- Posición de la sombra del cuadro: Sombra exterior
Clonar fila tantas veces como sea necesario
Una vez que haya completado todos los pasos que se mencionan anteriormente, puede continuar y clonar la fila tantas veces como necesite. Solo tendrás que hacer una pequeña modificación que te mencionaremos a continuación.
Cambiar color e imagen de fondo de fila
Lo primero que deberá hacer es cambiar la maqueta de la pantalla y el color de fondo de su fila. Para el ejemplo que estamos recreando, estamos usando ‘#600026’ para la segunda fila y ‘#876700’ para la tercera fila.
Cambiar el color de fondo de la columna 2
El color de fondo de la columna 2 también debe cambiarse. La segunda fila de nuestro ejemplo usa ‘rgba(40,0,14,0.85)’ y la tercera fila usa ‘rgba(56,46,0,0.85)’.
Crear fila móvil
Ahora que hemos creado la versión de escritorio, la creación de la versión para dispositivos móviles y tabletas será mucho más rápida.
Clonar fila de escritorio
Comience por clonar la fila del escritorio que creó en la parte anterior de esta publicación.
Eliminar fondo de fila
Una vez que haga eso, deberá abrir la configuración de la fila y eliminar la maqueta de la pantalla en la subcategoría Fondo de la fila.
Deshabilitar en el escritorio
Luego, deberá ir a la pestaña Avanzado y deshabilitar la fila en el escritorio, en lugar de en la tableta y el teléfono.
Agregar módulo de imagen a la primera columna
A continuación, continúe y agregue un módulo de imagen a la primera columna de esta fila. Este módulo de imagen «reemplazará» la imagen de fondo de la fila que usamos en la versión de escritorio.
Cambiar módulo de texto de título
Orientación del texto central
Luego, abra su Módulo de texto y cambie la Orientación del texto a ‘Centro’ en la subcategoría Texto.
Eliminar relleno izquierdo
Y quite el relleno izquierdo también.
Cambiar el módulo de texto de descripción
Orientación del texto central
Continuando, abra el segundo Módulo de texto en su segunda columna y coloque la Orientación del texto en ‘Centro’.
Alineación del módulo central
Luego, abra la subcategoría Dimensionamiento y elija una Alineación de módulo central.
Eliminar relleno izquierdo
Por último, elimine también el relleno izquierdo de este módulo de texto.
Alineación del botón central
También necesitará cambiar la Alineación de botones de su Módulo de botones a ‘Centro’.
Eliminar margen izquierdo
Y elimina el margen izquierdo.
Clonar fila tantas veces como sea necesario
De nuevo, puedes clonar esta versión móvil tantas veces como necesites y hacerle alguna pequeña modificación.
Cambiar el color de fondo de la fila
Uno de esos cambios es cambiar el color de fondo de la fila a ‘#600026’ para la segunda fila y ‘#876700’ para la tercera fila en el ejemplo.
Cambiar el color de fondo de la columna 2
Y cambie el Color de fondo de la Columna 2 a ‘rgba(40,0,14,0.85)’ para la segunda fila y ‘rgba(56,46,0,0.85)’ para la tercera fila.
Cambiar imagen en el módulo de imagen
Por último, también deberás cambiar las maquetas de pantalla en cada una de las nuevas versiones que crees. Por supuesto, asegúrese de que estén en línea con su versión de escritorio.
Resultado
Resultado en el escritorio
Resultado en móvil
Pensamientos finales
En esta publicación, le mostramos cómo puede usar creativamente maquetas de pantalla junto con las opciones de diseño de Divi para crear hermosos resultados. El diseño que le mostramos cómo crear es ideal para páginas de portafolio donde muestra trabajos anteriores a sus visitantes. Si tiene alguna pregunta o sugerencia; asegúrese de dejar un comentario en la sección de comentarios a continuación.
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!