Criação de designs exclusivos de botão Divi usando um módulo de texto

A criação de designs exclusivos de botões Divi usando um módulo de texto pode já ter passado pela sua cabeça. Se sim, você é mais criativo do que imagina! Com o lançamento das opções de foco no Divi, todos os módulos podem ser clicáveis. Isso abre a porta para o uso de qualquer módulo (com todas as suas configurações de design integradas) como um CTA ou botão clicável. Um módulo de texto, por exemplo, permite adicionar tanto texto quanto você deseja ao módulo em diferentes formatos. Além disso, o módulo de texto também possui algumas opções de design robustas para personalizar os cantos arredondados para criar formas exclusivas.

Neste tutorial, explorarei alguns designs de botão Divi exclusivos que são possíveis usando um módulo de texto.

Vamos começar!

Espiada

Aqui estão alguns exemplos de designs de botão que criaremos facilmente com o módulo de texto.

Este é um botão com texto em duas linhas ...

Este é um botão que usa um item de lista ...

Este é um botão que usa cantos criativos ...

Criação de designs exclusivos de botão Divi usando um módulo de texto

Inscreva-se no nosso canal no Youtube

# 1 Criação de um botão com várias linhas de texto

Conforme mencionado anteriormente, o módulo de texto permite uma quantidade ilimitada de texto, portanto, seria fácil criar um botão com apenas duas linhas de texto usando o módulo de texto em vários formatos. Usando o wysiwyg ou editor de texto, você pode adicionar texto de parágrafo, cabeçalhos, links, listas e citações de bloco. E a melhor parte sobre o módulo de texto é que você pode direcionar e definir o estilo de cada um desses formatos de texto individualmente usando a interface do usuário da guia integrada nas configurações de design do construtor visual.

Isso torna realmente fácil adicionar várias linhas de texto e, em seguida, estilizar cada linha de texto separadamente para um layout de botão exclusivo.

Aqui está um exemplo rápido de como configurar o módulo de texto como um botão com várias linhas de texto.

Crie uma nova página e implante o construtor visual, caso ainda não tenha feito isso. Escolha a opção “Construir do zero”. Em seguida, crie uma nova seção, uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha.

Para o conteúdo de texto, use a guia html e digite o seguinte:

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Existem muitos estilos de fundo diferentes que podemos adicionar ao nosso módulo, mas para este exemplo, tet adiciona um fundo gradiente simples:

Cor do gradiente de fundo à esquerda: # FEE140
Cor certa do gradiente de fundo: # FA709A

Em seguida, vá para a guia de design e use a IU da guia de título para definir o estilo das tags de título h3 e h4 da seguinte maneira:

Peso da fonte do cabeçalho 3: ultra negrito
Estilo da fonte do título 3: TT
Cor do texto do título 3: #ffffff
Estilo da fonte do título 4: TT
Cor do texto do título 4: #ffffff
Tamanho do texto do título 4: 16px

Agora tudo o que precisamos fazer é dimensionar o módulo de texto para se parecer mais com um botão. Para fazer essa atualização, faça o seguinte:

Largura: 230px
Preenchimento personalizado: 1em superior, 0,5em inferior, 2em à esquerda, 2em à direita

Desde o lançamento das novas opções de foco do Divi, todos os módulos podem se tornar clicáveis ​​como um botão. Para fazer isso, volte para a guia de conteúdo e insira um URL do link do módulo.

Aqui está o resultado final.

Como um efeito de foco, você pode adicionar uma sombra de caixa que varre o botão, aplicando uma nova cor de fundo para substituir o gradiente.

Para fazer isso, abra as configurações do módulo de texto e atualize o seguinte:

Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 0 px (padrão), 230 px (pairar)
Posição vertical da sombra da caixa: 0 px
Cor da sombra: rgba (0,0,0,0) (padrão), # fee140 (foco)

Aqui está o que parece ao pairar.

# 2 Criando um botão de item de lista

Como os módulos de texto permitem adicionar listas (não ordenadas ou ordenadas) ao conteúdo, você pode aproveitar esse recurso para criar um botão de lista. Basicamente, tudo o que você precisa fazer é criar uma lista com um elemento de lista dentro da caixa de conteúdo. Em seguida, envolva o item da lista em uma tag de título para que você possa estilizar o item do marcador da lista e o texto do título separadamente.

Crie uma nova página e implante o construtor visual, caso ainda não tenha feito isso. Escolha a opção “Construir do zero”. Em seguida, crie uma nova seção, uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha.

Em seguida, adicione o seguinte html na guia de texto de suas configurações de conteúdo:

<ol><li><h3>Contact Us</h3></li></ol>

É importante envolver o texto do item da lista em uma tag de título para que possamos estilizar o marcador / número do item da lista separadamente do texto.

Agora vá para a guia de design e termine de projetar o módulo de texto como um botão:

