Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Slide

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]

Divi permite que você coloque sliders em seções de largura total, para que seus cursores ocupem toda a largura do navegador. Os sliders (Diapos) Divi suportam fundos de paralaxe, bem como fundos de vídeo!

use um slider em divi.png

Como adicionar um módulo Diapo de largura total da Divi

Antes de poder adicionar um módulo deslizante de largura total à sua página, você deve primeiro saltar para o Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builderacima 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.

use construtor visual divi.png

Quando estiver 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.

criar um tutorial divi slide wordpress.png

Localize o módulo de cursor fullwidth 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 "Slide" e, em seguida, clicar em Enter para localizar e adicionar automaticamente o módulo de controle deslizante de largura total! 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: Adicione uma seção de herói de largura total deslizante à sua home page

Um controle deslizante de largura total é uma ótima maneira de apresentar várias CTAs acima do limite da sua página inicial. A combinação de imagens e conteúdo pode realmente dar à sua seção uma sensação profissional que se destaca.

Para este exemplo, adicionarei um slide de largura total para servir como a seção principal em uma home page.

criar um slide de largura total example.jpg

Usando o Visual Builder, adicione uma seção Fullwidth ao topo da sua página web. Em seguida, insira o módulo deslizante Fullwidth na sua nova seção. Na guia Conteúdo do slide de largura total, clique em + Adicionar um novo item para criar seu primeiro slide.

criar um slide divi.png

Nas configurações de slide do seu primeiro slide, atualize as seguintes opções:

Opções de conteúdo

En-cabeça : [digite o título do slide]
Texto do botão : [digite o texto do botão]
Conteúdo : [digite o conteúdo do texto do slide]
URL do botão : [insira o URL de destino do botão Slide]
Imagem de fundo : [insira a imagem que servirá de pano de fundo para o slide]

Opções de design

Use sobreposição de plano de fundo : SIM
Cor de sobreposição de plano de fundo : rgba (0,0,0,0.2) Esta sobreposição escurece ligeiramente a imagem de fundo para tornar o texto mais legível.

deslize divi blogpascher.png

Salvar configurações de slides

Agora duplique o slide que você acabou de criar e atualize o novo slide com novo conteúdo, se necessário. Repita isso para todos os slides que você deseja adicionar.

duplicate a divi.png slide

Isso é tudo. Para este exemplo, eu incluo apenas dois slides, mas o resultado é um herói deslizante fullwidth eficaz com várias chamadas para ação que envolve o usuário clique no botão para mais informações. Como esta é sua principal chamada de ação para seu website, sugiro executar testes de divisão em seu slide de largura total usando o Divi Leads e ver qual converte melhor.

exemplo slide divi dem.gif

Opções de conteúdo completo do slide

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.

slide divi section content.png

setas

Escolha se deseja ou não exibir as setas de navegação esquerda e direita.

controles

Escolha se deseja ou não exibir os botões de círculo / indicadores de slide na parte inferior do cursor.

Etiqueta do Administrador

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 do módulo de slides

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.

design da seção de slides divi.png

Remova a sombra interna

Por padrão, uma sombra interna é exibida no controle deslizante. Se você quiser desabilitar essa sombra, você pode fazer isso usando essa configuração.

efeito de paralaxe

Ativar essa opção dará às suas imagens de plano de fundo uma posição fixa à medida que você rola. Lembre-se de que, quando essa configuração está ativada, suas imagens escalam suas imagens para a altura do navegador.

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.

design de fonte seção slide de lentete.png

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.

Polícia Corporal

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.

módulo de slide de design de seção divi.png

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.

Estofamento superior

Esse parâmetro controla o espaço interno entre a parte superior do módulo e o conteúdo de texto no módulo. Se você quiser aumentar ou diminuir este espaço, insira o valor desejado aqui. Por exemplo, para reduzir o espaço e o tamanho geral do controle deslizante, você pode inserir um valor de 100 px. Você também pode inserir um valor percentual, por exemplo 10%, para tornar a altura mais dinâmica.

Preenchimento inferior

Essa configuração controla o espaço interno entre a parte inferior do módulo e o conteúdo do texto no módulo. Se você quiser aumentar ou diminuir este espaço, insira o valor desejado aqui. Por exemplo, para reduzir o espaço e o tamanho geral do controle deslizante, você pode inserir um valor de 100 px. Você também pode inserir um valor percentual, por exemplo 10%, para tornar a altura mais dinâmica.

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]

Use estilos personalizados para o botão

A ativação dessa opção revela diferentes configurações de personalização para os botões que você pode usar para alterar a aparência do botão no seu módulo.

Tamanho do texto do botão

