Uma das páginas de destino exclusivas que estamos oferecendo como membros vitalícios e novos clientes da Black Friday este ano é a impressionante página de destino do kit de interface do usuário. Este layout contém algumas das melhores combinações de design integrado do Divi e maquetes de alta qualidade que levarão seu site para o próximo nível. Nesta postagem, mostraremos como colocar as mãos nele e usá-lo de forma eficaz.

Se você é um cliente vitalício atual ou se comprou uma nova conta ou fez um upgrade durante a nossa Promoção da Black Friday, você pode baixar este layout agora mesmo.

Obtenha a página inicial exclusiva do kit de interface do usuário da Black Friday

Antes de entrar neste caso de uso, você precisará colocar suas mãos na página inicial do Black Friday UI Kit exclusiva, que você pode obter tornando-se um novo membro Elegant Themes, atualizando sua conta existente ou já sendo um membro vitalício conosco. Se você realmente já é um membro vitalício, pode fazer login em nossa área de membros e baixar todas as nossas páginas de destino exclusivas aqui. Todos os outros precisarão usar o botão abaixo para comprar ou atualizar antes de seguirem com o resto do nosso tutorial.

Reivindique o acordo antes que desapareça!

Usando as estruturas de coluna da Divi para listar produtos e recursos lindamente

No restante deste post, presumiremos que você aproveitou nosso negócio da Black Friday ou que já é um membro vitalício e tem acesso à página inicial do kit de interface do usuário da Black Friday.

Depois de fazer o download da nova página inicial do UI Kit de nossa área de membros, você pode assistir ao vídeo abaixo para ver como é fácil de configurar. Também encorajamos você a seguir este tutorial para preparar seu site para novas personalizações.

Nesta postagem de caso de uso, vamos mostrar como listar de forma impressionante seus recursos e / ou produtos usando as novas estruturas de coluna do Divi. O design com o qual lidaremos parece ótimo com a página inicial do UI Kit e permite que você use o espaço em sua página de uma maneira eficaz e bonita.

Antevisão

Vamos dar uma olhada no resultado em diferentes tamanhos de tela.

Hover e animação

Também adicionaremos algumas configurações sutis de foco e animação aos vários elementos de design. Isso proporcionará a seguinte interação:

Vamos começar!

Adicionar nova página usando a página inicial do kit de interface do usuário

A primeira coisa que você precisa fazer é criar uma nova página usando a página inicial do UI Kit que você baixou e carregou. Se você não tem certeza de como fazer isso, certifique-se de conferir o vídeo na parte anterior deste post que irá guiá-lo passo a passo.

Localize a seção de recursos na página

Depois de fazer upload do layout, role para baixo até encontrar a seção de recursos na página.

Remover linhas existentes

Remova as duas últimas linhas que você pode encontrar nesta seção. Substituiremos o conteúdo dessas linhas por nossa lista de recursos / produtos.

Adicionar nova linha abaixo da linha que contém a linha

Estrutura da Coluna

Adicione uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento na guia de design.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: Sim
• Equalize a altura das colunas: Sim

Espaçamento

Para garantir que este design tenha uma ótima aparência em todos os tamanhos de tela, usaremos diferentes valores de margem e preenchimento personalizados:

• Margem superior: 100px
• Margem inferior: 100px
• Enchimento superior: 87 px
• Preenchimento superior da coluna 1: 100px (desktop), 0px (tablet e telefone)
• Preenchimento superior da coluna 2: 100 px (desktop), 0 px (tablet e telefone)
• Preenchimento superior da coluna 3: 100px (desktop). 0px (tablet e telefone)
• Preenchimento inferior da coluna 3: 50 px (tablet e telefone)
• Coluna 4 Preenchimento esquerdo: 10 px (somente telefone)
• Coluna 4 Preenchimento direito: 10 px
• Coluna 5 Preenchimento esquerdo: 5 px (desktop e tablet), 10 px (telefone)
• Coluna 5 Preenchimento direito: 5 px (desktop e tablet), 10 px (telefone)
• Preenchimento esquerdo da coluna 6: 10 px
• Coluna 6 Preenchimento esquerdo: 10 px (somente telefone)

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um Módulo de Texto à primeira coluna com um número.

Cor de fundo padrão

Adicione uma cor de fundo a este módulo.

• Cor de fundo: # 0f0f0f

Hover Background Color

E mude a cor de fundo ao pairar.

• Cor de fundo: # ff5400

Imagem de fundo

