ᐈ Crea Plantillas Layout para Orbital Theme ▷ Fácil y Rápido ◁

¿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?

VER VÍDEO TIP

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 */

Box Shadow

/* PERSONALIZAR sombreado */
box-shadow: 0 4px 8px 0 #DDA20B, 0 9px 16px 0 #FFC545;
/*Elegir color y variar las profundidades para probar*/

Efecto Hover

/* 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;
}
}

Escoger Colores

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Í

Botón ejemplo