Ir para o conteúdo principal

Tutorial Divi: Como usar o Divi Builder Person Module

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

O módulo Person de Divi é a melhor maneira de criar um bloco de perfil pessoal. Este é um excelente módulo para usar nas páginas About Me ou nos membros da equipe onde você deseja criar uma biografia de pessoas. Este módulo combinou links de texto, imagens e mídias sociais em um módulo coerente.

Como configurar o módulo Divi Person

Antes de adicionar um módulo Divi Person à sua página, você deve primeiro entrar no Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor 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. Então 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 no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro. Temos excelente tutoriais sobre o uso de elementos de linhas e para seções de Divi.

módulo de pessoa divi.png

Localize o módulo 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", depois clicar em enter para pesquisar e adicionar automaticamente o módulo Person! Depois 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 local para apresentar os membros de sua equipe usando o módulo Pessoa. Isso adiciona um toque pessoal e pode ajudar a criar confiança com novos clientes.

Para este exemplo, mostrarei como usar o módulo Person para adicionar uma seção "Nossa equipe" a uma página sobre uma pequena empresa. Eu vou usar uma provisão de três pessoas, três colunas que mantém a seção mais compacta e corresponde ao design geral da página.

página sobre us.jpg

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.

módulo pessoa wordpress divi.png

Atualize as configurações do módulo Pessoa da seguinte forma:

Opções de conteúdo

Nome: [Digite o nome da pessoa]
Posição: [Digite a posição da pessoa]
Insira os URLs dos perfis de mídia social
Descrição: [Digite uma breve biografia]
Imagem: [Digite uma imagem 600 x 600]

Opções de design

Ícone de cor: # fcbf00
Cor do ícone de focalização: # e0a831
Fonte do cabeçalho: Roboto, negrito, aproveite
Tamanho da fonte do cabeçalho: 30px
Cor do texto do cabeçalho: # 505050
Carta de cabeçalho de espaçamento: 1px
Altura da linha de cabeçalho: 1.5em
Tamanho da fonte do corpo: 18px
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);

mudar perfil pessoa divi.png

Salvar configurações

Agora, duplique o módulo Person que você acabou de criar duas vezes e arraste os módulos duplicados para a segunda e terceira colunas da linha. Como o design foi adiado para cada um dos módulos "Pessoa" duplicados, tudo o que você precisa fazer é atualizar o conteúdo com a imagem, título, local, URLs de mídia social e descrição. da pessoa.

Isso é tudo!

resultado módulo pessoa divi.jpg

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Opções de conteúdo da pessoa

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

opção de conteúdo divi.png

Primeiro nome

Este é o nome da pessoa que você está apresentando. O nome é exibido na parte superior do módulo em um texto maior.

Posição

A posição é exibida sob o nome em um texto menor. Isso é freqüentemente usado para se referir à posição profissional de uma pessoa dentro de uma equipe de negócios. Por exemplo, Nick Roach, "Designer Gráfico".

URL do perfil do Facebook

Digite o URL na sua página do Facebook ou deixe-o vazio para desativar o ícone do Facebook.

URL do perfil do Twitter

Digite o URL na sua página do Twitter ou deixe em branco para desativar o ícone do Twitter.

URL do perfil do Google+

Insira o URL na sua Página do Google+ ou deixe em branco para desativar o ícone do Google+.

URL do perfil do LinkedIn

Digite o URL na sua página do LinkedIn ou deixe em branco para desativar 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 o 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 excluir uma imagem de plano de fundo, basta excluir o URL do campo de configurações. As imagens de plano de fundo aparecerão acima das cores do plano de fundo, o que significa que a cor do plano de fundo não ficará visível quando uma imagem de plano de fundo for aplicada.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design para o módulo Person

Na guia Design, você encontrará todas as opções de estilo do 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 parâmetros de design que você pode usar para alterar qualquer coisa.

parametre design module person divi.png

Cor do ícone

Essa opção controla a cor dos ícones de mídias sociais que aparecem no perfil de cada pessoa. Por padrão, esses ícones são cinza, compre você pode alterar essa cor usando essa configuração.

Cor do ícone no viaduto

Você também pode alterar a cor hover dos ícones de mídia social. Selecione a cor desejada usando o seletor de cores nesta configuração.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Cor do texto

Aqui você pode escolher o valor do seu texto. Se você está trabalhando em um fundo escuro, o texto deve estar ligado. Se você trabalha com um fundo claro, seu texto deve estar escuro.

Fonte de cabeçalho

Você pode alterar a fonte do texto do cabeçalho selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do cabeçalho

Aqui você pode ajustar o tamanho do seu texto de cabeçalho. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente 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 seu tipo de unidade.

Cor do texto do cabeçalho

Por padrão, todas as cores de texto 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 essa opção.

Espaçamento de papel timbrado

O espaçamento das 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 de 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 seu tipo de unidade.

Altura da linha de cabeçalho

A altura da linha afeta o espaço entre cada linha do seu texto do cabeçalho Se você quiser aumentar o espaço entre cada linha, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho desejado no espaçamento campo de entrada à direita do cursor. Os campos de entrada suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em", dependendo do valor do seu tamanho para alterar o tipo de unidade.

Fonte do corpo

Você pode alterar a fonte do seu corpo selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do corpo

Aqui você pode ajustar o tamanho do texto do seu corpo. Você pode arrastar o controle deslizante de gama para aumentar ou diminuir o tamanho do texto ou insira o valor do tamanho do texto 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 seu tipo de unidade.

Cor do texto do corpo

Por padrão, todas as cores de texto 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 das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho 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 seu 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ê quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do espaço 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 seu 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 uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medida personalizadas suportadas, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da beira

Bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, groove, crista, inlay e start. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Margem personalizada

Margem é o espaço adicionado ao exterior 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 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

Fill é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a 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 Person

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

Crie facilmente seu blog com o SiteGround

SiteGround permite que você crie seu blog WordPress em apenas alguns cliques. Nome de domínio grátis, hospedagem segura, SSL, transferência e muito mais ... [Recomendado]

módulo de design de opção divi.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar 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 usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

Animação

Por padrão, as imagens são animadas quando você rola a página. Aqui você pode escolher a direção da animação ou desativá-la.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, SmartPhones ou computadores desktop individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Outros tutoriais Divi

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
17 ações
ação10
chilrear3
Enregistrer4
Whatsapp