Você também pode adicionar uma das imagens do ícone, que pode ser encontrada em sua Biblioteca de mídia, ao plano de fundo:

• Tamanho da imagem de fundo: tamanho real
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição

Configurações de texto padrão

Continue modificando as configurações de texto.

• Fonte do Texto: Muli
• Peso da fonte do texto: leve
• Cor do texto: #ffffff
• Tamanho do texto: 80px (desktop e telefone), 40px (telefone)
• Altura da linha de texto: 1em

• Cor da sombra do texto: ## ffffff
• Orientação do Texto: Esquerda

Espaçamento Padrão

Adicione um pouco de preenchimento personalizado para criar um quadrado.

• Preenchimento superior: 200px
• Preenchimento esquerdo: 50 px (apenas telefone)
• Preenchimento direito: 50 px (apenas telefone)

Espaçamento de pairar

Modifique as configurações de espaçamento ao pairar.

• Preenchimento esquerdo: 100px

Fronteira

Para coincidir com a página inicial do UI Kit, também estamos adicionando alguns cantos arredondados sutis. Adicione '20px' a cada um dos cantos.

Sombra da caixa

Use a seguinte sombra de caixa para adicionar um pouco de cor ao módulo também:

• Posição horizontal da sombra da caixa: 20 px
• Posição vertical da sombra da caixa: -50px
• Força de propagação da sombra da caixa: 17 px
• Cor da sombra: # 593aff

Animação

Por último, mas não menos importante, adicione uma animação de slides muito sutil ao Módulo de Texto.

• Estilo de animação: slide
• Direção da animação: direita
• Intensidade de animação: 3%

Adicionar Módulo Divisor à Coluna 2

Visibilidade

O próximo módulo de que precisaremos é um Módulo Divisor. Vá em frente e adicione um à segunda coluna. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Altere a cor do divisor a seguir.

• Cor: #ffffff

Espaçamento

Para sobrepor o Módulo de Texto na primeira coluna, usaremos alguns valores de margem personalizados que ajustaremos de acordo com os diferentes tamanhos de tela.

• Margem superior: 30px
• Margem esquerda: -200px (desktop e tablet), 0px (telefone)
• Margem direita: 200px (desktop e tablet), 0px (telefone)

Adicione o Módulo de Texto # 1 à Coluna 3

Adicionar conteúdo

Para a próxima coluna! Aqui, o primeiro módulo de que precisaremos é um Módulo de texto de título. Vá em frente e adicione o título de seu primeiro recurso ou produto.

Configurações de texto de título

Em seguida, vá para as configurações de texto do título e faça algumas alterações para corresponder ao Pacote de layout do kit de interface do usuário.

• Fonte do título 3: Muli
• Peso da fonte do cabeçalho 3: leve
• Cor do texto do título 3: #ffffff
• Tamanho do texto do título 3: 30 px (desktop e tablet), 18 px (telefone)

Espaçamento

Para empurrar este módulo para a esquerda, vamos usar alguns valores de espaçamento personalizados.

• Margem superior: 20px
• Margem inferior: 20px
• Margem esquerda: -180 px (desktop e tablet), 0 px (telefone)
• Preenchimento esquerdo: 20 px (desktop e tablet), 50 px (telefone)
• Preenchimento direito: 20 px (desktop e tablet), 50 px (telefone)

Adicione o Módulo de Texto # 2 à Coluna 3

Adicionar conteúdo

O próximo módulo de que precisaremos é um Módulo de Texto de descrição. Vá em frente e insira a descrição de seu recurso ou produto.

Configurações de texto

Altere as configurações de texto a seguir.

• Cor do texto: rgba (255,255,255,0,5)
• Altura da linha de texto: 2.2em

Espaçamento

Empurre este módulo para a esquerda também usando alguns valores de espaçamento personalizados.

• Margem esquerda: -180 px (desktop e tablet), 0 px (telefone)
• Preenchimento esquerdo: 20 px (desktop e tablet), 50 px (telefone)
• Preenchimento direito: 20 px (desktop e tablet), 50 px (telefone)

Clone e coloque o módulo de botão na coluna 3

O último módulo de que precisaremos na coluna 3 é um Módulo de botão. Para economizar tempo, vamos clonar um botão existente na página e colocar a duplicata logo abaixo dos outros dois módulos que adicionamos.

Mudar o Conteúdo

Altere o conteúdo do módulo de botão.

Alterar espaçamento

