Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
25 Millones+
Sitios web que usan nuestros plugins
16+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo dar estilo a categorías individuales de forma diferente en WordPress

¿Alguna vez has querido hacer que tus categorías de WordPress destaquen? Tal vez quieras que tu sección de ‘Noticias’ se vea diferente de tus categorías de ‘Tutoriales’ o ‘Reseñas’ 🎨

Para ser honestos, estilizar las categorías de manera diferente no es un problema apremiante para la mayoría de los blogs. Ni siquiera lo hacemos nosotros en WPBeginner.

Pero entendemos que cada blog tiene necesidades únicas y lo importante que es atraer a tus lectores. Y para algunos sitios, tener estilos y características distintas para cada página de categoría realmente puede ayudar a los lectores a encontrar contenido más fácilmente.

La buena noticia es que estilizar las páginas de categoría individualmente es bastante fácil. Hemos ideado varias formas de hacerlo sin código: con el editor de sitio completo, un constructor de páginas y un editor visual de CSS.

Cómo dar estilo a categorías individuales de forma diferente en WordPress

¿Es tan importante estilizar tus páginas de categoría de WordPress de manera diferente? 🧐

Si bien no es necesario para todos los sitios de WordPress, hay algunas situaciones en las que las categorías personalizadas realmente pueden mejorar la experiencia de tus lectores.

Si los temas de tus publicaciones de WordPress varían mucho, es posible que desees estilizar las categorías individuales de forma única.

Por ejemplo, si tu blog de WordPress cubre tanto noticias como tutoriales, entonces podrías estilizar estas categorías de manera diferente. Esto ayuda a los lectores a saber qué tipo de contenido están viendo de inmediato.

O, toma un sitio de reseñas. Podrías estilizar una sola categoría para reseñas de productos de manera diferente a tu categoría de comparación. Esto facilita que los visitantes encuentren lo que buscan en tu sitio de WordPress.

Algunos sitios también podrían querer dar estilo a ciertas categorías para que destaquen más y se enfatice su importancia. En un sitio de noticias, podrías querer darle a tu categoría de 'Últimas Noticias' un estilo que llame más la atención en comparación con tus categorías de noticias regulares en WordPress.

Recuerda, la razón principal para dar estilo a las categorías en WordPress de manera diferente es hacer que tu sitio sea más fácil de usar. Si crees que ayudaría a tus lectores a encontrar lo que buscan más rápido, entonces implementar este consejo de diseño de WordPress podría ser una buena idea.

Con esto en mente, veamos 3 formas de dar estilo a categorías individuales en WordPress. Puedes usar los enlaces rápidos a continuación para saltar a tu método preferido:

Método 1: Usar un constructor de páginas para dar estilo a las páginas de categorías (Temas personalizados)

Si estás dispuesto a cambiar de tema o crear un tema personalizado de WordPress desde cero, entonces usar un constructor de páginas puede ser una excelente manera de dar estilo a las categorías en WordPress.

Este método es ideal para aquellos que desean un mayor control sobre el diseño de su sitio y se sienten cómodos usando herramientas de terceros.

Después de probar varias opciones, hemos descubierto que Thrive Architect es uno de los mejores constructores de páginas para estilizar categorías individuales.

Ofrece una interfaz intuitiva de arrastrar y soltar, lo que te permite crear categorías personalizadas y darles un estilo único sin necesidad de conocimientos de codificación. Puedes obtener más información sobre el plugin en nuestra reseña de Thrive Architect.

Sin embargo, es importante tener en cuenta que este enfoque no es adecuado para todos.

Si estás contento con tu tema actual de WordPress y no quieres cambiarlo, podrías considerar el Método 2 con el editor de sitio completo o el Método 3 con el editor visual de CSS (que cubriremos más adelante).

Pero si buscas cambiar tu tema, te recomendamos leer nuestra guía sobre cómo cambiar temas de WordPress correctamente.

Otra cosa a tener en cuenta es que Thrive Architect no tiene versión gratuita. Pero puedes usar nuestro código de cupón de Thrive Themes para obtener hasta un 50% de descuento en tu primera compra.

