En el artículo de hoy vamos a ver Cómo crear la página de mi Cuenta con Tabby Responsive Tabs, algo muy interesante a tener en cuenta si te interesa la experiencia de usuario ya que además de ser uno de los factores de posicionamiento SEO que google tiene en cuenta este 2021 el objetivo de un cambio en el algoritmo, también llamado actualización de Google, es mejorar la calidad de los resultados para el usuario. Google utiliza más de 200 factores de posicionamiento para determinar la calidad y la relevancia de cada URL en particular.
El nuevo CORE WEB VITALS 2021 incorpora el análisis de los resultados de búsqueda o dicho de otra forma implica que el rendimiento de nuestros sitios webs no sólo se determinará de acuerdo a la calidad del contenido sino que también considerará la experiencia que tienen los usuarios al navegar por nuestras respectivas plataformas.
Sabiendo esto es importante tener en cuenta que todo lo que sea mejorar y pensar en nuestro usuario es necesario que lo hagamos, debemos facilitar la accesibilidad de tu web a personas con problemas, y que navegar por nuestro sitio sea lo más agradable posible.
Por eso , el plugin este nos va a permitir tener en una página todas las pestañas importantes de nuestra web facilitando así el acceso a nuestros usuarios.
Hay muchos plugins para esto, si usas elementor tienes mil formas de hacerlo pero es verdad que los que usamos el editor de bloques no es tan fácil encontrar el bloque pestañas es por eso que este plugin es una gran alternativa además de sencilla de usar como veremos en el video y que nos va a permitir englobar dentro de una misma página todas las pestañas necesarias como tengo yo en mi web

¿Dónde es interesante poner este tipo de plugins?
Sin duda en webs en donde haya complementos como Woocommerce, Easy Digital Downloads, Restrict content pro, es decir ese tipo de webs donde hay un área privada y el usuario puede modificar sus datos, ver el historial de descargas, enviar dudas en un formulario y todo lo que se nos ocurra, así no debe salir de una página para ir a otra a hacer todo, desde la misma englobamos todas las páginas importantes de gestión haciendo que sea más fácil para él la usabilidad y navegación.
En mi caso dentro de la página mi cuenta he puesto como veis en la imagen la pestaña de perfil en donde se puede modificar el mismo, la pestaña de modificar tarjeta, mi cuenta, descargas ya que yo tengo descargas premium de plugins y themes gratis para los suscriptores, una pestaña de soporte en donde a los suscriptores les resuelvo las dudas que tengan y una en donde van a poder pedirme cursos o tutoriales de herramientas, plugins o themes pero cada uno puede poner las pestañas que necesite y quiera.
Aquí os adjunto una captura para que veáis que este plugin es responsive y en versión móvil se ve correctamene.


En el vídeo os muestro como hacer una página como la mía 🙂
Enlaces de interés:
Como ya os he comentado en el vídeo hablo de un plugin para poder hacer visible o no la pestaña de mi cuenta en el menú y así hacer mejor la navegación por la web, es el plugin if menu del curso de crear membresía con el plugin Restrict Content Pro.
En mi canal de YouTube tenéis tutoriales de WordPress que os pueden ayudar mucho como es el de if menu
Hola Miriam,
Muchas gracias por el tutorial. Lo has explicado genial. Aplicando todo según tus indicaciones me sale bien, pero cuando abres la página en el móvil está fatal… Las pestañas se colocan verticalmente bien pero si tienes varias columnas en una pestaña se me salen de la pantalla por la derecha y se cortan…. Tu das ejemplo con el shortcode de Restrict Content Pro. La pestaña suscripción tiene varias columnas y la mitad se salen de la pantalla vista en el móvil….¿Podrías decirme porque no se adapta al móvil? ¿Es responsive? Gracias
Hola Iván , ¿has mirado si tu theme es responsive? a mi me sale bien en el mío en la versión móvil, he subido al artículo cómo se vería en móvil y me sale bien, igual es tu theme que no se adapta.
Si tu problema es que se sale el contenido por el lateral prueba a poner esto en tu editor css, es para que no se salga el código en el artículo.
pre { white-space: pre-wrap; }