En este post te vamos a mostrar varias opciones para personalizar el blog de WordPress utilizando Elementor pro. En algunas ocasiones necesitaras también el plugin Elementor custom skin. Puedes descargarlo clicando aquí.
Página del blog con de WordPress con animación de entrada y salida.
Sigue los pasos del siguiente vídeo y pega los CSS cuando diseñes la plantilla del loop del blog. Si tienes Elementor custom skin pro puedes borrar el atributo de la clase card que hace referencia a la altura.
.titulo{
top:20vh;
transition: 500ms linear;
}
.excerpt{
top:25vh;
transition: 500ms linear;
opacity:0;
}
.leermas{
top:20vh;
transition: 500ms linear;
opacity:0;
}
.card:hover .titulo{
top:0;
transition: 500ms linear;
}
.card:hover .excerpt{
top:0;
transition: 500ms linear;
opacity:1;
}
.card:hover .leermas{
top:0;
transition: 500ms linear;
opacity:1;
}
.card{
height: 60vh!important;
}
Personalizar las entradas del blog con Elementor pro y flipbox
De nuevo, revisa el siguiente vídeo para personalizar las entradas de tu blog con el widget de flipbox. Para este tutorial no necesitas ninguna personalización adicional, solo Elementor pro.
Personalizar las entradas del blog solo con Elementor
Revisa el siguiente vídeo para seguir todos los pasos.
Imágenes deslizantes para las entradas del blog
Copia los siguientes CSS en los ajustes de la página y sigue los pasos que explicamos en el siguiente video:
.imagen img{
clip-path: polygon(100% 0, 100% 51%, 100% 100%, 0% 100%, 0 45%, 0% 0%);
transition: clip-path 0.5s ease;
}
.contenedor:hover .imagen img{
transition: clip-path 0.5s ease;
clip-path: polygon(100% 0, 100% 51%, 100% 100%, 100% 100%, 100% 53%, 100% 0);
}
.header2{
opacity:0;
}
.contenedor:hover .header2{
opacity: 1;
}
.contenedor:hover .header1{
opacity: 0;
}
Otra animación para las entradas del blog
El proceso es idéntico al ejemplo que hemos explicado en esta página en el que creabamos una animación de entrada y salida. La diferencia es que cuando creamos la plantilla del loop de las entradas del blog, en el contenedor de la plantilla definiremos la clase puff-in-center y en CSS personalizado insertaremos el siguiente código:
.puff-in-center {
-webkit-animation: puff-in-center 2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
animation: puff-in-center 2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
@-webkit-keyframes puff-in-center {
0% {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes puff-in-center {
0% {
-webkit-transform: scale(2);
transform: scale(2);
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