Paso 1: Instalar Thrive Architect

Empecemos configurando Thrive Architect. Después de comprar un plan, puedes iniciar sesión en el sitio web de Thrive Themes.

Allí encontrarás el plugin Thrive Product Manager. Simplemente descarga el archivo e instálalo en tu administrador de WordPress. Si no estás seguro de cómo hacerlo, consulta nuestra guía sobre cómo instalar plugins de WordPress para principiantes.

Instalar Thrive Product Manager

Una vez que hayas activado el plugin, abre el elemento de menú Product Manager en tu panel de WordPress.

Haz clic en 'Iniciar sesión en mi cuenta' para conectar tu sitio de WordPress a tu cuenta de Thrive Themes.

Inicia sesión en tu cuenta de Thrive Themes

Ahora deberías ver una lista de los productos de Thrive Themes que puedes usar.

Busca 'Thrive Architect' y marca la casilla junto a 'Instalar Producto'.

Instalación de Thrive Architect

Desplázate hacia abajo hasta que veas ‘Thrive Theme Builder’ y selecciona la opción ‘Install Theme’.

Luego, haz clic en ‘Install selected products’. Necesitamos hacer esto porque Thrive Architect funciona junto con Thrive Theme Builder.

Instalación de Thrive Theme Builder

La siguiente página mostrará el Administrador de Productos de Thrive configurando Thrive Architect y Thrive Theme Builder.

Cuando termine, haz clic en el botón ‘Ir al Panel de Theme Builder’.

Activación de Thrive Architect y Thrive Theme Builder

Ahora es el momento de elegir un diseño inicial para tu sitio de la colección de temas de Thrive.

Si no estás seguro de cuál elegir, simplemente usa el botón ‘Vista previa’ para ver cómo se ve cada tema. Cuando encuentres uno que te guste, haz clic en ‘Elegir’.

Elección de un tema de Thrive Theme Builder

A continuación, iniciarás el Asistente de Theme Builder. Este asistente te ayudará a agregar tu logo, elegir los colores de tu marca y configurar diferentes partes de tu tema.

Asegúrate de completar el asistente de configuración antes de pasar al siguiente paso.

El asistente de configuración de Thrive Theme Builder

Paso 2: Crear una Plantilla de Archivo de Categoría

Con tu tema configurado, cambiemos a la pestaña ‘Plantillas’. Aquí es donde verás las plantillas predeterminadas que usa tu tema para diseñar tus páginas web. En este caso, la plantilla utilizada para los archivos de categoría se llama ‘Todos los Archivos’.

Dado que queremos estilizar categorías de WordPress individuales, primero tenemos que crear una nueva plantilla de archivo de categoría. Para hacer esto, haz clic en ‘+ Agregar Nuevo’.

Agregar una nueva plantilla en Thrive Architect

Aparecerá una nueva ventana emergente. Primero, ingresa el nombre de tu nueva plantilla de categoría. Puedes usar algo simple e incluir el nombre de la categoría allí.

Debajo de eso, selecciona ‘Lista’ porque queremos crear una página que liste todas las publicaciones de una categoría específica.

En Tipo de lista, selecciona ‘Archivos’ y elige ‘Categorías’ en el ‘Tipo de archivo’.

En el campo Definido para, elige el nombre de la categoría para la que estás creando la plantilla. A modo de ejemplo, elegimos ‘Blogging’.

Al final, puedes elegir ‘Empezar desde cero’ o ‘Elegir plantilla’.

Crear una nueva plantilla de categoría en Thrive Architect

Iremos con la segunda opción porque muchas de las plantillas de Thrive Themes listas para usar ya se ven bien diseñadas.

En la siguiente ventana emergente, puedes elegir una de las plantillas disponibles. A modo de ilustración, elegiremos ‘Diseño de cuadrícula – Publicación destacada’.

Una vez que hayas hecho tu elección, haz clic en el botón ‘Crear plantilla’.

