Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo de mídia social

Divi: o tema WordPress mais fácil de usar

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 Divi Social Media permite que você crie links baseados em ícones para seus perfis sociais on-line, como Facebook, Twitter e Google+. Estes ícones estão integrados no tema, no estilo do próprio Divi usando seus ícones elegantes, o que os torna preferíveis ao uso de plugins de terceiros. Você pode adicionar links a vários perfis sociais em cada módulo, e você pode adicionar o módulo em qualquer lugar da página.

Como adicionar um módulo de mídia social à sua página

Antes de adicionar um módulo de mídia social à sua página, primeiro você deve 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.

siga-nos nas redes sociais.png

Localize o módulo de mídia social 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 "Siga-nos nas redes sociais" e depois clicar em "entrar" para encontrar e adicionar automaticamente o módulo de mídia social! 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 ícones de mídia social correspondentes a uma página de contato

A página de contato de um site é o local perfeito para apresentar seus perfis sociais on-line. Isso oferece mais oportunidades para os usuários permanecerem conectados e promoverem seu blog ou empresa. Para este exemplo, mostrarei como adicionar ícones de mídia social para corresponder ao design atual de uma página de contato.

adicionar botões de rastreamento em uma página de contato divi wordpress.jpg

Usando o construtor visual, inclua uma nova seção regular com uma linha de largura total de uma coluna. Insira um módulo de mídia social na sua coluna.

Na guia Conteúdo das configurações do módulo, clique no botão "Adicionar novo item" para adicionar uma nova rede social ao seu módulo. Em Configurações Específicas da Rede Social, atualize os seguintes itens:

Opções de conteúdo

Rede social:
URL da conta do Facebook: [insira o URL da sua conta do Facebook]

Opções de design

Cor do ícone: # d94b6a (cor correspondente)

adicione um color.jpg correspondente

Em seguida, duplique essa rede social para adicionar mais quatro redes (Twitter, Google+, LinkedIn e Instagram). Como você duplicou a rede, a cor do ícone personalizado foi transferida. Então, basta atualizar cada URL de rede e conta.

Divi: O melhor tema WordPress de todos os tempos!

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

redes sociais duplicadas divi.jpg

Agora você tem ícones de mídia social que correspondem ao design da página de contato.

rede social display.png

Opções de conteúdo de mídia social

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.

conteúdo para divi siga-nos nas redes sociais module.png

Adicione um novo objeto

É aqui que você adiciona novas redes ao seu módulo. Clicar em "adicionar um novo item" abrirá uma nova janela de opções específica para sua nova rede (sob as guias "Conteúdo", "Design" e "Avançado"). Veja abaixo as configurações individuais da rede de mídia social.

Depois de adicionar sua primeira rede, você verá uma barra cinza com o título da sua rede exibido como um rótulo. A barra cinza também possui três botões que permitem editar, duplicar ou excluir a rede.

Formulário de ligação

Aqui você pode escolher a forma de seus ícones de redes sociais em retângulo arredondado ou em círculo.

O URL é aberto

Escolha abrir o URL da sua rede em uma nova guia ou na mesma janela.

Siga o botão

Aqui você pode escolher se deseja ou não incluir o próximo botão ao lado do ícone.

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.

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]

Opções de Design de Mídia Social

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 a aparência.

mude a aparência divi.png

Para este módulo, as opções de design consistem em um único elemento - Cor do texto.

Cor do texto

Aqui você pode escolher se o texto deve ser claro ou escuro. Se você estiver trabalhando em um fundo escuro, seu texto deve estar claro. Se seu plano de fundo estiver claro, seu texto deve estar escuro.

Opções avançadas de mídia social

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.

configurações avançadas 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 no seu tema filho Divi ou na folha de estilos CSS personalizada que você adiciona à sua página ou site usando o opções de tema Divi ou parâmetros da página do 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.

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 individuais de conteúdo de mídia social

optin content divi.png

Rede Social

Aqui você pode escolher a rede social que deseja exibir.

URL da conta

É aqui que você insere o URL desse link de rede social. Se você escolheu o Facebook como sua rede, é aqui que você colocaria o URL da sua página no Facebook.

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]

Opções individuais de design de mídia social

estilo individual option.png

Cor do ícone

Divi tem cores padrão para cada rede social definida por padrão. Aqui você pode facilmente mudar esta cor do ícone para o que você quer.

Opções avançadas de mídia social

módulo de opção antecipada siga-nos 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.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
9 ações
ação4
chilrear1
Enregistrer4
Whatsapp