How to add a floating menu in DIVI

by

Subscribe to my channel:

[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=»Default Button» id=»default-button»]BUY DIVI WITH 10% OFF DISCOUNT[/wps_button]

Hello guys,

In the Elegant themes blog, I have seen this tutorial and I found it very interesting.

It consists of creating a floating menu on our page, type of chats like the one I have on my page but without the Chat functionality, but with 3 links to the information we want.

Something like the following:

divi floating menu

The first thing we have to do is create a free account on the page codepen.io.

And once the account is created, if we go to the url of the floating menu programming, we have it:
http://codepen.io/andytran/pen/MJKOqB

When we go to this page we find all the programming at the top and at the bottom the demo of what we are going to achieve:

codepen.io floating menu for divi

So that our photo appears in the floating menu instead of that of the author of the code, what we have to do is look for the following code in the html panel:

<img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=400" />

We changed the url of your photo to ours.

We are also going to change its name and the links that come from series for ours.

To do this we look for the following code:

<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>

Now, if we click on the box where it says html and save (on MAC it's CMD+S)

It saves all the programming in your previously saved account. You will see that everything has gone well because in the url now comes the name of your user:

codepen account

Now what we have to do is compress all this code to be able to take it more easily to our website and for that we go to the following url:
http://codepen.io/andytran/pen/jyEPyL

And we paste the url of our code where it says "Code Module Generator"
generated codepen code

We copy the code and go to our website made with DIVI.

In WordPress we go to the DIVI menu –> Theme Options –> Integration and in the “Add code to your blog” option we add the code that we had saved:

If everything has gone well, now you will see the floating menu on all the pages and entries of your website made with DIVI:

How to add a floating menu in DIVI 1

If we do not want it to appear on all pages but on a specific one, we can also.

To do this, we edit the page where we want it to appear with the DIVI constructor and add a code module with the code we have prepared:

divi code module floating menu

And inside the code module we add:

divi code module

[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=»Default Button» id=»default-button»]BUY DIVI WITH 10% OFF DISCOUNT[/wps_button]

I hope the tutorial is useful to you 😉
regards
Oscar

2 comments on “How to add a floating menu in DIVI”

  1. You make me goofy as always, for those of us who are not programmers this is explaining the magician's trick. I think you can get a lot of use out of this "technique" of embedding elements on the web, not just this type of menu.

    But I have a doubt, as I deduce the complete code is not inserted in our website, I mean the html, css and js, but we make a call to the codepen.io page to execute it. If we lose the account of this site, we unsubscribe, the server goes down… Would it stop working? and how does it affect the page load?

    In any case, the video is very good and opens up many possibilities.

    • Thank you very much Juan, I'm glad you liked it, as you say it has many possibilities 😉

      The only thing Codepen.io does is see the code and demo on the same page and it helps to share programming but when you do the tutorial you will see that it does not include any reference to its page, it leaves it ready to use on your own server.

      A hug!
      Oscar

Leave a comment