Destaque do produto Divi: Divi Social Plus

Publicados: 2023-06-25

Você está procurando uma maneira fácil de exibir suas postagens do Instagram e do Twitter em seu site? Divi Social Plus é um plug-in que adiciona 5 novos módulos de mídia social ao Divi Builder. Com este plug-in, você pode conectar suas contas do Instagram e do Twitter para exibir feeds e carrosséis de mídia social totalmente personalizáveis. O plug-in também vem com um módulo de compartilhamento de mídia social que também pode ser totalmente personalizado e adicionado aos seus layouts. Neste destaque de plug-in, veremos o Divi Social Plus para ajudá-lo a decidir se é o plug-in de mídia social certo para você.

Vamos começar!

Índice
  • 1 Instalação do Divi Social Plus
    • 1.1 Obter token de acesso ao Instagram
  • 2 Divi Social Plus
    • 2.1 Feed do Instagram
    • 2.2 Carrossel do Instagram
    • 2.3 Compartilhamento Social
    • 2.4 Feed do Twitter
    • 2.5 Carrossel do Twitter
  • 3 Adquira o Divi Social Plus
  • 4 Considerações Finais

Instalando o Divi Social Plus

Para instalar o Divi Social Plus, navegue até a página Plugin no painel do WordPress e clique em Adicionar novo. Clique em Escolher arquivo, selecione o arquivo de plug-in .ZIP e clique em Instalar agora.

Instalação do Divi Social Plus

Depois que o plug-in estiver instalado, clique em ativar.

Divi Social Plus Ativar

Obter token de acesso ao Instagram

Para conectar uma conta e exibir imagens com os módulos do Instagram, você precisa gerar um token de acesso ao Instagram. O autor do plug-in tem alguma documentação que você pode seguir para configurar tudo e obter o ID do aplicativo e o segredo do aplicativo necessários para gerar o token de acesso do Instagram.

Divi Social Plus Token de acesso ao Instagram

Divi Social Plus

O plug-in adiciona 5 novos módulos de mídia social ao Divi Builder: Instagram Feed, Instagram Carousel, Social Share, Twitter Feed e Twitter Carousel. Vamos dar uma olhada em cada módulo.

Módulos Divi Social Plus

Feed do Instagram

Com este módulo, você pode exibir suas postagens do Instagram em um feed em qualquer lugar do seu site. Vamos dar uma olhada nas configurações.

Feed do Instagram Divi Social Plus

Configurações de conteúdo

Nas configurações do feed do Instagram, você pode adicionar seu token de acesso gerado. Depois de adicionadas, suas fotos do Instagram aparecerão no Visual Builder e no seu site.

Divi Social Plus Token de acesso ao feed do Instagram

Configurações do Instagram

Na seção Configurações do Instagram, você pode definir o tempo do cache de dados e o tempo limite do cache. Você também pode optar por mostrar o ícone e a legenda ao passar o mouse e definir o número de postagens do Instagram a serem exibidas.

Divi Social Plus Feed do Instagram Configurações do Instagram

Além disso, você pode habilitar o link da imagem, mostrar a legenda da postagem, definir uma altura de item personalizada e habilitar o suporte RTL.

Divi Social Plus Feed do Instagram Configurações do Instagram

Outras configurações de conteúdo

Você também pode definir um link, cor de fundo e rótulo de administrador nas configurações da guia de conteúdo.

Divi Social Plus Fundo de alimentação do Instagram

Configurações de design

Vamos dar uma olhada nas configurações de design.

Instagram

Na guia Instagram, você pode selecionar o layout, o número de colunas e o espaço entre os itens. Além do layout de grade na foto acima, você também pode escolher o layout de alvenaria ou o layout de destaque. Este é o layout de alvenaria.

Layout de alvenaria do feed do Instagram Divi Social Plus

Este é o layout de destaque. Quando esse layout é selecionado, você pode optar por realçar algumas imagens, fazendo com que pareçam maiores na grade.

Divi Social Plus Feed do Instagram Configurações do Instagram

Sobreposição

Nas configurações de sobreposição, você pode definir a cor e o tamanho do ícone do Instagram, a cor de fundo da sobreposição e personalizar totalmente os estilos de texto da legenda.

Sobreposição de feed do Instagram Divi Social Plus

Rubrica

