En este tutorial gratuito de OV DIVI aprenderás a añadir etiquetas personalizadas de categorías sobre las entradas de nuestro blog en divi.
Si quieres ver un ejemplo real de lo que vas a lograr al finalizar este tutorial dale un vistazo a este mismo blog de OV DIVI. Cómo puedes ver las entradas en mi blog tienen unas etiquetas que dicen «GRATIS» o «PREMIUM» dependiendo la categoría asignada. Pues esto mismo te voy a enseñar a implementar en este tutorial ya que es algo que me han solicitado bastante.
La verdad que implementar las etiquetas no es nada del otro mundo, solo vamos a necesitar un pequeño fragmento de código CSS que vamos a colocar en el CSS Personalizado de nuestro sitio web.
A continuación te dejo el fragmento y para que sepas cómo implementarlo solo dale play al video…
.ov-blog .category-nombre:before {
content: "CATEGORÍA";
font-size: 13px;
letter-spacing: 1px;
font-weight: 600;
background-color: #fe2990;
border-radius: 0 4px 4px 0;
padding: 2px 10px;
color: #fff;
position: absolute;
left: 0;
top: 30px;
z-index: 9;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .16);
}
Aplausos «Con Mayúsculas»!!!!! 👏★★★★★
Gracias OV Divi! La mejor explicación!!!!
Muchas gracias Adriana, me alegra saber que los tutoriales te están gustando y sobre todo sirviendo. De eso se trata Adriana.
Te mando un abrazo y muchas gracias por el apoyo 🤗
sabes, no se me ven todos… solo los de la primera línea de entradas, la segunda línea no se ve…
¿que hago?
saludos y gracias!
Hola Jacqueline a ver compárteme la url de tu ejercicio para ver que está pasando.
Saludos.
Hola Oscar, a mi me pasa lo mismo. Como lo puedo solucionar.
Si cambio de position: absolute a relative la image se desplaza hacia abajo y no queda bien se descuadra la imagen.
Que puedo hacer?
Hola Facundo ¿Cuál es la url de tu ejercicio?
Hola Oscar! gracias por tu pronta respuesta!
https://warmargentina.org/test-tags-blog/
Te comento que la position esta en absolute, porque cuando la cambio a RELATIVE, se desplaza la imagen hacia abajo, de las que cumplen con la etiqueta.
No se que puede hacer?
Muchas gracias
Saludos
Facundo
Hola Oscar, perdón que te vuelva a molestar. Es que no le encuentro solución. Me podrías ayudar?
Hola Facundo, agrega este código CSS en los ajustes de la página / Avanzado / CSS Personalizado:
.ov-blog article { position: relative !important; }Muchas gracias por tu ayuda!!!
Siempre ayudando!!!
Sos lo máximo
Gracias!
Hola Óscar, dos preguntas:
1. ¿Se puede poner la etiqueta en la parte superior derecha de la entrada?
2. ¿Cómo hacer para que se vean las etiquetas en un carrusel de entradas?
Gracias y Feliz Año!!!
Solucionado el punto 1:
position: absolute;
right: 0px;
top: 0px;
El punto 2 no se como conseguir colocar las etiquetas para que se vean con el plugin WP Carousel Pro
Hola sí se puede cambiar de posición la etiqueta. Simplemente cambiar left: 0; por right: 0;
Para colocar las etiquetas en un carrusel no sabría decirte, depende de cómo estés implementando el carrusel, si usa las mismas clases que divi sí es posible, si no, no.
Hola OScar uan consulta no me sale
Hola Gina ¿Qué problema estás teniendo?
Hola Oscar, si quisiera agregar una segunda etiqueta ¿Cómo puedo hacerlo?
Hola Diane, ¿te refieres a otra etiqueta que no sea categoría? Podrías mostrar las «tags» (etiquetas) de WordPress también. Eso sería reemplazando «category» por «tag» en las clases del código CSS.
Mas bien, me refería a que se vean dos etiquetas a la ves,
Por ejemplo: Una al lado izquierdo con las categorías y otra al lado derecho mostrando las etiquetas o tags
Intente cambiar «before» por «after» pero no funciono.
Ooh ahora entiendo.
Se tendrían que implementar los estilos CSS para las etiquetas también. Quedarían así los estilos para las etiquetas:
.ov-blog .tag-nombre:before { content: "ETIQUETA"; /* Puedes personalizar este texto */ font-size: 13px; letter-spacing: 1px; font-weight: 600; background-color: #0073e6; /* Cambia el color si lo deseas */ border-radius: 4px 0 0 4px; padding: 2px 10px; color: #fff; position: absolute; right: 0; top: 0; z-index: 9; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .16); }