Elegir un diseño de plantilla en Thrive Architect

Ahora deberías ver tu nueva plantilla añadida a la lista de plantillas.

Pasa el cursor sobre él y haz clic en ‘Editar’ para empezar a personalizarlo.

Editar una plantilla de categoría en Thrive Architect

Paso 3: Personaliza tu página de plantilla de categoría

Thrive Architect ofrece muchas maneras de personalizar tu página.

Funciona de manera similar al editor de bloques, ya que puedes arrastrar y soltar elementos en tu página, seleccionar uno para personalizar y listo. La diferencia es que hay muchas más opciones de personalización para experimentar.

El constructor de páginas de Thrive Architect

Veamos un ejemplo. En nuestra plantilla de archivo de categoría, hay una gran publicación destacada en la parte superior, con el resto de las publicaciones de la misma categoría debajo. Por defecto, la publicación destacada es la publicación más reciente publicada en esa categoría.

Si deseas cambiar el diseño de este elemento, haz clic en el elemento ‘Featured List 01’. Luego, haz clic en el botón del icono externo en la parte superior de la barra lateral izquierda.

Cambiar el diseño de las publicaciones destacadas en Thrive Architect

Aparecerá una ventana emergente pidiéndote que elijas un diseño diferente para la publicación destacada.

Hay varios para elegir, y siempre puedes cambiarlo de nuevo si no estás satisfecho con tu elección actual. Simplemente haz clic en el diseño deseado y Thrive Architect lo implementará automáticamente en tu plantilla de página.

Elegir un diseño de publicación destacada en Thrive Architect

También puedes hacer lo mismo con la lista de publicaciones de abajo.

Simplemente selecciona el elemento ‘Blog List’. Después de eso, haz clic en el icono externo en la parte superior de la barra lateral izquierda y encontrarás otras plantillas para mostrar tu lista de publicaciones como antes.

Elegir un diseño de lista de categorías en Thrive Architect

Si deseas cambiar aún más el diseño de la lista de categorías, desplázate hacia abajo en la barra lateral.

Allí encontrarás configuraciones para cambiar el tipo de visualización (como convertirlo en un carrusel), deshabilitar la publicación destacada, cambiar el tipo de paginación (como de numérica a ‘Cargar más’), aumentar/disminuir el número de publicaciones mostradas y mucho más.

Configurar el bloque de lista de blog en Thrive Architect

También puedes agregar otros elementos, como un encabezado grande para decirle a los visitantes en qué página de categoría se encuentran y una descripción junto con él.

Para hacer esto, puedes hacer clic en el botón ‘+’ en el lado derecho del constructor. Luego, selecciona el elemento ‘Texto’ y arrástralo donde mejor se adapte a la página.

Agregar un bloque de texto en Thrive Architect

En el elemento de texto, haz clic en el ícono de texto dinámico en el extremo derecho de la barra de herramientas de texto. Una vez hecho esto, selecciona ‘Archivo’ en el campo de Texto dinámico y luego elige ‘Nombre del archivo’ en el campo debajo de él.

Ahora, haz clic en ‘Insertar’. Thrive Architect agregará el nombre de tu categoría. Dado que esta función agrega contenido dinámico, el nombre de la categoría se ajustará automáticamente si alguna vez lo cambias en el futuro.

Desde aquí, puedes cambiar el estilo, formato, alineación y más del texto.

Agregar texto dinámico en Thrive Architect

Para agregar la descripción de la categoría, simplemente haz clic en el botón ‘+’ nuevamente.

Después de eso, selecciona el elemento ‘Descripción del término de taxonomía’.

Agregar una descripción de término de taxonomía en Thrive Architect

Si has agregado una descripción a tu categoría en el administrador de WordPress » Entradas » Categorías, entonces la descripción debería aparecer aquí automáticamente.

De lo contrario, podrías volver a esa página y actualizarla más tarde. Puedes seguir nuestro tutorial sobre cómo mostrar descripciones de categorías en WordPress para más información.

Ejemplo de bloque de descripción de término de taxonomía en Thrive Architect