Aqui você pode alterar o estilo da legenda, se ativado. Você pode definir o preenchimento e o plano de fundo da legenda e personalizar os estilos de texto da legenda.

Divi Social Plus Legenda do feed do Instagram

Outras configurações de design

Além dessas configurações de design exclusivas, você também pode personalizar as opções de dimensionamento, espaçamento, borda, sombra da caixa, filtros, transformação e animação para o módulo de feed do Instagram.

Divi Social Plus Configurações de design do feed do Instagram

Carrossel do Instagram

Com o módulo de carrossel do Instagram, você pode exibir fotos do Instagram em seu site em um formato de carrossel envolvente. Vamos olhar mais de perto.

Divi Social Plus Instagram Carrossel

Configurações de conteúdo

Primeiro, você precisa adicionar o token de acesso que você gerou ao campo nas configurações do feed do Instagram. Em seguida, suas imagens aparecerão no carrossel.

Divi Social Plus Token de acesso ao carrossel do Instagram

Configurações do Instagram

Aqui você pode definir o tempo do cache de dados e o tipo de tempo limite do cache, mostrar ou ocultar o ícone e a legenda ao passar o mouse, definir o número de postagens do Instagram a serem exibidas, habilitar o link da imagem e mostrar ou ocultar a legenda abaixo da imagem.

Divi Social Plus Instagram Carrossel Configurações do Instagram

Configurações do carrossel

Existem duas guias nas configurações do carrossel – geral e avançada. Primeiro, vamos dar uma olhada na guia geral. Aqui você pode definir a velocidade da animação, ativar a reprodução automática e definir a velocidade da reprodução automática, ativar a navegação e ativar a paginação. Você também pode ativar o slide de largura fixa e definir uma largura para cada imagem.

Divi Social Plus Carrossel do Instagram Configurações do Carrossel

Se o slide de largura fixa não estiver ativado, você pode especificar o número de slides a serem exibidos. Nesta seção, você também pode definir o espaçamento entre os slides, escolher se deseja aplicar espaçamento no primeiro e no último item e ativar o loop infinito.

Divi Social Plus Carrossel do Instagram Configurações do carrossel

Na guia avançada das configurações do carrossel, você pode definir o tipo de transição CSS deslizante. Você pode escolher entre linear, facilidade de entrada ou facilidade de saída. Você também pode habilitar a navegação por deslizamento e definir o número de itens para rolar. Aqui, você também pode ativar o modo vertical para exibir suas fotos do Instagram em um carrossel vertical.

Divi Social Plus Modo vertical do carrossel do Instagram

Você também pode habilitar o modo central para o carrossel. Com este modo ativado, você pode selecionar clássico ou realçado. Aqui está a aparência do layout do modo central destacado, ele apresenta a imagem central maior do que as imagens ao redor.

Divi Social Plus Instagram Carousel Center Mode

Também nesta seção, você pode ativar a configuração de espera para animar, que ignora solicitações para avançar o slide durante a animação, e pode ativar um cursor personalizado que aparece sobre o controle deslizante.

Divi Social Plus Cursor personalizado do carrossel do Instagram

Aqui está o estilo do cursor de captura.

Exemplo de cursor personalizado do carrossel do Instagram Divi Social Plus

Por fim, você pode ajustar o espaçamento do wrapper superior e inferior e habilitar o suporte RTL.

Divi Social Plus Instagram Carousel Wrapper Configurações RTL

Outras configurações de conteúdo

Você também pode personalizar o link do módulo, os estilos de plano de fundo e o rótulo do administrador na guia de conteúdo.

Divi Social Plus Fundo do carrossel do Instagram

Configurações de design

Muitas das configurações de design do módulo Carrossel do Instagram são semelhantes às configurações do módulo Feed do Instagram. Vamos dar uma olhada.

Instagram

Nesta seção, você pode definir a altura da imagem.

Divi Social Plus Altura da imagem do carrossel do Instagram

Sobreposição

Na seção de sobreposição, você pode personalizar a cor e o tamanho do ícone do Instagram, bem como a cor de fundo da sobreposição e os estilos de fonte da legenda. Aqui eu defini uma cor de sobreposição sólida que aparece ao passar o mouse.

Divi Social Plus Instagram Carousel Overlay

Rubrica

Aqui é onde você pode personalizar o estilo da legenda mostrada abaixo da imagem, se ativado. Você pode definir o preenchimento, o plano de fundo da legenda e os estilos de fonte.

