Como projetar uma seção de palestrante convidado com um CTA eficaz na Divi

Quer você tenha um podcast ou esteja hospedando um WordCamp (ou qualquer evento de palestrante), é sempre uma boa ideia ter uma seção de palestrantes convidados para o seu site. Assim como os depoimentos, apresentar palestrantes convidados é uma forma eficaz de promover valor e estabelecer credibilidade com seu público. Uma seção de palestrantes convidados também é um ponto chave para atrair novos candidatos para seu próximo evento ou episódio. Este tutorial mostra como criar uma seção de palestrantes convidados que não apenas apresente os palestrantes de uma forma elegante, mas também incentive novos palestrantes a aplicarem uma frase de chamariz eficaz.

Mas antes de começarmos, aqui está uma prévia do design final.

Espiada

E aqui está um efeito bônus de pairar que vou mostrar a você também.

Vamos começar!

Inscreva-se no nosso canal no Youtube

Construindo a Estrutura Básica e Conteúdo

Se você ainda não fez isso, crie uma nova página e implante o Divi Builder para construir no front end.

Em seguida, adicione uma nova seção com uma linha de uma coluna.

Adicione um módulo de texto à linha com o seguinte conteúdo:

<h2>Guest Speaker</h2>

Em seguida, adicione um módulo divisor diretamente sob o módulo de texto.

Agora vamos adicionar uma nova linha com uma estrutura de quatro colunas para acomodar nossos palestrantes convidados.

Na primeira coluna da linha, adicione um módulo de pessoa.

Atualize o conteúdo do módulo Pessoa da seguinte maneira:

