Cerrar video

Cómo añadir etiquetas personalizadas de categorías en las entradas de nuestro blog en divi

por | Abr 20, 2021 | Tutorial gratuito | 13 Comentarios

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.

Cómo añadir etiquetas personalizadas de categorías en las entradas de nuestro blog en divi

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);
}

Tutoriales Relacionados

13 Comentarios

  1. Adriana

    Aplausos «Con Mayúsculas»!!!!! 👏★★★★★
    Gracias OV Divi! La mejor explicación!!!!

    Responder
    • Oscar Viedma

      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 🤗

      Responder
  2. jacqueline

    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!

    Responder
    • Oscar Viedma

      Hola Jacqueline a ver compárteme la url de tu ejercicio para ver que está pasando.

      Saludos.

      Responder
      • Facundo Manzi

        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?

        Responder
          • Facundo Manzi

            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

          • Facundo Manzi

            Hola Oscar, perdón que te vuelva a molestar. Es que no le encuentro solución. Me podrías ayudar?

          • Oscar Viedma

            Hola Facundo, agrega este código CSS en los ajustes de la página / Avanzado / CSS Personalizado:

            .ov-blog article {
              position: relative !important;
            }
            
          • Facundo Manzi

            Muchas gracias por tu ayuda!!!
            Siempre ayudando!!!
            Sos lo máximo
            Gracias!

  3. Juan Antonio Martín

    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!!!

    Responder
    • Juan Antonio Martín

      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

      Responder
    • Oscar Viedma

      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.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest