5 maneiras de ser criativo com o módulo pessoal da Divi

Todas as novas atualizações de recursos do Divi que aconteceram nos últimos meses expandiram inegavelmente a gama de possibilidades que você tem ao projetar sites. Para este tutorial, criamos 5 maneiras diferentes de ser criativo com o Módulo Divi Person sem usar nenhum código CSS adicional. O principal objetivo deste post é inspirar você antes de iniciar seu próximo projeto Divi. O Módulo Pessoa é freqüentemente usado para compartilhar mais informações sobre os membros da equipe ou compartilhar depoimentos. Com esses 5 exemplos diferentes, você está pronto para dar um impulso de design às suas páginas.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Inscreva-se no nosso canal no Youtube

Recriar o Exemplo # 1

Adicionar nova seção

Vamos começar criando o primeiro exemplo! Abra uma página nova ou existente e adicione uma seção regular.

Adicionar nova linha

Estrutura da Coluna

Sem modificar as configurações da seção, adicione uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e faça algumas alterações nas configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Em seguida, abra as configurações de espaçamento e adicione alguns valores de preenchimento personalizados.

• Preenchimento superior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento inferior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento esquerdo: 100 px (desktop), 30 px (tablet), 25 px (telefone)
• Preenchimento direito: 100 px (desktop), 30 px (tablet), 25 px (telefone)

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

É hora de começar a adicionar módulos! Adicione um Módulo de imagem à primeira coluna e carregue uma imagem quadrada de sua escolha.

Sombra da caixa

Continue indo para a guia de design e aplicando uma sombra de caixa sutil.

Filtros

Você também pode brincar com as configurações de filtros para adicionar um efeito à sua imagem.

• Saturação: 40%
• Contraste: 130%

Adicionar Módulo Pessoa nº 1 à Coluna 2

Adicionar conteúdo

O próximo módulo de que precisaremos é um Módulo Pessoa. Vá em frente e adicione um à segunda coluna e preencha os campos de nome e posição.

Fundo Gradiente

Adicione um fundo gradiente a este módulo.

• Cor 1: rgba (11,15,229,0,41)
• Cor 2: rgba (45.237.255,0,87)
• Direção do gradiente: 150deg

Configurações de texto do título

Em seguida, altere as configurações do texto do título na guia de design.

• Fonte do título: Baloo
• Cor do texto do título: #ffffff
• Tamanho do texto do título: 20px

Configurações do corpo do texto

Modifique as configurações do corpo do texto também.

• Peso da fonte do corpo: leve
• Cor do corpo do texto: #ffffff

Espaçamento

E adicione alguns valores de margem e preenchimento personalizados nas configurações de espaçamento.

• Margem esquerda: -4vw (desktop e tablet), 0vw (telefone)
• Margem direita: 8vw (desktop e tablet), 0vw (telefone)
• Enchimento superior: 25px
• Preenchimento inferior: 25 px
• Preenchimento esquerdo: 20px

Fronteira

Também estamos adicionando uma borda esquerda sutil ao módulo.

• Largura da borda esquerda: 3px
• Cor da borda esquerda: #ffffff

Sombra da caixa

Junto com uma sombra de caixa que o ajudará a criar profundidade na página.

• Força do desfoque de sombra da caixa: 80 px

Adicionar Módulo de Pessoa nº 2 à Coluna 2

Adicionar conteúdo

Adicione outro Módulo Pessoa logo abaixo do anterior. Estamos usando este módulo para mostrar os perfis de mídia social e a descrição.

Configurações de ícone

Vá para a guia de design e altere a cor do ícone nas configurações do ícone.

• Cor do ícone: # 50e8fe

Espaçamento

Por último, mas não menos importante, abra as configurações de espaçamento e adicione alguns valores de preenchimento personalizados.

• Enchimento superior: 30px
• Preenchimento esquerdo: 30 px (desktop e tablet), 0 px (telefone)

Recriar o Exemplo # 2

Adicionar nova seção

Vamos para o próximo exemplo! Adicione uma nova seção à sua página.

Adicionar nova linha

