Cómo agregar estilos personalizados a los widgets de WordPress

La mayoría de los widgets de la barra lateral en WordPress por lo general tienen el mismo aspecto. Estaría bien si todos sus widgets tuvieran la misma importancia, 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 la lista de correo electrónico es ciertamente más importante que un widget de archivos. ¿No sería bueno si pudieras estilizar fácilmente los widgets importantes de manera diferente? En este artículo, le mostraremos cómo agregar estilos personalizados a los widgets de WordPress.

Uso de un complemento para agregar estilos personalizados a los widgets de WordPress

Lo primero que debes hacer es instalar y activar el complemento Widget CSS Classes. Tras la activación simplemente vaya a Apariencia »Widgets y haga clic en cualquier widget en una barra lateral para expandir.

Notarás una nueva Clase CSS campo debajo de sus widgets, para que pueda definir fácilmente una clase CSS para cada widget. Por ejemplo, agregamos el suscribir clase a nuestro widget de formulario de suscripción.

Ahora puede ir a la hoja de estilo de su tema y agregar allí sus reglas de estilo. Me gusta esto:

 .suscribirse 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 manualmente estilos personalizados a sus widgets de WordPress. Por defecto, WordPress agrega clases de CSS a diferentes elementos, incluyendo widgets..

Cada widget en su barra lateral tiene una clase de widget numerada. Al igual que widget-1, widget-2, widget-3, etc. Con la herramienta Inspeccionar elemento de Google Chrome, puede encontrar la clase CSS para el widget que desea personalizar.

Como puede ver en la captura de pantalla anterior, el widget que queremos personalizar tiene widget-2 Clase añadida a ella por WordPress. Ahora ve a la hoja de estilo de tu tema y agrega tus reglas de estilo personalizadas.

 .widget-2 color de fondo: # 858585; color: #FFF;  .widget-2 .widget-title font-weight: bold;  

Eso es todo, esperamos que este artículo te haya ayudado a agregar estilos personalizados a los widgets de WordPress. Juega un poco con el CSS y experimenta con diferentes colores. Use la prueba de división A / B para descubrir 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 de barra lateral, pruebe OptinMonster porque ofrece múltiples diseños, pruebas A / B y mucho más..

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Google.+.