Divi Social Plus Instagram Carousel Legenda

Navegação

Existem três guias de configurações na seção de navegação: Comum, Anterior e Próximo. Primeiro, vamos dar uma olhada na guia comum. Aqui você pode escolher entre os tipos de navegação A ou B. O tipo A apresenta uma seta em cada lado do carrossel. O tipo B apresenta as duas setas mais próximas, conforme ilustrado aqui. Você pode ajustar o posicionamento vertical e horizontal, a altura e a largura e o tamanho do ícone.

Divi Social Plus Navegação do carrossel do Instagram

Nesta seção, você também pode definir a cor e o plano de fundo do ícone, inclinar os ícones, ajustar o espaçamento entre os ícones, definir a posição vertical, habilitar o centro da posição horizontal e ajustar a borda.

Divi Social Plus Navegação do carrossel do Instagram

Nas guias anterior e seguinte, você pode definir os ícones de navegação e definir o raio da borda.

Divi Social Plus Navegação do carrossel do Instagram

Paginação

Nas configurações de paginação, você pode selecionar o tipo de ponto ou tipo de número de navegação. Você também pode selecionar o alinhamento, a cor de fundo da paginação, altura e largura, largura da borda, posição vertical e espaçamento. Na guia ativa, você pode definir o plano de fundo da paginação ativa, a cor do texto e a largura.

Divi Social Plus Paginação do carrossel do Instagram

Outras configurações de design

Também na guia de design, você pode personalizar as opções de dimensionamento, espaçamento, borda, sombra da caixa, filtros, transformação e animação.

Compartilhamento Social

O módulo de compartilhamento social adiciona um botão de compartilhamento de rede social à sua página. Cada item de compartilhamento social é adicionado ao módulo individualmente na guia de conteúdo.

Divi Social Plus Social Share

Compartilhamento de configurações de itens

Cada item de compartilhamento individual pode ser adicionado na guia Conteúdo e tem sua própria página de configurações.

Divi Social Plus Configurações de compartilhamento social

Na guia de conteúdo da janela de configurações do item de compartilhamento, você pode definir o tipo de rede, especificar o texto de compartilhamento, alterar o plano de fundo e definir o rótulo de administrador. Você pode optar por exibir botões para Twitter, Facebook, Messenger, Pinterest, LinkedIn, WhatsApp, Viber, Tumblr, Reddit, Email, VK e Telegram.

Divi Social Plus Social Share Networks

Na guia de design, você pode personalizar o ícone, o texto, a borda, a sombra da caixa, o espaçamento, os filtros e os estilos de transformação.

Divi Social Plus Social Share Design Settings

Configurações de conteúdo

Agora vamos dar uma olhada nas configurações na guia de conteúdo do módulo de compartilhamento social. A maioria das configurações está na seção de configurações, além dos estilos de plano de fundo e do rótulo de administrador.

Na seção de configurações, você pode escolher entre um posicionamento horizontal ou vertical. Aqui está o layout vertical.

Posicionamento de compartilhamento social Divi Social Plus

Você também pode escolher entre o layout clássico (foto acima) ou o layout moderno, retratado aqui. Com a opção de tipo de exibição, você pode escolher entre o layout do bloco, que abrange o comprimento do seu bloco ou um layout de bloco embutido como este. Se o layout moderno for selecionado, você também pode mostrar uma seta de ícone e alterar o posicionamento do ícone.

Divi Social Plus Layout de compartilhamento social

Se o layout clássico for selecionado, você poderá definir o alinhamento do conteúdo. Você também pode mostrar ou habilitar o texto de compartilhamento, definir o alinhamento do botão, a lacuna de espaçamento do botão e habilitar o suporte RTL.

Divi Social Plus Social Share Layout Clássico

Configurações de design

Na guia design, você pode personalizar o design de todos os botões de compartilhamento social.

Em geral

Aqui você pode definir o preenchimento do botão, o plano de fundo do botão e os estilos de borda do botão.

Fundo do botão Divi Social Plus Social Share

Ícone

Nas configurações do ícone, você pode alterar a lacuna de espaçamento do ícone, cor da seta, cor do ícone, tamanho, altura e largura do invólucro, cor de fundo, preenchimento, cantos arredondados e estilos de borda.

Divi Social Plus Ícone de compartilhamento social

