La función más reciente para la edición completa del sitio en WordPress ofrece la creación de plantillas de página personalizadas para su sitio. Sin embargo, usar la forma tradicional de crear contenido en el editor y agregar widgets y menús por separado es más conveniente para publicar publicaciones. En general, su tema proporciona estilos para todos los elementos de diseño, incluidos los widgets. Sin embargo, puede agregar fácilmente estilos personalizados a los widgets para hacerlos atractivos para sus lectores.
Estilos de widgets en WordPress
Por lo que hemos comprobado, muchos temas de WordPress no ofrecen opciones para personalizar cada widget en la barra lateral. Especialmente temas ligeros como Kadence, GeneratePress, Astra, etc. ofrecer gadgets de barra lateral simples con un enfoque en el uso mínimo. Afortunadamente, es fácil personalizar sus widgets con estilos adicionales usando el editor de bloques de widgets de Gutenberg.Si todavía usa la antigua interfaz Classic Widgets, entonces necesita hacer un análisis antes de aplicar estilos personalizados.
Ejemplo del widget de publicaciones recientes
Tomemos un ejemplo para explicar el concepto con el tema Kadence. Vaya a Apariencia> Widgets y agregue el bloque Publicaciones recientes en el área de la barra lateral. Dado que el último widget de publicación viene sin título, debe agregar un bloque de título y un nombre para el widget como "Publicaciones recientes". A continuación se muestra cómo se verá el último widget de bloqueo de publicaciones con la barra de título de Kadence.
Como puede ver, el widget aparece como una lista desordenada sin color de fondo ni bordes. Aunque Kadence ofrece opciones para cambiar los colores y la tipografía de toda la barra lateral, no es posible agregar estilos a widgets individuales desde la configuración del tema.
Ahora explicaremos cómo agregar sus propios estilos CSS personalizados al último widget de publicación.
Agregue estilos personalizados usando la configuración de bloque
Algunos de los bloques de texto, como las últimas publicaciones de Gutenberg, vienen con opciones de color predeterminadas.
- Primero seleccione el bloque para el título y las publicaciones recientes, puede hacerlo manteniendo presionada la tecla Mayús y seleccionando los bloques.
- Verá una barra de herramientas emergente y haga clic en "Cambiar tipo...". Icono que aparece como dos cuadrados en la barra de herramientas.
- Seleccione la opción Agrupación para agrupar los bloques de título y las publicaciones más recientes como el widget de bloque único.
- Ahora haga clic en el ícono de ajustes que aparece más cerca de la esquina superior derecha para ver la configuración del bloque.
- Verá muchas opciones para personalizar el diseño de su bloque.
- Haga clic en la opción Fondo en la sección Color y aplique un color de fondo a su widget. Puede aplicar un color sólido o degradado como desee.
- Si es necesario, cambie el tamaño de la fuente y agregue adiciones a su widget. Es posible aplicar complementos separados para los cuatro países haciendo clic en el icono "Desconectar".
- Haga clic en el botón "Actualizar" para publicar su widget y ver una de las publicaciones del blog para ver el widget estilizado en acción.
Agregue una clase CSS personalizada a Widget Blocks
Aunque el método anterior es muy fácil, no todos los bloques ofrecen una opción de color de fondo. Además, es posible que desee agregar estilos de borde y radio que no son posibles con las opciones limitadas disponibles. Puede manejar esta situación agregando una clase CSS personalizada a sus bloques.
- Puede hacer esto para un solo bloque o agrupar los bloques que necesita para aplicar estilos personalizados.
- En la Configuración del bloque de la barra lateral, haga clic en la sección Avanzado.
- Agregue el nombre de su clase de CSS en el cuadro de texto "Clase (s) de CSS adicional". Por ejemplo, agregaremos el nombre de la clase como las últimas publicaciones en nuestro caso.
- Haga clic en el botón "Actualizar" para publicar los cambios que ha realizado en el área de gadgets.
- Ahora puede agregar cualquier estilo CSS personalizado a la clase de publicaciones más recientes para embellecer su widget.
- Agreguemos los siguientes estilos CSS para agregar color de fondo, relleno, borde y radio del borde al último widget de publicación.
.latestposts {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}- Debe agregar este código en la sección "Apariencia> Personalización> CSS avanzado", como se muestra a continuación. Asegúrese de publicar el sitio después de agregar CSS personalizado.
Ahora navegue por la página de su sitio y verá el gadget para las últimas publicaciones en la barra lateral y aparecerán todos sus estilos personalizados. Puede agregar cualquier estilo personalizado usando este método y asegúrese de usar diferentes colores para que coincida con el diseño de su sitio.
Nota: Asegúrese de seleccionar la opción Grupo para agrupar bloques, no la opción Grupo de widgets. Aunque puede agregar una clase CSS personalizada al grupo de widgets, no parece funcionar como lo probamos. Además, algunos bloques de imágenes ofrecen una configuración de Estilos para aplicar una esquina redondeada o cuadrada sin agregar clases CSS adicionales.
Añade estilos a los widgets en el editor clásico
Desafortunadamente, no tiene ninguna configuración para agregar estilos personalizados si usa la pantalla del Editor de widgets clásicos. Debe analizar el código fuente para encontrar CSS y agregar estilos a la herramienta de personalización.
- Vaya a la sección "Apariencia> Widgets", agregue el gadget "Publicaciones recientes". Proporcione el título como "Publicaciones recientes" y haga clic en el botón "Guardar". Aquí lo explicaremos con el gadget "Últimas publicaciones", que está disponible con la pantalla del editor de widgets clásicos.
- La apariencia del sitio publicado se verá exactamente como el uso de bloques de Gutenberg.
- Haga clic derecho en el título del widget y seleccione la opción "Verificar" (esto es con Google Chrome y la opción puede aparecer como "Verificar elemento" en algunos navegadores).
- Esto abrirá Developer Console en el navegador, mostrando las clases de CSS asociadas con el título del widget seleccionado. Dado que necesitamos personalizar todo el widget, que incluye el título y el contenido de la lista, mantenga el cursor del mouse sobre los elementos en la consola y busque la clase CSS correcta para el widget. En este ejemplo, puede ver que hay un
con un identificador como "publicaciones-recientes-2" y una clase como "widget widget_recent_entries".
- El widget de clase se usa para todos los widgets de la barra lateral, por lo que puede usar la clase de identificación "recent-posts-2" o "widget_recent_entries" para agregar estilos personalizados.
- Usemos los mismos estilos CSS que usamos en el ejemplo anterior. Así que agregue el código en la sección "Apariencia> Personalización> CSS avanzado". Asegúrese de usar # cuando use un identificador y un punto cuando use una clase. Pero agregue solo un código, no ambos, porque la identificación y la clase están adjuntas a la misma cosa.
#recent-posts-2 {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}
.widget_recent_entries {
background: rgb(20 224 20);
padding: 25px;
border: 3px solid rgb(211 211 211);
border-radius: 8px;
}
- Se verá a continuación en la herramienta de personalización con la clase CSS .widget_recent_entries.
- La publicación publicada mostrará el gadget para las últimas publicaciones de estilo personalizado, como se muestra a continuación, y podrá ver los estilos personalizados que ha agregado a Developer Console.
Recuerde que la clase de CSS puede ser diferente en su caso, y necesita encontrar la ID o clase de CSS correcta. En caso de que reorganice la fila de widgets en la barra lateral, asegúrese de verificar la clase CSS nuevamente y cámbiela a un estilo personalizado si es necesario.
Use complementos para agregar estilos de widget personalizados
La última opción es usar complementos para diseñar en sus widgets. Si eres un editor de widgets clásico, pruébalo Complemento de opciones de gadget. Esto agregará opciones personalizadas a cada widget, como se muestra en la foto a continuación. Haga clic en el ícono de ajustes y agregue su clase o ID de CSS personalizado. Luego puede agregar sus estilos a la sección de personalización como se explicó anteriormente.
Dado que el mismo proceso funciona de manera predeterminada con Gutenberg Block Editor, no necesita un complemento adicional. De hecho, el complemento Opciones de widgets solo funcionará cuando desactive el editor de bloques de widgets de Gutenberg desde la página de configuración del complemento.
Ultimas palabras
El editor de bloques de gadgets de Gutenberg es la mejor opción para agregar estilos personalizados a los gadgets en el sitio de WordPress. Puede usar la configuración de bloque predeterminada o agregar clases de CSS personalizadas a cada bloque de widgets según sea necesario. La única diferencia con el editor clásico es que debe encontrar manualmente la clase CSS para el gadget al que desea agregar estilos personalizados. En ambos editores, tus estilos CSS deben estar incluidos en la sección de personalización, como se explicó anteriormente. Cuando desee agregar estilos adicionales, simplemente vaya a la sección "CSS adicional" y agregue su código a los estilos existentes. Alternativamente, puede usar complementos para agregar estilos personalizados a sus widgets.
Deja una respuesta