Personalizar el blog de WordPress con Elementor pro

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on 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
Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on whatsapp
WhatsApp
Share on twitter
Twitter
Como utilizar los hooks de la plantilla Astra Wordpress

Cómo utilizar los hooks de la plantilla Astra de WordPress

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter Este va a ser el primero de una serie de articulos en los que trataremos en profundidad el theme de WordPress Astra. Para iniciar esta serie de artículos vamos

Insertar widgets al menu Wordpress

Añadir widget a cualquier menú de tu WordPress

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter Has querido alguna vez querer poner en tu menú un botón personalizado, o unos botones de redes sociales, quizás tu web es multidiomas y quieres poner las banderas de

Cómo crear pop ups en Wordpress con Elementor

Cómo hacer popups en WordPress con Elementor

Share on facebook Facebook Share on linkedin LinkedIn Share on whatsapp WhatsApp Share on twitter Twitter ¿Quieres crear una llamada a la acción en forma de popups y no sabes como hacerlo. Hoy te explicamos Cómo hacer popups en WordPress con Elementor. Índice de contenidos

Suscríbete a nuestro blog

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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