Algo genial de estilizar tus categorías de manera diferente en WordPress es que puedes agregar varios elementos que están específicamente diseñados para cada categoría.

Por ejemplo, si tienes un lead magnet o un formulario de suscripción que solo es adecuado para un tema en particular, entonces agregarlo a esta página de categoría es una excelente manera de dirigirte a lectores interesados.

Afortunadamente, Thrive Architect tiene bloques específicamente para ese propósito.

Por ejemplo, podrías hacer clic en el botón '+' y agregar el elemento 'Llamada a la acción' en cualquier lugar de tu página. Es una táctica excelente para dividir una larga lista de publicaciones en una página de categoría.

Agregar un elemento de llamada a la acción en Thrive Architect

Desde aquí, podrías elegir una plantilla de llamada a la acción.

Si no te gusta ninguno de los diseños existentes, podrías elegir el que más te guste y cambiar el estilo más tarde.

Elegir un elemento de llamada a la acción en Thrive Architect

Ahora, puedes cambiar el texto de los elementos de llamada a la acción.

Para agregar la URL de destino del botón de llamada a la acción, simplemente haz clic en el botón. Luego, inserta la URL y elige si quieres que se abra en una nueva pestaña y no siga el enlace (nofollow).

Agregar una URL de destino al elemento de llamada a la acción en Thrive Architect

Después de eso, siéntete libre de cambiar aún más el elemento de llamada a la acción modificando su tipografía, agregando un color de fondo, insertando animaciones, y así sucesivamente.

Una vez que estés satisfecho con el aspecto de tu página de categoría, haz clic en ‘Guardar trabajo’.

Guardar tu trabajo en Thrive Architect

Con tu página de categoría terminada, ahora puedes previsualizar tu sitio web en móvil, escritorio o tableta para asegurarte de que todo se vea bien.

Luego, puedes repetir los mismos pasos que antes para crear páginas de categoría individuales con sus propios estilos. O, simplemente estiliza tus categorías principales y deja que el resto use la plantilla de archivo de categoría predeterminada de Thrive Themes.

Así es como se ve la nuestra en nuestro sitio de demostración:

Ejemplo de página de categoría de blog en Thrive Architect

Método 2: Usar el Editor de Sitio Completo para dar estilo a las páginas de categorías (Temas de bloques)

Este segundo método es para usuarios de temas de bloques. El editor de sitio completo proporciona una forma fácil de crear una plantilla personalizada de WordPress para páginas de archivo de categoría y estilizar categorías individuales de manera diferente.

Lo bueno de este método es que no necesita un plugin. Dicho esto, asegúrate de estar satisfecho con las opciones de personalización que ofrecen tu tema de WordPress y el editor de sitio completo, ya que eso es todo con lo que trabajarás.

Primero, abramos el editor de sitio completo yendo a Apariencia » Editor en tu administrador de WordPress.

Seleccionar el Editor de Sitio Completo desde el panel de administración de WordPress

Ahora verás la configuración principal para personalizar tu tema de bloques.

Para crear una plantilla de categoría personalizada, haz clic en ‘Plantillas’.

Elegir el menú Plantillas en FSE

Ahora, verá varias plantillas predeterminadas que su tema ofrece. Esto variará según el tema de WordPress, pero típicamente, un tema incluirá una plantilla utilizada para todas sus páginas de archivo de categorías. El desarrollador del tema especificaría cuál es en la descripción.

En nuestro caso, la plantilla predeterminada para las páginas de archivo de categorías se llama 'Todos los archivos'. Además de las categorías, esta plantilla también se utiliza para otros tipos de archivos como etiquetas, taxonomías personalizadas, tipos de publicaciones personalizadas, etc.

Para crear una nueva plantilla para sus páginas de archivo de categorías, haga clic en 'Agregar nueva plantilla' en la esquina superior derecha.

Agregar una nueva plantilla en FSE

Ahora aparecerá una ventana emergente, pidiéndole que elija qué tipo de plantilla crear.