Essa configuração pode ser usada para aumentar ou diminuir o tamanho do texto no botão. O botão muda conforme o tamanho do texto aumenta e diminui.

Cor do texto do botão

Por padrão, os botões adotam a cor de destaque do tema, conforme definido no personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor do botão.

cor do botão divi.png

Cor de fundo do botão

Por padrão, os botões têm uma cor de plano de fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

Largura da borda do botão

Todos os botões Divi possuem uma borda 2px padrão. Essa borda pode ser aumentada ou diminuída usando esse parâmetro. As bordas podem ser excluídas inserindo um valor de 0.

Cor da borda do botão

Por padrão, as bordas do botão mudam para a cor de destaque do tema, conforme definido no personalizador do tema. Essa opção permite atribuir uma cor de borda personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor da borda do botão.

Raio da borda do botão

O raio da borda afeta a redondeza dos cantos dos seus botões. Por padrão, os botões em Divi têm um pequeno raio de borda que arredonda os cantos dos 3 pixels. Você pode reduzir esse valor para 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões com bordas circulares.

Espaçamento das letras do botão

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 botão, 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.

Fonte do botão

Você pode alterar a fonte do texto do botão 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.

Adicionar ícone do botão

Desabilitado, essa configuração removerá os ícones do seu botão. Por padrão, todos os botões Divi exibem um ícone de seta no foco.

Ícone de botão

Se os ícones estiverem ativados, você poderá usar essa configuração para escolher o ícone a ser usado no seu botão. Divi tem ícones diferentes para escolher.

Botão do ícone de cor

Definir essa configuração mudará a cor do ícone que aparece no seu botão. Por padrão, a cor do ícone é igual à cor do texto de seus botões, mas essa configuração permite ajustar a cor de forma independente.

Botão de colocação de ícone

Você pode optar por exibir o ícone do seu botão à esquerda ou à direita do seu botão.

Mostrar apenas o ícone quando o botão rola

Por padrão, os ícones de botão são exibidos apenas durante a rolagem. Se você quiser que o ícone apareça sempre, desative essa configuração.

Passe a cor do texto do botão

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor do plano de fundo do botão suspenso

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão de limite de cores em cores

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão do raio da beira do pairo

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Botão de espaçamento de notas pontiagudas

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Opções avançadas de módulo deslizante de largura total

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.

módulo de slides de seção avançada 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 automática

Se você quiser que o cursor deslize automaticamente, sem que o visitante precise clicar no botão seguinte, ative essa opção e, em seguida, ajuste a velocidade de rotação abaixo, se desejar.

Velocidade de animação automática (em ms)

Aqui você pode especificar o quão rápido o cursor se desvanece entre cada slide, se a opção 'Auto Animation' estiver ativada acima. Quanto maior o número, maior a pausa entre cada rotação.

Continuar o slide automático no Hover

Ativar isso permitirá que o slide automático continue na passagem do mouse.

Ocultar conteúdo no celular

À medida que o tamanho da tela se torna menor em dispositivos móveis, o espaço na tela se torna mais valioso. Às vezes, é uma boa ideia desativar alguns elementos slider menos importantes para reduzir o tamanho do controle deslizante e torná-lo mais legível. A ativação dessa configuração oculta o texto do cursor no celular.

Ocultar CTA no celular

À medida que o tamanho da tela se torna menor em dispositivos móveis, o espaço na tela se torna mais valioso. Às vezes, é uma boa ideia desativar alguns elementos slider menos importantes para reduzir o tamanho do controle deslizante e torná-lo mais legível. Habilitar essa configuração ocultará a chamada do cursor aos botões de ação do celular.

Visualizar imagem / vídeo para dispositivos móveis

À medida que o tamanho da tela se torna menor em dispositivos móveis, o espaço na tela se torna mais valioso. Às vezes, é uma boa ideia desativar alguns elementos slider menos importantes para reduzir o tamanho do controle deslizante e torná-lo mais legível. A ativação dessa configuração exibe imagens e vídeos do slide em dispositivos móveis (eles estão desativados por padrão).

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.

Opções de conteúdo para os elementos do módulo de slide de largura total

módulo de elemento individual divi diapo.png

Título

Defina o texto do título do seu cursor aqui.

Texto do botão

Se você quiser exibir um botão abaixo do conteúdo do seu slide, insira o texto do botão aqui. Deixe este campo em branco se não quiser exibir um botão.

Conteúdo

Digite o conteúdo do corpo do seu cursor aqui. Observe que a quantidade de texto inserida aqui determinará a altura de seus slides.

URL do botão

Se você exibir um botão, insira um URL da web válido nesse campo para definir o link de destino.

Arraste a imagem

