Como usar as opções de transformação para projetar planos de fundo exclusivos do divisor de seção em Divi
Publicados: 2019-04-06Os estilos de divisores de seção integrados do Divi sempre foram uma maneira popular (e simples) de adicionar designs de plano de fundo criativos às suas páginas. Além de fornecer uma maneira rápida e bonita de dividir o conteúdo da página, ele também pode adicionar uma textura de fundo abstrata para destacar seu site. E com o lançamento das opções de transformação do Divi, há ainda mais coisas legais que você pode fazer com esses divisores de seção.
Neste tutorial, vou mostrar como usar opções de transformação para projetar fundos de divisores de seção exclusivos em Divi.
Vamos começar.
Espiada
Aqui está uma prévia dos designs que você poderá construir neste tutorial.
Baixe o Layout de Exemplos de Fundo do Divisor de Seção GRATUITAMENTE
Para colocar suas mãos nesses fundos de divisores de seção de exemplo, 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.
Agora vamos ao tutorial, vamos?
Começando
Para começar com este tutorial, tudo que você precisa é o tema Divi e uma imagem para usar no conteúdo de exemplo. Estaremos construindo o design do zero. Tudo que você precisa fazer é criar uma nova página e implantar o Divi builder no front end. Então você está pronto para ir.
Criação de fundos de forma abstrata com divisores de seção
Este primeiro exemplo é uma maneira muito legal de criar alguns fundos de forma abstrata para o seu conteúdo. Basicamente, isso envolve personalizar uma seção vazia com um divisor e posicionar esse divisor de seção em qualquer lugar da página atrás de outro conteúdo.
Veja como fazer.
Criação da seção de conteúdo
Antes de começarmos a adicionar nossos divisores de seção à nossa página, vamos primeiro adicionar algum conteúdo de exemplo. Crie uma nova seção regular com uma linha de duas colunas.
Adicione o Módulo de Texto
Em seguida, adicione um módulo de texto à coluna 1 com o seguinte conteúdo simulado:
<h2>About Divi Meetups</h2> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings</p>
Em seguida, atualize o design da seguinte forma:
Tamanho do texto do texto: 16px
Altura da linha de texto: 1,9em
Fonte do título 2: Roboto
Peso da fonte do cabeçalho 2: leve
Tamanho do texto do título 2: 50 px (desktop), 40 px (tablet), 32 px (telefone)
Altura da linha do título 2: 1,4em
Adicione o Módulo de Imagem
Em seguida, adicione um módulo de imagem à coluna 2 e carregue a imagem que deseja exibir. Neste exemplo, estou usando uma imagem de um de nossos pacotes de layout de 800 x 1156 pixels.
Em seguida, ajuste a largura e o alinhamento da imagem da seguinte maneira:
Largura: 80% (desktop), 70% (tablet)
Alinhamento do Módulo: Esquerda
Adicionar Preenchimento à Coluna 1
Com nosso texto e imagem no lugar, precisamos adicionar algum preenchimento superior à coluna 1 para derrubar nosso módulo de texto. Abra as configurações de linha e atualize o seguinte:
Coluna 1 Preenchimento personalizado (desktop): 250 px superior
Coluna 1 Preenchimento personalizado (tablet): 50 px superior
Adicionando Seção Superior com Divisor de Seção
Neste ponto, estamos prontos para adicionar nosso primeiro projeto de divisor de seção. Para fazer isso, precisamos criar uma nova seção. Portanto, vá em frente e crie uma nova seção regular (não adicione uma coluna à seção porque não precisaremos de uma) e arraste-a acima da seção que contém nosso texto e imagem.
Em seguida, forneça a seção e o fundo transparente e um divisor superior, atualizando o seguinte:
Cor de fundo: rgba (0,0,0,0)
Estilo do divisor superior: veja a captura de tela
Cor do divisor: rgba (120,168,193,0,45)
Altura do divisor: 500 px (desktop), 400 px (tablet), 300 px (telefone)
Em seguida, vá para a guia avançada e defina o valor do índice Z como 1 para que fique acima da seção abaixo dele.
Em seguida, atualize o tamanho e o espaçamento da seção da seguinte forma:
Largura: 500 px (desktop), 400 px (tablet), 320 px (telefone)
Alinhamento de Seção: Centro
Margem personalizada: -100px
Preenchimento personalizado: 100 px superior, 100 px inferior
Observe que a largura é igual à altura do divisor que adicionamos anteriormente (500 px para desktop, 400 px para tablet e 320 px para telefone). Isso nos dará um design perfeitamente quadrado para nosso divisor de seção. Também é importante reduzir a largura e a altura do divisor para ajustar para tablet e telefone, porque se você não fizer isso, a seção irá distorcer e quebrar o design ou causar transbordamento na janela de visualização do navegador.
O preenchimento personalizado serve apenas para dar à seção alguma altura para que não tenhamos que ajustar os valores de conversão de transformação muito mais tarde.
Agora que temos nosso design de seção no lugar, podemos usar as opções de transformação para posicionar e girar o divisor de seção onde quisermos na página.
Atualize o seguinte:
Transform Translate X-axis (desktop): -100%
Transformar traduzir eixo Y (desktop): 200%
Transform Translate X-axis (tablet): -50%
Transform Translate eixo Y (desktop): 100%
Transformar e girar eixo Z: -45deg
Seção Copiar e Colar
Vamos adicionar mais um design de divisor de seção à página. Mas para obter uma vantagem inicial no design, implante o modo de visualização wireframe e copie a seção superior (com o estilo divisor de seção) e cole-a abaixo da seção que contém o texto e a imagem.
Atualizar as configurações da seção
Em seguida, atualize a margem personalizada da seguinte maneira:
Margem personalizada: -100px inferior
Em seguida, podemos reduzir o tamanho da seção usando a opção de escala de transformação da seguinte maneira:
Escala de transformação (eixos X e Y): 50%
Usando transform translate, podemos mover a seção para cima e para a direita da seguinte maneira:
Transform Translate X-axis (desktop): -20%
Transform Translate eixo Y (desktop): -100%
Transform Translate X-axis (tablet): 80%
Transform Translate X-axis (tablet): 30%
Agora gire a seção da seguinte maneira:
Transformar, girar eixo Z (desktop): 225deg
Transformar e girar eixo Z (tablet): -225deg
Resultado final
Vamos conferir o resultado final. Observe como as seções são reposicionadas no tablet e no telefone para um belo design.
E aqui estão alguns exemplos de diferentes estilos de divisor usando o mesmo layout. Sinta-se à vontade para experimentar diferentes estilos e rotações de sua preferência.
Criação de divisores de seção horizontal
As opções de transformação do Divi também nos permitem girar os divisores de seção para criar designs de divisor de seção horizontal. Isso pode fornecer um pano de fundo exclusivo para o conteúdo da página.
Veja como fazer.
Duplique a seção com conteúdo simulado
Para este exemplo, podemos usar a mesma seção de conteúdo que criamos para o primeiro exemplo acima. Vá em frente e copie e cole a seção na parte inferior da página.
Atualizar seção de conteúdo
Em seguida, abra as configurações de seção para a seção duplicada e atualize o seguinte:
Preenchimento personalizado (desktop): 80px superior, 80px inferior
Preenchimento personalizado (tablet): 0 px superior
Criando o divisor de seção horizontal
Para criar o divisor de seção horizontal, primeiro crie uma nova seção regular diretamente acima da seção de conteúdo.
Em seguida, atualize o seguinte:
Cor de fundo: rgba (0,0,0,0)
Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: rgba (120.168.193,0.45)
Altura do divisor superior: 80vw
Top Divider Flip: vertical
Para ter certeza de que podemos ver o divisor de seção no topo da seção abaixo dele, precisamos atualizar o Índice Z para 1.
Em seguida, precisamos dar à nossa seção uma largura e espaçamento personalizados da seguinte forma:
Largura: 800px
Alinhamento da seção: esquerda
Margem personalizada: -100px superior
Preenchimento personalizado: 100 px superior, 100 px inferior
A largura da seção (800px) se tornará a altura da seção quando ela girar para servir como um divisor de seção horizontal. Portanto, você pode precisar ajustar essa altura dependendo da quantidade de conteúdo que você tem na seção abaixo dela.
Agora estamos prontos para posicionar e girar a seção usando as opções de transformação da seguinte maneira:
Transformar Traduzir eixo X: -50%
Transformar Traduzir eixo Y: 250%
Transformar, girar, eixo Z: -90deg
Resultado final
Aqui está o resultado final do design.
E aqui estão mais alguns exemplos de estilos de divisores diferentes usando o mesmo layout.
Empacotando
Sempre há espaço para mais ideias sobre como adicionar um design exclusivo ao seu site. Com as opções de transformação do Divi e divisores de seção fáceis de projetar, você pode fazer coisas bem criativas. Esperançosamente, os exemplos neste tutorial irão inspirá-lo a criar alguns fundos divisores de seção para trazer uma nova abordagem em seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!