Como criar uma página de estilo de estilo 80 com Elementor

Design dos anos 80 - adoramos! Com todas aquelas formas geométricas, fundos espaciais e efeitos de luz neon, nossa página de destino para um evento especial (festas de Natal) não poderia ser mais radiante! Vamos nos mostrar como fazer.

Retire as fitas da cabeça, acenda as luzes de neon e insira o Tron no seu videocassete ... os anos 80 estão de volta!

Como designer, sempre tive uma queda pelo design dos anos 80 que ninguém fala. Com todas essas formas geométricas, toneladas de padrões, fundos espaciais com aqueles efeitos de neon baratos (deve trazer de volta boas memórias).

Na verdade, você pode ver isso em todos os lugares. De "Strangers Things" da Netflix, MineCraft ou Muse, que acaba de lançar um álbum com um toque dos anos 80 - ou mesmo o remake de Tron.

Então, por que não aproveitar essa tendência e mostrar como implementá-la em uma landing page criada com Elementor ?

Não é apenas um tutorial teórico. Pegamos alguns elementos para o período de desconto atual (Black Friday), para fornecer ferramentas para se preparar para seus eventos futuros.

Seção de abertura

Nossa seção de abertura é uma seção de heróis. A primeira coisa a notar aqui é o título. Eu recomendo colocar muito esforço nesta área porque é a primeira coisa que seu visitante verá.

Pense na mensagem exata que você pretende transmitir. Ter um título grande e claro chamará a atenção das pessoas. Esta primeira seção também deve encorajar os usuários a rolar para baixo e navegar pelo resto da página.

Efeito neon

No centro da composição, coloquei o logotipo, a mensagem e o botão.

Você pode ver que a mensagem mais importante é escrita em uma "luz neon". Para obter aquele visual neon, você precisa adicionar CSS ao seu design. O CSS adicionará muita sombra rosa ao texto. Essa é a coisa toda.

Portanto, você precisa adicionar um widget de cabeçalho, alterar o tamanho da fonte escolhida para fazê-la brilhar e definir a cor para branco.

Em seguida, abra a guia Avançado e cole-o na guia CSS personalizada, adicione 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; }

Se você quiser usar um tom diferente ao lado do rosa, basta alterar o número da cor após o sinal de sustenido. Isso é tudo.

Título vertical

Outro aspecto interessante deste desenho aparece próximo às letras "SEX", com o ano anexado aparecendo verticalmente (90 graus).

Para obter essa aparência, você precisa adicionar um widget de seção interna. Isso é feito para implementar o efeito vertical apenas em uma coluna.

Após adicionar a seção interna, adicione um widget de título a cada coluna.

Defina o estilo de seu texto e, em seguida, abra a guia avançada da segunda coluna (a que você deseja girar) e, na guia CSS personalizada, escreva este código:

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

80 fundo retrô

Assim que terminar de trabalhar na postagem principal, comece a trabalhar no fundo para dar um impulso ao texto e fazer com que a ficção científica retro dos anos 80 pareça uma realidade. Aqui eu adicionei uma imagem desenhada no Photoshop e usei-a como fundo de herói.

Neste projeto, o fundo apresenta uma grade geométrica reminiscente de Tron com um toque de palmeiras inclinando-se para a esquerda e um gradiente principal de azul-púrpura-rosa para alcançar aquela sensação retro. Existem também alguns toques legais como o “DeLorean DMC-12” (você provavelmente o reconhecerá em De volta ao futuro).

O carro, assim como as estrelas cadentes, têm como alvo o texto principal de nossa seção, destacando nossa mensagem principal.

Seção Recursos

Ao projetar uma página de destino, você precisa pensar sobre as relações entre cada seção. É uma tarefa mais complicada quando se trata de um design moderno como os anos 80 retrô.

Portanto, depois de criar uma primeira seção incrível e elevar a fasquia, você deve manter o alto nível e manter o mesmo tema de design, considerando cada seção como uma composição em si.

Projeto

Nesta seção, desenhei uma aparência mais escura de “objetos desconhecidos” à medida que “rastreamos” a página. Aqui você pode ver um título, 3 marcadores e um botão. Para criar esse efeito 3D flutuante, usei um pouco do Photoshop em combinação com as configurações do flip-box doElementor.

