O módulo Divi Person é a melhor maneira de criar um bloco de perfil pessoal. Este é um ótimo complemento para usar nas páginas Sobre mim ou naqueles que apresentam membros da equipe onde você deseja criar uma biografia de pessoas individuais. Este módulo combinou texto, imagens e links de mídia social em um módulo coeso.
Como configurar o módulo Divi Person
Antes de adicionar um módulo Divi Person à sua página, você deve primeiro acessar o Divi Builder. Uma vez o Tema Divi instalado em seu site da Web, você notará um botão Use o Divi Builder acima do editor de postagem sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Em seguida, clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega em seu site da Web em primeiro plano se você estiver logado em seu painel do WordPress.
Depois de entrar no Visual Builder, você pode clicar no botão cinza de adição para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro das linhas. Se você está começando uma nova página, lembre-se de adicionar uma linha à sua página primeiro. Temos ótimos tutoriais sobre como usar os elementos de linhas e para seções por Divi.
Localize o módulo de pessoa na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "pessoa" e clicar em entrar para localizar e adicionar automaticamente o módulo Pessoa! Assim que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .
Exemplo de caso de uso: adicionando uma seção "Nossa equipe" a uma página Sobre nós
A página sobre nós é um bom lugar para apresentar os membros da sua equipe usando o módulo Pessoa. Ele adiciona um toque pessoal e pode ajudar a construir a confiança de novos clientes.
Para este exemplo, mostrarei como usar o módulo Pessoa para adicionar uma seção "Nossa Equipe" a uma página sobre uma pequena empresa. Usarei um layout de três pessoas e três colunas, o que mantém a seção mais compacta e combina com o design geral da página.
Usando o Visual Builder, insira uma nova seção padrão com uma linha de três colunas (1/3 1/3 1/3). Em seguida, adicione um módulo Person à primeira coluna.
Atualize as configurações do módulo Pessoa da seguinte maneira:
Opções de conteúdo
Nome: [Digite o nome da pessoa]
Posição: [Digite o ramal da pessoa]
Insira URLs para perfis de mídia social
Descrição: [Digite uma breve biografia]
Imagem: [Capturar uma imagem de 600 x 600]
Opções de design
Ícone de cor: # fcbf00
Cor do ícone ao passar o mouse: # e0a831
Fonte do cabeçalho: Roboto, negrito, alavancagem em
Tamanho da fonte do cabeçalho: 30px
Cor do texto do cabeçalho: # 505050
Espaçamento do cabeçalho da carta: 1px
Altura da linha do cabeçalho: 1.5em
Tamanho da fonte do corpo: 18 px
Tamanho da linha do corpo: 1.4em
Preenchimento personalizado: 15px para cima, 15px para a direita, 15px para baixo, 15px para a esquerda
Opções avançadas (CSS personalizado)
Elemento principal:
-webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-caixa-sombra: 0 1px 5px rgba (0, 0, 0, 0,2);
box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);
Salvar configurações
Agora duplique o módulo Pessoa que você acabou de criar duas vezes e arraste os módulos duplicados para a segunda e terceira colunas na linha. Como o design foi transferido para cada um dos módulos duplicados de "Pessoa", tudo o que você precisa fazer é atualizar o conteúdo com a imagem, título, posição, urls de mídia social e descrição. da pessoa.
É isso aí!
Opções de conteúdo da pessoa
Na guia de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo que controla o que aparece no seu módulo sempre será encontrado nesta guia.
Nome
Este é o nome da pessoa que você está apresentando. O nome é exibido na parte superior do módulo em texto maior.
Posição
A posição é exibida abaixo do nome em um texto menor. Isso geralmente é usado para se referir à posição profissional de uma pessoa dentro de uma equipe corporativa. Por exemplo, Nick Roach, "Designer Gráfico".
URL do perfil do Facebook
Insira o URL na sua página do Facebook ou deixe-o em branco para desativar o ícone do Facebook.
URL do perfil do Twitter
Insira o URL na sua página do Twitter ou deixe-o em branco para desligar o ícone do Twitter.
URL do perfil do Google+
Insira o URL em sua página do Google+ ou deixe em branco para desligar o ícone do Google+.
URL do perfil do LinkedIn
Digite o URL na sua página do LinkedIn ou deixe em branco para desligar o ícone do LinkedIn.
Descrição
Digite o conteúdo do texto principal do seu módulo aqui.
URL da imagem
Aqui você pode baixar uma foto para usar na biografia.
Cor de fundo
Defina uma cor de fundo personalizada para seu módulo ou deixe em branco para usar a cor padrão.
Imagem de fundo
Se definida, esta imagem será usada como plano de fundo para este módulo. Para remover uma imagem de fundo, basta remover a URL do campo de configurações. As imagens de fundo aparecerão acima das cores de fundo, o que significa que a cor de fundo não será visível quando uma imagem de fundo for aplicada.
Rótulo de administração
Isso mudará o rótulo do módulo no construtor para facilitar a identificação. Quando você usa a visualização WireFrame no Visual Builder, esses rótulos aparecem no bloco de módulo da interface Divi Builder.
Opções de design para o módulo Person
Na guia Design, você encontrará todas as opções de estilo para o módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de configurações de design que você pode usar para alterar qualquer coisa.
Cor do ícone
Esta opção controla a cor dos ícones de mídia social que aparecem no perfil de cada pessoa. Por padrão, esses ícones são cinza, mas você pode alterar essa cor usando esta configuração.
Cor do ícone ao pairar
Você também pode alterar a cor de foco dos ícones de mídia social. Selecione a cor desejada usando o seletor de cores nesta configuração.
Cor do texto
Aqui você pode escolher o valor do seu texto. Se você estiver trabalhando em um fundo escuro, o texto deve estar ativado. Se você estiver trabalhando com um fundo claro, o texto deve ser escuro.
Fonte do cabeçalho
Você pode alterar a fonte do texto do cabeçalho selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de ótimas fontes fornecidas pelo Google Fonts. Por padrão, Divi usa a fonte Open Sans para todo o texto em sua página. Você também pode personalizar o estilo do seu texto usando negrito, itálico, maiúsculas e opções de sublinhado.
Tamanho da fonte do cabeçalho
Aqui você pode ajustar o tamanho do texto do cabeçalho. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir diretamente o valor do tamanho de texto desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar o tipo de unidade.
Cor do Texto do Cabeçalho
Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do cabeçalho, escolha a cor desejada no seletor de cores usando esta opção.
Espaçamento da letra do cabeçalho
O espaçamento entre letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do cabeçalho, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar o tipo de unidade.
Altura da linha do cabeçalho
A altura da linha afeta o espaço entre cada linha do texto do cabeçalho. Se quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar o tipo de unidade.
Fonte do corpo
Você pode alterar a fonte do corpo selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de ótimas fontes fornecidas pelo Google Fonts. Por padrão, Divi usa a fonte Open Sans para todo o texto em sua página. Você também pode personalizar o estilo do seu texto usando negrito, itálico, maiúsculas e opções de sublinhado.
Tamanho da fonte do corpo
Aqui você pode ajustar o tamanho do texto do corpo. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir diretamente o valor do tamanho de texto desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar o tipo de unidade.
Cor do texto do corpo
Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto, escolha a cor desejada no seletor de cores usando esta opção.
Espaçamento de letras do corpo
O espaçamento entre letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do seu texto, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar o tipo de unidade.
Altura da linha do corpo
A altura da linha afeta o espaço entre cada linha de texto em seu corpo Se você deseja aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar o tipo de unidade.
Use a fronteira
Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.
Cor da fronteira
Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.
Largura da fronteira
Por padrão, as bordas têm 1 pixel de largura. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Suporta unidades de medida personalizadas, o que significa que você pode alterar a unidade padrão de "px" para algo como em, vh, vw etc.
Estilo da beira
As bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, ranhura, crista, sobreposição e início. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.
Margem personalizada
A margem é o espaço adicionado do lado de fora do seu módulo, entre o módulo e o próximo elemento acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a qualquer um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.
Preenchimento personalizado
Infill é o espaço adicionado dentro de seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a qualquer um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.
Opções avançadas do módulo Pessoa
Na guia avançada, você encontrará opções que designers da Web mais experientes podem achar úteis, como CSS personalizado e atributos HTML. Aqui você pode aplicar CSS personalizado a qualquer um dos muitos elementos do módulo. Você também pode aplicar classes CSS personalizadas e IDs ao módulo, que podem ser usados para personalizar o módulo no arquivo style.css do seu tema filho.
ID CSS
Insira um ID CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para vincular a seções específicas de sua página.
Classe CSS
Insira as classes CSS opcionais a serem usadas neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site. site da Web usando as opções de tema Divi ou configurações de página do Divi Builder.
CSS personalizado
CSS personalizado também pode ser aplicado ao módulo e a qualquer um dos componentes internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto onde pode adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nessas configurações já estão envolvidas em tags de estilo. Portanto, basta inserir as regras CSS separadas por ponto e vírgula.
Animação
Por padrão, as imagens são animadas conforme você rola a página. Aqui você pode escolher a direção da animação ou desativá-la.
visibilidade
Esta opção permite que você controle os dispositivos nos quais seu módulo aparece. Você pode optar por desabilitar seu módulo em tablets, SmartPhones ou desktops individualmente. Isso é útil se você deseja usar mods diferentes em dispositivos diferentes ou se deseja simplificar o design do celular eliminando certos elementos da página.
[vc_row center_row=”sim”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Ralway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEME [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutoriais” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]BAIXE O PLANILHAS DIVI[/vcex_button][/vc_column][/vc_row]
Outros tutoriais Divi
- sites 5 para uso restaurante Divi tema
- Como adicionar texto em um produto Divi WooCommerce
- Como alterar a cor do menu entre as páginas Divi
- Como personalizar as grades de um blog com Divi
- Como usar o editor Divi papel em WordPress
- Como criar um controle deslizante Divi em tela cheia
- Como mudar a cor dos menus entre as páginas Divi
- Recursos que você provavelmente não conhece sobre o Divi
- Como usar o Divi Builder no WordPress
- Como usar o módulo de rolagem de vídeo Divi
- Como usar o módulo Divi Builder Flip
- Como adicionar um módulo de depoimento no Divi Builder
- Como usar o módulo de texto Divi
- Como criar um controle deslizante no Divi
- Como editar uma função de usuário Divi
- Como usar o módulo Divi Social Media
- Como usar o módulo de loja no tema WordPress Divi
- Como usar o módulo da barra lateral Divi
- Como usar o módulo Divi Price Table
- Como usar o módulo de título das publicações Divi
- Como adicionar um módulo de vídeo do Divi
- Como usar o módulo de navegação do artigo
- Como usar o módulo de pesquisa Divi
- Como usar o módulo de carteira Divi
- Como usar o módulo person no Divi Builder
- Como usar o módulo de carteira com filtro Divi
- Como usar o módulo deslizante de largura total
- Como usar o módulo de imagem do Divi Builder
- Como usar o módulo de navegação de largura total do Divi Builder
- Como usar o módulo da galeria de imagens
- Como usar o módulo de placa de largura total do Divi Builder
- Como usar o módulo de portfólio de largura total Divi
- Como usar o módulo de cabeçalho Divi de largura total
- Como usar o módulo do contador Divi
- Como usar o controle deslizante de artigos no Divi Builder
- Como usar o módulo Divi Email Optin
Bom Dia,
Obrigado por esses artigos muito úteis.
Assim como os URLs do Facebook, Twitter, Google+ ou LinkedIn, você sabe se é possível adicionar um URL ao seu perfil do Instagram? Obrigada 🙂
Olá!
Quando eu crio um projeto ou postagem e uso o pod de pessoa, por que o campo Posição desaparece quando eu vejo projetos ou postagens usando o blog ou pod de blog filtrável?
Como tornar o campo Posição da pessoa visível em uma exibição de Grade do blog?
Thanks!
Boa noite e obrigado pela espera.
Normalmente, os módulos de pesquisa não executam códigos de acesso. Portanto, o módulo Person (como qualquer outro módulo) gera um shortcode que só pode ser renderizado visualizando o artigo ou página e não a partir de um módulo que oferece uma visualização do referido artigo ou página.