Saltar al contenido

Clusters

¿Quieres editar y darle forma a los famosos clústers de Orbital Theme? Te mostramos una forma sencilla para personalizarlos de manera genérica con CSS y nuestros particulares TIPS

Personalizar los Clusters de Orbital Theme

Con éste rápido TIP podrás dar un estilo genial a tus Clúster… A algunos os recordará el estilo, aprovecho a darle un saludo al gran crack Dani Llamazares, podéis pasaros a verle por YouTube si aún no le seguís!

Personalizar Clusters con CSS

/* CLUSTERS con CTA */
.entry-header {
border-radius: 6px;/*elegir redondeo de bordes*/
overflow: hidden;
height: 100%;
box-shadow: 0 2px 2px rgba(0,0,0,.2), 0 2px 5px rgba(0,0,0,.3); /*elegir colores y profundiad*/
background: #ffdf5a94;/*elegir color*/
}
.entry-title {
padding: 5px;
}
.entry-item a img {
border: 0px!important;
height: 180px;/*cambiar la altura*/
object-fit: cover;
}
.entry-item .entry-title {
text-align: center;
border:none;
padding:0;
background-color:transparent;
color:black!important;/*color del texto*/
}

TIPS extra

Puedes editar para personalizar más el estilo como colores, bordes cambiando las siguientes propiedades que se mencionan en los comentarios del codigo CSS, como por ejemploel box shadow como éste código:

/* Propiedad box-shadow EJEMPLO*/ 
box-shadow: 0px 5px 1rem 1px #C1BCC1;
/*Probar a editar pixeles y color*/

    Personalizar Clusters con CTA

    Si lo que quieres es aprovechar al máximo el contenido que muestras y darle una llamada a la acción (CTA) a tus clústers, además de personalizar efectos, mira a continuación el vídeo:

    Clusters con CTA

    /* Personalizar Cluster compacto */
    /*Personalizar imagen y contenedor*/
    .entry-header .wp-post-image {
    height: 170px;
    object-fit: cover;
    width: 100%;
    margin-bottom: 0rem;
    border-bottom: 6px solid grey;
    border-top:6px solid black;
    border-left:none;
    border-right:none;
    border-radius:10px;
    box-shadow: 0px 0px 8px 0px grey;
    }
    .entry-item{
    padding: 0.5rem;
    height:190px;
    }
    /*Personalizar titulo boton*/
    .entry-item .entry-title {
    margin-top: 0;
    margin-bottom: 0;
    background:#ffeb0187;
    font-size: 1.25rem;
    color: black;
    font-weight: bold;
    position:relative;
    top:-6.6rem;
    text-align:center;
    padding:0.5rem;
    }
    /*Efecto boton escritorio*/
    @media screen and (min-width:1041px){
    .entry-item .entry-title:hover{
    background:red;
    color:white;
    }
    }
    /*Efecto imagen escritorio*/
    @media screen and (min-width:1041px){
    .entry-item:hover{
    transition: transform .2s ease;
    transform: scale(1.05);
    border:none;
    }
    }
    /*Eliminar lineas cluster personalizados*/
    .entry-wrapper {
    padding: 0rem;
    border: none;
    }

    Convertir Botón

    Para convertir como en el vídeo la franja en un botón, debes añadir a la personalización del título botón lo siguiente:

    margin-left:1rem;
    margin-right:1rem;
    border: 2px solid black;
    border-radius:30px;

    Puedes editar para personalizar más el estilo como colores, bordes, box shadow y demás tal y como explico en en vídeo, tipos:

    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

    Importante como especifico en el vídeo, que se modifique la altura adecuada tanto de imagen como del item de cluster

    Los efectos hover (pasar el ratón por encima) sólo se activan en formato escritorio, aunque puedes eliminar la sección correspondiente si no lo quieres

    Tipos de TRANSITION:

    ease – specifies a transition effect with a slow start, then fast, then end slowly (this is default)

    linear – specifies a transition effect with the same speed from start to end

    ease-in – specifies a transition effect with a slow start

    ease-out – specifies a transition effect with a slow end

    ease-in-out – specifies a transition effect with a slow start and end

    Podéis ver los tipos que hay de Transformación en: https://www.w3schools.com/cssref/css3_pr_transform.asp

    Clúster de columnas con lista

    Una nueva forma de crear un clúster para las páginas que tienen mucho contenido, categorizando así la navegación y facilitando la navegación por todos los apartados sin usar el menú

    Título

    • Lista1
    • Lista2
    • Lista3

    Título

    • Lista1
    • Lista2
    • Lista3

    Título

    • Lista1
    • Lista2
    • Lista3

    Título

    • Lista1
    • Lista2
    • Lista3

    Título

    • Lista1
    • Lista2
    • Lista3

    CSS para Columnas e Imágen

    /* CLUSTERS COLUMNAS y LISTA  */
    .clustercolumnas{
    margin-top: 1.2rem;
    }
    .clustercolumna{
    margin-bottom: 0.8rem;
    border: 0px solid black;
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.5);
    background-color: darkgray;
    }
    .clusterimagen{
    position: relative;
    top: -5rem;
    left: 1rem;
    margin-bottom: 0!important;
    float: right;
    }
    .clustercolumna h2{
    margin: auto;
    }
    .clustercolumna h3{
    margin: auto;
    }
    .clustercolumna ul{
    margin-top:1rem;
    }

    TIPS extra

    Puedes editar para personalizar más el estilo como colores, bordes y más editando las propiedades del codigo CSS, tanto para títulos h2, h3 o como para la lista.

    Para saber como editar éstas propiedades de títulos puedes ver el siguiente vídeo:

      Clusters dobles en Móvil

      Para poder obtener un mayor rendimiento en el link juice de tu página y mostrar en formato mobile más opciones de navegabilidad con los clusters de Orbital, añade éste pequeño y fácil TIP en solo 2 minutos!

      Cluster dobles Móvil

      /*Mostrar 2 clusters en movil*/
      @media only screen and (max-width:600px){
      .entry-item{
      max-width:50%;
      padding:0.4rem;
      /*height:150px;*/
      }
      .entry-header -wp-post-image {
      /*height: 140px;*/
      }
      }

      • Optimizado para Gutenberg
      • Soporte ilimitado
      • Monetiza tu WEB
      • Mejora los Rankings en Google
      • Actualizaciones de por vida

      Últimas Novedades de nuestro Blog

      Mira los artículos de nuestro Blog con los mejores consejos tras la experiencia de uso del Tema Orbital enfocado a SEO y posicionamiento.

      Página creada por FernanTEC - ¿Quieres saber más?