La mayoría de los widgets de la barra lateral en WordPress suelen tener el mismo aspecto. Estaría bien si todos tus widgets tuvieran la misma importancia, pero la verdad es que algunos widgets son más importantes para el crecimiento de tu sitio que otros. Por ejemplo, un widget de suscripción a una lista de correo electrónico es ciertamente más importante que un widget de archivos. ¿No sería bueno si pudiera diseñar fácilmente 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 debe hacer es instalar y activar el Clases CSS de widget enchufar. 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 subscribe
class 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. Como esto:
.subscribe { background-color: #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. De forma predeterminada, WordPress agrega clases CSS a diferentes 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 para el widget que desea personalizar.
Como puede ver en la captura de pantalla anterior, el widget que queremos personalizar tiene widget-2
clase agregada por WordPress. Ahora vaya a la hoja de estilo de su tema y agregue sus reglas de estilo personalizadas.
.widget-2 { background-color: #858585; color:#FFF; } .widget-2 .widget-title { font-weight:bold; }
Eso es todo, esperamos que este artículo le haya ayudado a agregar estilos personalizados a los widgets de WordPress. Juega con el CSS y experimenta con diferentes colores. Utilice las pruebas de división A / B para averiguar qué estilos personalizados funcionan mejor para su sitio.
Además, si desea una forma más fácil de resaltar el widget de formulario de suscripción de la barra lateral, pruebe OptinMonster porque ofrece múltiples diseños, pruebas A / B y mucho más.