Como Criar um Layout de Tela Dividida Completa com Alternâncias Exclusivas em Divi
Publicados: 2020-05-06Os layouts de tela dividida são uma ótima maneira de adicionar um design ao seu site Divi que seja perfeitamente equilibrado e não convencional. Com as novas opções de posição do Divi, podemos criar um design de layout de tela dividida usando duas seções Divi adjacentes. Isso abre a porta para a construção de layouts de tela dividida ainda mais exclusivos usando o Divi Builder. Neste tutorial, exploraremos alguns recursos de design exclusivos enquanto criamos um layout de tela dividida completo com alternadores exclusivos em Divi.
Vamos começar.
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Alterna para abrir
Alterna Fechado
Móvel
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download 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!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo JSON para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Parte 1: Criando o Layout de Tela Dividida com Duas Seções
Para este design, vamos apresentar uma nova técnica que posiciona duas seções Divi adjacentes uma à outra para criar o design de tela dividida. Para começar, adicione uma linha de uma coluna à seção padrão. Isso dará início ao design de nossa primeira seção.
Seção 1 Configurações
Para esta primeira das duas seções, vamos começar adicionando as seguintes configurações de design:
Fundo
- Adicionar imagem de fundo
- Cor esquerda do fundo gradiente: #ffffff
- Cor esquerda do fundo gradiente: rgba (255,255,255,0,45)
Tamanho e espaçamento
Em seguida, atualize o tamanho e o espaçamento para que a seção ocupe 50% da largura do navegador e 100% da altura do navegador.
- Largura: 50% (desktop), 100% (tablet e telefone)
- Altura mínima: 900 px (desktop), nenhuma (tablet e telefone)
- Altura: 100vh (desktop), automático (tablet e telefone)
- Preenchimento: 0 px superior, 0 px inferior
Divisor superior
- Estilo do divisor superior: veja a captura de tela
- Cor do divisor superior: # 333333
- Altura do divisor superior: 50vh (desktop), 10vh (tablet e telefone)
- Repetição horizontal do divisor superior: 0,5x (desktop), 1x (tablet e telefone)
- Disposição de divisores principais: conteúdo da seção abaixo
Divisória Inferior
- Estilo do divisor inferior: veja a captura de tela
- Cor do divisor inferior: # 02c39a
- Altura do divisor inferior: 50vh (desktop), 30vh (tablet e telefone)
- Repetição horizontal do divisor inferior: 0,5x (desktop), 1x (tablet e telefone)
- Disposição do divisor inferior: conteúdo da seção abaixo
Seção 2
Seção 1 duplicada
Para criar a seção adjacente que ocupará o lado direito do layout da tela dividida, duplique a seção 1.
Em seguida, atualize as configurações da seguinte forma:
Posição
- Posição: Absoluta (desktop), relativa (tablet e telefone)
- Localização: Cima direita
- Índice Z: 10
Fundo
- Cor de fundo: nenhum / branco
Principais atualizações do divisor
- Estilo do divisor superior: veja a captura de tela
- Cor do divisor superior: # 02c39a
- Repetição horizontal do divisor superior: 1x
- Top Divider Flip: Vertical
O divisor deve se alinhar perfeitamente com o cabeçalho superior adjacente na seção 1.
Divisória Inferior
- Estilo do divisor inferior: veja a captura de tela
- Cor do divisor inferior: # f0f3bd
- Repetição horizontal do divisor inferior: 1x
- Virar Divisor Inferior: Vertical
Parte 2: Título e menu da seção 1
Agora que os layouts de duas seções estão prontos, podemos começar a adicionar o conteúdo a cada uma das seções.
Criando o Título
Para começar, criaremos um grande título na seção esquerda.
Configurações de linha
Antes de adicionar um módulo de texto, precisamos atualizar as configurações de linha para a linha na seção 1 da seguinte maneira:
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
- Preenchimento: 0px superior, 0px inferior, 10% à direita
- Posição: Absoluta (desktop), relativa (tablet e telefone)
- Localização: Centro Esquerdo
Módulo de Texto
Uma vez que as configurações de linha estão no lugar, a linha deve ser alinhada verticalmente dentro da seção. Em seguida, adicione um novo módulo de texto à linha.
Conteúdo de Texto
Abra as configurações do módulo de texto e atualize o seguinte conteúdo:
<h1>Divi <br />Web <br />Design</h1>
Design de Texto
Em seguida, atualize as configurações de design de texto da seguinte forma:
- Fonte do título: Poppins
- Peso da fonte do cabeçalho: negrito
- Alinhamento do Texto do Título: Direito
- Tamanho do texto do título: 10vw
- Altura da linha de direção: 1,2em
- Preenchimento: 5% esquerdo
Criando o Menu
Para este layout, uma vez que temos duas seções adjacentes, temos a oportunidade de adicionar um layout de 6 colunas a uma ou ambas as seções. Isso é ótimo para criar um menu de ícones agradável na parte inferior da seção.
Veja como fazer isso ...
Adicionar nova linha
Para criar o menu inferior, adicione uma nova linha de uma coluna sob a linha da seção 1. Estamos adicionando um layout de uma coluna inicialmente porque iremos duplicar a coluna mais tarde para criar todas as seis colunas.
Configurações de linha
Em seguida, atualize as seguintes configurações de linha:
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
- Preenchimento: 0 px superior, 0 px inferior
- Posição: Absoluta (desktop), Relativa (tablet e telefone)
- Localização: Inferior Esquerdo
- Índice Z: 3
Módulo Blurb
Em seguida, adicione um módulo blurb à nova linha.
Conteúdo do Blurb
Em seguida, atualize o conteúdo da sinopse da seguinte maneira:
- Título: Negócios
- Ícone: Edifícios
Blurb Styling
Em seguida, atualize as configurações de design da seguinte forma:
- Cor do ícone: # 333333
- Tamanho da fonte do ícone: 40px
- Alinhamento de Texto: Centro
- Tamanho do texto do título: 12 px
Em seguida, adicione o seguinte CSS personalizado à imagem do Blurb
margin-bottom: 10px;
Coluna Duplicada
Agora que temos nosso ícone projetado na coluna um, podemos acelerar a criação e o design dos outros 5 ícones, duplicando a coluna inteira 5 vezes.
Atualizar conteúdo para Blurbs
Depois que todas as 6 colunas / ícones forem criados, volte e atualize o título, ícone e URL para cada sinopse.
Parte 3 Seção 2 Alterna
Agora que a seção 1 está concluída, podemos começar a adicionar as alternâncias à seção direita de nosso layout de tela dividida. Haverá um total de três alternadores que correspondem às palavras grandes em cada título à esquerda. Cada um dos botões de alternância receberá uma posição absoluta personalizada na área de trabalho que os manterá no lugar.
Configurações de linha
Antes de começarmos a adicionar os módulos de alternância, precisamos otimizar o tamanho e o espaçamento da linha. Abra as configurações de linha para a linha na seção direita e atualize o seguinte:
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100% (desktop), nenhuma (tablet e telefone)
- Altura: 100%
Altura da Coluna
Agora que a linha tem uma altura igual à altura da seção, precisamos fazer o mesmo para a coluna. Para fazer isso, adicione o seguinte CSS personalizado ao elemento principal da coluna:
height: 100%;
Módulo de alternância superior
Com a altura da coluna no lugar, vamos adicionar o primeiro módulo de alternância à linha.
Alternar conteúdo
Em seguida, atualize o conteúdo de alternância com o título “Divi” e cole o seguinte conteúdo do corpo:
Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here. <a href="#">| Learn More ></a>
Alternar Design
Atualize o design de alternância da seguinte maneira:
- Cor do ícone: # 333333
- Tamanho da fonte do ícone: 40px
- Abrir Alternar cor de fundo: transparente
- Cor de fundo de alternância fechada: transparente
- Cor do texto do título aberto: # 333333
- Cor do texto do título: # 333333
- Fonte do título: Poppins
- Peso da fonte do título: ultraleve
- Tamanho do texto do título: 40px
- Cor do corpo do texto: # 333333
- Peso da fonte do link: # 333333
- Peso da fonte do link: negrito
- Estilo da fonte do link: TT
- Cor do texto do link: # 333333
- Espaçamento entre letras de link: 3px (desktop), 5px (foco)
Alternar tamanho e posição
- Largura: 50% (desktop), 80% (tablet e telefone)
- Largura máxima: 400px
- Largura da borda: 0 px
- Alternar ícone CSS personalizado:
left:-60px;
- Posição: Absoluta (desktop), Relativa (tablet e telefone)
- Deslocamento vertical: 22%
- Deslocamento horizontal: 50%
- Índice Z: 2
O CSS personalizado adicionado ao módulo de alternância coloca o ícone de alternância no tamanho esquerdo da alternância. E as configurações de posição colocam a alternância em uma posição absoluta usando a unidade de comprimento percentual que será dimensionada com a largura do navegador.
Módulo de Alternância Inferior
Alternar superior duplicado
Para criar a alternância inferior, duplique a alternância recém-criada.
Posição de atualização
Em seguida, abra as configurações de alternância duplicadas usando a caixa de camadas e atualize o deslocamento de posição da seguinte maneira:
- deslocamento vertical: 70%
Módulo de Alternância do Meio
Alternar inferior duplicado
Para criar o alternador do meio, duplique o alternador inferior.
Posição de atualização
Em seguida, atualize o seguinte:
- Localização: Esquerda Centro
- Deslocamento horizontal: 19px
Tamanho de atualização
- Largura: 95%
- Largura máxima: 500px
CSS customizado
Para um recurso de design opcional, podemos adicionar um snippet CSS personalizado ao elemento principal para alinhar o texto à direita do título.
Para fazer isso, cole o seguinte CSS no elemento principal:
display:flex; align-items:center;
Linhas Divisórias
Agora que nossos seletores estão no lugar, podemos adicionar algumas linhas divisórias para conectar os seletores superior e inferior com a palavra correspondente na seção esquerda.
Módulo Divisor Superior
Para criar a linha divisória superior, adicione um novo módulo divisor sob o alternador superior.
Design Divisor
Em seguida, atualize as configurações de design do divisor da seguinte forma:
- Cor da linha: # 333333
- Posição da linha: centrado verticalmente
- Peso do divisor: 2px
- Largura: 50%
- Transformar Traduzir Eixo Y: 29px
- Transformar traduzir o eixo X: -12px
- Estilo de animação: slide
- Direção da animação: direita
- Duração da animação: 2.000 ms
- Intensidade de animação: 10%
- Opacidade inicial da animação: 100%
Visibilidade e posição do divisor
Agora, tudo o que precisamos fazer é ocultar o divisor no celular e posicioná-lo de forma que se alinhe com o botão superior.
- Desativar em: telefone e desktop
- Posição: Absoluta
- Deslocamento vertical: 22%
- Índice Z: 1
Módulo Divisor Inferior
Módulo Divisor Superior Duplicado
Para criar o divisor inferior, duplique o módulo do divisor superior.
Posição de atualização
Em seguida, atualize o deslocamento da posição para alinhar com o botão de alternância inferior:
- Deslocamento vertical: 70%
Resultado final
Uma vez feito isso, confira o resultado final na página ao vivo.
Alterna para abrir
Alterna Fechado
Móvel
Pensamentos finais
Este layout de tela dividida completa apresenta algumas técnicas de design exclusivas que serão úteis para muitos designs futuros. As seções duplas oferecem inúmeras combinações de colunas e designs de divisores de seção. E a capacidade de posicionar alternadores será muito útil para o posicionamento preciso de informações importantes. Espero que ajude!
Estou ansioso para ouvir de você nos comentários.
Saúde!