Aquí, simplemente elija 'Archivos de categorías'.

Elegir un tipo de archivo para crear una plantilla en FSE

En esta etapa, puede elegir si crear una nueva plantilla de archivo de categoría personalizada para todas las categorías o solo para una categoría específica.

Como estamos tratando de estilizar las categorías individuales de manera diferente, elegiremos 'Categoría para un elemento específico'.

Elegir una categoría específica para crear una plantilla en FSE

Todo lo que necesita hacer ahora es elegir la categoría para la que desea crear una plantilla.

En este caso, elegiremos la categoría 'Blogging'.

Elegir un nombre de categoría para crear una plantilla en FSE

Ahora ingresará al editor de sitio completo. Debería aparecer una ventana emergente, pidiéndole que elija un patrón de bloques para usar en la página de archivo de categorías.

Puede elegir un patrón o omitir este paso si desea comenzar desde cero.

Elegir un patrón de bloque para la plantilla de categoría en FSE

A modo de ejemplo, comenzaremos desde cero y le daremos ejemplos de cómo estilizar de manera diferente su página de categoría en WordPress.

Ahora, si no desea comenzar completamente desde cero y encontrar otros patrones para usar, esto es lo que puede hacer.

Puedes hacer clic en el signo negro ‘+’ en la esquina superior izquierda para agregar un bloque. Luego, cambia a la pestaña ‘Patrones’ y desplázate hacia abajo hasta la opción ‘Entradas’. Ahora deberías ver algunos patrones para mostrar múltiples entradas de WordPress.

Elegir un patrón de bloque en FSE

Si no estás satisfecho con las opciones predeterminadas, puedes crear tu propio diseño. El proceso es simple con el editor de sitio completo, ya que solo arrastrarás y soltarás bloques como de costumbre en el editor de bloques.

Dicho esto, te recomendamos usar primero el bloque Grupo para que puedas administrar partes de la plantilla como un solo bloque. Haz clic en el botón ‘+’ en cualquier parte de la página y elige ‘Grupo’.

Agregar un bloque de grupo en FSE

Ahora, selecciona un diseño para el bloque grupo.

Hay cuatro para elegir, y puedes seleccionar el que mejor funcione para tu sitio de WordPress.

Elegir un diseño para un bloque de grupo en FSE

Sugerimos agregar primero el bloque Título del archivo al bloque grupo. Esto mostrará automáticamente el título de tu categoría.

Así que si cambias el nombre de la categoría en el futuro, el título también se ajustará automáticamente. Puedes encontrarlo haciendo clic en el botón '+' en cualquier parte de la página y seleccionando 'Título del archivo'.

Elegir el bloque de título de archivo en FSE

Por defecto, este bloque mostrará el título en el formato 'Tipo de archivo: Título del archivo'.

Pero puedes deshabilitar el tipo de archivo en el título yendo a la barra lateral de configuración del bloque y desactivando el botón 'Mostrar tipo de archivo en el título'.

Mostrar el título del tipo de archivo en FSE

Otra cosa que deberías agregar es un bloque que muestre todas las publicaciones de la categoría.

Para hacer esto, haz clic en el botón '+' y elige 'Lista de publicaciones'.

Elegir el bloque de lista de publicaciones en FSE

Ahora, puedes elegir si usar un diseño prefabricado o empezar en blanco.

Para ilustrar, usaremos la opción 'Empezar en blanco'.

Elegir el diseño de la lista de publicaciones en FSE

En esta etapa, puedes elegir un diseño para mostrar las publicaciones.

Hay 4 opciones: Título y fecha; Título y extracto; Título, fecha y extracto; e Imagen, fecha y título.

Elegir un diseño para mostrar la lista de publicaciones en FSE

Una vez que hayas elegido un diseño, deberías ver la lista de todas tus publicaciones.

Ahora deberías filtrar las publicaciones según la categoría. Para hacer esto, cambia a la pestaña 'Bloque' en la barra lateral de configuración del bloque. Luego, desplázate hacia abajo hasta la sección 'Filtros' y haz clic en el menú de tres puntos.

