Como criar uma mídia social pop-out Siga a barra de botões do seu modelo de página na Divi
Publicados: 2019-12-22Os botões para Seguir nas Redes Sociais continuam a ser uma adição popular a qualquer website. Empresas e indivíduos usam esses links para redirecionar os usuários às suas páginas de mídia social na esperança de que os visitantes os sigam ou se inscrevam em seus canais. Normalmente, você vê esses botões em uma página de contato, barra lateral ou no rodapé de um site.
Neste tutorial, vamos mostrar a você como criar uma barra de botões pop-out de mídia social para um modelo de página no Divi. Isso dará a esses botões de acompanhamento de mídia social maior visibilidade em seu site, sem ser uma distração. Além disso, com o Divi's Theme Builder, você cria um modelo de página que inclui esses botões para qualquer (ou todas) as páginas do seu site com facilidade.
Vamos pular e começar!
Espiada
Aqui está uma rápida olhada nos botões de acompanhamento de mídia social criados neste tutorial.
Baixe o modelo de página da barra de botões para seguir as mídias sociais Pop Out GRATUITAMENTE
Para colocar suas mãos no Modelo de Página da Barra de Botões de Acompanhamento de Mídia Social deste tutorial, primeiro você precisará baixá-lo usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já faz parte da lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout para sua página, simplesmente extraia o arquivo zip e adicione um dos arquivos json no Divi Theme Builder usando a opção Theme Builder Portability.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará instalar e ativar o Divi Theme. Certifique-se de que possui a versão mais recente do Divi.
Você também precisará de pelo menos uma página criada com o Divi Builder para fins de teste a fim de atribuir o novo modelo a essa página para mostrar o resultado.
Depois disso, você está pronto para ir.
Criação de uma barra de botões de acompanhamento de mídia social pop-out para um modelo de página na Divi
Criação de um novo modelo
No painel do WordPress, navegue até Divi> Theme Builder. Em seguida, clique na caixa “Adicionar novo modelo” para criar um novo modelo.
Atribua o modelo à (s) página (s) em que deseja que a barra promocional seja exibida.
No novo modelo, clique na área “Adicionar Corpo Personalizado” e selecione “Construir Corpo Personalizado”.
Em seguida, selecione a opção “Build From Scratch”.
Criação da barra de botões de acompanhamento de mídia social
Criar Nova Linha
Para começar, vamos adicionar uma linha de uma coluna ao modelo.
Adicionar Módulo de Botões de Acompanhamento de Mídia Social
Na linha de uma coluna, adicione um módulo de acompanhamento de mídia social.
Adicionar redes sociais
Nas configurações de acompanhamento de mídia social, adicione todas as redes sociais que deseja exibir. Para adicionar uma nova rede, clique no ícone de adição cinza Adicionar nova rede social e selecione a rede na lista.
Você também precisará adicionar o URL do link da página de mídia social para a qual deseja redirecionar os visitantes. Para fazer isso, clique no ícone de configurações na rede de mídia social e atualize o URL do link da conta.
Adicionar Módulo de Botão
Depois de terminar as redes de módulo de acompanhamento de mídia social, estamos prontos para adicionar um módulo de botão. Este botão será sobre o qual o usuário passa o mouse para revelar a barra pop-out. Vá em frente e adicione o módulo de botão e arraste-o acima do módulo de acompanhamento de mídia social.
Conteúdo do botão
Em seguida, atualize o conteúdo do botão da seguinte forma:
- Texto do botão: Seguir
- URL do link do botão: #
Estilos e posicionamento de botões
Em seguida, atualize as configurações de design do botão da seguinte forma:
- Tamanho do texto do botão: 16 px
- Cor do texto do botão:
- Largura da borda do botão: 0 px
- Espaçamento entre letras dos botões: 1px
- Fonte do botão: Montserrat
- Peso da fonte do botão: negrito
- Ícone do botão: seta para a direita (veja a imagem)
- Margem: 100% restante
- Preenchimento: 100px inferior
Em seguida, adicione o seguinte CSS personalizado ao elemento principal:
position: absolute;
Configurações de linha
Assim que o botão estiver estilizado e pronto para usar, atualize as configurações de linha da seguinte forma:
- Cor de fundo: #ffffff
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 64 px
- Preenchimento: 24px superior, 16px inferior, 16px esquerdo
Sombra de caixa de linha
- Sombra da caixa: veja a imagem
- Força do desfoque de sombra da caixa: 0 px
- Força do desfoque de sombra da caixa: 30 px
- Cor da sombra (desktop): transparente
- Cor da sombra (pairar): rgba (0,0,0,0.2)
Posicionamento de linha
Em seguida, adicione o seguinte CSS personalizado ao elemento principal da linha:
position: fixed; top: calc(33.33vh - 55px); left: 0;
Isso posicionará a linha em uma posição fixa um terço abaixo do topo do navegador.
Efeito pop-out ao pairar com margens personalizadas
Agora adicione os seguintes valores de margem para adicionar a funcionalidade pop-out ao pairar.
- Margem (desktop): -64px à esquerda
- Margem (pairar): 0px restante
Isso cuida da barra de botões de acompanhamento da mídia social. Mas ainda precisamos terminar o modelo criando o módulo de conteúdo de postagem necessário.
Adicionando o Módulo de Postagem ao Modelo
Neste ponto, a barra de botões de acompanhamento da mídia social está pronta para funcionar. Mas como este é um modelo, precisamos nos certificar e adicionar o módulo de conteúdo de postagem para exibir o conteúdo da (s) página (s) usando este modelo.
Adicionar nova linha com módulo de conteúdo de postagem
Abaixo da linha que contém sua barra de botões de acompanhamento de mídia social, adicione uma nova linha de uma coluna.
Em seguida, adicione o Módulo de Postagem de Conteúdo à Linha.
Atualmente, o módulo de conteúdo de postagem será limitado à largura padrão da linha pai. Precisamos alterar a largura e o preenchimento da linha para que ela ocupe toda a largura do navegador, sem lacunas. Isso é importante porque o módulo de conteúdo da postagem determina a área em que você deve construir uma página usando o Divi Builder.
Atualize o seguinte:
- Largura: 100%
- Largura máxima: 100%
- Preenchimento: 0 px superior, 0 px inferior
Agora atualize as configurações da seção da seguinte forma:
- Preenchimento: 0 px superior, 0 px inferior
Isso é suficiente. Agora certifique-se de salvar o layout antes de sair do editor. Em seguida, salve as alterações para o construtor de tema também.
Resultado final
Para ver os resultados finais, visite a página que possui o modelo atribuído a ela. Esta é a aparência da barra de botões pop-out da mídia social.
Pensamentos finais
Esta barra de botões de acompanhamento de mídia social certamente ajudará a trazer essas redes sociais importantes para o primeiro plano. A funcionalidade pop-out garantirá que os ícones não sejam uma distração para os usuários. E você pode adicionar a barra a qualquer modelo de página usando o Theme Builder. Espero que esta seja uma ótima adição ao seu próximo projeto!
Estou ansioso para ouvir de você nos comentários.
Saúde!