Seleccionar página

Filtros de contenido en WordPress

Filtros de contenido en WordPress

Bienvenido al capítulo #2 del CURSO GRATUÍTO de maquetación Web para WordPress, donde te enseñaré cómo poder personalizar los Filtros de Contenido, gracias al Plugin Ultimate Blocks.

Gracias a los bloques de WordPress 5.X (Gutenberg) en adelante, la labor resulta aún mucho más sencilla, por lo que añadiendo un mínimo de edición en CSS y el nuevo editor… ¡Es pan comido!

CSS Completo

/* RECOMENDADOR */
 .ub-content-filter-category-name {
     background-color: black;
     color:white;
     text-align: center;
     border-bottom: black 2px solid;
     font-size: 1.25em;
 }
 .ub-content-filter-category {
     text-align: center;
     padding: 0px;
     border-right: 2px solid #908989;
     border-left: 2px solid #908989;
     border-bottom: 4px double #908989;
     margin-bottom: 0px;
 }
 .ub-content-filter-panel{
     border-left: 2px solid #908989;
     border-right: 2px solid #908989;
     border-bottom: 2px solid #908989;
     padding: 1rem;
 }
 .ub-content-filter-tag {
       min-height: 32px;
     min-width: 70px;
     margin: 5px 10px 5px 0;
     padding: 10px;
     border-radius: 50px;
 }
 @media (min-width:600px){
 .filtrofijo{
     position: sticky;
     top: 0;
     z-index: 999;
     background:white;
 }
 }
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Puedes personalizar también los encabezados que pongas justo encima del filtro:

/* ESTILIZAR HEADER 2 y 3 - COMPLETO */

h2 {
font-size: 2rem;
background-color: #ffdf5a ;
text-align: center;
padding: 5px;
border-bottom: #e0b706 2px solid;
margin-bottom:auto;
}
h3 {
font-size: 1.65rem;
margin-bottom: 0.25rem;
text-align: center;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 4px;
}

¿Cómo queda éste Bloque de Filtros?

El Bloque de filtros puede servir para cualquier cosa, tienes que ser creativo y saber adaptarlo para filtrar y elegir bien donde colocarlo y crear un contenido que crea calidad a tu sitio y aporte valor al usuario.

Si quieres ver todas las posibilidades, te dejo a continuación el vídeo tutorial de éste capitulo del curso en YouTube. No olvides seguirme en Youtube!

Sobre el Autor

FernanTEC

💻Apasionado del mundo tecnológico así como de la ingeniería y en general, de todo tipo de herramientas y/o gadgets que nos faciliten la vida. Intento transmitir de manera práctica cómo poder sacarle provecho! espero que te sirva de ayuda! 😉

Deja una respuesta

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

PROMOCIÓN FERNANTEC

APROVECHA ÉSTA OFERTA CON SERED:
🚀 2 MESES GRATIS 🚀
Código de DESCUENTO: FernanTEC
CLICK EN LA OFERTA:

sered oferta 2 meses gratis

O UN 10% ANUAL
🚀10% DESCUENTO🚀
Código de DESCUENTO: AnualTEC
CLICK EN LA OFERTA:

sered oferta DESCUENTO ANUAL

TEMAS WORDPRESS

orbital theme oferta orbital theme oferta