Como fazer as mídias sociais seguirem o módulo fixo como o Monarch

No tutorial de hoje, mostraremos como fazer com que o Módulo de Acompanhamento de Mídia Social atenda a certas necessidades. O Social Media Follow é um módulo que raramente falta em qualquer página de qualquer site. É uma das principais formas de conectar os canais de mídia social ao site. Para ajudá-lo a alcançar a conexão desejada entre o seu site e os canais de mídia social, temos o Monarch. Um plugin que facilmente ajuda você a mostrar botões de acompanhamento de mídia social em seu site. Mas se você preferir obter alguns dos resultados do Monarca por meio do construtor Divi, esta postagem pode ser útil.

Vamos mostrar como criar um Módulo de Acompanhamento de Mídia Social fixo para o seu site, que é uma das coisas que o plug-in Monarch oferece. Além de localizá-lo no lado esquerdo ou direito (configurações padrão no Monarch), também mostraremos como fazê-lo aderir ao topo e à base de sua página. Além de fixá-lo no topo da página, também incluiremos uma parte onde mostramos como fazer o Módulo de Acompanhamento de Mídia Social aparecer abaixo do menu principal em seu site (quer seu menu principal seja fixo ou não) .

Vamos dar uma olhada nos resultados finais abaixo.

Exemplo do lado esquerdo

Exemplo do lado direito

Exemplo principal (padrão)

Sem navegação fixa

Com navegação fixa

Exemplo Inferior

Como fazer as mídias sociais seguirem o módulo fixo como o Monarch

Inscreva-se no nosso canal no Youtube

Passos Gerais

Como as etapas básicas para adicionar um Módulo de Acompanhamento de Mídia Social a uma página são as mesmas em todos os exemplos, vamos mostrar isso apenas uma vez. Se você quiser obter o mesmo resultado para o lado direito, o posicionamento superior ou inferior, você terá que adicionar o módulo de acompanhamento de mídia social primeiro, conforme explicado na próxima parte deste post.

Adicionar módulo de acompanhamento de mídia social à página

Para tornar isso mais fácil, vamos adicionar o Módulo de Acompanhamento de Mídia Social à primeira seção de nossa página. Ao fazer isso, você saberá imediatamente onde encontrá-lo quando quiser fazer qualquer alteração no futuro. Na verdade, não precisamos de uma linha separada para este módulo, pois vamos atribuir uma posição fixa a ele.

Adicionar canais de mídia social ao módulo de acompanhamento de mídia social +

A próxima coisa que precisaremos fazer é adicionar os canais de mídia social necessários ao Módulo de Acompanhamento de Mídia Social. Abra as configurações do módulo e clique em 'Adicionar Nova Rede Social'. Depois de fazer isso, você pode escolher a rede de mídia social que deseja adicionar e atribuir um URL a ela.

Para cada uma das redes sociais, é atribuída automaticamente uma cor de ícone que corresponde à rede social. Se, no entanto, preferir usar cores no estilo do seu próprio site, você pode escolher uma cor diferente na guia Design. Para o exemplo, mostraremos como fazer, incluiremos quatro redes sociais; Facebook, Twitter, Google+ e LinkedIn. Em vez de usar as cores padrão, vamos dar a cada uma das redes sociais a mesma cor, mas com uma opacidade diferente. Também ordenaremos os canais de mídia social de acordo com a importância.

Configurações do Facebook

Clique em 'Adicionar Nova Rede Social'. Nas opções de redes sociais, escolha Facebook. Ainda na guia Conteúdo, adicione o URL vinculado ao canal de mídia social do Facebook.

Em seguida, vá para a guia Design. Nesse caso, o Facebook é a rede social mais importante. É por isso que vamos dar a tonalidade de cor que mais chama a atenção. A cor que usamos é 'rgba (59,89,152,0,94)'.

Configurações do Twitter

Em seguida, adicione uma nova Rede Social. Em vez de escolher o Facebook, escolha o Twitter desta vez. Adicione a URL na mesma guia Conteúdo e vá para a guia Design. Na guia Design, escolha 'rgba (59,89,152,0,76)' como a cor de fundo. Nesse caso, o Twitter é um canal de mídia social importante, mas não tão importante quanto o Facebook. É por isso que vem em segundo na linha e com uma cor um pouco mais transparente e menos marcante.

Configurações do LinkedIn

Repita o mesmo processo para a rede social LinkedIn na guia Conteúdo e vá para a guia Design. Na guia Design, atribua a cor 'rgba (59,89,152,0.6)' ao ícone.

Configurações do Google+

E por último mas não menos importante; adicione um ícone social do Google+. Preencha o URL e vá para a guia Design. Esta é a rede social 'menos' importante que queremos adicionar à lista neste exemplo e terá a cor do ícone 'rgba (59,89,152,0,42)'.

Crie a barra lateral esquerda para seguir as mídias sociais

O primeiro módulo fixo de acompanhamento de mídia social que mostraremos como fazer está localizado no lado esquerdo da página. Este é o mais usado e pode ser o que mais o faz pensar imediatamente no Monarca. Siga os passos gerais primeiro e continue adicionando o código CSS que você encontrará na próxima parte deste post. Mostraremos duas maneiras de adicionar o código CSS; para as Opções de tema e para uma página em particular. Após este exemplo, você também pode escolher entre as duas opções para os outros exemplos.

Adicionar linhas de código CSS às opções de tema

Um dos métodos para adicionar o código CSS adicional é por meio das Opções de tema. Este método é usado com mais frequência quando você deseja criar o efeito em todo o site. Mas lembre-se; se estiver usando este efeito, você terá que incluir o Módulo de Acompanhamento de Mídia Social em cada página do seu site (ou nas páginas que deseja que apareça).

