Como criar um CTA exclusivo com as opções de máscara e padrão de fundo do Divi

As novas opções de padrão e máscara de plano de fundo do Divi facilitam a criação de seções de call-to-action (CTA) atraentes e exclusivas em seu site. Você pode combinar imagens, gradientes, padrões e máscaras com muitas opções de personalização para criar designs de plano de fundo únicos que chamarão a atenção do visitante.

Neste tutorial, mostraremos como criar uma seção de CTA exclusiva com o novo padrão de plano de fundo e opções de máscara do Divi.

Vamos começar!

Espiada

Aqui está uma prévia da seção CTA que projetaremos neste tutorial.

O que você precisa para começar

Antes de começarmos, instale e ative o Divi Theme e verifique se você tem a versão mais recente do Divi em seu site.

Vamos pular.

Como criar um CTA exclusivo com o padrão de fundo e as opções de máscara do Divi

Criar uma nova página com um layout pré-fabricado

Para nosso tutorial, usaremos um layout pré-fabricado da biblioteca Divi. Para este design, usaremos a página inicial da sorveteria do pacote de layout da sorveteria.

Crie uma nova página, adicione um título e selecione a opção Usar Divi Builder.

Usaremos um layout pré-fabricado da biblioteca Divi para este exemplo, então selecione Browse Layouts.

Pesquise e selecione o layout da página de destino da sorveteria.

Selecione Usar este layout para adicionar o layout à sua página.

Agora estamos prontos para construir nosso projeto.

Modificando o layout do padrão de fundo e da máscara

Estaremos modificando o sabor da seção de CTA do mês deste layout. Vamos fazer algumas alterações em nosso layout para o padrão de fundo e o design da máscara.

Configurações de linha

Abra Configurações de linha e selecione Design.

Em Dimensionamento, equalize as alturas das colunas.

• Equalizar Alturas das Colunas: Sim

Em Espaçamento, remova o preenchimento superior para trazer o cone para o topo da seção.

• Preenchimento superior: 0px

Configurações da Coluna 1

Na guia Conteúdo para as configurações de linha, selecione as configurações da Coluna 1. Em Plano de fundo, exclua o plano de fundo laranja.

Configurações da Coluna 2

Agora, selecione as configurações da Coluna 2. O design original tem algum espaçamento que não precisamos, então vamos nos livrar dele. Em Design, navegue até Espaçamento e exclua o preenchimento superior.

Em seguida, selecione Avançado e adicione o seguinte CSS personalizado ao elemento principal para que nosso texto “sabor do mês” fique centralizado verticalmente.

margin:auto;

Configurações de seção

Abra as Configurações da Seção. Em Design, selecione Preenchimento. Ajuste o preenchimento da seção para que o cone superior se alinhe ao topo da página.

• Preenchimento: 0px

Adicionando um padrão de fundo e máscara à seção CTA

Agora que nosso layout foi modificado, podemos adicionar nosso padrão de fundo e máscara. Existem infinitas opções para padrões e máscaras de fundo com as novas opções do Divi, o que significa que você pode criar designs exclusivos para sua seção de CTA com apenas alguns cliques. Acompanhe para aprender a criar um plano de fundo atraente com essas configurações.

Configurações de cor de fundo, padrão e máscara

Navegue até as configurações de plano de fundo da seção.

Na guia de cores, adicione um plano de fundo laranja

• Cor: #FFA256

Na guia Padrão, defina a forma e a cor do padrão.

• Forma: confete
• Cor: #FF7D14

Agora vamos adicionar a máscara. Selecione a guia de máscara e adicione as configurações da seguinte forma:

• Forma: Blob de canto
• Cor da máscara: #FFFFFF
• Transformação de Máscara: Horizontal
• Proporção da máscara: paisagem
• Tamanho da Máscara: Capa

Ajustes de projeto

Agora que nosso plano de fundo está pronto, vamos fazer alguns ajustes finais no design.

Abra as configurações do botão “Comprar” e altere o alinhamento na guia Design.

• Alinhamento do botão: Esquerda

Altere a cor de fundo do estado de foco para o botão “Comprar” para que ele se destaque no fundo laranja.

• Fundo do botão ao passar o mouse: #FF7D14

Também ajustaremos o layout da linha para adicionar mais espaço entre o plano de fundo laranja e a seção “Sabor do mês” à direita. Altere o layout de 1:1 para 3:2.

E agora o design da área de trabalho está completo e você aprendeu como criar uma seção de CTA exclusiva com o padrão de fundo e as opções de máscara do Divi!

Tornando a seção CTA responsiva

Quando nossa seção de CTA é visualizada em um telefone ou tablet, o conteúdo da coluna 2 fica empilhado abaixo da coluna 1. Isso pode causar alguns problemas de legibilidade em nosso design. Vamos fazer alguns ajustes para otimizar nosso conteúdo e design para telas menores usando as configurações responsivas integradas do Divi.

Como queremos que o texto venha antes dos botões, copie o texto “Destaque Sabor do Mês” para o módulo de texto “July Orange Chocolate”. Certifique-se de adicionar este texto apenas às versões para telefone e tablet.

• Altere o texto “Orange Chocolate” para H3.

A seguir, faremos algumas alterações no texto para que ele se destaque nesse plano de fundo. Vá para a guia Design e faça as seguintes alterações:

• H2 (Telefone e Tablet) Cor do Texto: #000000
• H2 (Telefone e Tablet) Tamanho do Texto: 30px
• H3 (Telefone e Tablet) Cor do Texto: #000000
• H4 (Telefone e Tablet) Cor do Texto: #000000

Agora vá para as configurações do módulo de texto original “Sabor do Mês” e altere a visibilidade para que fique visível apenas em dispositivos desktop. Isso fará com que o módulo de texto original se oculte em dispositivos menores. O texto Sabor do Mês aparecerá acima do botão, com o outro texto na página.

• Desativar em: Telefone e Tablet

Em seguida, abra as configurações da linha e abra as configurações da coluna 1. Remova o preenchimento direito e esquerdo.

• Preenchimento direito: 0px
• Preenchimento esquerdo: 0px

Vá para as configurações da seção, depois o plano de fundo e edite as configurações da máscara

• Transformação de Máscara: Inverter
• Proporção da máscara: retrato

E agora você criou uma seção de CTA totalmente responsiva com um plano de fundo exclusivo, graças às opções de padrão e máscara de plano de fundo do Divi.

Resultado final

Vamos dar uma olhada no resultado final.

Pensamentos finais

Projetar uma seção de chamada para ação única e atraente é muito fácil, graças ao poderoso padrão de fundo e às opções de máscara do Divi. Liberte sua criatividade experimentando diferentes cores, padrões, máscaras e combinações de configurações. É fácil de projetar e você pode ajustar suas configurações até encontrar a aparência perfeita com apenas alguns cliques. Mais importante ainda, está embutido no Divi! Não há mais necessidade de projetar gráficos de fundo em outro programa. Você pode aplicar as configurações de plano de fundo a outras seções, linhas e módulos para designs ainda mais exclusivos. Se você quiser saber mais sobre os recursos de padrão e máscara de plano de fundo do Divi, confira nosso tutorial para uma seção de heróis com máscaras e padrões de plano de fundo e aprenda como combinar o construtor de gradiente do Divi com máscaras e padrões de plano de fundo.

Como você usou o padrão de fundo e as opções de máscara do Divi em seu site? Deixe-nos saber o que você criou nos comentários abaixo!