Aquí, elige 'Taxonomías'.

Filtrar las publicaciones en una taxonomía específica en FSE

Simplemente ingresa el nombre de la categoría para filtrar la lista de publicaciones en el campo apropiado.

Asegúrate de presionar la tecla 'Enter' después de eso.

Filtrar las publicaciones en una categoría específica en FSE

Para cambiar cuántas publicaciones se muestran, puedes hacer clic en el bloque 'Lista de publicaciones' y seleccionar el ícono 'Configuración'.

Ahora, puedes cambiar el número en el campo 'Elementos por página'.

Cambiar el número de publicaciones mostradas en FSE

Para cambiar la apariencia de la página, puedes elegir uno de los bloques en la página. Luego, cambia a la pestaña ‘Bloque’ en la barra lateral de configuración y navega a la pestaña ‘Estilo’.

Ahora verás las opciones de estilo disponibles para ese bloque específico. Siéntete libre de cambiar el color del texto o el color del enlace, cambiar las fuentes, ajustar el relleno y el margen, etc.

La barra lateral de configuración de estilos de bloque en FSE

En este punto, puedes bajar por la página y localizar el bloque que dice: ‘Agregar texto o bloques que se mostrarán cuando una consulta no devuelva resultados’.

Aquí, puedes escribir algo de texto o agregar bloques que aparecerán en caso de que la categoría aún no tenga ninguna publicación.

Agregar texto cuando no hay resultados en la categoría en FSE

Y eso es todo sobre los conceptos básicos de edición de una página de categoría en el editor de sitio completo. Ahora puedes agregarle más bloques para hacerla más distintiva de las otras páginas de archivo de categorías.

Luego, simplemente haz clic en ‘Guardar’.

Después de eso, puedes repetir los mismos pasos que antes para crear páginas personalizadas de WordPress para todas tus categorías. También puedes simplemente editar tus categorías principales, y el resto usará la plantilla de archivo predeterminada en tu tema.

Guardando tus cambios en FSE

Si deseas más consejos y trucos sobre el uso del editor de sitio completo, consulta nuestra guía completa para principiantes sobre la edición de sitios completos de WordPress.

También te recomendamos que consultes nuestra lista de los mejores plugins de bloques de Gutenberg para que puedas agregar muchos más elementos a tu página de categoría.

Así es como se ve nuestra página de categoría simple:

Ejemplo de una página de categoría hecha con FSE

Método 3: Usa CSS Hero para estilizar páginas de categorías (todos los temas)

Este tercer método se recomienda para usuarios de temas clásicos de WordPress, aunque los usuarios de temas de bloques también pueden hacerlo.

La razón es que no muchos temas clásicos ofrecen la opción de estilizar individualmente tus páginas de archivo de categorías. Y si no quieres usar el Método 1, entonces la alternativa es usar CSS personalizado.

El truco con CSS es que necesitas saber cómo codificar. Si eres un principiante total sin experiencia técnica, entonces codificar puede no ser la opción más amigable para ti.

Afortunadamente, hemos encontrado una forma fácil de personalizar tu tema usando CSS sin necesidad de programar, y es usando CSS Hero.

CSS Hero es un plugin que te permite personalizar tu tema existente con un editor visual de CSS. Todo lo que necesitas hacer es seleccionar un elemento en tu sitio, cambiar su estilo, y CSS Hero cambiará el código CSS de ese elemento.

Dicho esto, en comparación con los métodos anteriores, recomendamos usar CSS solo si deseas hacer cambios menores en las páginas de archivo de tu categoría. Si bien una revisión completa es posible, puede llevar más tiempo.

Además, el plugin no viene con una versión gratuita, aunque puedes usar nuestro código de cupón de CSS Hero para obtener un 40% de descuento.

Para más información, puedes consultar nuestra reseña completa de CSS Hero.

Una vez que hayas comprado y descargado CSS Hero, puedes instalarlo y activarlo en tu administrador de WordPress. Para obtener instrucciones paso a paso, consulta nuestra guía para principiantes sobre cómo instalar plugins de WordPress.