Para adicionar o código CSS às opções de tema, vá para o painel do WordPress> Divi> Opções de tema> Geral> Role a guia Geral para baixo e adicione as seguintes linhas de código CSS ao campo CSS personalizado:

ul.et_pb_social_media_follow { 
position: fixed; 
left: 0; 
top: 35%;
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

Adicionar linhas de código CSS a uma página em particular

Outro método que ajuda a aplicar o código CSS é adicioná-lo a uma página em particular. Este método é mais comumente usado quando você decide adicionar o Módulo de Acompanhamento de Mídia Social a apenas uma página em particular. Ao usar esse método, seu site não carregará as linhas de código CSS em todas as outras páginas do site que não contenham o Módulo de Acompanhamento de Mídia Social. Ou, se quiser que o Módulo de Acompanhamento de Mídia Social em outras páginas se comporte normalmente, este método também o ajudará.

Clique no seguinte botão no seu Divi builder:

Em seguida, copie e cole o código CSS no campo Custom CSS.

Criar a barra lateral direita para seguir as mídias sociais

O próximo código que compartilharemos ajudará você a colocar o módulo Acompanhamento de Mídia Social no lado direito do seu site.

As linhas de código CSS necessárias

Adicione as seguintes linhas de código CSS às Opções de tema ou a uma página em particular, conforme explicado no exemplo acima.

ul.et_pb_social_media_follow {
position: fixed;
top: 40%; 
padding: 0 !important; 
right: 0; 
width: 30px;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

Crie as melhores mídias sociais para seguir

Continuando, você também pode localizar seu Módulo de Acompanhamento de Mídia Social no topo do seu site. Esta é, na verdade, uma maneira muito interessante de permitir que os ícones das redes sociais sigam seus visitantes através do site. Não é usado com frequência, por isso chama a atenção das pessoas.

As linhas de código CSS necessárias

Copie e cole as seguintes linhas de código CSS nas Opções de tema ou adicione-as a uma página em particular.

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

Crie as melhores redes sociais, siga abaixo do menu principal

O método mostrado anteriormente para adicionar o Módulo de Acompanhamento de Mídia Social ao seu site não leva o Menu Principal em consideração. Se você, no entanto, deseja que o Social Media Follow apareça abaixo do menu principal e volte ao topo ao rolar, esta parte da postagem pode ajudá-lo.

Adicione o código CSS

Em ambos os casos em que a navegação fixa está ativada e onde não está, você deve adicionar as seguintes linhas de código CSS nas Opções de tema ou adicioná-las a uma página em particular:

ul.et_pb_social_media_follow {
position: fixed;
left: 45%; 
top: 0;
z-index: 999 !important;
}
.et_pb_social_media_follow li {
margin: 0 !important; 
padding: 0 !important;
}
.et_pb_social_media_follow li a.icon.rounded_rectangle {
border-radius: 1px; 
margin: 0 !important;
}

Depois disso, você também precisará adicionar algum código jQuery. O código jQuery depende se você ativou a navegação fixa ou não.

Com navegação fixa

Se você ativou a navegação fixa, será necessário adicionar as seguintes linhas de código jQuery ao cabeçalho do seu site ou a um Módulo de código na página onde deseja que funcione:

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
});
});
</script>

Não se esqueça de usar as linhas de código CSS também. O código jQuery é adicional. Além disso, certifique-se de que, ao rolar, a altura do primário permaneça a mesma. Você pode fazer isso acessando o Painel do WordPress> Aparência> Personalizar> Cabeçalho e navegação> Configurações de navegação fixas> Selecione o mínimo para a altura fixa do menu.

Sem navegação fixa

Se você deseja obter o mesmo resultado, mas não tem uma navegação fixa, o código será um pouco diferente:

<script text= "text/javascript">
jQuery(function($) {
$("ul.et_pb_social_media_follow").css("margin-top", $("#main-header").outerHeight());
$(window).bind('scroll', function() {
var navi = $("#main-header");
var naviHeight= navi.outerHeight();
if ($(window).scrollTop() <= naviHeight){
$("ul.et_pb_social_media_follow").css("margin-top", naviHeight);
}
else {
$("ul.et_pb_social_media_follow").css("margin-top", 0);
}
});
});
</script>

Criar acompanhamento de mídia social inferior

O último da linha é o Módulo de Acompanhamento de Mídia Social inferior.

As linhas de código CSS necessárias

Adicione as seguintes linhas de código CSS ao campo CSS personalizado das opções de tema ou a uma página em particular:

ul.et_pb_social_media_follow { 
position: fixed; 
left: 45%; 
bottom: 0; 
padding: 0 !important; 
z-index: 999 !important;
} 
.et_pb_social_media_follow li { 
margin: 0 !important; 
padding: 0 !important; 
} 
.et_pb_social_media_follow li a.icon.rounded_rectangle { 
border-radius: 1px; 
margin: 0 !important; 
}

Pensamentos finais

Neste tutorial, mostramos como criar o Módulo de Acompanhamento de Mídia Social no mesmo estilo do plug-in Monarch. Ao usar este método, você não precisará baixar o plug-in Monarch se estiver usando-o apenas para compartilhar seus canais de mídia social. Para compartilhamento de mídia social, você ainda terá que usar o plug-in Monarch. Se você tiver dúvidas ou sugestões; fique à vontade para deixar um comentário na seção de comentários abaixo para que possamos entrar em contato!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Snopek Nadia / shutterstock.com