Na categoria de configurações de texto, selecione a guia da lista ordenada e atualize o seguinte:

Fonte da lista ordenada: Exo 2
Peso da fonte da lista ordenada: leve
Cor do texto da lista ordenada: # 000000
Tamanho do texto da lista ordenada: 20 px
Espaçamento entre letras da lista ordenada: 5px
Tipo de estilo de lista ordenada: decimal à esquerda
Posição do estilo da lista ordenada: Fora
Recuo do item da lista ordenada: 2em

Na categoria Texto do título, clique na guia H3 e atualize o seguinte:

Fonte do Título 3: Exo 2
Cabeçalho 3 Peso da fonte: Semi negrito
Estilo da fonte do título 3: TT
Cor do texto do título 3: # 0c71c3
Título 3 Tamanho do texto: 26px
Altura da linha do título 3: 0,3em

Em seguida, altere a largura do módulo e dê a ele uma borda e um espaçamento para torná-lo parecido com um botão:

Largura (do módulo): 262 px
Alinhamento do módulo: centro
Preenchimento personalizado: 2em superior, 0px inferior, 2em à esquerda, 2em à direita
Cantos arredondados: 10px2em
Largura da borda: 1px
Cor da borda: # 000000
Estilo de borda: sólido

E não se esqueça de adicionar um link ao seu módulo para a URL designada de sua escolha.

Aqui está o design final.

Sinta-se à vontade para explorar novos tipos de estilo de lista (como Romano Superior) para designs exclusivos de botões de lista.

Nº 3: Criar um botão com cantos criativos (como uma folha)

Para este próximo design, vamos aproveitar a vantagem da configuração do design de canto arredondado em um módulo de texto. A ideia básica é definir valores de raio de canto diferentes para criar botões com formatos exclusivos. Neste exemplo, vou moldar nosso módulo para se parecer com um botão de folha.

Crie uma nova página e implante o construtor visual, caso ainda não tenha feito isso. Escolha a opção “Construir do zero”. Em seguida, crie uma nova seção, uma linha de uma coluna. Em seguida, adicione um módulo de texto à linha.

Abra as configurações do módulo de texto e digite o seguinte html na guia de texto da caixa de conteúdo:

<h3>grow</h3>
<h4>with us</h4>

Isso nos permite colocar o texto do botão em duas linhas (corte na largura vertical) e estilizá-los de forma independente.

Em seguida, adicione um fundo gradiente com uma cor mais “parecida com uma folha”.

Gradiente de fundo, cor esquerda: # 7cda24
Gradiente de fundo, cor certa: # 26e051
Direção do gradiente: 90 graus

Agora vamos pular para as configurações de design para centralizar nosso texto e estilizar as tags de título. você precisará selecionar a guia h3 para projetar o cabeçalho h3 e selecionar a guia h4 para projetar o cabeçalho h4:

Orientação do texto: centro
Fonte do título 3: Oswald
Peso da fonte do cabeçalho 3: leve
Estilo da fonte do título 3: TT
Cor do texto do título 3: #ffffff
Tamanho do texto do título 3: 27 px
Fonte do título 4: Oswald
Estilo da fonte do título 4: TT
Cor do texto do título 4: #ffffff

Continue atualizando o design para dar ao seu módulo de texto a largura e espaçamento adequados para um botão.

Largura: 178 px
Alinhamento do módulo: centro
Preenchimento personalizado: 2em superior, 2em inferior, 1em à esquerda, 1em à direita

Finalmente, podemos adicionar nossos cantos arredondados personalizados para dar ao módulo uma forma de folha e, em seguida, adicionar uma sombra de caixa para dar mais vida à folha. Para fazer essa atualização, faça o seguinte:

Primeiro, desbloqueie a opção de canto arredondado para que você possa atribuir valores individuais a cada canto.

Canto superior esquerdo: 100 px
Canto inferior direito: 100 px

Em seguida, adicione uma sombra de caixa ...

Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: 25px
Posição vertical da sombra da caixa: -4px
Força de propagação da sombra da caixa: -12px
Cor da sombra: rgba (0,0,0,0.25)

Não se esqueça de adicionar o URL do link do módulo para que o link do módulo seja o local desejado.

Aqui está o design final.

Para um efeito de foco, você pode alternar os valores dos cantos arredondados para colocar o design do botão na direção oposta ao foco:

E aqui está a aparência do efeito de foco.

Pensamentos finais

É sempre bom pensar fora da caixa de vez em quando quando se trata de projetar sites com Divi. Esperançosamente, este tutorial ajudará a pensar em designs de botões divi novos e criativos usando o módulo de texto. Na verdade, eu sugeriria explorar outros módulos (como o Módulo Blurb) para ainda mais opções de design.

Estou ansioso para ouvir de você nos comentários.

Saúde!