Estamos empurrando este módulo para a esquerda também. Como você pode notar, todos os módulos da coluna 3 estão ocupando o espaço de duas colunas. Esse tipo de abordagem nos permite criar outra estrutura de coluna que corresponda ao resultado que desejamos.

• Margem superior: 50px
• Margem esquerda: -160 px (desktop e tablet), 50 px (telefone)
• Margem direita: 50 px (apenas telefone)

Adicionar Módulo de Imagem à Coluna 4

Enviar Imagem

Para a próxima coluna! Adicione um Módulo de imagem à coluna 4 e carregue uma imagem de sua escolha. Para este exemplo, usamos as dimensões de imagem 500 × 500, mas sinta-se à vontade para brincar com outros tamanhos de imagem também.

Sombra da caixa

Adicione uma sombra de caixa sutil a este módulo.

• Cor da sombra: #ffffff

Animação

E ainda por cima, adicione uma animação de slide à imagem também.

• Estilo de animação: slide
• Direção da animação: esquerda
• Atraso de animação: 100ms
• Intensidade de animação: 3%

Adicione o Módulo de Texto # 1 à Coluna 4

Adicionar conteúdo

Logo abaixo do Módulo de Imagem, vá em frente e adicione um título Módulo de Texto com algum conteúdo de sua escolha.

Cor de fundo padrão

Altere a cor de fundo deste módulo.

• Cor de fundo: # 0f0f0f

Hover Background Color

E use outra cor de fundo ao pairar.

• Cor de fundo: # 593aff

Configurações de texto de título

Continue alterando as configurações de texto do título para corresponder à página inicial do UI Kit.

• Fonte do título 4: Muli
• Cabeçalho 4 Peso da fonte: leve
• Cor do texto do título 4: #ffffff
• Tamanho do texto do título 4: 23 px (desktop e tablet), 18 px (telefone)

Espaçamento Padrão

Adicione alguns valores de espaçamento personalizados a seguir.

• Enchimento superior: 50 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Espaçamento de pairar

E mude esses valores ao passar o mouse para criar uma boa transição.

• Marign inferior: 50px
• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Adicione o Módulo de Texto # 2 à Coluna 4

Adicionar conteúdo

O segundo e último módulo de que precisaremos na coluna 4 é um Módulo de Texto de descrição. Insira algum conteúdo de sua escolha.

Cor de fundo

Altere a cor do plano de fundo a seguir.

• Cor de fundo: # 0f0f0f

Configurações de texto

E modifique as configurações de texto.

• Cor do texto: rgba (255,255,255,0,5)
• Altura da linha de texto: 2.2em

Espaçamento

Para criar uma aparência limpa, adicione algum preenchimento personalizado a este módulo.

• Preenchimento inferior: 50 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Fronteira

Por último, mas não menos importante, adicione '20px' aos dois cantos inferiores do módulo.

Clone todos os módulos na coluna 4 duas vezes e coloque nas colunas restantes

Alterar imagem e conteúdo

Agora que você tem todos os módulos necessários na coluna 4, pode clonar todos esses módulos duas vezes e colocar as duplicatas nas duas colunas restantes. Altere o conteúdo e as imagens para criar variedade.

Clonar linha quantas vezes desejar (de acordo com o número de itens da lista)

Terminamos nosso primeiro item da lista! Agora você pode clonar esta linha quantas vezes quiser, dependendo do número de recursos e / ou produtos que deseja apresentar.

Alterar o conteúdo do clone

Para cada uma das duplicatas, você precisará alterar o conteúdo.

Encontrar e substituir cor

Você também pode usar o recurso Find & Replace do Divi para alterar rapidamente a paleta de cores de um item da lista.

Mudar a cor do fundo do Hover

Certifique-se de que, depois de alterar a paleta de cores, você também altere a cor de fundo flutuante do Módulo de texto numérico.

• Cor de fundo: # 593aff

Alterar imagem de fundo

Por último, mas não menos importante, você também pode escolher outro ícone na lista, dependendo do recurso e / ou produto que está permitindo que apareça.

Pensamentos finais

Este caso de uso é parte do nosso negócio da Black Friday, onde compartilhamos 6 páginas de destino de edição limitada GRATUITA com clientes da Black Friday e membros vitalícios. Ao se juntar à nossa comunidade empoderada durante esses dias e se tornar um membro, você obterá:

• 25% DE DESCONTO EM TUDO
• Todas as 6 páginas de destino de graça
• Acesso aos nossos fantásticos temas e plug-ins
• Prêmios de bônus

Aproveite a oportunidade e torne-se um membro hoje!