La mayoría de los widgets de la barra lateral de WordPress suelen tener 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 una lista de correo electrónico es sin duda más importante que un widget de archivos comprimidos. ¿No sería estupendo que pudieras crear fácilmente widgets importantes de forma diferente? En este artículo, le mostraremos cómo añadir estilos personalizados a los widgets de WordPress.
Uso de un plugin para agregar estilos personalizados a los widgets de WordPress
Lo primero que tienes que hacer es instalar y activar el plugin Widget CSS Classes. Después de la activación, simplemente vaya a Apariencia » Widgets y haga clic en cualquier widget de la barra lateral para expandirlo.
Notará un nuevo campo Clase CSS debajo de sus widgets, para que pueda definir fácilmente una clase CSS para cada widget. Por ejemplo, hemos añadido la clase subscribe a nuestro widget de formulario de suscripción.
Ahora puede ir a la hoja de estilo de su tema y añadir sus reglas de estilo allí. Así:
.subscribe {
color de fondo: #858585;
color:#FFF;
}
>
Puedes añadir cualquier CSS personalizado que desees, como añadir fondo, cambiar bordes, usar diferentes colores, etc.
Adición manual de estilos personalizados a los widgets de WordPress
Si no quieres usar un plugin, entonces puedes añadir manualmente estilos personalizados a tus widgets de WordPress. Por defecto, WordPress añade clases CSS a diferentes elementos incluyendo widgets.
Cada widget de la barra lateral tiene una clase de widget numerada. Como widget-1, widget-2, widget-3, etc. Utilizando la herramienta Inspect Element de Google Chrome, puedes encontrar la clase CSS del widget que quieres personalizar.
Como puedes ver en la captura de pantalla de arriba, el widget que queremos personalizar tiene la clase widget-2 añadida por WordPress. Ahora ve a la hoja de estilo de tu tema y añade tus reglas de estilo personalizadas.
.widget-2 {
color de fondo: #858585;
color:#FFF;
}
.widget-2 .widget-title {
font-weight: negrita;
}
>
Eso es todo, esperamos que este artículo te haya ayudado a añadir estilos personalizados a los widgets de WordPress. Juega con el CSS y experimenta con diferentes colores. Utilice la prueba de división A/B para determinar qué estilos personalizados funcionan mejor en su sitio.
Además, si desea una forma más fácil de resaltar su widget de formulario de suscripción a la barra lateral, pruebe OptinMonster porque ofrece múltiples diseños, pruebas A/B y mucho más.
Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Google+.