Ir para o conteúdo principal

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

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

O design dos anos 80 - nós adoramos! Com todas essas formas geométricas, planos de fundo 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 isso.

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 do 80, sobre o qual ninguém fala. Com todas essas formas geométricas, toneladas de padrões, fundos espaciais com esses efeitos neon baratos (isso deve lembrá-lo de boas lembranças).

De fato, você pode vê-lo em toda parte. Do Netflix "Strangers Things", MineCraft ou Muse, que acaba de lançar um álbum ao gosto de 80 - ou mesmo o remake de Tron.

Então, por que não aproveitar essa tendência e mostrar como implementá-la em uma página de destino criada com a Elementor?

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Não é apenas um tutorial teórico. Tomamos alguns elementos para o período da Black Friday, para fornecer ferramentas para preparar seus futuros eventos.

Seção de abertura

Nossa seção de abertura é uma seção de heróis. A primeira coisa a observar aqui é o título. Eu recomendo colocar muito esforço nessa área, pois é a primeira coisa que seu visitante verá.
Pense na mensagem exata que você pretende transmitir. Ter um título amplo e claro irá capturar a atenção das pessoas. Esta primeira seção também deve incentivar os usuários a rolar para baixo e rolar pelo resto da página.

Efeito neon

Efeito néon preto sexta-feira elementor.jpg

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

Você pode ver que a mensagem mais importante está escrita em um "néon brilhante". Para obter essa aparência neon, você precisa adicionar CSS ao seu design. CSS adicionará muita sombra rosa ao texto. Essa é a coisa toda.

Você deve adicionar um widget de cabeçalho, alterar o tamanho da fonte para fazer 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:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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 da rosa, basta alterar o número da cor após o sinal de libra. Só isso.

Título vertical

Outro aspecto interessante desse design aparece ao lado das letras "FRI", com o ano anexado aparecendo verticalmente (graus 90).

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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Estilize seu texto e abra a guia avançada da segunda coluna (a que você deseja girar) e, na guia CSS personalizado, escreva este código:

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

80 fundo retrô

Depois de terminar de trabalhar na mensagem principal, comece a trabalhar em segundo plano para dar um novo impulso ao texto e dar uma aparência de retro à ficção científica 80. Aqui, adicionei uma imagem projetada no Photoshop e a usei como fundo de herói.
Neste projeto, o plano de fundo apresenta uma grade geométrica que lembra Tron com um toque de palmeiras dobradas para a esquerda e um gradiente principal de azul-roxo-rosa para obter essa sensação retrô. Há também alguns pequenos toques como o "DeLorean DMC-12" (você provavelmente o reconhecerá em De Volta para o 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

caixa de informações elementor.gif
Ao projetar uma página de destino, você precisa pensar nos relacionamentos entre cada seção. É uma tarefa mais complicada quando se trata de design de moda como o retro 80.
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, projetei um aspecto mais sombrio de "objetos desconhecidos" à medida que "exploramos" a página. Aqui você pode ver um título, bolas 3 e um botão. Para criar esse efeito 3D flutuante, usei um pouco do Photoshop em combinação com as configurações de flip-box da Elementor.

Encenado no Photoshop

Então a primeira coisa que fiz foi criar toda a cena no Photoshop para ver como ela seria antes de começar a construí-la. No título, você pode ver a aparência das luzes de neon antes e, abaixo desta, adicionei triângulos 3 com ícones e um título (os círculos).
Adicionei um gradiente azul-roxo-rosa a cada triângulo. Acima, um padrão de linha dá uma aparência de TV dos anos 80 e um borrão por trás, para criar uma aparência cintilante de ficção científica.
Os ícones também recebem uma aparência neon, assim como o título na parte inferior do triângulo. Adicione um efeito flutuante em negrito. O fundo possui um efeito esfumaçado, nublado e escuro com o mesmo padrão de linha usado para o triângulo.
Para animação 3D, os triângulos terão um plano de fundo transparente. Isso significa que o texto na parte de trás será exibido quando não estiver coberto. Então eu adicionei um pouco de fumaça preta nas laterais do triângulo para que a capa se misture e sempre cubra as costas.
Então, basicamente, existem três camadas para integrar no editor: o plano de fundo, o ícone e o título.

Construa ao vivo

No editor, adicionei o widget de flip-box. Na aba de conteúdo anterior, escolhi uma imagem como elemento gráfico e adicionei o título. Na guia Plano de fundo, na cor, mudei a cor para transparente e adicionei o triângulo que eu projetei na seção de imagem, depois mudei a posição para que se encaixasse perfeitamente .
Então, na guia de trás, fiz a mesma coisa, mas em vez de adicionar um título, adicionei o texto. Para alternar para a guia configurações. Aqui eu brinquei com a altura da caixa. Eu usei a unidade VH porque é uma unidade relativa, que mudará a imagem em relação à tela que o visitante usará.
Isso o torna mais responsivo. Na parte de efeitos, mantive o efeito Flip, mudei a direção para a esquerda e ativei a profundidade 3D para obter esse incrível efeito 3D.

CTA

Toda a composição aqui é direcionada para o botão (porque o que você deseja é que o usuário clique no botão). Aqui você pode ver que o botão não está em negrito e "na sua cara", mas se encaixa perfeitamente no fundo esfumaçado com um pouco de brilho ao redor. Mas quando você passa adiante, a cor rosa aparece.

Seção de Críticos

lista de revisões elementor.jpg
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 é hora de outra parte falar.

Projeto

Nesta seção, temos um widget de comentários sobre um fundo geométrico radical com um título de néon. O plano de fundo foi projetado no Photoshop e depois colocado no plano de fundo da seção como plano de fundo fixo para criar um efeito de rolagem de rolagem.
Eu queria dar a esta seção uma aparência de "nos bastidores"; assim, quando você rola para baixo, fica exposto a ela.

Seção da tabela de preços

tabela de preços elementor.jpg
Esta seção é a seção Tabela de preços . Aqui você pode ver todos os elementos que podem apoiar a venda. O título, a contagem regressiva e, claro - o gráfico de preços.
Esta é a linha de chegada da página de destino. Portanto, se o usuário não clicar, algo não funcionou.

Projeto

O design nesta seção tem mais de um contato dos anos da galáxia 80. O fundo aqui foi alterado no Photoshop, o que lhe confere uma aparência brilhante de roxo-rabanete e se destaca do fundo preto-preto que existia antes, dando um soco no final.
Sob o cabeçalho e o slogan, existe um medidor que indica o tempo restante até o final da venda. Aqui eu usei uma fonte spacy chamada "space mono" que adicionei através da opção de fonte personalizada.
Na tabela de preços abaixo, cada tabela possui um plano de fundo preto claro, dando a aparência de "flutuante 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 a ler o texto interno.
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 apresentado neste tutorial já está disponível na biblioteca Elementor. Então você pode usá-lo em um clique.

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
4 ações
ação4
chilrear
Enregistrer