Cómo agregar estilos personalizados a los widgets de WordPress

La mayor√≠a de los widgets de la barra lateral en WordPress generalmente se ven iguales. Estar√≠a bien si todos sus widgets tuvieran la misma importancia, pero la verdad es que algunos 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 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 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.

Agregar una clase CSS para agregar estilos personalizados a un widget de WordPress

Notarás un nuevo Clase CSS debajo de sus widgets, para 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 agregar sus reglas de estilo allí. Me gusta esto:

.subscribe { 
background-color: #858585;
color:#FFF;
}

Agregar estilos personalizados a los widgets de WordPress

Puede agregar cualquier CSS personalizado que desee, como agregar fondo, cambiar bordes, usar diferentes colores, etc.

Adición manual de estilos personalizados a widgets de WordPress

Si no desea utilizar un complemento, puede agregar manualmente estilos personalizados a sus widgets de WordPress. Por defecto, WordPress agrega clases CSS a diferentes elementos, incluidos los widgets.

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

Encontrar la clase de widget con la herramienta de inspección de elementos de Chrome

Como puede ver en la captura de pantalla anterior, el widget que queremos personalizar tiene la clase widget-2 agregada por WordPress. Ahora ve a la hoja de estilo de tu tema y agrega tus 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 te 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 determinar 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.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Google+.