La mayoría de los widgets de la barra lateral de WordPress generalmente tienen el mismo aspecto. Sería bueno si todos sus widgets fueran igualmente importantes, pero la verdad es que algunos widgets son más importantes para el crecimiento de su sitio que otros. Por ejemplo, un widget de suscripción a una lista de correo es definitivamente más importante que un widget de archivo. ¿No sería bueno si pudiera diseñar fácilmente los widgets importantes de manera diferente? En este artículo, le mostraremos cómo agregar estilos personalizados a los widgets de WordPress.
Usar un complemento para agregar estilos personalizados a los widgets de WordPress
Contents
Lo primero que debe hacer es instalar y activar el complemento CSS Classes Widget. Tras la activación, simplemente navegue hasta Apariencia »Widgets y haga clic en cualquier widget en una barra lateral para expandir.
Notará un nuevo campo Clase CSS debajo de sus widgets, de modo que pueda definir fácilmente una clase CSS para cada widget. Por ejemplo, agregamos la clase de suscripción a nuestro widget de formulario de suscripción. Ahora puede ir a la hoja de estilo de su tema y agregarle sus reglas de estilo. Así: .subscribe {color de fondo: # 858585; color: #FFF; }
Puede agregar cualquier CSS personalizado que desee, como agregar fondo, cambiar bordes, usar diferentes colores, etc.
Agregar manualmente estilos personalizados a los widgets de WordPress
Si no desea utilizar un complemento, puede agregar estilos personalizados manualmente a sus widgets de WordPress. De forma predeterminada, WordPress agrega clases CSS a varios elementos, incluidos los widgets. Cada widget de la barra lateral tiene una clase de widget numerada. Como widget-1, widget-2, widget-3, etc. Con la herramienta Inspeccionar elemento de Google Chrome, puede encontrar la clase CSS del widget que desea personalizar.
Como puede ver en la captura de pantalla anterior, el widget que queremos personalizar tiene una clase widget-2 agregada por WordPress. Ahora vaya a la hoja de estilo de su tema y agregue sus reglas de estilo personalizadas. .widget-2 {color de fondo: # 858585; color: #FFF; } .widget-2 .widget-title {peso de fuente: negrita; } Eso es todo, esperamos que este artículo le haya ayudado a agregar estilos personalizados a los widgets de WordPress. Juega con CSS y experimenta con diferentes colores. Utilice las pruebas A / B divididas para determinar qué estilos personalizados funcionan mejor para su sitio. Además, si desea una forma más fácil de resaltar su widget de formulario de suscripción en la barra lateral, pruebe OptinMonster, ya que ofrece varios diseños, pruebas A / B y mucho más. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Google+.
Originally posted 2021-02-24 20:34:28.
