Cómo crear una página de estilo de estilo 80 con Elementor

Diseño de los 80: ¡nos encanta! Con todas esas formas geométricas, fondos espaciales y efectos de luces de neón, nuestra página de inicio para un evento especial (fiestas de Navidad) no podría ser más radiante. Vamos a mostrarnos cómo hacerlo.

Quítese las cintas para la cabeza, encienda las luces de neón e inserte Tron en su videograbadora ... ¡los años de 80 han vuelto!

Como diseñador, siempre he tenido una debilidad por el diseño de los 80 del que nadie habla. Con todas estas formas geométricas, toneladas de patrones, fondos espaciales con esos efectos de neón baratos (debería traer buenos recuerdos).

De hecho, puedes verlo en todas partes. Desde "Strangers Things" de Netflix, MineCraft o Muse, que acaba de lanzar un álbum con sabor a los 80, o incluso el remake de Tron.

Entonces, ¿por qué no aprovechar esta tendencia y mostrarle cómo implementarla en una página de destino creada con Elementor ?

No es solo un tutorial teórico. Hemos tomado algunos elementos para el período de descuento actual (Black Friday), para brindarle herramientas para prepararse para sus eventos futuros.

Sección de apertura

Nuestra sección de apertura es una sección de héroes. Lo primero que hay que tener en cuenta aquí es el título. Recomiendo poner mucho esfuerzo en esta área porque es lo primero que debes hacer. visitante veremos.

Piense en el mensaje exacto que pretende transmitir. Tener un título grande y claro llamará la atención de la gente. Esta primera sección también debería animar a los usuarios a desplazarse hacia abajo y navegar por el resto de la página.

Efecto de neón

En el centro de la composición coloqué el logo, el mensaje y el botón.

Puede ver que el mensaje más importante está escrito con una "luz de neón". Para obtener ese aspecto de neón, debe agregar CSS a su diseño. El CSS agregará mucha sombra rosa al texto. Eso es todo.

Por lo tanto, debe agregar un widget de encabezado, cambiar el tamaño de la fuente elegida para que brille y establecer el color en blanco.

Luego abra la pestaña Avanzado y péguelo en la pestaña CSS personalizada, agregue este código:

