Saltar al contenido

Layouts con Gutenberg

¿Quieres agilizar el proceso de creación de tus páginas o entradas? ¿Son parecidas o similares la estructura entre ellas? Te explico cómo puedes crear con WordPress Gutenberg una plantilla gracias a los sus bloques y opciones:

Crear plantilla reutilizable con WordPress Gutenberg

¡Volvemos a nuestro magnífico bloque “Fondo”! al igual que lo usamos para crear secciones y poder configurar la anchura etc.. (podéis ver cómo en el apartado de crear sección de ancho completo en Orbital Theme)

Ésta vez aprovecharemos la opción de “Bloques reutilizables”¿quieres sabes cómo?

TIPS CSS Layouts sin anchura completa

Para las secciones que no son de anchura completa, podéis personalizar los bloques de Layouts para destacar éstos conjuntos, elegid entre los siguientes y añadir la clase “layout” a vuestro bloque “Fondo”

/* PERSONALIZAR Layouts en bloque */
.layout{
border-radius:70px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 9px 20px 0 rgba(0, 0, 0, 0.19);
border: 2px solid darkgrey;
}
.layout:before{
opacity:0!important;
}

Tipos de Bordes

/* tipos para añadir a la propiedad border:
dotted ,dashed ,solid ,double ,groove ,ridge ,inset ,outset ,none ,hidden */
/* PERSONALIZAR sombreado */
box-shadow: 0 4px 8px 0 #DDA20B, 0 9px 16px 0 #FFC545;
/*Elegir color y variar las profundidades para probar*/
/* LAYOUT HOVER*/
@keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.layouthover{
border-radius:30px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 9px 20px 0 rgba(0, 0, 0, 0.19);
border: 2px solid darkgrey;
}
.layouthover:before{
opacity:0!important;
}
.layouthover img{
border-radius:15px;
object-fit: cover;
overflow:hidden;
}
@media (min-width: 1040px){
.layouthover:hover{
border: 3px groove #FFC545;
box-shadow: 0 8px 10px 0 #DDA20B, 0 10px 16px 0 #FFC545;
animation: bounce 1s;
}
}

    Ejemplos de Layout de bloques con TIPS CSS

    TIP: si usáis secciones a tamaño completo, podéis añadir vuestro Bloque Reutilizable dentro de otro bloque “Fondo” con la clase “fondowp” que se enseña en el apartado de CSS TIPS para Orbital Theme

    Ejemplo de conjunto de bloques reutilizables

    Ejemplo de bloque compuesto de imagen y texto, botón de llamada a la acción y tabla comparativa.. Éste texto es el ejemplo de una descripción de la imagen o producto que se muestra en éste Layout, para decir que se vende en todos sitios y que tienes que comprarlo AQUÍ

    Ventajas

    • Éstos Layouts con WordPress y Orbital Theme
    • Los Bloques reutilizables son la caña
    • Sirven como plantillas predefinidas

    Desventajas

    • Ninguna
    • Soy tan vago que ni con ésto
    • Fer házmela tú y ya yo me quejo luego

    BARATO

    Si crees que todo lo barato sale caro aún no conoces éstos productos

    CALIDAD

    Te garantizo que éstos productos te van a durar toda la vida, los mejores de 2020

    DISEÑO

    Vas a poder lucir estilo y glamour, ésta es la tendencia de moda ¡no te la pierdas!

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