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.