Se você adicionar uma imagem de slide, ela aparecerá à esquerda do texto do seu slide, acima do plano de fundo do slide. Se você não especificar uma imagem de slide, você terá um slide centrado, apenas texto. Como a altura de cada slide é determinada pelo texto, se a imagem no slide for alta o suficiente, ela ficará abaixo da parte inferior do slide, criando uma imagem alinhada na parte inferior.

arraste uma imagem divi.png

Observe que a altura de um slide com uma imagem de slide pode ser determinada por um slide maior no controle deslizante. Certifique-se de que a imagem no seu slide é grande o suficiente para caber se você quiser ter uma imagem alinhada na parte inferior. Para facilitar a leitura, as imagens dos slides aparecem apenas nos controles deslizantes da coluna, coluna ou coluna da coluna 1. Da mesma forma, as imagens de slides não serão exibidas em larguras de navegador menores que 768 pixels. As larguras da imagem do slide são definidas abaixo. Recomendamos que suas imagens de slides sejam pelo menos tão largas.

Slide de vídeo

Se você adicionar um vídeo de slide, ele aparecerá à esquerda do texto do slide acima do plano de fundo do seu slide. Se você não especificar um vídeo de slide, você terá um slide centrado, somente texto. Como a altura de cada slide é determinada pelo texto, se a imagem no slide for alta o suficiente, ela ficará abaixo da parte inferior do slide, criando uma imagem alinhada na parte inferior.

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]

Pausar vídeo

Permitir que o vídeo seja pausado por outros jogadores quando eles começarem a jogar

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.

A altura de um slide é determinada pela quantidade de texto adicionada. Se você tiver vários slides, o cursor levará a altura do maior slide.

A largura do cursor é determinada pela largura do navegador. Com base nos tamanhos de tela padrão, recomendamos que suas imagens sejam pelo menos 1280px por 768px.

Posição da imagem de fundo

Por padrão, as imagens de plano de fundo são exibidas no centro do slide. Você pode usar essa configuração para alterar a posição na parte superior, inferior, esquerda, direita ou em um dos quatro cantos do slide.

Tamanho da imagem de fundo

Por padrão, as imagens de plano de fundo serão ampliadas proporcionalmente para garantir que elas preencham todo o slide. No entanto, você pode usar essa opção para alterar o comportamento padrão. "Capa" é o comportamento padrão, que dimensiona a imagem para cobrir toda a área do slide. "Ajustar" também forçará a imagem a cobrir toda a área, no entanto, forçará a altura e a largura da imagem para corresponder à altura e largura do controle deslizante. Isso pode resultar em uma imagem distorcida, mas isso impedirá o recorte da imagem. "Tamanho real" não dimensiona a imagem e a exibe no tamanho original.

Cor de fundo

Se você quiser apenas usar um fundo de cor sólida para o seu slide, use o seletor de cores para definir uma cor de fundo.

Vídeo de fundo MP4

Todos os vídeos devem ser baixados nos dois formatos .MP4 .WEBM para garantir compatibilidade máxima em todos os navegadores. Baixe a versão .MP4 aqui. Nota importante: Fundos de vídeo são desativados a partir de dispositivos móveis. Em vez disso, sua imagem do bkacground será usada. Por esse motivo, você precisa definir uma imagem de plano de fundo e um vídeo em segundo plano para garantir melhores resultados.

Vídeo de fundo da WEBM

Todos os vídeos devem ser baixados nos dois formatos .MP4 .WEBM para garantir compatibilidade máxima em todos os navegadores. Baixe as versões .WEBM aqui. Nota importante: Fundos de vídeo são desativados a partir de dispositivos móveis. Em vez disso, sua imagem do bkacground será usada. Por esse motivo, você precisa definir uma imagem de plano de fundo e um vídeo em segundo plano para garantir melhores resultados.

Largura de vídeo de fundo

Para que os vídeos sejam dimensionados corretamente, você deve inserir a largura exata (em pixels) do seu vídeo aqui.

Fundo de altura de vídeo

Para que os vídeos sejam dimensionados corretamente, você deve inserir a altura exata (em pixels) do seu vídeo aqui.

Opções de design de elementos do elemento de slides

módulo de estilo de seção divi.png

Use sobreposição de plano de fundo

Quando ativado, uma cor de sobreposição personalizada será adicionada à sua imagem de plano de fundo e atrás do conteúdo do slider.

Cor de sobreposição de plano de fundo

Use o seletor de cores para escolher uma cor para o plano de fundo.

Use a sobreposição de texto

Quando esta opção está ativada, uma cor de fundo é adicionada atrás do texto do cursor para torná-lo mais legível nas imagens de fundo.

Cor de sobreposição de texto

Use o seletor de cores para escolher uma cor para a sobreposição de texto.

