So fügen Sie ein schwebendes Menü in DIVI hinzu

von

Suscríbete a mi Kanal:

[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»]DIVI MIT 10 % RABATT KAUFEN RABATT[/wps_button]

Hallo Leute,

Im Elegant Themes Blog habe ich gesehen dieses Tutorial und ich fand es sehr interessant.

Es besteht darin, ein schwebendes Menü auf unserer Seite zu erstellen, eine Art Chat, wie ich ihn auf meiner Seite habe, aber ohne die Chat-Funktion, aber mit 3 Links zu den gewünschten Informationen.

Etwas wie das Folgende:

Divi Floating-Menü

Als erstes müssen wir ein kostenloses Konto auf der Seite erstellen codepen.io.

Und sobald das Konto erstellt ist, wenn wir zur URL der schwebenden Menüprogrammierung gehen, haben wir es:
http://codepen.io/andytran/pen/MJKOqB

Wenn wir auf diese Seite gehen, finden wir oben die gesamte Programmierung und unten die Demo dessen, was wir erreichen werden:

codepen.io schwebendes Menü für divi

Damit unser Foto im Floating-Menü erscheint und nicht das des Autors des Codes, müssen wir im HTML-Panel nach folgendem Code suchen:

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

Wir haben die URL Ihres Fotos in unsere geändert.

Wir werden auch seinen Namen und die Links, die aus Serien stammen, für unsere ändern.

Dazu suchen wir nach folgendem 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>

Wenn wir nun auf das Feld klicken, in dem HTML steht, und speichern (auf MAC ist es CMD+S)

Es speichert die gesamte Programmierung in Ihrem zuvor gespeicherten Konto. Sie werden sehen, dass alles gut gegangen ist, denn in der URL steht jetzt der Name Ihres Benutzers:

Codepen-Konto

Jetzt müssen wir diesen ganzen Code komprimieren, um ihn einfacher auf unsere Website bringen zu können, und dafür gehen wir zur folgenden URL:
http://codepen.io/andytran/pen/jyEPyL

Und wir fügen die URL unseres Codes dort ein, wo „Code Module Generator“ steht.
Generierter Codepen-Code

Wir kopieren den Code und gehen auf unsere mit DIVI erstellte Website.

In WordPress gehen wir zum DIVI-Menü –> Theme-Optionen –> Integration und fügen in der Option „Code zu Ihrem Blog hinzufügen“ den Code hinzu, den wir gespeichert haben:

Wenn alles geklappt hat, sehen Sie nun das schwebende Menü auf allen mit DIVI erstellten Seiten und Einträgen Ihrer Website:

So fügen Sie ein schwebendes Menü in DIVI 1 hinzu

Wenn wir möchten, dass es nicht auf allen Seiten, sondern nur auf einer bestimmten Seite erscheint, können wir das auch.

Dazu bearbeiten wir die Seite dort, wo sie erscheinen soll, mit dem DIVI-Konstruktor und fügen ein Code-Modul mit dem von uns vorbereiteten Code hinzu:

Floating-Menü des Divi-Code-Moduls

Und innerhalb des Codemoduls fügen wir hinzu:

Divi-Code-Modul

[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»]DIVI MIT 10 % RABATT KAUFEN RABATT[/wps_button]

Ich hoffe, das Tutorial ist nützlich für Sie 😉
Grüße
Oscar

2 Kommentare zu „So fügen Sie ein schwebendes Menü in DIVI hinzu“

  1. Du machst mich wie immer albern, für diejenigen von uns, die keine Programmierer sind, erklärt das den Trick des Zauberers. Ich denke, dass man aus dieser „Technik“ der Einbettung von Elementen im Web viel Nutzen ziehen kann, nicht nur aus dieser Art von Menü.

    Aber ich habe Zweifel, da ich davon ausgeht, dass der vollständige Code nicht in unsere Website eingefügt wird, ich meine HTML, CSS und JS, aber wir rufen die Seite codepen.io auf, um sie auszuführen. Wenn wir das Konto dieser Seite verlieren, melden wir uns ab, der Server fällt aus … Würde es aufhören zu funktionieren? und wie wirkt es sich auf die Seitenlast aus?

    Auf jeden Fall ist das Video sehr gut und eröffnet viele Möglichkeiten.

    • Vielen Dank Juan, ich freue mich, dass es dir gefallen hat, wie du sagst, es hat viele Möglichkeiten 😉

      Das einzige, was Codepen.io tut, ist, den Code und die Demo auf derselben Seite zu sehen, und es hilft, die Programmierung zu teilen, aber wenn Sie das Tutorial machen, werden Sie sehen, dass es keinen Verweis auf seine Seite enthält, es lässt es einsatzbereit Ihr eigener Server.

      Eine Umarmung!
      Oscar

Hinterlassen Sie einen Kommentar