Estrutura da Coluna

Adicione uma nova linha a esta seção usando a seguinte estrutura de coluna.

Cor de fundo da coluna 2

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione uma cor de fundo da coluna 2.

• Cor de fundo da coluna 2: # f4f4f4

Dimensionamento

Em seguida, vá para a guia de design e faça algumas alterações nas configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Adicione alguns valores de preenchimento personalizados nas configurações de espaçamento também.

• Preenchimento superior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento inferior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento esquerdo: 100 px (desktop), 30 px (tablet), 25 px (telefone)
• Preenchimento direito: 100 px (desktop), 30 px (tablet), 25 px (telefone)

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

É hora de começar a adicionar módulos! O primeiro módulo de que precisaremos é um Módulo de imagem na coluna 1. Carregue uma imagem de sua escolha.

Sombra da caixa

Em seguida, adicione uma sombra de caixa à imagem.

• Força do desfoque de sombra da caixa: 160 px

Filtros

Você também pode brincar com as configurações de filtros.

• Saturação: 40%
• Contraste: 130%

Adicionar Módulo Pessoa nº 1 à Coluna 2

Adicionar conteúdo

Na segunda coluna, o primeiro módulo de que precisaremos é um Módulo Pessoa. Preencha os campos de nome e posição.

Cor de fundo

Vá para as configurações de fundo e adicione uma cor de fundo transparente.

• Cor de fundo: rgba (255,255,255,0,7)

Configurações de texto

Em seguida, altere a orientação do texto nas configurações de texto.

• Orientação do Texto: Centro

Configurações de texto do título

Altere também as configurações do texto do título.

• Fonte do Título: Abril Fatface
• Cor do texto do título: # 000000
• Tamanho do texto do título: 40px

Configurações do corpo do texto

Junto com as configurações do corpo do texto.

• Peso da fonte do corpo: leve
• Cor do corpo do texto: # 000000
• Tamanho do corpo do texto: 15px

Espaçamento

Estamos criando uma sobreposição usando alguma margem esquerda negativa nas configurações de espaçamento.

• Margem esquerda: -21,64vw (desktop), -46,1vw (tablet), 0vw (telefone)
• Enchimento superior: 30px
• Preenchimento inferior: 30 px

Sombra da caixa

E estamos aplicando uma sombra de caixa sutil também.

• Força do desfoque de sombra da caixa: 80 px

Adicionar Módulo de Pessoa nº 2 à Coluna 2

Adicionar conteúdo

O segundo módulo de que precisamos na coluna 2 é outro Módulo Pessoa. Aqui, estamos adicionando os links de mídia social e a descrição.

Configurações de ícone

Continue indo para a guia de design e alterando a cor do ícone nas configurações do ícone.

• Cor do ícone: # 000000

Espaçamento

Adicione algumas margens personalizadas e valores de preenchimento também.

• Margem superior: 3vw
• Enchimento superior: 30px
• Preenchimento inferior: 30 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Recriar o Exemplo # 3

Adicionar nova seção

Passemos ao terceiro exemplo! Adicione uma nova seção à sua página.

Adicionar nova linha

Estrutura da Coluna

Em seguida, adicione uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Abra as configurações de linha e altere as configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Adicione alguns valores de preenchimento personalizados também.

• Preenchimento superior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento inferior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento esquerdo: 100 px (desktop), 30 px (tablet), 25 px (telefone)
• Preenchimento direito: 100 px (desktop), 30 px (tablet), 25 px (telefone)

Adicionar Módulo de Pessoa nº 1 à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione o primeiro Módulo de pessoa à coluna 1 e preencha os campos de nome e posição.

Cor de fundo

Em seguida, adicione uma cor de fundo ao módulo.

• Cor de fundo: #ffffff

Configurações de texto do título

Modifique as configurações de texto do título também.

• Peso da fonte do título: Ultra negrito
• Cor do texto do título: # 000000
• Tamanho do texto do título: 40px
• Espaçamento entre letras de título: -4px

Configurações do corpo do texto

Faça o mesmo para as configurações do corpo do texto.