Raio de borda de sobreposição de texto

O raio da borda afeta o arredondamento dos cantos da área de sobreposição de texto. Por padrão, os cantos têm uma borda ligeiramente arredondada de 3 pixels. Você pode reduzir esse valor para 0 para criar uma caixa retangular ou aumentar o valor para tornar os cantos ainda mais arredondados.

Setas de cores personalizadas

Ao passar o mouse sobre um módulo de cursor, setas aparecem para permitir que o visitante navegue por cada slide. Por padrão, essas setas herdam a cor do texto principal do slide. No entanto, você pode definir uma cor personalizada para essas setas usando essa configuração.

Dot Custom Color

Em cada controle deslizante, os elementos de navegação do ponto aparecem abaixo do conteúdo do cursor. Esses elementos permitem ao usuário navegar no cursor. Você pode definir uma cor personalizada a ser usada para esses itens usando o seletor de cores nessa configuração.

Alinhamento vertical da imagem do slide

Essa configuração determina o alinhamento vertical da imagem do slide. Sua imagem pode ser centralizada verticalmente ou alinhada na parte inferior do slide.

Cor do texto

Se o fundo do seu slide estiver escuro, a cor do texto deve estar definida como "Claro". Vez verso, se o plano de fundo do slide for claro, a cor do texto deverá ser definida como "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.

cor do módulo de design da seção de cabeçalho dispo divi.png

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.

módulo divi de linha de corpo diapo.png

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 estilos personalizados para o botão

A ativação dessa opção revela diferentes configurações de personalização para os botões que você pode usar para alterar a aparência do botão no seu módulo.

Tamanho do texto do botão

Essa configuração pode ser usada para aumentar ou diminuir o tamanho do texto no botão. O botão muda conforme o tamanho do texto aumenta e diminui.

Cor do texto do botão

Por padrão, os botões adotam a cor de destaque do tema, conforme definido no personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor do botão.

Cor de fundo do botão

Por padrão, os botões têm uma cor de plano de fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

Botão Largura da Borda

Todos os botões Divi possuem uma borda 2px padrão. Essa borda pode ser aumentada ou diminuída usando esse parâmetro. As bordas podem ser excluídas inserindo um valor de 0.

Cor da borda do botão

Por padrão, as bordas do botão mudam para a cor de destaque do tema, conforme definido no personalizador do tema. Essa opção permite atribuir uma cor de borda personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor da borda do botão.

Raio da borda do botão

O raio da borda afeta a redondeza dos cantos dos seus botões. Por padrão, os botões em Divi têm um pequeno raio de borda que arredonda os cantos dos 3 pixels. Você pode reduzir esse valor para 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões com bordas circulares.

módulo de botão de configuração divi.png

Espaçamento das letras do botão

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 botão, 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.

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]

Fonte do botão

Você pode alterar a fonte do texto do botão 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.

Adicionar ícone do botão

Desabilitado, essa configuração removerá os ícones do seu botão. Por padrão, todos os botões Divi exibem um ícone de seta no foco.

Ícone de botão

Se os ícones estiverem ativados, você poderá usar essa configuração para escolher o ícone a ser usado no seu botão. Divi tem ícones diferentes para escolher.

Botão do ícone de cor

Definir essa configuração mudará a cor do ícone que aparece no seu botão. Por padrão, a cor do ícone é igual à cor do texto de seus botões, mas essa configuração permite ajustar a cor de forma independente.

Botão de colocação de ícone

Você pode optar por exibir o ícone do seu botão à esquerda ou à direita do seu botão.

Mostrar apenas o ícone quando o botão rola

Por padrão, os ícones de botão são exibidos apenas durante a rolagem. Se você quiser que o ícone apareça sempre, desative essa configuração.

Passe a cor do texto do botão

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor do plano de fundo do botão suspenso

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão de limite de cores em cores

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão do raio da beira do pairo

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Botão de espaçamento de notas pontiagudas

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Opções avançadas de cursor Fullwidth

módulo de slides de seção avançada elemento individual divi.png

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.

Texto alternativo da imagem

O texto alternativo fornece todas as informações necessárias se a imagem não for carregada, não 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.

Outros tutoriais Divi

Este artigo contém comentários 2
  1. Olá! obrigado pelo seu artigo. Meu problema é a não exibição do vídeo de fundo no celular, meu cliente absolutamente queria. Achei que encontrei minha resposta porque, de acordo com seu artigo, em "Avançado" existe a possibilidade de ativar vídeos móveis desativados por padrão. mas eu não encontrei essa possibilidade no meu divi. Obrigado pela sua resposta ...

    Yanis

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
7 ações
ação4
chilrear1
Enregistrer2
Whatsapp