Personalizar el blog de WordPress con Elementor pro

Compartir en facebook
Facebook
Compartir en linkedin
LinkedIn
Compartir en whatsapp
WhatsApp
Compartir en twitter
Twitter

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í.

Índice de contenidos

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




				
			

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor? Dejalo en comentarios, prometemos responderte.

Compártenos en tu red social favorita
Compartir en facebook
Facebook
Compartir en linkedin
LinkedIn
Compartir en whatsapp
WhatsApp
Compartir en twitter
Twitter

Deja un comentario

Tu dirección de correo electrónico no será publicada.

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Ir arriba