Como criar um módulo de pessoa com Bio no clique

Nesta postagem, mostraremos como criar um módulo pessoal com bio no clique. Assim que você clicar em outro módulo de pessoa na mesma linha, o texto dentro da biografia mudará. A qualquer momento, você pode fechar a biografia clicando no módulo pessoal novamente.

Você pode usar isso para, por exemplo, mostrar algumas informações adicionais sobre seus funcionários no site da sua empresa. O conceito ajuda você a fazer duas coisas: interagir com seus visitantes e economizar espaço em seu site. A única vez que a biografia será realmente exibida é quando um visitante mostrar interesse e decidir clicar nos elementos dentro do Módulo Pessoa.

Módulo de pessoa de resultado com bio no clique

Antes de mergulharmos nas diferentes etapas que você deve seguir para obter um Módulo Pessoa com biografia no clique, vamos dar uma olhada no resultado final no desktop:

e o resultado final no celular e tablet:

Com o celular, se uma biografia for aberta, as outras duas bios serão fechadas automaticamente. Você sempre terá apenas uma seção de biografia aberta, embora cada biografia tenha sua própria seção.

Módulo de pessoa com Bio no Click para área de trabalho

Inscreva-se no nosso canal no Youtube

Para que tudo funcione perfeitamente, precisaremos fazer duas versões: uma para desktop e outra para tablets e telefones. Cada uma dessas versões precisará de seu próprio código jQuery. Começaremos com a versão desktop e na próxima parte do post mostraremos como fazer a versão para tablets e telefones.

Adicionar a seção padrão da pessoa com uma linha de três colunas

A primeira coisa que precisamos fazer é adicionar uma seção que contém os Módulos de pessoa.

Abra uma nova página (ou a página onde você gostaria de adicionar o Módulo Pessoa com bio) e adicione uma nova seção padrão. Dentro dessa seção, coloque uma linha de três colunas. Claro, você também pode usar outro número de colunas, mas o código que usaremos leva em consideração os Módulos de 3 Pessoas. Se você deseja criar a mesma coisa para outros tipos de linhas, você terá que fazer algumas modificações no código jQuery que forneceremos mais tarde neste post.

Configurações de linha

Abra as configurações de linha e, na guia de conteúdo, adicione '# e5e5e5' como a cor de fundo de cada coluna.

Em seguida, vá para a guia Avançado e insira a seguinte sombra de caixa no elemento principal de cada uma das três linhas:

Adicionar um Módulo de Pessoa

A próxima coisa que você precisa fazer é adicionar um Módulo Pessoa à primeira coluna da linha.

Guia de Conteúdo

Na guia Conteúdo desse módulo, digite as informações e os links de mídia social e carregue a imagem.

Aba Avançada

Não faremos nenhuma modificação na guia Design deste módulo (sinta-se à vontade para fazer qualquer alteração na aparência posteriormente). Em vez disso, vamos para a guia Avançado imediatamente, onde adicionaremos a mesma sombra de caixa que adicionamos às colunas da linha, à imagem do membro.

Clonar o Módulo Pessoa

A próxima coisa que você precisa fazer é clonar o Módulo Pessoa duas vezes e colocá-lo nas outras duas colunas. Precisamos voltar a esta seção para adicionar as diferentes classes CSS. Mas antes de fazermos isso, vamos adicionar a seção de biografia primeiro.

Adicione a seção Bio Standard com uma linha de largura total

Adicione outra seção padrão logo abaixo da seção anterior que você criou. Nesta seção, precisaremos adicionar os diferentes módulos de texto vinculados aos vários Módulos de pessoa. Abra as configurações da seção e use a cor '# a0a0a0' como sua cor de fundo.

Adicionar dois módulos de texto

Dependendo de quantos Módulos de Texto você deseja que a biografia do módulo pessoal tenha, você pode adicionar Módulos de Texto. Neste caso, estaremos adicionando dois Módulos de Texto por Módulo de Pessoa.

Módulo de Primeiro Texto