Texto

Nas configurações de texto, você pode estilizar o texto do botão.

Divi Social Plus Texto de compartilhamento social

Outras configurações de design

Também na guia de design, você pode personalizar a borda, sombra da caixa, dimensionamento, espaçamento, filtros, transformação e estilos de animação para os botões de compartilhamento social.

Divi Social Plus Social Share Outras configurações de design

Feed do Twitter

Com este módulo, você pode adicionar um feed do Twitter ao layout do seu site. Vamos dar uma olhada nas configurações.

Configurações de conteúdo

Feed do Twitter

Nas opções de Feed do Twitter, adicione o nome de usuário da conta do Twitter da qual você gostaria de exibir os Tweets.

Divi Social Plus Twitter Feed Nome de usuário

elementos

Aqui você pode definir como o feed é classificado: por postagens recentes, postagens antigas, favoritos ou retuítes. Você também pode definir o número de Tweets a serem exibidos e ativar ou desativar os seguintes elementos: logotipo do Twitter, imagem do usuário, nome, nome do usuário, data, favorito, retuíte e leia mais. Você também pode alterar o texto leia mais.

Elementos de feed do Twitter Divi Social Plus

Configurações de grade

Nas configurações da grade, você pode definir o número de colunas, alterar as lacunas das colunas e habilitar o suporte RTL.

Divi Social Plus Configurações da grade de alimentação do Twitter

Outras configurações de conteúdo

Além dessas opções, você também pode definir o link do módulo, plano de fundo e rótulo de administrador na guia de conteúdo.

Fundo de feed do Twitter Divi Social Plus

Configurações de design

Na guia de design, você pode personalizar a aparência do feed do Twitter.

Caixa de tweets

Aqui, você pode definir o alinhamento da caixa do Tweet, alinhamento do ícone do Twitter, preenchimento, plano de fundo e estilos de borda.

Fundo de tweets do feed do Twitter Divi Social Plus

Avatar do usuário

Nas configurações do avatar do usuário, você pode alterar o tamanho da imagem do perfil, definir o espaçamento do avatar, adicionar cantos arredondados e modificar os estilos de borda.

Divi Social Plus Feed do Twitter Avatar do usuário

Texto do usuário

As configurações de texto do usuário são separadas pela guia Nome e pela guia Nome de usuário, para que você possa definir estilos diferentes para cada uma.

Divi Social Plus Twitter Feed Texto do usuário

Contente

É aqui que você pode personalizar o estilo do conteúdo do Tweet. Essas opções também são separadas em três guias para estilos diferentes: Descrição, Leia mais e Data. Você pode personalizar os estilos de fonte e cores para cada um desses elementos. Você também pode ajustar o espaçamento inferior nas configurações de descrição.

Conteúdo do feed do Twitter Divi Social Plus

Rodapé

Aqui você pode definir o alinhamento e o preenchimento do rodapé, bem como as cores e tamanhos do texto e dos ícones para os indicadores de favoritos e retuítes.

Divi Social Plus Rodapé do feed do Twitter

Outras configurações de design

Além disso, você pode personalizar o dimensionamento, espaçamento, filtros, transformação e estilos de animação para o módulo de feed do Twitter.

Divi Social Plus Configurações de design do feed do Twitter

Carrossel do Twitter

Este módulo permite que você adicione um carrossel de Tweets ao seu site.

Configurações de conteúdo

Feed do Twitter

Aqui você pode adicionar o nome de usuário da conta do Twitter da qual gostaria de exibir os Tweets.

Divi Social Plus Twitter Feed Nome de usuário

Configurações do Twitter

Nas configurações do Twitter, você pode selecionar o tipo de classificação, o número de Tweets a serem exibidos e ativar ou desativar o seguinte: logotipo do Twitter, imagem do usuário, nome, nome do usuário, data, favorito, retuíte e leia mais. Você também pode personalizar o texto leia mais aqui.

Divi Social Plus Twitter Carrossel Configurações do Twitter

Configurações do carrossel

Na guia geral, você pode definir a velocidade da animação, ativar a reprodução automática, definir a velocidade da reprodução automática, ativar a paginação, ativar slides de largura fixa, selecionar o número de slides a serem exibidos, ajustar o espaçamento do slide, aplicar espaçamento no primeiro e no último item, ativar looping infinito e equalizar as alturas das colunas.

