Cómo usar Font Awesome para crear botones 100% personalizados en Divi

Profesor: Jefferson M.

Publicación: 5 agosto 2020
Categorías: Snippets | Tutorial Premium

Contenido Premium

Desbloquea este contenido suscribiéndote o accediendo con tu cuenta.

En este vídeo tutorial premium aprenderás a usar Font Awesome para crear botones 100% personalizados en Divi. Este será un tutorial sencillo si lo que quieres es crear un botón con iconos personalizados, sin tener que tirar de un nuevo plugin para añadir más iconos a Divi.

Recuerda que puedes ver el código usado en la sección de recursos de este tutorial, así como también recuerda que puedes descargar el .JSON usado en la misma sección.

Objetivo del profesor:

En esta ocasión les enseñaré a implementar iconos personalizados usando la librería de font awesome y crear un botón personalizado en Divi con HTML y CSS, con esto lograremos posicionar el botón en el lugar que queramos con el icono y texto particular que queramos.

Resultado:

Anteriormente ya te hemos enseñado a cambiar el número de columnas en el módulo de blog de Divi con lo que logramos un excelente nivel de personalización, también te enseñamos como crear un carrusel de testimonios con otra librería de Slick y finalmente como crear un carrusel de logos en Divi. En esta ocasión te enseñaremos a crear botones con iconos personalizados con la librería de iconos de font awesome.

Lograremos un resultado igual a este:

usar Font Awesome para crear botones 100% personalizados en Divi

Al terminar este tutorial aprenderás a hacer estos botones personalizados, para usarlos en la parte del sitio web que necesites, y sin tirar de plugins adicionales.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido premium.

Recursos, snippets y descargas

Aquí podrás descargar los recursos que usamos en el tutorial: plugins, código, snippets, layouts, .json, etc. Para ver los recursos debes acceder con tu cuenta de suscriptor.

2 Comentarios

  1. Avatar

    Hola Jefferson.

    Utilice estos código para hacer los botones y funcionan a la perfección.

    Y ahora tengo la siguiente pregunta:

    Quiero agregar un checkbox y que para efectos de RGPD el botón este habilitado solo cuando el usuario haya hecho clic en el checkbox. Ya tengo el código en JavaScript.

    Lo que tengo duda, es que según yo tengo que hacer referencia al botón asignándole una clase para poder después hacer referencia a este en el código JavaScript.

    Pero, ¿cómo puedo hacer eso?
    Gracias de antemano.

    Responder
    • Jefferson M.

      Hola mi estimado Manfred. Si te fijas, estos botones ya tienen una clase asignada a la que hacen referencia, por ejemplo class=»mac-button», lo que debes hacer en tu script es hacer referencia a esta clase que tienes asignada al botón. Me parece que con esto te tiene que funcionar, sino por favor envía a la pestaña de soporte más detalles de lo que quieres lograr para revisarlo a profundidad.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Valóranos!

¿Te han gustado nuestros tutoriales y cursos? por favor, déjanos una valoración de 5 estrellas en truspilot, nos ayudará mucho su calificación ¡Gracias!