selector { text-shadow: 0 0 20px #fff, 0 0 10px #fff, 0 0 50px #ff0fad, 0 0 50px #ff0fad, 0 0 40px #ff0fad, 0 0 100px #ff0fad, 0 0 75px #ff0fad; }

Si desea usar un tono diferente al lado del rosa, simplemente cambie el número de color después del signo de almohadilla. Es todo.

Título vertical

Otro aspecto interesante de este diseño aparece junto a las letras "FRI", con el año adjunto apareciendo verticalmente (90 grados).

Para lograr este aspecto, debe agregar un widget de sección interior. Esto se hace para implementar el efecto vertical solo en una columna.

Después de agregar la sección interna, agregue un widget de título a cada columna.

Diseñe su texto y luego abra la pestaña avanzada de la segunda columna (la que desea rotar) y en la pestaña CSS personalizada escriba este código:

selector { float: left; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }

Fondo retro 80

Una vez que hayas terminado de trabajar en la publicación principal, comienza a trabajar en el fondo para darle un impulso al texto y hacer realidad la apariencia de ciencia ficción retro de los 80. Aquí agregué una imagen diseñada en Photoshop y la usé como fondo de héroe.

En este diseño, el fondo presenta una cuadrícula geométrica que recuerda a Tron con un toque de palmeras inclinadas hacia la izquierda y un degradado principal de azul-violeta-rosa para lograr esa sensación retro. También hay algunos toques agradables como el “DeLorean DMC-12” (probablemente lo reconocerá en Regreso al futuro).

El auto, así como las estrellas fugaces, apuntan al texto principal de nuestra sección, destacando nuestro mensaje principal.

Sección de características

Al diseñar una página de destino, debe pensar en las relaciones entre cada sección. Es una tarea más complicada cuando se trata de un diseño de moda como los 80 retro.

Entonces, después de diseñar una primera sección increíble y elevar el listón, debe mantener el alto nivel y mantener el mismo tema de diseño, mientras considera cada sección como una composición en sí misma.

Diseño

En esta sección, diseñé un aspecto más oscuro de "objetos desconocidos" a medida que "rastreamos" la página. Aquí puede ver un título, 3 viñetas y un botón. Para crear este efecto 3D flotante, utilicé un poco de Photoshop en combinación con la configuración de Flip-box deElementor.

Puesta en escena en Photoshop

Entonces, lo primero que hice fue crear toda la escena en Photoshop para ver cómo se vería todo antes de comenzar a construirlo. En el título puedes ver el aspecto de las luces de neón de antes, y debajo agregué 3 triángulos con íconos y un título (los círculos).

Agregué un degradado azul-violeta-rosa a cada triángulo. En la parte superior, un patrón de líneas le da un aspecto de televisión de los 80 y un desenfoque por detrás para crear un aspecto de ciencia ficción brillante.

Los íconos también tienen un aspecto de neón, así como el título en la parte inferior del triángulo. Agrega un efecto flotante en negrita. El fondo tiene un efecto ahumado, nublado y oscuro con el mismo patrón de línea utilizado para el triángulo.

Para la animación 3D, los triángulos tendrán un fondo transparente. Esto significa que el texto del reverso se mostrará cuando no esté cubierto. Así que agregué un poco de humo negro a los lados del triángulo para que la manta se mezclara y aún cubriera la espalda.

Así que básicamente hay tres capas para construir en el editor: el fondo, el ícono y el título.

Construir en vivo

En el editor, agregué el widget flip-box. En la pestaña de contenido frontal, elegí una imagen como elemento gráfico y agregué el título. En la pestaña Fondo, en color, cambié el color a transparente y agregué el triángulo que diseñé en la sección de imagen, luego cambié la posición para que encaje perfectamente .

Luego en la pestaña de atrás hice lo mismo pero en lugar de agregar un título agregué el texto. Para pasar a la pestaña de configuración. Aquí jugué con la altura de la caja. Utilicé la unidad VH porque es una unidad relativa, que cambiará la imagen en relación con la pantalla como visitante utilizará.

Esto lo hace más receptivo. En la parte de efectos, mantuve el efecto Flip, cambié la dirección hacia la izquierda y activé la profundidad 3D para lograr este asombroso efecto 3D.

CTA

Toda la composición aquí está dirigida al botón (porque lo que desea es que el usuario haga clic en el botón). Aquí puede ver que el botón no está en negrita y 'en su cara', pero se mezcla muy bien con el fondo ahumado con un poco de brillo alrededor. Pero cuando caminas sobre él, aparece el color rosa.

Seccion critica

Si el usuario se desplaza a la tercera sección, significa que está haciendo algo bien. Entonces, después de hablar sobre el producto y su asombro, ahora es el momento de que otra parte hable.

Diseño

En esta sección tenemos un widget de comentarios sobre un fondo geométrico radical con un título de neón. El fondo se diseñó en Photoshop y luego se colocó en el fondo de la sección como un fondo fijo para crear un efecto de desplazamiento de desplazamiento.

Quería hacer que esta sección se viera "detrás de escena", para que cuando te desplaces hacia abajo, estés expuesto a ella.

Sección de precios

Esta sección es la sección Tabla de precios . Aquí puede ver todos los artículos que pueden respaldar la venta. El título, la cuenta atrás y, por supuesto, la tabla de precios.

Esta es la línea de meta de la página de destino. Por lo tanto, si su usuario no hace clic, algo salió mal.

Diseño

El diseño en esta sección tiene más de una contacte 80s-galaxy. El fondo aquí ha sido editado en Photoshop dándole un aspecto de color púrpura rábano brillante y destacándose del fondo negro-negro que existía antes de darle un golpe al final.

Debajo del encabezado y el lema hay un contador que muestra el tiempo que queda hasta el final de la venta. Aquí utilicé una fuente espaciosa llamada 'espacio mono' que agregué a través de la opción de fuente personalizada.

En la siguiente tabla de precios, cada tabla tiene un fondo negro claro que le da una apariencia de "flotando en el espacio". Cuando pasa el mouse sobre él, el fondo se oscurece y hay un brillo alrededor como un punto focal que lo dirige a leer el texto en su interior.

Cuando mueve el cursor del mouse sobre el botón, el botón cambia de color nuevamente. Una vez que hayas terminado de leer la información sobre nuestras grandes tomas,

Obtén este modelo totalmente increíble

La plantilla que se muestra en este tutorial ya está disponible en la biblioteca. Elementor. Para que puedas usarlo con un solo clic.

Cómo crear una página de estilo de estilo 80 con Elementor