Cómo crear un letrero 3D con efectos de desplazamiento en Divi
Publicado: 2019-05-13Todos sabemos que un buen sitio web facilita que los visitantes encuentren lo que buscan de manera rápida y eficiente. Y siempre ayuda si puede hacer que su contenido sea más atractivo. En este tutorial, le mostraré cómo diseñar un letrero 3D que atraerá a los usuarios y les facilitará encontrar lo que buscan de una manera única. Para hacer esto, usaremos las opciones de transformación de Divi y la propiedad CSS de la perspectiva en múltiples módulos de propaganda para crear el efecto 3D de los letreros rotados en una publicación.
¡Empecemos!
Vistazo
Descargue el diseño del poste de señalización 3D GRATIS
Para poner sus manos en el diseño del Poste de Señalización 3D de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Suscríbete a nuestro canal de Youtube
Lo que necesitas para empezar
Para comenzar, necesitará lo siguiente:
- Asegúrese de tener el tema Divi instalado y activo en su sitio de WordPress.
- Si desea crear su propia imagen de publicación, necesitará un editor de fotos como Photoshop, Gimp o Sketch. O puede usar la imagen proporcionada en la descarga de diseño gratuita para este diseño anterior.
- Aparte de eso, construiremos todo desde cero en la parte frontal del Divi Builder.
Creación de la imagen del letrero
La forma más fácil de crear un letrero para este diseño es crear un pequeño bloque de imagen repetible que podemos agregar como imagen de fondo que se repite verticalmente hacia abajo en la sección o fila de la página. Si desea omitir este paso, puede importar el diseño json incluido en la descarga gratuita anterior para comenzar. Pero si desea crear el suyo propio con un color personalizado de su elección, aquí le explicamos cómo hacerlo.
Para este ejemplo, voy a usar Photoshop, pero el proceso también es muy similar para otros editores de fotos populares.
En Photoshop, haga clic para crear un nuevo documento con una altura y un ancho personalizados de 25 px.
Establezca el color de primer plano en negro (# 000000) o el color que desee.
Luego, seleccione la herramienta Bote de pintura y haga clic dentro de la capa del cuadrado vacío para pintar el cuadrado de negro.
Luego, guarde su imagen como jpeg en su computadora. Esta es la imagen que usaremos en el diseño para crear el poste para nuestro diseño de poste de señalización 3D.
Implementación del diseño de postes de señalización 3D en Divi
Una vez que esté listo, asegúrese de crear una nueva página, darle un título a la página e implementar Divi Builder en la interfaz. Seleccione la opción "Construir desde cero".
¡Tu lienzo en blanco te espera!
Ahora cree una nueva sección regular con una fila de una columna.
Personalización de la fila
Antes de agregar un módulo, abra la configuración de la fila y actualice lo siguiente:
Imagen de fondo: [insertar imagen cuadrada personalizada para publicación]
Tamaño de la imagen de fondo: tamaño real
Repetición de imagen de fondo: Repita Y (verticalmente)
Luego actualice lo siguiente:
Ancho de la canaleta: 1
Ancho máximo: 980px
Acolchado personalizado: 2vw superior, 2vw inferior
Luego, debemos agregar el siguiente CSS personalizado al elemento principal de la columna de la siguiente manera:
perspective: 1000px;
Esta propiedad css de perspectiva es necesaria para obtener el efecto 3D del signo (o propaganda) cada vez que lo rotamos con las opciones de transformación.
Para obtener más información sobre esto, consulte cómo funciona la perspectiva con las opciones de transformación de Divi.
Crear una señal con un módulo Blurb
Para crear nuestro primer letrero en nuestro letrero 3D, usaremos un módulo de propaganda. Continúe y agregue un módulo de propaganda a la fila.
Luego, abra la configuración de la propaganda y actualice el contenido de la propaganda de la siguiente manera:
Disminuya el contenido simulado para incluir solo un par de líneas de texto.
Usar icono: SÍ
Icono: flecha izquierda (ver captura de pantalla)
Color de fondo: # 1a233f
Color del icono: # 9eb3c2
Ubicación de la imagen / icono: Izquierda
Usar tamaño de fuente de icono: SÍ
Tamaño de fuente del icono: 80px
Orientación del texto: centro
Fuente del título: Playfair Display
Color del texto del título: # 9eb3c2
Tamaño del texto del título: 38px (escritorio), 26px (teléfono)
Ancho máximo: 600px
Alineación del módulo: centro
Relleno personalizado: 5% arriba, 5% abajo, 5% izquierda, 5% derecha
Esquinas redondeadas: 20px
Ancho del borde: 3px
Color del borde: # 21335e
Eso se encarga del estilo de nuestro módulo de propaganda, pero para obtener nuestro efecto 3D, necesitamos usar las opciones de transformación para rotar nuestro módulo de propaganda. Para hacer esta actualización lo siguiente:
Transformar Girar Eje X: 20 grados
Duplique la fila para obtener más señales
Ahora que tenemos uno de nuestros diseños de letreros completado, podemos duplicar la fila para hacer más. Cada vez que duplicamos la fila, simplemente necesitaremos actualizar la rotación de transformación para que los letreros giren en diferentes grados alrededor de la publicación.
Continúe y duplique la fila y actualice el módulo de propaganda en la nueva fila de la siguiente manera:
Transformar Girar Eje X: -30deg
Duplique la fila para crear un tercer letrero y actualice el módulo de propaganda en esa nueva fila de la siguiente manera:
Transformar Girar Eje X: 40 grados
Cambiar la dirección del segundo signo
Ahora mismo, todas las flechas apuntan en la misma dirección. Para cambiar la dirección de izquierda a derecha, necesitamos actualizar un poco la configuración del módulo de propaganda.
Abra la configuración del módulo de propaganda en la segunda fila (la del medio) y actualice lo siguiente:
Icono: flecha derecha (ver captura de pantalla)
Orientación del texto: izquierda
Podemos cambiar el orden del contenido de la propaganda para que el texto esté a la izquierda y el icono a la derecha. Para hacer esto, necesitamos agregar una sola línea de CSS personalizado al elemento principal de la siguiente manera:
direction: rtl;
¡Ahora el contenido de la propaganda se invierte y tiene un letrero que apunta en una nueva dirección!
Gire los letreros de nuevo al estado original al pasar el mouse
Una de las cosas interesantes de esta configuración es que puede agregar fácilmente un estado de desplazamiento para devolver el módulo girado a la rotación original (0 grados). Esto permite al usuario interactuar con el contenido y tener una visión clara del texto cuando se desplaza sobre el módulo.
Como queremos agregar el mismo estado de desplazamiento a los tres módulos de propaganda, use la selección múltiple para seleccionar los tres módulos de propaganda y abra la configuración de uno de los módulos para que aparezca el modo de configuración del elemento. Luego actualice lo siguiente:
Transformar Girar Eje X (flotar): 0deg
¡Guarde la configuración y listo!
Ahora compruebe el diseño y la funcionalidad hasta ahora.
Personalizando nuestra sección con una imagen de fondo
Para nuestro último paso, podemos agregar una nueva imagen de fondo a nuestra sección. Esto es opcional, por supuesto, pero la imagen correcta puede verse realmente genial, especialmente si usa el efecto de paralaje.
Abra la sección y agregue una nueva imagen de fondo. (Estoy usando una imagen de nuestro paquete de diseño de agencia)
Luego actualice lo siguiente:
Usar efecto de paralaje: SÍ
Relleno personalizado: 0px arriba, 0px abajo
Resultado final
Pensamientos finales
La creación de un letrero en 3D realmente agrega un elemento de diseño creativo y atractivo a su sitio que realmente puede hacer que su contenido resalte (literalmente). Y el efecto de desplazamiento permite al usuario ver el contenido sin el efecto 3D para una buena alternativa. No olvide que puede agregar fácilmente una URL de enlace al módulo de propaganda para que pueda servir como un elemento de navegación en el que se puede hacer clic si lo desea. De todos modos, espero que esto te sirva de inspiración para tu próximo proyecto.
Espero tener noticias tuyas en los comentarios.
¡Salud!