• Peso da fonte do corpo: leve
• Cor do corpo do texto: # 000000
• Tamanho do corpo do texto: 15px

Espaçamento

Continue acessando as configurações de espaçamento e adicione alguns valores de margem e preenchimento personalizados.

• Margem superior: 40px (desktop), 0px (tablet e telefone)
• Enchimento superior: 30px
• Preenchimento inferior: 30 px
• Preenchimento esquerdo: 30px
• Preenchimento direito: 30px

Fronteira

Adicione '20px' ao canto superior esquerdo nas configurações de borda também.

Sombra da caixa

E dê ao módulo uma sombra colorida.

• Força do desfoque de sombra da caixa: 140 px
• Cor da sombra: rgba (31,15,255,0,66)

Adicionar Módulo de Pessoa nº 2 à Coluna 1

Adicionar conteúdo

Vamos para o módulo de segunda pessoa na coluna 1! Use este módulo para exibir os links de mídia social e a descrição.

Cor de fundo

Em seguida, vá para as configurações de fundo e adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Configurações de ícone

Altere a cor do ícone também.

• Cor do ícone: # 000000

Espaçamento

Continue adicionando alguns valores de espaçamento personalizados nas configurações de espaçamento.

Fronteira

E adicione '20px' ao canto esquerdo inferior.

Sombra da caixa

Por último, mas não menos importante, adicione a sombra da caixa.

• Posição vertical da sombra da caixa: 50 px
• Força do desfoque de sombra da caixa: 140 px
• Força de propagação da sombra da caixa: -10px
• Cor da sombra: rgba (2.219.219,0.26)

Adicionar Módulo de Imagem à Coluna 2

Enviar Imagem

O próximo módulo de que precisaremos é um módulo de imagem. Vá em frente e adicione um à segunda coluna e carregue uma imagem de sua escolha.

Fronteira

Dê a este módulo '20px' de cantos arredondados nas configurações de borda.

Sombra da caixa

E adicione uma sombra de caixa sutil.

Filtros

Mais uma vez, fique à vontade para brincar com as configurações dos filtros para alterar a aparência da imagem.

Recriar o Exemplo # 4

Adicionar nova seção

Para o quarto exemplo! Adicione uma nova seção à sua página.

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Altere as configurações de espaçamento também.

• Preenchimento superior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento inferior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento esquerdo: 100 px (desktop), 30 px (tablet), 25 px (telefone)
• Preenchimento direito: 100 px (desktop), 30 px (tablet), 25 px (telefone)

Adicionar Módulo de Pessoa à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um Módulo de pessoa à coluna 1 e preencha todos os campos.

Configurações de ícone

Em seguida, vá para as configurações do ícone e altere a cor do ícone.

• Cor do ícone: # 000000

Configurações de texto

Altere a orientação do texto nas configurações de texto também.

• Orientação do Texto: Centro

Configurações de texto do título

Em seguida, abra as configurações de texto do título e faça algumas alterações.

• Peso da fonte do título: Ultra negrito
• Cor do texto do título: # 000000
• Tamanho do texto do título: 40px
• Espaçamento entre letras de título: -4px

Configurações do corpo do texto

Modifique as configurações do corpo do texto também.

• Peso da fonte do corpo: leve
• Cor do corpo do texto: # 000000
• Tamanho do corpo do texto: 15px
• Altura da linha corporal: 2em

Espaçamento

E crie uma forma usando valores de preenchimento personalizados nas configurações de espaçamento.

• Preenchimento superior: 280 px (desktop), 200 px (tablet), 50 px (telefone)
• Preenchimento inferior: 280 px (desktop), 200 px (tablet), 50 px (telefone)
• Preenchimento esquerdo: 200 px (desktop), 150 px (tablet), 20 px (telefone)
• Preenchimento direito: 200 px (desktop), 150 px (tablet), 20 px (telefone)

Fronteira

Crie um círculo adicionando '700px' a cada um dos cantos nas configurações de borda e adicione uma borda sutil também.

• Largura da borda: 1px
• Cor da borda: # 333333

