Inscreva-se no meu canal:
[wps_button style=»default» url=»https://comohacerunapagina.es/ir/menu-flotante» target=»blank» background=»#8224e3″ color=»#ffffff» size=»18″ icon=»star » wide=»yes» position=»left» radius=»auto» text_shadow=»0px 0px 0px #000″ rel=»nofollow» title=»Botão padrão» id=»default-button»]COMPRE DIVI COM 10% DE DESCONTO DESCONTO[/wps_button]
Oi pessoal
No blog de temas elegantes, vi veja este tutorial e achei muito interessante.
Consiste em criar um menu flutuante na nossa página, tipo de chats como o que tenho na minha página mas sem a funcionalidade Chat, mas com 3 links para a informação que queremos.
Algo como o seguinte:
A primeira coisa que precisamos fazer é criar uma conta gratuita na página codepen.io.
E uma vez criada a conta, se formos à url do menu flutuante de programação, temos:
http://codepen.io/andytran/pen/MJKOqB
Quando vamos a esta página, encontramos toda a programação na parte superior e na parte inferior a demonstração do que vamos alcançar:
Para que nossa foto apareça no menu flutuante em vez da do autor do código, o que precisamos fazer é procurar o seguinte código no painel html:
<img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=400" />
Mudamos a url da sua foto para a nossa.
Também vamos mudar o nome e os links que vêm das séries para a nossa.
Para isso, procuramos o seguinte código:
<a href="https://andytran.me">View Profile</a>
<h2 class="at-floating-navigation__title">Andy Tran</h2>
<a class="at-floating-navigation__item" href="https://andytran.me">Settings</a>
<a class="at-floating-navigation__item" href="https://andytran.me">Help Desk</a>
<a class="at-floating-navigation__item" href="https://andytran.me">Log Out</a>
Agora, se clicarmos na caixa onde diz html e salvar (no MAC é CMD+S)
Ele salva toda a programação em sua conta salva anteriormente. Você verá que tudo correu bem porque na url agora vem o nome do seu usuário:
Agora o que temos a fazer é compactar todo esse código para poder levá-lo mais facilmente ao nosso site e para isso vamos para a seguinte url:
http://codepen.io/andytran/pen/jyEPyL
E colamos a url do nosso código onde diz "Gerador de Módulo de Código"
Copiamos o código e vamos para o nosso site feito com DIVI.
No WordPress vamos ao menu DIVI –> Opções de Tema –> Integração e na opção “Adicionar código ao seu blog” adicionamos o código que salvamos:
Se tudo deu certo, agora você verá o menu flutuante em todas as páginas e entradas do seu site feitas com DIVI:
Se não quisermos que apareça em todas as páginas, mas em uma específica, também podemos.
Para fazer isso, editamos a página onde queremos que apareça com o construtor DIVI e adicionamos um módulo de código com o código que preparamos:
E dentro do módulo de código adicionamos:
[wps_button style=»default» url=»https://comohacerunapagina.es/ir/menu-flotante» target=»blank» background=»#8224e3″ color=»#ffffff» size=»18″ icon=»star » wide=»yes» position=»left» radius=»auto» text_shadow=»0px 0px 0px #000″ rel=»nofollow» title=»Botão padrão» id=»default-button»]COMPRE DIVI COM 10% DE DESCONTO DESCONTO[/wps_button]
Espero que o tutorial seja útil para você 😉
lembranças
Oscar
Você me deixa louco como sempre, para quem não é programador isso explica o truque do mágico. Acho que você pode aproveitar muito essa "técnica" de incorporar elementos na web, não apenas esse tipo de menu.
Mas tenho uma dúvida, pois deduzo que o código completo não está inserido em nosso site, quero dizer o html, css e js, mas fazemos uma chamada para a página codepen.io para executá-lo. Se perdermos a conta deste site, cancelamos a assinatura, o servidor cai… Ele pararia de funcionar? e como isso afeta o carregamento da página?
De qualquer forma, o vídeo é muito bom e abre muitas possibilidades.
Muito obrigado Juan, fico feliz que tenha gostado, como você diz tem muitas possibilidades 😉
A única coisa que o Codepen.io faz é ver o código e a demonstração na mesma página e ajuda a compartilhar a programação, mas quando você fizer o tutorial verá que ele não inclui nenhuma referência à sua página, deixa-o pronto para uso seu próprio servidor.
Um abraço!
Oscar