Luego, deberías ver un botón CSS Hero en la parte superior de tu barra de administración. Haz clic en él para empezar a editar tu sitio.

Abrir CSS Hero en WordPress

La siguiente captura de pantalla muestra cómo debería verse tu página ahora.

En el lado izquierdo hay una barra lateral donde puedes modificar los elementos individuales de tu página. En la parte superior, encontrarás botones para ver tu página en diferentes dispositivos, cambiar al modo de navegación y deshacer cambios.

Al final, puedes guardar tu trabajo.

La interfaz de CSS Hero

Por defecto, verás tu página de inicio.

Para personalizar una página de archivo de categoría, cambia del modo ‘Editar’ al modo ‘Navegar’ en la esquina superior derecha de la página. Luego, ve a la categoría que deseas personalizar.

Activando el modo Navegar en CSS Hero

Una vez que estés en la página correcta, puedes volver al modo ‘Editar’.

Para asegurarte de que tus ediciones solo afecten a esta página de categoría específica y no al resto, cambia la configuración de ‘Modo de selección’ a ‘Categoría’.

Cambiando al modo de selección de Categoría en CSS Hero

Ahora, puedes proceder a seleccionar un elemento para editar.

En este ejemplo, hemos hecho clic en el grupo de bloques que muestran el título y la descripción de la categoría. La barra lateral izquierda ahora tiene configuraciones para cambiar ese elemento.

Seleccionando un bloque en CSS Hero

Probemos un ejemplo. Si deseas cambiar el color de fondo, haz clic en la opción ‘Fondo’.

Luego, puedes hacer clic en el icono del selector de color y seleccionar el color que se adapte a tu gusto. También es posible agregar un degradado o una imagen como fondo.

La configuración de Fondo en CSS Hero

Dado que elegimos un color bastante oscuro, el texto ahora no es legible. Afortunadamente, CSS te permite hacer clic en los elementos de texto individuales dentro de este grupo de bloques.

Para cambiar el color del texto, podrías cambiar a la configuración de ‘Tipografía’ y seleccionar el color deseado. También puedes personalizar el tamaño de fuente, la altura de línea e incluso la familia de fuentes.

La configuración de Tipografía en CSS Hero

Otra cosa genial que puedes hacer es agregar una sombra de caja a tus elementos para que resalten aún más.

Para hacer esto, haz clic en cualquier elemento al que quieras agregarle una sombra. Luego, navega a la pestaña ‘Extra’ y haz clic en ‘Crear sombra’.

La configuración Extra en CSS Hero

Ahora, empieza a arrastrar el punto a donde quieres que aparezca la sombra. Verás automáticamente una sombra debajo del elemento.

Una vez hecho esto, puedes ajustar el desenfoque, la extensión, la posición y el color de la sombra.

Ajustando la configuración de sombra de un bloque en CSS Hero

Si encuentras que los elementos están demasiado juntos (como si necesitaras agregar saltos de línea) o demasiado separados, puedes ajustarlos en la configuración de ‘Espaciado’.

Aquí, puedes cambiar el relleno y margen de cada elemento para que se vean más proporcionales.

Ajustando el relleno y margen de un bloque en CSS Hero

En realidad, hay mucho más que puedes hacer con CSS Hero. Si quieres aprender más, consulta estas guías:

Una vez que estés satisfecho con cómo se ve la página de categoría, simplemente haz clic en 'Guardar'.

Guardando tu trabajo en CSS Hero

Eso es todo. Ahora, puedes repetir los mismos pasos con las otras páginas de categoría para que se vean más únicas.

Aquí está el resultado final de nuestra página de categoría, hecha con CSS Hero:

Un ejemplo de una página de archivo de categoría hecha con CSS Hero

Consejo extra: Usa un tema diferente para páginas de categoría específicas

¿Quieres hacer un gran cambio en cómo se ven algunas de tus categorías? Podrías considerar usar un tema completamente diferente para ciertas categorías.

