Cómo agregar un menú de acción flotante a Divi con el módulo de código

Cómo agregar un menú de acción flotante a una publicación o página Divi con el módulo de código

Suscríbete a nuestro canal de Youtube

Cómo agregar el Codepen

Aquí se explica cómo agregar el bolígrafo anterior en una sola publicación o página de su sitio web Divi:

Primero, asegúrese de haber creado una cuenta gratuita de codepen.io e iniciar sesión. Le llevará menos de un minuto y estará en funcionamiento. Así que no te preocupes, es indoloro. Una vez que haya iniciado sesión en su propia cuenta, navegue hasta el lápiz que he creado para este tutorial, el menú de acción flotante .

Presione «comando + s» para guardar el bolígrafo en su propia cuenta. Debería ver el cambio de nombre debajo de «un bolígrafo por» en la esquina superior izquierda, a su nombre. Ahora que ha copiado el bolígrafo en su cuenta, puede editarlo.

En el panel html, comience localizando esta línea de código:

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

Editar esta línea cambiará la imagen de perfil. Cambie el texto alternativo a su nombre y cambie el enlace src a su propia imagen de Gravatar . También puede usar el enlace de la imagen de una foto que cargó en su sitio web de WordPress navegando a su biblioteca de medios, editando la foto y luego copiando el enlace de esa imagen en el espacio src indicado anteriormente.

A continuación, vamos a cambiar el nombre junto a la imagen de perfil editando esta línea de html:

01
<h2 class="at-floating-navigation__title">Andy Tran</h2>

Simplemente cambia «Andy Tran» por tu propio nombre.

A continuación, vamos a cambiar el enlace del texto «ver perfil» cambiando el enlace en esta línea de código:

01
<a href="https://andytran.me">View Profile</a>

Una vez que esté completo, podemos pasar a cambiar los enlaces para los elementos del menú Configuración, Mesa de ayuda y Cerrar sesión.

01
02
03
<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>

De hecho, también puede cambiar los elementos del menú cambiando las palabras «Configuración», «Mesa de ayuda» y «Cerrar sesión» a lo que desee.

Cuando haya realizado todas sus ediciones, presione «comando + s» nuevamente para guardar. Luego copie la URL de la página y diríjase al generador de codepen que creé para compilar este código en un solo bloque de código fácil de pegar.

Pegue la url en el campo de url allí y haga clic en el botón azul «Generar». Inmediatamente verá el bloque de código a continuación y el botón azul ahora dirá «Copiar código». Haga clic en el botón azul nuevamente para copiar el bloque de código en su portapapeles.

Ahora estamos listos para agregar el menú de acción que hemos creado a nuestra publicación o página Divi deseada. Agregue un módulo de código a la publicación o página en la que desea que aparezca su menú de acción flotante. No importa dónde se encuentra el módulo de código.

Abra el módulo de código y pegue el código que ha copiado del generador de códigos. Guarde los cambios y actualice la publicación o la página cuando haya terminado.

Entonces, ¡adelante, mira el resultado!

Cómo agregar un menú de acción flotante en todo el sitio

Si desea que su nuevo menú de acción flotante aparezca en todo su sitio en lugar de una sola página o publicación, haga clic con el botón derecho en desactivar su nuevo módulo de código y navegue en su administrador de WordPress a Divi > Opciones de tema > Integración .

Pegue el código que copió del generador de código en la sección llamada «Agregar código al <head> de su blog». Guarde sus cambios y consulte el menú de acción flotante que ahora aparece en cada página de su sitio web Divi.

Terminando

Bueno, eso es todo por este tutorial. Si tiene alguna pregunta al respecto, hágamelo saber en los comentarios a continuación. Del mismo modo, si tiene alguna solicitud de tutoriales del módulo de código o lo que es posible con el módulo de código, también puede dejarlos.