Descubre cómo dar estilo de botón al bloque de Acceder/Salir (Login/out) en un tema de bloques de WordPress con el plugin Osom Modal Login y un poco de CSS desde el editor de estilos.
El plugin Osom Modal Login te permite mostrar una ventana emergente de inicio de sesión cuando tú o tus usuarios hacen clic en el bloque para acceder y salir de la sesión.
En este tutorial aprendiste cómo insertar un bloque de Acceder/Salir en el menú y cómo instalar el plugin Osom Modal Login para obtener este efecto emergente.
Pero sería aún mejor si ese elemento de inicio de sesión pareciera una llamada a la acción (CTA), ¿verdad?
Esto es algo que ya te mostré cómo hacerlo para un tema clásico, pero ahora aprenderás cómo obtener ese estilo de botón utilizando Osom Modal Login y un poco de CSS añadido directamente al bloque de Acceder/Salir para temas de bloques.
Pasos para darle estilos de botón al bloque de Acceder/Salir en un tema de bloques de WordPress
1. Agrega el bloque de Login/out al bloque de navegación del encabezado e instala Osom Modal Login
Para hacer esto, sigue los pasos descritos en el tutorial centrado en cómo instalar Osom Modal Login en temas de bloques.
¿Listo? ¡Genial! Ahora pasa al siguiente paso.
2. Agrega estilos de botón al bloque de inicio/cierre de sesión
Sigue estas instrucciones o echa un vistazo al vídeo paso a paso:
- Desde el escritorio de WordPress, sigue la ruta Apariencia > Editor > Estilos y haz clic en el icono de editar estilos.
- Ahora haz clic en la sección de Bloques dentro de la configuración de Estilos (columna al lado derecho de la pantalla).
- Busca el bloque de Acceder/Salir y haz clic en él. Ve a la sección de Configuración Avanzada y pega los siguientes estilos allí (si tu tema ya tiene algo de CSS, pega este fragmento después del código ya existente).
- Guarda los cambios.
/* Estilos botón Osom Modal Login*/
&.osmlogin a {
display: inline-block;
color: #000;
background-color: #F8A830;
padding: 0.5rem 1rem;
border-radius: 5px;
text-decoration: none;
}
&.osmlogin a:hover {
color: #000;
background-color: #fff;
border: 1px solid #000;
text-decoration: none;
}
&.osmlogout a {
text-decoration: underline;
}
A partir de este momento verás este estilo de botón en el elemento de Login/out que insertaste en el bloque de navegación durante el paso 1.
Por supuesto, puedes modificar estos estilos a tu gusto (colores, tamaño, etc.). De hecho, obtendrás este estilo de botón en cualquier lugar de tu sitio web donde hayas insertado un elemento de Acceder/Salir, como puedes ver en los últimos segundos del vídeo, siempre y cuando dejes sin marcar la opción «Mostrar el acceso como un formulario»:
3. Corre la voz
¿Te gusta el resultado? Entonces, recomienda el plugin Osom Modal Login cada vez que alguien necesite agregar un estilo de botón a su bloque de Login/out en un tema de bloques y, de paso, conseguir que muestre una ventana emergente o pop-up con el formulario de inicio de sesión de WordPress.
Tus colegas te lo agradecerán y nosotros también. 🙂
Por cierto, ¿te gusta el tema de bloques que he usado en los ejemplos de este tutorial? Estará disponible muy pronto en el repositorio de WordPress. 😉