Divi Social Plus Configurações do carrossel do Twitter

Na guia avançada, você pode selecionar o tipo de transição CSS, habilitar o deslizar, definir o número de itens para rolar, habilitar o modo vertical, habilitar o modo central, aguardar a animação, habilitar o cursor personalizado, ajustar o espaçamento do wrapper e habilitar o suporte RTL.

Divi Social Plus Carrossel do Twitter Configurações avançadas do carrossel

Aqui está o carrossel com o modo de centro ativado e o tipo de layout de destaque selecionado.

Divi Social Plus Twitter Carousel Center Mode

Outras configurações de conteúdo

Você também pode definir um link de módulo, alterar os estilos de plano de fundo e definir um rótulo de administrador na guia de conteúdo.

Divi Social Plus Configurações de conteúdo do carrossel do Twitter

Configurações de design

Na guia de design, você pode personalizar completamente o estilo do carrossel do Twitter. Vamos olhar mais de perto.

Caixa de tweets

Aqui você pode definir o alinhamento do conteúdo, alinhamento do ícone do Twitter, tamanho do ícone do Twitter, preenchimento, plano de fundo e estilos de borda para cada Tweet.

Divi Social Plus Caixa de Tweets do Carrossel do Twitter

Avatar do usuário

Nas configurações do avatar do usuário, você pode definir o tamanho da imagem do perfil, espaçamento do avatar, cantos arredondados e estilos de borda.

Divi Social Plus Avatar do usuário do carrossel do Twitter

Texto do usuário

Nas configurações de texto do usuário, você pode personalizar os estilos de fonte para o nome e nome de usuário.

Divi Social Plus Twitter Carousel Texto do usuário

Contente

Aqui você pode personalizar os estilos de fonte para o conteúdo do Tweet, o link leia mais e a data.

Divi Social Plus Conteúdo do carrossel do Twitter

Rodapé

Nas configurações do rodapé, você pode definir o alinhamento e o preenchimento do rodapé. Você também pode personalizar as cores e os tamanhos do texto e dos ícones para os indicadores de favoritos e retuítes.

Divi Social Plus Rodapé do carrossel do Twitter

Navegação

Você pode habilitar dois tipos de navegação: Tipo A e Tipo B. Este é o tipo A, com a navegação em cada lado do módulo carrossel. Aqui você também pode definir a altura e a largura dos ícones de navegação, definir o tamanho, a cor e o plano de fundo do ícone, habilitar um efeito de inclinação, definir a posição vertical e horizontal e definir os estilos de borda. Nas guias Anterior e Próximo, você pode definir os ícones e o raio da borda de cada botão.

Divi Social Plus Twitter Carrossel Navegação

Paginação

Nas configurações de paginação, você pode escolher entre navegação de estilo de número ou ponto. Este é o estilo de navegação numérica. Você pode personalizar o alinhamento, a cor do texto, o tamanho do texto, o plano de fundo, a altura, a largura, o raio da borda, a posição vertical e o espaçamento.

Divi Social Plus Twitter Carousel Pagination

Na guia ativa, você pode definir os estilos para o item de paginação ativo.

Divi Social Plus Twitter Carousel Paginação ativa

Outras configurações de design

Você também pode personalizar as opções de dimensionamento, espaçamento, filtros, transformação e animação na guia de design.

Compre o Divi Social Plus

O Divi Social Plus está disponível no Divi Marketplace. Custa $ 49 para uso ilimitado do site e 1 ano de suporte e atualizações. O preço também inclui uma garantia de reembolso de 30 dias.

Compre o Divi Social Plus

Pensamentos finais

O Divi Social Plus adiciona cinco novos módulos de mídia social ao Divi Builder, permitindo que você integre seu conteúdo de mídia social em seu site. Com o Divi Social Plus, você pode adicionar feeds e carrosséis do Instagram e do Twitter, bem como botões de compartilhamento social ao seu site. Cada módulo vem com várias opções de configuração e configurações de design diferentes que permitem que você tenha controle total sobre o design dos módulos de mídia social. Se você está procurando uma maneira de integrar um feed de mídia social em seu site Divi, este plug-in pode ser uma ótima solução para você.

Gostaríamos muito de ouvir de você! Já experimentou o Divi Social Plus? Deixe-nos saber o que você pensa sobre isso nos comentários!