Criando uma seção Polaroid Hero com as opções de transformação do Divi
Publicados: 2019-08-19Seções criativas de heróis tornam os sites memoráveis e especiais. Este design de seção herói polaroid evoca uma sensação de desejo por viagens vintage. Usando as opções de transformação da coluna, as polaróides podem ser organizadas da maneira que você quiser, como se estivessem espalhadas sobre uma mesa.
Você pode recriar este design de seção de herói polaroid com suas próprias imagens quadradas. Você também poderá baixar o arquivo JSON gratuitamente!
Vamos lá.
Antevisão
Área de Trabalho
Móvel
Baixe o Polaroid Hero Section Design GRATUITAMENTE
Para colocar as mãos no design da seção do herói polaroid gratuito, primeiro você precisa baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Inscreva-se no nosso canal no Youtube
Vamos começar a recriar
Adicionar nova seção
Comece adicionando uma nova seção à página em que está trabalhando.
Divisória Inferior
Adicione um divisor de fundo verde menta.
- Posicionamento do divisor: inferior
- Estilo divisor: # 12
- Cor do divisor: Verde Menta # d2f2d0
- Altura do divisor: 23vw
Espaçamento
Ajuste o espaçamento da seção.
- Margem superior: 7vw
- Margem inferior: 0px
- Preenchimento superior e inferior: 0 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha à sua seção. Escolha a seguinte estrutura de coluna:
Dimensionamento
Agora, ajuste o tamanho da linha.
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 90vw
- Largura máxima: 100%
Espaçamento
Em seguida, ajuste o preenchimento superior e inferior nas configurações de espaçamento.
- Preenchimento superior e inferior: 0 px
Exibição
Adicione uma linha de código CSS ao elemento principal da linha para manter as colunas próximas umas das outras em tamanhos de tela menores.
- CSS personalizado - Elemento principal: display: flex;
display: flex;
Adicionar Módulo de Imagem à Coluna 1
Carregar imagem quadrada
Adicione um módulo de imagem à coluna 1 e carregue uma imagem quadrada.
Alinhamento
Agora, ajuste o alinhamento do módulo.
- Alinhamento do Módulo: Centro
Dimensionamento
Em seguida, aumente a largura do módulo.
- Forçar largura total: Sim
Adicionar Módulo de Texto à Coluna 1
Adicionar conteúdo
Adicione um módulo de texto e insira algum conteúdo. Usaremos a palavra "polaroid".
Texto
Defina o estilo da fonte do texto.
- Fonte do texto: Advent Pro
- Alinhamento de Texto: Centro
- Cor do texto: cinza muito escuro # 474747
- Tamanho do texto:
- Desktop: 1vw
- Tablet + telefone: 2vw
- Espaçamento entre letras do texto: 0,1vw
- Altura da linha de texto: 1.8em
Dimensionamento
Use '100%' para a largura nas configurações de dimensionamento.
- Largura: 100%
Espaçamento
Agora ajuste o espaçamento.
- Margem superior: 1vw
Clonar módulos duas vezes e colocar duplicatas nas colunas restantes
Alterar imagem e cópia de duplicados
Altere as imagens em cada módulo de imagem duplicado. Se o seu design exigir isso, altere também o conteúdo do texto.
Configurações da coluna 1
Fundo
Continue abrindo as configurações da coluna 1 da linha. Defina o fundo como branco para criar o efeito polaroid.
- Cor de fundo: branco #ffffff
Espaçamento
Adicione um pouco de preenchimento inferior para criar a borda inferior polaroid mais larga.
- Preenchimento inferior: 2vw
Fronteira
Adicione uma borda para finalizar o visual polaroid.
- Largura da borda de 4 lados: 1vw
- Largura da borda superior: 2vw
- Largura da borda direita: 2vw
- Largura da borda inferior: 1vw
- Largura da borda esquerda: 2vw
- Cor da borda: branco #ffffff
Sombra da caixa
Complete as configurações da coluna 1 adicionando uma sombra de caixa sutil.
- Sombra da caixa: # 1
Estenda as configurações da coluna 1
Use a opção estender estilos para estender as configurações da coluna.
- Volte para a janela de configurações da linha principal e clique nos três pontos à direita da guia da primeira coluna.
- Selecione 'estender estilos de item' e selecione 'em toda esta linha'.
Estilos de transformação da coluna 1
Agora, ajuste as configurações de transformação na primeira coluna.
- Transformar Traduzir: eixo x -11vw, eixo y -6vw
- Rotação de transformação: 341 graus, 1ª opção
Estilos de transformação da coluna 2
Em seguida, ajuste as configurações de transformação para a segunda coluna.
- Transformar Traduzir: eixo x -22w, eixo y 0vw
- Rotação de transformação: 10 graus, 1ª opção
Estilos de transformação da coluna 3
Finalmente, ajuste as configurações de transformação para a coluna três.
- Escala de transformação: 68% em ambos os eixos
- Transformar Traduzir: eixo x -46w, eixo y 12vw
- Rotação de transformação: 31 graus, 1ª opção
Adicionar nova seção
Fundo
Adicione uma nova seção e aplique um fundo verde menta à seção.
- Cor de fundo: Verde Menta # d2f2d0
Divisória Inferior
Dê à seção uma divisória inferior.
- Posicionamento do divisor: inferior
- Estilo divisor: # 12
- Cor da divisória: Branco #ffffff
- Altura do divisor: 23vw
Espaçamento
Remova o preenchimento superior padrão.
- Preenchimento superior: 0 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha com 3 colunas.
Copiar e colar estilos de linha
Usando a visualização wireframe, copie e cole os estilos de linha da primeira seção
- Primeiro, clique nos três pontos à direita do menu de linha dentro da primeira seção. Selecione 'copiar estilos de linha'.
- Em seguida, clique nos três pontos à direita do menu de linha na segunda seção. Selecione 'colar estilos de linha'.
Copiar e colar configurações de coluna
Agora, copie as configurações de coluna na primeira linha e cole-as nas colunas 1 e 2 na nova linha.
- Primeiro, abra as configurações de linha na primeira linha.
- Em segundo lugar, clique nos três pontos à direita da guia da primeira coluna e selecione 'copiar estilos de item'.
- Em seguida, role para baixo até a nova linha e abra a guia de configurações.
- Por fim, clique nos três pontos à direita da primeira coluna e selecione 'colar estilos de item'.
Estilos de transformação da coluna 1
Agora, ajuste os estilos de transformação na coluna 1.
- Escala de transformação: 75% em ambos os eixos
- Transformar Traduzir: eixo x -8w, eixo y -14vw
- Transformar girar: 35 graus 1ª opção
Estilos de transformação da coluna 2
Em seguida, modifique os estilos de transformação na coluna 2.
- Transformar Traduzir: eixo x -17w, eixo y 2vw
- Transformar girar: 346 graus 1ª opção
Adicionar Módulos de Imagem
Duplicar e arrastar módulos de imagem
Agora, volte para a visualização de wireframe para duplicar e arrastar dois módulos de imagem.
- Primeiro, duplique o primeiro módulo de imagem na primeira seção duas vezes.
- Em seguida, arraste-os para a primeira e segunda colunas da segunda seção.
- Mude a imagem em cada módulo por uma nova imagem quadrada.
Adicionar Módulos de Texto
Duplicar e arrastar módulos de texto
Após as imagens, faça o mesmo com os módulos de texto. Duplique da primeira seção e arraste para a segunda seção.
- Na visualização wireframe, duplique o módulo de texto da primeira coluna na primeira seção duas vezes.
- Agora, arraste os novos módulos de texto para as colunas 1 e 2 na segunda seção.
- Se você deseja alterar o conteúdo, faça-o agora.
Adicionar Módulo de Texto à Coluna 3
Adicionar conteúdo
Clique no símbolo de mais na terceira coluna e adicione um módulo de texto. Insira algum conteúdo H2 e parágrafo.
Texto
Defina o estilo do texto da seguinte maneira.
- Fonte do texto: Advent Pro
- Alinhamento de Texto: Centro
- Cor do texto: cinza escuro # 848484
- Tamanho do texto:
- Desktop: 1vw
- Tablet + telefone: 1.9vw
- Espaçamento entre letras do texto: 0,1vw
- Altura da linha de texto:
- Desktop: 1.2em
- Tablet + telefone: 1.3em
Texto do Título
Agora, estilize o texto H2.
- Título: H2
- Fonte H2: Adamina
- Peso da fonte H2: negrito
- Cor da fonte H2: cinza muito escuro # 444444
- Tamanho da fonte H2:
- Desktop: 2vw
- Tablet + Telefone: 3vw
- Espaçamento entre letras H2: 4px
- Altura da linha H2:
- Desktop: 1.7vw
- Tablet + telefone: 1,5vw
Dimensionamento
Em seguida, ajuste o tamanho.
- Largura:
- Desktop: 60%
- Tablet: 91%
- Telefone: 100%
- Alinhamento do Módulo: Centro
Espaçamento
Finalmente, ajuste o espaçamento.
- Margem superior: -12vw
Adicionar Módulo de Botão à Coluna 3
Adicionar cópia
Clique no símbolo de mais abaixo do texto e adicione um módulo de botão. Adicione alguma cópia ao botão.
Alinhamento
Altere o alinhamento do botão.
- Alinhamento: Centro
Estilos de botões personalizados
Defina o estilo do botão de acordo.
- Tamanho do texto do botão:
- Desktop: 1vw
- Tablet: 2,4vw
- Telefone: 2.3vw
- Largura da borda do botão: 0 px
- Cor do texto do botão: preto # 000000
- Espaçamento entre letras dos botões: 4px
- Fonte do botão: Advent Pro
- Peso da fonte do botão: negrito
Espaçamento
Aplique um valor de margem superior.
- Margem superior: 2vw
Adicionar Módulo Divisor à Coluna 3
Visibilidade
Abaixo do botão, adicione um divisor e estilize o seguinte.
- Visibilidade: Sim
Linha
Dê ao divisor uma cor verde brilhante.
- Cor da linha: # 55f252
Dimensionamento
Altere as configurações de dimensionamento do divisor e pronto!
- Peso Divisor
- Desktop: 7px
- Tablet + telefone: 4px
- Largura:
- Desktop: 10%
- Tablet + telefone: 30%
- Alinhamento do Módulo: Centro
Antevisão
Vamos dar uma olhada novamente no design final da seção do herói polaroid em diferentes tamanhos de tela.
Área de Trabalho
Móvel
É um embrulho!
Neste post, mostramos como recriar uma seção de herói polaroid usando as opções de transformação do Divi. Esta é uma ótima maneira de mostrar várias imagens na seção de herói da sua página. Esperamos que este design inspire seus próprios designs criativos de seção de heróis! Se você tiver alguma dúvida, deixe um comentário na seção de comentários abaixo.