La interfaz que muestra LearnDash es tremendamente intuitiva para los alumnos de tu academia online. En comparación con el diseño legacy que ofrecía el plugin, en su día se realizó un trabajo de UX/UI importante que mejoró y cambió por completo la experiencia de usuario por las escuelas creadas con WordPress y este plugin. Lo bueno es que no necesitas tocar absolutamente nada, salvo los colores del tema, para que tu web muestre el contenido de ese modo. Una interfaz minimalista pensada precisamente para evitar distracciones y que el estudiante entre fácilmente en el “modo focus“. La parte mala, es que no puedes añadir contenido personalizado más allá del contenido del propio curso.
¿O sí?
Herramientas necesarias
El modo focus está muy bien para centrar tu atención en el contenido del curso, pero hablemos claro: hay proyectos en los que te gustaría añadir algún contenido extra.
En el caso real en el que se basa este tutorial, se trataba de una academia en la que los alumnos hacían mucho uso de soporte. Pero solían dirigirse al canal inadecuado (que era el email) para hacer llegar sus dudas al personal que correspondía y terminaban abusando de canales directos (como Telegram, redes sociales, etc). Lo cuál dificultaba posteriormente hacer seguimiento de todas estas cuestiones y generaba bastante caos.
Así que mi propuesta fue simple: crear un botón a modo de pestaña que apareciese en todas las lecciones de LearnDash, que desplegase un popup desde el que el alumno pudiese enviar directamente su problema a soporte sin necesidad de salir de la página en la que estaba.
¿Qué herramientas necesitas para hacerlo tú también en tu academia?
- LearnDash LMS.
- Elementor y Elementor Pro.
- Code Snippets.
Paso 1: Diseña el popup con Elementor
Vete al apartado “Mensajes emergentes” que tienes dentro del menú “Plantillas” en tu web. Vamos a diseñar el popup que mostrará el formulario de contacto. Una vez lo tengas diseñado, configúralo para que se vea en cursos, lecciones y temas de LearnDash.
Si utilizas el tema Hello Elementor seguramente ya estés familiarizado con estos apartados del plugin.
Paso 2: Diseña el botón con Elementor
Dirígete al apartado “Plantillas” que crea Elementor en tu WordPress y vete a la sección “Maquetador de temas“. Haz clic sobre el botón que encontrarás en la parte superior de la pantalla “AÑADIR NUEVA PLANTILLA” y configúrala como una plantilla de tipo cabecera.
En el enlace del botón, en lugar de añadir una URL haz clic en el icono de “Etiquetas dinámicas”, desplázate por el desplegable y en Acciones elige la opción “Ventana emergente”. Ahí tendrás que seleccionar el popup que has diseñado en el Paso 1 de este tutorial.
Dale el formato que quieras al botón y configura las condiciones de visualización para que se vea en cursos, lecciones, temas y cuestionarios de LearnDash. Por último, una vez salgas de Elementor, fíjate en el shortcode de ese botón que acabas de crear (te hará falta para el paso 3).
Paso 3: Inserta este código
Ahora ha llegado el momento de mostrar en la web lo que has diseñado. Vete al plugin “Code Snippets” > Añadir nuevo. Ponle el título que quieras y pega el siguiente código en la pestaña PHP, cambiando el shortcode por el que corresponda en tu caso. Vuelve a ver el primer pantallazo del Paso 2 de este tutorial para saber dónde puedes obtener el shortcode de tu botón:
add_action(
'learndash-focus-content-footer-before',
function( $course_id, $user_id ) {
echo do_shortcode( '[elementor-template id="20168"]' );
},
10,
2
);Deja marcada la opción por defecto “Ejecutar el fragmento de código en todas partes” y pulsa sobre el botón “Guardar los cambios y activar”.
Lo que acabamos de hacer, es mostrar este botón para todas las lecciones de todos los cursos que existan en la web. Así queda:
Disfruta de la nueva interfaz en LearnDash
¡Y listo! Vacía caché (si estás utilizando un plugin para ello) y vete a ver lo bonito que está ese nuevo botón que has añadido a la interfaz de tu academia online.
A partir de aquí se te ocurrirán muchas más posibilidades: no sólo puedes añadir botones de soporte, también podrías incrustar banners o incluso ofertas. ¡O cualquier otro elemento del que tengas un shortcode!
Simplemente recuerda no abusar de elementos extra, o dispersarás la atención de tus alumnos.
¿Quieres aplicar esta u otras mejoras en el diseño de tu academia online pero no quieres hacerlo tú? Hablemos.