Adicionar Módulo de Imagem à Coluna 2

Enviar Imagem

Continue adicionando um Módulo de imagem à segunda coluna e carregue uma imagem quadrada de sua escolha.

Espaçamento

Modifique as configurações de espaçamento deste módulo.

• Margem superior: 7vw (desktop), -15vw (tablet), -5vw (telefone)
• Margem esquerda: -5vw (desktop), 0vw (tablet e telefone)

Fronteira

Crie uma forma de círculo a partir desta imagem adicionando '1000px' a cada um dos cantos do módulo.

Sombra da caixa

Adicione uma sombra de caixa sutil também.

• Força do desfoque de sombra da caixa: 160 px
• Força de propagação da sombra da caixa: -10px

Filtros

E finalize o design brincando com as configurações de filtros da imagem.

• Saturação: 0%
• Contraste: 130%

Recriar o Exemplo # 5

Adicionar nova seção

Vamos para o próximo e último exemplo! Adicione uma nova seção à sua página.

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Fundo Gradiente da Coluna 1

Abra as configurações de linha e adicione um fundo gradiente da coluna 1.

• Cor 1: #dddddd
• Cor 2: #ffffff
• Direção do gradiente da coluna 1: 90 graus
• Posição inicial da coluna 1: 40%
• Posição final da coluna 1: 40%

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e faça algumas alterações.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Adicione alguns valores de preenchimento personalizados à linha também.

• Preenchimento superior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento inferior: 100 px (desktop), 80 px (tablet e telefone)
• Preenchimento esquerdo: 100 px (desktop), 30 px (tablet), 25 px (telefone)
• Preenchimento direito: 100 px (desktop), 30 px (tablet), 25 px (telefone)

Adicionar Módulo de Pessoa à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um Módulo de pessoa à coluna 1 e preencha todos os campos.

Configurações de ícone

Em seguida, altere a cor do ícone nas configurações do ícone.

• Cor do ícone: # 000000

Configurações de texto

Altere a orientação do texto nas configurações de texto também.

• Orientação do texto: direita

Configurações de texto do título

Em seguida, faça algumas alterações nas configurações do texto do título.

• Fonte do título: Chenla
• Cor do texto do título: # 000000
• Tamanho do texto do título: 50px
• Espaçamento entre letras de título: -1px

Configurações do corpo do texto

Faça o mesmo para as configurações do corpo do texto.

• Peso da fonte do corpo: leve
• Cor do corpo do texto: # 000000
• Tamanho do corpo do texto: 15px
• Altura da linha corporal: 2em

Espaçamento

Continue adicionando alguns valores de preenchimento personalizados às configurações de espaçamento do módulo.

• Preenchimento superior: 200 px (desktop), 100 px (tablet e telefone)
• Preenchimento inferior: 200 px (desktop), 100 px (tablet e telefone)
• Preenchimento esquerdo: 500 px (desktop), 250 px (tablet), 50 px (telefone)
• Preenchimento direito: 200 px (desktop), 100 px (tablet), 50 px (telefone)

Fronteira

Por último, adicione uma borda ao módulo.

Adicionar Módulo de Imagem à Coluna 2

Enviar Imagem

O próximo módulo de que precisaremos é um Módulo de imagem na coluna 2. Vá em frente e carregue uma imagem quadrada de sua escolha.

Espaçamento

Em seguida, faça algumas alterações nas configurações de espaçamento deste módulo.

• Margem superior: 7vw (desktop), -2vw (tablet e telefone)
• Margem esquerda: -10vw (desktop), 0vw (tablet e telefone)

Sombra da caixa

Dê ao Módulo de imagem uma sombra de caixa também.

• Força do desfoque de sombra da caixa: 160 px
• Força de propagação da sombra da caixa: -10px

Filtros

E ainda por cima, brinque com as configurações de filtros.

• Saturação: 50%
• Contraste: 130%

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos 5 maneiras diferentes de ser criativo com o Módulo Divi Person. Você pode usar esses exemplos para qualquer site que estiver construindo e criar suas próprias versões alternativas ajustando as configurações de cada elemento de design. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!