Ir para o conteúdo principal

Como usar o módulo Resumo no Divi Builder

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]

Antes de adicionar um módulo de resumo à sua página, você deve primeiro acessar o 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. Clicar neste botão ativa o Divi Builder, que lhe dá acesso a 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 estiver navegando em seu site upstream se você estiver logado no seu painel do WordPress.

botão divi construtor módulo blog divi

Uma vez inserido no 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.

resumo do módulo divi builder.png

Procure o módulo Resumo 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 "Resumo", depois clicar em entrar para pesquisar e adicionar automaticamente o módulo de texto descritivo! Uma vez que o módulo é adicionado, você será bem-vindo com a lista de opções do módulo. Essas opções são divididas em três grupos principais: Conteúdo , Projeto et avançado .

Caso de uso para listar os serviços da empresa na home page

Como o módulo Resumo combina as imagens e o texto para apresentar determinados recursos, você pode usá-lo para adicionar uma lista dos serviços da sua empresa à sua página inicial. O módulo Blurb também permite transformar sua imagem / ícone e título em um link para sua página de serviço. Para este exemplo, usarei o módulo Blurb para adicionar quatro serviços em destaque a uma home page.

Página de serviço divi.png

Para adicionar os quatro Blurbs à sua página, use o criador visual para adicionar uma seção padrão com quatro linhas colunas. Em seguida, adicione um módulo Blurb à primeira coluna da sua linha.

Atualize as configurações do Blurb com o seguinte:

Opções de conteúdo

Título: [insira o título do serviço]
Conteúdo: [insira uma breve descrição do serviço]
URL: [adicione um URL à página de serviço]
Use o ícone: SIM
Ícone: [selecione um ícone que ilustre seu serviço]

Opções de design

Ícone de cor: # 42bb99 (torne as cores os complementos do design do site)
Use o ícone do tamanho da fonte: SIM
Ícone do tamanho da fonte: 68px (ajusta o tamanho do ícone)
Texto de Orientação: Centro -
cabeça Tamanho da letra: 24px
Tamanho do corpo da fonte: 18px
Altura da linha do corpo: 1.5em

serviços de design divi.png

Agora seu primeiro texto introdutório está terminado.

lista de serviços divi builder.jpg

Agora, duplique o módulo Resumo que você acabou de criar três vezes e arraste cada um dos resumos duplicados para as outras três colunas. Como seus parâmetros de design foram integrados aos seus módulos duplicados, tudo o que você precisa fazer é modificar o conteúdo (cabeçalho, conteúdo, ícone, URL etc.) e modificar as cores para atender a cada um dos seus serviços.

lista completa de serviços divi.jpg

Opções de Conteúdo Resumido

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 nesta guia.

resumo do módulo de parâmetros wordpress.png

Título

Dê um título ao seu texto que aparecerá acima do texto em um estilo de texto em negrito. A opção URL no campo Título permitirá que você torne seu título um hiperlink.

Conteúdo

Este campo é onde você pode inserir o conteúdo do corpo do seu texto. O Blurb Text também cobrirá a largura total da sua coluna até 550px.

URL

Coloque um URL da Web válido nesse campo para transformar seu título do Blurb em um link. Deixar este campo vazio simplesmente deixará seu título como um elemento estático.

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]

URL de abertura

Você pode escolher aqui se o link será aberto ou não em uma nova janela.

Use o ícone

Ao usar os Blurbs, você pode optar por usar um ícone ou imagem com seu texto. Se você selecionar "Sim" para a opção "Usar ícone", receberá as seguintes opções para personalizar seu ícone. Se você não escolher usar um ícone, será solicitado que você envie uma imagem.

ícone

Se você escolher "Sim" para a configuração "Usar ícone", esta opção será exibida. Essa opção mostra uma lista de ícones disponíveis que você pode usar com o texto da sua apresentação. Basta clicar no ícone que você deseja usar e ele aparecerá no seu texto.

usar ícones divi builder.png

Imagem

Se você não escolheu usar um ícone, esta configuração será exibida. Coloque um URL de imagem válido aqui ou escolha / faça upload de uma imagem por meio da Biblioteca de mídia do WordPress. As imagens no módulo Resumo sempre aparecem centralizadas em suas colunas e cobrem toda a largura de sua coluna até 550px. No entanto, sua imagem nunca será maior do que seu tamanho de download original. A altura da imagem da apresentação é determinada pela proporção da sua imagem original. Portanto, é aconselhável colocar todas as suas imagens de apresentação na mesma altura, se você as colocar lado a lado.

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 Configurações. As imagens de fundo aparecerão acima das cores de fundo, o que significa que sua cor de fundo não estará visível quando uma imagem de fundo for aplicada.

Rótulo de administração

Isso mudará a tag do módulo no gerador para fácil identificação. Ao usar a exibição WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo da interface do Divi Builder.

Opções de design de módulo resumido

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta aba permite que você altere a aparência do seu módulo. Cada módulo Divi tem uma longa lista de parâmetros de design que você pode usar para modificar praticamente qualquer coisa.