Digite algum texto no primeiro Módulo de Texto e vá para a guia Design. Na guia Design, faça as seguintes alterações na subcategoria Texto:

• Orientação do Texto: Centro
• Tamanho da fonte do texto: 31
• Cor do texto: #FFFFFF
• Altura da linha de texto: 1,7em

Segundo Módulo de Texto

Adicione outro Módulo de Texto e faça as seguintes alterações na subcategoria Texto da guia Design:

• Orientação do Texto: Centro
• Tamanho da fonte do texto: 16
• Cor do texto: #FFFFFF
• Altura da linha de texto: 1,7em

Clone Cada Módulo Duas Vezes

Esses dois Módulos de Texto vão ser iguais para cada um dos bios. É por isso que você deve clonar cada um dos Módulos de Texto duas vezes. Esta é a aparência da estrutura final no back-end da página:

As diferentes classes CSS

Atribuir classes CSS aos módulos da pessoa

Vá para a guia Avançado de cada um dos Módulos da Pessoa e atribua as seguintes classes CSS:

• Módulo de primeira pessoa: person1
• Módulo de segunda pessoa: person2
• Módulo de Terceira Pessoa: person3

Atribuir classe CSS para a seção

Abra as configurações da seção onde seu BIOS está colocado. Vá para a guia Avançado e escreva “seção_1” na classe CSS.

Atribuir classes CSS aos módulos de texto

Agora, adicione as classes CSS aos módulos de texto que você criou da seguinte maneira:

• Vinculado ao primeiro Módulo Pessoa: div_text_1
• Vinculado ao segundo Módulo Pessoa: div_text_2
• Vinculado ao módulo da terceira pessoa: div_text_3

Adicionar código CSS de exibição à seção e todos os módulos de texto

A próxima etapa que você precisa fazer é ir para a guia Avançado da seção e todos os Módulos de Texto. Em seguida, adicione a seguinte linha de código CSS ao elemento principal da seção:

display: none;

Desativar no telefone e tablet

Agora, desative as duas seções que você criou para celular e tablet.

Módulo de pessoa com Bio no Click para tablet e telefone

Agora que mostramos como criar o módulo pessoal com bio no clique para desktop, mostraremos como fazê-lo para tablet e telefone também. Já desativamos as seções anteriores para telefone e tablet. Esta é a aparência do layout da área de trabalho no backend:

E esta é a estrutura de que precisamos para a versão para tablet e telefone.

Adicionar seis novas seções

Então, vá em frente e adicione seis novas seções à página. Em seguida, clone os módulos pessoais e coloque cada um em uma seção individualmente. Certifique-se de deixar uma seção intermediária, é onde a biografia acabará chegando.

Em seguida, adicione clone os módulos de texto e coloque-os na seção abaixo de cada seção que contém um Módulo Pessoa. A biografia será, por padrão, mostrada abaixo do Módulo Pessoa no celular e tablet.

.

As diferentes classes e IDs CSS

Depois de colocar todas as seções e módulos no lugar, é hora de começar a adicionar as classes CSS.

Atribuir classes CSS aos módulos da pessoa

Comece abrindo cada módulo de pessoa individualmente e alterando as classes CSS na guia Avançado para:

• Módulo de primeira pessoa: mobile_person1
• Módulo de segunda pessoa: mobile_person2
• Módulo de terceira pessoa: mobile_person3

Atribuir classes CSS às seções

Em seguida, abra todas as diferentes seções de biografia e atribua o seguinte a cada uma delas:

• Primeira seção da biografia : section_mobile_1
• Segunda seção da biografia : secton_mobile_2
• Terceira seção da biografia : section_mobile_3

Atribuir classes CSS aos módulos de texto

As últimas classes CSS das quais você precisará dar um lugar são aquelas vinculadas aos Módulos de Texto nas diferentes seções de biografia. De acordo com a seção de biografia, atribua as seguintes classes CSS aos módulos de texto dentro dessa seção:

