Cómo crear un letrero 3D con efectos de desplazamiento en Divi


Todos sabemos que un buen sitio web facilita que los visitantes encuentren lo que buscan de forma 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 en 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 de perspectiva css en múltiples módulos de propaganda para crear el efecto 3D de letreros rotados en una publicación.

¡Empecemos!

Vistazo

poste de señalización divi 3D

poste de señalización divi 3D

poste de señalización divi 3D

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.

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?

(incrustar) https://www.youtube.com/watch?v=s9xUhZ2aeRg (/ incrustar)

Suscríbete a nuestro canal de Youtube

Lo que necesitas para empezar

Para comenzar, necesitará lo siguiente:

  1. Asegúrese de tener el tema Divi instalado y activo en su sitio de WordPress.
  2. 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.
  3. 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 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 25px.

poste de señalización divi 3D

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 cuadrada vacía para pintar el cuadrado de negro.

poste de señalización divi 3D

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.

Personalizar la fila

Antes de agregar un módulo, abra la configuración de la fila y actualice lo siguiente:

Imagen de fondo: (inserte una imagen cuadrada personalizada para la publicación)
Tamaño de la imagen de fondo: tamaño real
Repetición de imagen de fondo: Repita Y (verticalmente)

poste de señalización divi 3D

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.

poste de señalización divi 3D

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.

poste de señalización divi 3D

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)

poste de señalización divi 3D

Color de fondo: # 1a233f

Color del icono: # 9eb3c2
Ubicación de la imagen / icono: izquierda
Usar tamaño de fuente del icono: SÍ
Tamaño de fuente del icono: 80px

poste de señalización 3D divi

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

poste de señalización divi 3D

Esquinas redondeadas: 20px

Ancho del borde: 3px
Color del borde: # 21335e

poste de señalización divi 3D

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

poste de señalización divi 3D

Duplique la fila para obtener más señales

Ahora que tenemos uno de nuestros diseños de letreros completo, 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, duplique la fila y actualice el módulo de propaganda en la nueva fila de la siguiente manera:

Transformar Girar Eje X: -30deg

poste de señalización divi 3D

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

poste de señalización divi 3D

Cambio de 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)

poste de señalización divi 3D

Orientación del texto: izquierda

poste de señalización divi 3D

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;

poste de señalización divi 3D

¡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 que el módulo girado vuelva 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.

Dado que 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

poste de señalización divi 3D

Guarde la configuración y listo.

Ahora compruebe el diseño y la funcionalidad hasta ahora.

poste de señalización divi 3D

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 para agencias)

Luego actualice lo siguiente:

Usar efecto de paralaje: SÍ
Relleno personalizado: 0px arriba, 0px abajo

poste de señalización divi 3D

Resultado final

poste de señalización divi 3D

poste de señalización divi 3D

poste de señalización 3D divi

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!