módulo de design de opções resume divi.png

Cor do ícone

Se você escolher "Sim" para a configuração "Usar ícone", esta opção será exibida. Esta opção permite personalizar a cor do seu ícone. Por padrão, os ícones são definidos para a cor de destaque do seu tema.

Ícone do círculo

Se você escolher "Sim" para a configuração "Usar ícone", esta opção será exibida. Esta opção permite que você coloque seu ícone em um círculo colorido. Se você selecionar "sim" para essa configuração, opções adicionais estarão disponíveis para personalizar a cor e a borda do seu círculo.

Cor do círculo

Se você escolheu "Sim" para a configuração "Ícone de círculo", esta opção aparecerá. Aqui você pode escolher uma cor para usar no seu círculo. Essa cor é independente da cor do seu ícone selecionado anteriormente. Seu ícone, em sua cor, aparecerá dentro de um círculo com a cor selecionada aqui.

Mostrar a borda do círculo

Se você escolheu "Sim" para a configuração "Ícone de círculo", esta opção aparecerá. Esta opção permite ativar uma borda para o seu círculo. Se esta opção estiver selecionada, uma opção adicional aparecerá para selecionar sua cor de borda.

Cor da borda do círculo

Se você escolher "Sim" para a configuração "Mostrar borda do círculo", essa opção será exibida. Aqui você pode ajustar a cor da borda do círculo.

Colocação de imagem / ícone

Aqui você pode escolher o local da sua imagem / ícone. Pode aparecer acima do texto ou à esquerda do texto. Ao colocar a imagem / ícone à esquerda do seu texto, a imagem será menor do que se fosse colocada no topo.

Use o tamanho da fonte do ícone

Se essa opção estiver ativada, você poderá inserir um tamanho personalizado para o ícone exibido acima ou dois à esquerda do texto da sua apresentação.

Cor do texto

Se o texto da apresentação for colocado em um plano de fundo escuro, a cor do texto deverá ser definida como "Escuro". Por outro lado, se o texto da apresentação for colocado em um plano de fundo claro, a cor do texto deverá ser definida como "Light".

Orientação de texto

Este menu suspenso permite que você especifique a orientação do seu texto para que ele seja justificado à esquerda, centralizado ou justificado à direita.

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]

Fonte de cabeçalho

Você pode alterar a fonte do seu cabeçalho, selecionando a fonte de sua escolha 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 de 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

módulo resume seção style title.png

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 seu cabeçalho, escolha a cor de sua escolha 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 do 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Altura da linha de cabeçalho

Altura da linha afeta o espaço entre cada linha do seu texto de cabeçalho 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 de espaçamento desejado em o 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Fonte do corpo

Você pode alterar a fonte do seu corpo selecionando a fonte de sua escolha 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 seu corpo de texto. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor de 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" de acordo com o seu tamanho para alterar seu 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 texto do corpo, escolha a cor desejada no seletor de cores usando essa 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 do texto do seu corpo, 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" de acordo com o seu tamanho para alterar seu tipo de unidade.

Altura da linha do corpo

A altura da linha afeta o espaço entre cada linha do texto do 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 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" de acordo com o 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 no intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades personalizadas de medidas de suporte, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

configuração do módulo sbourdires resume divi builder.png

Estilo da beira

As bordas suportam oito estilos diferentes, incluindo: sólido, pontilhado, pontilhado, duplo, sulco, crista, inserção e início. Selecione o estilo de sua escolha no menu suspenso para aplicá-lo à sua borda.

Largura máxima da imagem

Aplicar um valor de largura máxima aqui limitará a largura da imagem de apresentação. Isso se aplica apenas a notificações que não estão no modo de ícone.

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 excluir uma 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

O preenchimento é 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 excluir uma 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 Módulo Resumo

Na guia Avançado, você encontrará opções que os web designers mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar um 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.

seção de resumo do módulo advance.png

ID CSS

Digite um ID CSS opcional para usar neste módulo. Um identificador 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 Divi Child ou no CSS personalizado 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

Um CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizada, você encontrará um campo de texto no qual poderá adicionar CSS diretamente a cada elemento. As entradas CSS nessas configurações já estão incorporadas nas tags de estilo. Você só precisa inserir regras CSS separadas por ponto e vírgula.

Animação de imagem / ícone

Isso controla a direção da animação por carregamento lento.

ALT texto da imagem

Se você não escolheu usar um ícone, esta configuração será exibida. Outro texto fornece qualquer informação necessária se a imagem não for carregada, for exibida corretamente ou em qualquer outra situação em que um usuário não possa ver a imagem. Também permite que a imagem seja lida e reconhecida pelos mecanismos de busca.

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 desktops 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.

Isso é tudo para este Tutoriel . Esperamos ter mostrado como usar o módulo de resumo no 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
12 ações
ação6
chilrear2
Enregistrer4
Whatsapp