Encenado no Photoshop

Então, a primeira coisa que fiz foi criar toda a cena no Photoshop para ver como tudo ficaria antes de começar a construí-lo. No título você pode ver a aparência das luzes de néon de antes, e embaixo dela adicionei 3 triângulos com ícones e um título (os círculos).

Eu adicionei um gradiente azul-roxo-rosa para cada triângulo. Acima dele, um padrão de linha dá uma aparência de TV dos anos 80 e um borrão atrás, para criar um visual cintilante de ficção científica.

Os ícones também têm uma aparência neon, assim como o título na parte inferior do triângulo. Adicione um efeito flutuante em negrito. O fundo tem um efeito esfumaçado, turvo e escuro com o mesmo padrão de linha usado para o triângulo.

Para animação 3D, os triângulos terão um fundo transparente. Isso significa que o texto na parte de trás aparecerá quando não estiver coberto. Então, adicionei um pouco de fumaça preta às laterais do triângulo para fazer o cobertor se misturar e ainda cobrir as costas.

Então, basicamente, há três camadas para construir no editor: o plano de fundo, o ícone e o título.

Construa ao vivo

No editor, adicionei o widget flip-box. Na aba de conteúdo frontal, escolhi uma imagem como elemento gráfico e adicionei o título. Na guia Fundo, em Cor, mudei a cor para transparente e adicionei o triângulo que desenhei na seção da imagem, depois mudei a posição para que se encaixe perfeitamente .

Então, na aba traseira fiz a mesma coisa, mas em vez de adicionar um título, adicionei o texto. Para ir para a guia de configurações. Aqui brinquei com a altura da caixa. Usei a unidade VH porque é uma unidade relativa, que vai mudar a imagem em relação à tela conforme o visitante usará.

Isso o torna mais responsivo. Na parte dos efeitos, mantive o efeito Flip, mudei a direção para a esquerda e ativei a profundidade 3D para obter este incrível efeito 3D.

CTA

Toda a composição aqui é voltada para o botão (porque o que você quer é que o usuário clique no botão). Aqui você pode ver que o botão não está em negrito e "no seu rosto", mas combina perfeitamente com o fundo esfumaçado com um pequeno brilho ao redor. Mas quando você passa por cima dele, a cor rosa aparece.

Seção de Críticos

Se o usuário rolar para a terceira seção, significa que você está fazendo algo certo. Então, depois de falar sobre o produto e seu espanto, agora é a hora de outra parte se manifestar.

Projeto

Nesta seção, temos um widget de comentários em um fundo geométrico radical com um título em neon. O fundo foi projetado no Photoshop e, em seguida, colocado no fundo da seção como um fundo fixo para criar um efeito de flutuação de rolagem.

Eu queria fazer esta seção parecer 'nos bastidores', para que quando você rolar para baixo, você esteja exposto a ela.

Seção da tabela de preços

Esta seção é a seção Tabela de preços . Aqui você pode ver todos os itens que podem apoiar a venda. O título, a contagem regressiva e, claro - a tabela de preços.

Esta é a linha de chegada da página de destino. Portanto, se o seu usuário não clicar, algo deu errado.

Projeto

O design nesta seção tem mais de um Contacto galáxia dos anos 80. O fundo aqui foi editado no Photoshop, dando-lhe uma aparência roxa de rabanete brilhante e destacando-se do fundo preto-preto que existia antes de dar um soco no final.

Abaixo do cabeçalho e do slogan, há um contador que mostra o tempo restante até o final da venda. Aqui, usei uma fonte spacy chamada 'space mono', que adicionei por meio da opção de fonte personalizada.

Na tabela de preços abaixo, cada tabela tem um fundo preto claro, dando a ela uma aparência de "flutuação no espaço". Quando você passa o mouse sobre ele, o fundo escurece e há um brilho ao redor como um ponto focal que o direciona para ler o texto dentro.

Quando você move o cursor do mouse sobre o botão, o botão muda de cor novamente. Assim que você terminar de ler as informações sobre nossas ótimas fotos,

Obtenha este modelo totalmente incrível

O modelo mostrado neste tutorial já está disponível na biblioteca Elementor. Então você pode usá-lo com um clique.

Como criar uma página de estilo de estilo 80 com Elementor