Nome: [em branco]
URL do perfil do Facebook: [adicione “#” por enquanto]
URL do perfil do Twitter: [adicione “#” por enquanto]
URL do perfil do LinkedIn: [adicione “#” por enquanto]

Para a descrição, adicione o seguinte:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Nota: a tag hr gera uma linha divisória que tem algum estilo embutido a fazer tem 90px de largura e flutua para a esquerda. A marca forte que envolve o sobrenome torna-o ousado para um elemento de design exclusivo.

Agora que o conteúdo está pronto, salve as configurações do módulo pessoal.

Copie o módulo de pessoa que você acabou de criar e cole-o em cada uma das colunas restantes para que você tenha o mesmo módulo de pessoa em cada uma das quatro colunas. Para copiar e colar você pode usar as opções de menu do botão direito ou as teclas de atalho cmd + c cmd + v (mac) ou ctrl + c ctrl + v (win).

Abra a configuração do módulo de pessoa na coluna 4 e atualize o conteúdo para que contenha apenas o seguinte:

Nome: “Pode ser você!”
Descrição: “Use o botão abaixo para se inscrever para falar em nosso evento.”

Salve suas configurações.

Em seguida, adicione um módulo de botão diretamente sob o módulo de pessoa na coluna 4 e atualize o conteúdo do texto do botão para “Aplicar agora”. E salve suas configurações.

Volte para os primeiros módulos de três pessoas nas colunas 1-3 e adicione as imagens para cada um dos retratos do palestrante convidado. Certifique-se de que eles tenham o mesmo tamanho com dimensões iguais de altura e largura e que sejam grandes o suficiente para cobrir as larguras das colunas em todos os tamanhos de navegadores (de preferência, 600 x 600 pixels).

É assim que o layout do seu Guest Speak deve se parecer neste momento.

Estilizando o Layout do Palestrante Convidado

Estilizando a Seção

Abra as configurações da seção e atualize o seguinte:

Imagem de fundo: [Estou usando uma do nosso layout de agência]

Cor do gradiente de fundo à esquerda: # 293039
Cor do gradiente de fundo à direita: rgba (41,48,57,0,89)
Estilo do divisor superior: veja a captura de tela
Cor do divisor superior: # 293039
Altura do divisor superior: 30vw

Alterando as larguras das linhas

Visto que queremos que ambas as nossas linhas tenham a mesma largura, use multiselect para selecionar ambas as linhas e clique em um dos ícones de configuração para abrir as configurações do elemento.

Em seguida, atualize o seguinte:

Largura personalizada: 80%

Agora, ambas as linhas terão a mesma largura personalizada.

Estilo do título

Abra as configurações do módulo de texto que contém o título da seção “Oradores convidados” e atualize o seguinte:

Fonte do título 2: Montserrat
Peso da fonte do cabeçalho 2: negrito
Estilo da fonte do título 2: TT
título 2 Alinhamento de texto: à direita
Cor do texto do título 2: # 74bf46
Tamanho do texto do título 2: 70 px (desktop), 50 px (smartphone)

Salvar configurações.

Agora abra as configurações do divisor e atualize o seguinte:

Cor: #ffffff
Altura: 0 px
Largura: 90px
Alinhamento do Módulo: direito

Modelando os Módulos da Pessoa

Como queremos dar o mesmo estilo inicial a todos os nossos módulos pessoais, use multiselect para selecionar cada um e clique no ícone de configurações de um dos módulos para implantar o modal de configurações do elemento.

Atualize as seguintes configurações de elemento:

Cor do ícone: # 74bf46
Fonte do título: Montserrat
Peso da fonte do título: leve
Cor do texto do título: #ffffff
Tamanho do texto do título: 20px
Fonte do corpo: Montserrat
Cor do corpo do texto: #ffffff
Espaçamento entre letras do corpo: 2px
Altura da linha corporal: 1,8em

Estilizando o Módulo de Pessoa CTA

Estamos usando este módulo pessoal como uma chamada à ação que atrai novos palestrantes convidados para se inscreverem para um compromisso de palestra. Portanto, podemos deixar a imagem padrão (silhueta) ativa como uma forma criativa de exibir um ponto vazio. Mas existem alguns ajustes de estilo que precisamos adicionar para completar o design. Abra as configurações do módulo de pessoa na coluna 4 e atualize o seguinte.

Largura da borda da imagem: 18 px
Cor da borda da imagem: # d2d2d2
Opacidade da imagem: 50%

Peso da fonte do título: negrito
Altura da linha de título: 1,5em

Agora tudo o que resta fazer é estilizar nosso botão. Abra as configurações do módulo de botão e atualize o seguinte:

Cor do texto do botão: # 293039
Cor de fundo do botão: # 74bf46
Raio da borda do botão: 50 px
Fonte do botão: Montserrat
Intensidade da fonte: Negrito

Agora vamos dar uma olhada no resultado final.

Dica bônus: efeito de foco de zoom da imagem

Não se esqueça de todas as opções de foco integradas disponíveis no Divi. Na verdade, você pode ver alguns tutoriais inspiradores sobre esses efeitos de foco em nosso blog. Mas para este design, pensei em pensar um pouco fora da caixa e dar a você alguns trechos de CSS que farão com que sua imagem pessoal aumente (ou dimensione) levemente ao passar o mouse.

Se você está procurando um efeito sutil de foco para definir seus módulos pessoais, veja como fazê-lo.

Use multiselect para selecionar os módulos de pessoa nas colunas 1, 2 e 3. Abra as configurações do elemento. Na guia avançada, insira o seguinte CSS no Elemento principal :

overflow: hidden;

Este código evitará que a imagem em expansão se estenda para fora do contêiner do módulo.

Em seguida, adicione o seguinte CSS em Member Image :

transition: all 0.3s; 

Isso adiciona uma transição suave quando a imagem é redimensionada.

Para adicionar o css ao passar o mouse, clique no ícone ao passar o mouse e selecione a guia ao passar o mouse e insira o seguinte CSS:

transform: scale(1.1) translateY(-4.5%);

Isso dimensiona (ou expande) a imagem para um tamanho um pouco maior e a move um pouco para cima.

Agora as imagens terão um efeito de zoom sutil ao pairar.

Pensamentos finais

Bem, espero que você tenha gostado deste tutorial ou pelo menos saído com algumas dicas úteis de design. O layout da seção do palestrante convidado pode ser usado de várias maneiras. Outra aplicação perfeita seria a página de um funcionário listar simultaneamente os funcionários atuais e encorajar outros a se candidatarem a uma posição. Sinta-se à vontade para compartilhar algumas idéias conosco.

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

Saúde!