• Vinculado ao primeiro módulo de pessoa: div_mobile_text_1
• Vinculado ao segundo Módulo Pessoa: div_mobile_text_2
• Vinculado ao módulo da terceira pessoa: div_mobile_text_3

Adicionar código CSS de exibição às seções

Seguindo em frente, você terá que tornar todas as seções da biografia invisíveis. Vá para a guia Avançado de cada uma das seções e copie e cole a seguinte linha do código CSS no Elemento Principal:

display: none;

Certifique-se de remover esta linha de código CSS no elemento principal de cada módulo de texto. Na versão Desktop, precisávamos torná-los invisíveis, mas isso não é necessário para celular e tablet.

Desativar no desktop

Agora, depois de fazer todas as modificações, resta uma coisa a fazer antes de adicionar o código: desative as três seções de biografia no desktop. Vá em frente e abra cada uma das seções e vá para a guia Avançado. Na subcategoria Visibilidade da guia Avançado, desative as seções na área de trabalho.

Adicione o código jQuery

Agora que fizemos todas as mudanças práticas no construtor Divi, é hora de passar para a última etapa; adicionando o código jQuery.

Adicionar um novo módulo de código

A maneira mais fácil de adicionar o código à sua página é por meio do Módulo de Código. Provavelmente, você usará este módulo de pessoa com bio no clique em apenas uma página. Ao usar um módulo de código, você garantirá que o código só seja carregado quando alguém estiver nessa página. Copie e cole os dois códigos jQuery separados no mesmo módulo de código.

Coloque o código da área de trabalho jQuery em seu módulo de código

Copie e cole as seguintes linhas de código CSS em seu Módulo de código para fazer a biografia da área de trabalho na versão com clique funcionar:

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_1");
var text_img_1 = $(".div_text_1");
var text_img_2 = $(".div_text_2");
var text_img_3 = $(".div_text_3");

$(".person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
text_img_2.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_2.css("display", "block");
text_img_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "block");
text_img_3.css("display", "block");
text_img_1.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_1.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Coloque o código jQuery do tablet e telefone em seu módulo de código

E as seguintes linhas de código para fazer a versão para tablet e telefone funcionar:

<script text="text/javascript">
jQuery(function ($) {
var text_1_visible = 0;
var text_2_visible = 0;
var text_3_visible = 0;

var section_1 = $(".section_mobile_1");
var section_2 = $(".section_mobile_2");
var section_3 = $(".section_mobile_3");

var text_img_1 = $(".div_mobile_text_1");
var text_img_2 = $(".div_mobile_text_2");
var text_img_3 = $(".div_mobile_text_3");

$(".mobile_person1").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else if (text_2_visible == 1 || text_3_visible == 1) {
section_1.css("display", "block");
text_img_1.css("display", "block");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 1;
text_2_visible = 0;
text_3_visible = 0;
}

else {
section_1.css("display", "none");
text_img_1.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person2").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else if (text_1_visible == 1 || text_3_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "block");
text_img_2.css("display", "block");
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 1;
text_3_visible = 0;
}

else {
section_2.css("display", "none");
text_img_2.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});

$(".mobile_person3").click(function () {
if (text_1_visible == 0 && text_2_visible == 0 && text_3_visible == 0) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else if (text_1_visible == 1 || text_2_visible == 1) {
section_1.css("display", "none");
text_img_1.css("display", "none");
section_2.css("display", "none");
text_img_2.css("display", "none");
section_3.css("display", "block");
text_img_3.css("display", "block");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 1;
}

else {
section_3.css("display", "none");
text_img_3.css("display", "none");

text_1_visible = 0;
text_2_visible = 0;
text_3_visible = 0;
}
});
});
</script>

Resultado final

Vamos dar uma última olhada no resultado depois de seguir todas as etapas ao longo deste post. É assim que vai ficar no desktop:

E no celular e tablet:

Empacotando

Neste post, mostramos como criar um módulo pessoal com biografia que se esconde e mostra no clique. Ao aplicar esse método, você poderá salvar algum lugar em seu site e mostrá-lo aos visitantes apenas quando eles demonstrarem interesse. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!