El módulo de código Divi es quizás uno de los módulos más pasados por alto y menos utilizados en Divi . Como desarrollador frontend aquí en Elegant Themes, quería aprovechar la oportunidad de este año para cambiar eso. Mi objetivo es usar esta publicación y otras a lo largo del año para inspirar un mayor uso del módulo de código proporcionando recursos y tutoriales para su uso. ¡Empezando hoy!
En la publicación de hoy, le mostraré cómo usar el módulo de código Divi y un generador de código codepen que creé para agregar un botón de acción flotante a su sitio web.
¡Vamos a sumergirnos!
En esta publicación aprovecharé un generador de código abierto que creé para la comunidad Divi . Lo que hace este generador de código es compilar el código de un codepen dado y exportar un solo bloque de código que se ejecutará correctamente dentro del módulo de código Divi.
La mecánica de usarlo no podría ser más sencilla. Todo lo que tiene que hacer es copiar la URL de codepen que ha creado (o que alguien más haya creado para usar dentro de Divi) y pegarla en el espacio en el campo en la parte superior del generador. Luego haga clic en el botón azul «Generar».
Esto llenará el cuadro de texto a continuación con un bloque de código para usar dentro del módulo de código Divi. También notará que el botón azul ahora dice «Copiar código». Vuelva a hacer clic para copiar el código compilado en su portapapeles para pegarlo fácilmente en el módulo de código Divi deseado.
Suscríbete a nuestro canal de Youtube
El codepen anterior es un ejemplo de un botón de acción flotante. Cuando pasa el cursor sobre él, muestra texto y un enlace. En este caso, es un botón «acerca de» con mi imagen y un enlace a mi sitio web. Sin embargo, puede editarlo para mostrar su imagen, texto y enlace de su elección.
Así es cómo:
Primero, si aún no tiene una, cree una cuenta gratuita de codepen. A continuación, navegue hasta el codepen «Acerca de FAB» que he creado.
En la pestaña html, busque la siguiente línea de código:
|
01
|
<img alt="Andy Tran" src="https://en.gravatar.com/userimage/64217327/096c4ecedf5cf0259c707b7f5255246d.jpg?size=200" /> |
Reemplace el enlace src con un enlace a la imagen de su elección. Puede usar su enlace de gravatar como lo tengo yo o puede cargar una imagen en su instalación de WordPress y usar el enlace de la biblioteca de medios. También debe cambiar el texto alternativo para reflejar la imagen que ha elegido.
A continuación, busque esta línea de html:
|
01
|
<h2>Andy Tran</h2> |
Pon el texto que quieras aquí. Si simplemente ha cambiado la imagen para que sea una imagen de usted mismo, entonces ponga su nombre aquí.
Y finalmente, ubique esta línea de html:
|
01
|
<a href="https://andytran.me/">https://andytran.me</a> |
Cambie el enlace a su enlace deseado y texto descriptivo.
Una vez que haya realizado todos los cambios, presione comando + s para guardar. Esto creará automáticamente un duplicado de mi codepen original en su cuenta, pero con sus cambios.
Ahora puede copiar la URL de su nuevo codepen editado en el generador que creé aquí .
Después de presionar el botón azul «Generar» y copiar el código, diríjase a su sitio web Divi a la página en la que desea que se muestre su nuevo botón de acción flotante.
En la primera sección estándar de esa página, agregue un módulo de código.
En ese módulo de código, pegue el código copiado y haga clic en guardar.
Actualice su página y vea los resultados.
Si desea agregar el botón de acción flotante que ha creado a todas sus páginas Divi al mismo tiempo, es bastante simple. En lugar de pegar el código generado en el módulo de código, vaya a Divi > Opciones de tema > Integraciones > Agregar código al <head> de su blog y pegue el código allí. Guarde los cambios y revise en la interfaz. ¡El botón de acción flotante ahora debería mostrarse en la esquina inferior derecha de todas sus páginas!
En este punto, puedo escuchar a algunos de ustedes preguntando: «Si esto es posible, ¿por qué agregarlo a una sola página a través de un módulo de código?»
Al usar el módulo de código de la manera que mostré anteriormente en lugar de la opción de todo el sitio, puede colocar botones personalizados en páginas específicas, con la esperanza de obtener tasas de clics más altas en función de los mensajes personalizados para esa publicación o página.
¡Más Codepens por venir! (Y una nota sobre el uso de otros Codepens)
He creado algunos bolígrafos más como este específicamente para usar con Divi . Planeo compartirlos a través de publicaciones de blog según lo permita mi cronograma de desarrollo. Si está interesado en crear un bolígrafo que funcione con Divi y se pueda agregar fácilmente al módulo de código usando el generador, simplemente cree sus bolígrafos teniendo en cuenta los posibles conflictos de CSS que podrían causarse con los estilos de Divi. Por ejemplo, en el bolígrafo de arriba utilicé el prefijo `at-` para evitar cualquier conflicto que pudiera surgir.
Espero que hayan disfrutado este tutorial, ¡sé que espero compartir más tutoriales de módulos de código este año! Si tiene solicitudes, déjelas en los comentarios a continuación.
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!
Imagen destacada por mommayap / shutterstock.com