Esto puede ser genial si quieres que un grupo de páginas de categoría se vean igual pero diferentes de todo lo demás.

Ten en cuenta, sin embargo, que no puedes estilizar cada categoría. En cambio, estás creando dos apariencias distintas para tu sitio.

Si bien esto te da mucha libertad para cambiar cosas, recuerda que sigue siendo importante mantener tu sitio con un aspecto algo consistente. Incluso si algunas categorías se ven diferentes, intenta mantener algunos elementos comunes.

Esto ayuda a los visitantes a sentirse cómodos mientras navegan por tu sitio. Puedes mantener tu sitio de WordPress atractivo y fácil de usar encontrando un equilibrio entre diseños únicos y consistencia.

Para más detalles sobre cómo hacer esto, consulta nuestra guía sobre cómo usar múltiples temas en tu sitio web de WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo estilizar categorías individuales de manera diferente en WordPress. También puedes consultar nuestras selecciones expertas de los mejores constructores de temas de WordPress y nuestra guía definitiva sobre cómo editar un sitio web de WordPress.

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

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

10 CommentsLeave a Reply

  1. He experimentado con el estilo de categorías personalizadas y me gustaría añadir que es crucial mantener un equilibrio entre singularidad y consistencia.
    Si bien es tentador hacer que cada categoría sea drásticamente diferente, es importante conservar algunos elementos comunes para garantizar una experiencia de usuario coherente en todo el sitio.

  2. ¿es posible cambiar el estilo de todas las publicaciones de una categoría y no solo de la página de archivo de la categoría, con la opción css?

    quiero hacer display:none de un elemento solo en páginas de categorías específicas

    • Es posible, pero necesitarías añadir algo de código para agregar el objetivo de la categoría a las publicaciones, ya que no es una adición predeterminada de WordPress.

      Administrador

  3. ¡Gracias por tu artículo!

    Digamos que quiero estilizar todas las publicaciones de la categoría "Reseñas", pero solo las subcategorías dentro de reseñas están seleccionadas para la publicación.

    ¿Cómo puedo estilizar todas las subcategorías de la categoría Reseña?

    • Por lo que parece que quieres, deberías apuntar a las subcategorías individuales.

      Administrador

        • Disculpas por la confusión con lo que quisimos decir, nos referíamos a seguir esta guía para cada una de las subcategorías y si quisieras agrupar las subcategorías, puedes añadir una coma para que el CSS afecte a un objetivo adicional.

    • La pregunta es cómo asignar un diseño de plantilla de categoría personalizado desde el panel de administración a múltiples categorías.

      por ejemplo, he creado una plantilla llamada Category-grid.php. ¿cómo la asigno a varias categorías en mi WordPress?

  4. ¡Artículo fantástico!

    Soy nuevo en Wordpress y he estado tratando de encontrar una manera de hacer exactamente esto. Sin embargo, me encontré con algunos problemas al seguir tus pasos. Nuestro sitio de WP está configurado en un servidor de Windows que ejecuta iis 7, así que no sé si eso está causando mi problema, pero estoy seguro de que el problema está de mi lado, no con tus instrucciones.

    Probé ambos métodos; copiar category.php a un nuevo archivo php con el nombre de una de mis categorías, y CSS. CSS funcionó a la perfección, pero con el primer método, recibí un error que me decía que una llamada a cierta función en el archivo category.php original se duplicaba en mi archivo category personalizado. Creé el nuevo archivo php en el directorio de mi tema hijo (estoy usando Avada). El category.php original tampoco se encontró en la ubicación que mencionas, sino en la carpeta wp-includes. Sin embargo, mi página de blog ha estado funcionando bien; y mis categorías también. No estoy seguro de cómo lidiar con esto, ya que había MUCHA codificación en el archivo category.php original; no tengo idea de qué, si es que algo, debería haber eliminado de mi archivo category.php personalizado.

    Mucha información, lo sé. Muchas gracias por responder si tienes más sugerencias.

    ¡Me encanta este sitio!

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO será publicada. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.