Tuvertigo | Agencia Integral de Publicidad, Mercadeo y Fotografía
Trucos Tuvertigo

Trucos para WordPress & Elementor 2024

Este es un manual breve y simplificado que funcionará como repositorio de códigos básicos que sirvieran como base para futuros proyectos web.Códigos como: (CSS, JAVA, PHP, HTML y otros. que se estarán actualizando a medida que la necesidad del desarrollador lo requiera.Dicho Código sera de uso permanente para el equipo de Tuvertigo.com pero también para aquellos colegas que deseen ajustarlos a sus plataformas ya que dichos códigos han sido testeados, probados y funcionan en distintos sitios web creados por nosotros.

Agregar Copyright © año en WordPress con actualizaciones automáticas

1.- Ir al menú APARIENCIAS luego seleccionar EDITOR DE ARCHIVOS DE TEMAS.
2.-Ir a FUNCIONES DEL TEMA (functions.php).
3.-Agregar el siguiente código al final del archivo.
				
					 //FECHA EN EL COPYRIGHT
add_filter ('widget_text', 'do_shortcode');
function year_shortcode () {
$year = date_i18n ('Y');
return $year;
}
add_shortcode ('year', 'year_shortcode');
				
			
4.-Agregar el siguiente codigo en la linea de texto del footer.
				
					//SIN ESPACIOS EN LOS CORCHETES
[ year ]
				
			
Desarrollado por: @GEALMAGO | © 2024 All Rights Reserved TUVERTIGO.COM

Rotación de imagen infinito (CSS)

1.-Agregar una imagen con Elementor
2.-Añadir el siguiente código en AvanzadoCuston CSS
				
					selector img {
    -webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
				
			
Icon WordPress

Efecto de Parpadeo en Botón

1.-Crear un Boton con Elementor

2.-Ir a Avanzados | Disposición | ID de CSS y agregar.
				
					btv
				
			
3.-Añadir el siguiente código en AvanzadoCuston CSS
				
					#btv .elementor-button {
 animation: 1.5s infinite onda;
}
@keyframes onda {
 0% {
  box-shadow: 0 0 20px -5px #ffffff;
 }
 70% {
  box-shadow: 0 0 0 30px rgba(26, 51, 244, 0);
 }
 100% {
  box-shadow: 0 0 0 0 rgba(26, 51, 244, 0);
 }
	
				
			

Carrusel Continuo CSS

1.-Crear un Carrusel de Imagenes con Elementor.
2.-Añadir el siguiente código en AvanzadoCuston CSS
				
					selector .swiper-wrapper { 
    transition-timing-function: linear !important;
  -webkit-transition-timing-function: linear !important;
}

selector::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to right, #fff, transparent );
    z-index: 10;
}
selector::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, #ffffff, transparent);
    z-index: 10;
}

				
			

Efecto Flotante para Logos

1.-Añadir Imagen con Elementor.

2.-Ir Avanzado | Posición | Absoluto y asignar eje de X – Y.

3.-Añadir el siguiente código en AvanzadoCuston CSS

				
					selector {
 animation: flutuando01 25s ease;
 animation-iteration-count: infinite;
}
 
@keyframes flutuando01 {
 0% {
     transform: translateY(0px) rotate(15deg);
 } 50% {
     transform: translateY(-80px) rotate(-15deg);
 } 100% {
     transform: translateY(0px) rotate(15deg);
 }
}
				
			
Icon WordPress

Eliminar margen inferior párrafos
(editor de textos)

1.-Ir al menú Personalizar de WP.

2.-Añadir en CSS Adicional el siguiente codigo.

				
					.elementor-text-editor p:last-child{ 
 margin-bottom:0px;
}
				
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus arcu dui, id bibendum diam ultricies sed. In vestibulum finibus tempor. Duis volutpat cursus velit at ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla aliquam luctus hendrerit. Etiam ante ligula, suscipit non bibendum vitae, finibus eget sapien. Phasellus sit amet rutrum ligula, et ultrices elit. Aenean lacus sapien, interdum quis pretium sit amet, varius eget lorem. Sed id facilisis massa. Sed sed dolor a magna posuere placerat sit amet nec lorem. Fusce id ante non velit hendrerit vehicula ac id felis. Sed at viverra mi. Morbi mollis odio enim, sed vulputate ligula gravida vitae. Donec sit amet diam lorem. Aliquam erat volutpat. Nunc vel mi quis nunc imperdiet egestas.

Texto se desvanece
al expandirse/contraerse

1.-Añadir  Parrafo con Editor de Texto en WP.

3.-Añadir el siguiente código en Avanzado – Custon CSS

				
					selector{
    max-height: 80px; /*mude para a altura desejada que vai aparecer antes do hover*/
    transition: 0.5s; /*defina o tempo de transição para aparecer o conteúdo. aumente a medida que voce cresce o texto para ficar mais fluido*/
    overflow: hidden;
}
selector:hover{
    max-height: 1000px; /*defina a altura máxima ao passar o mouse*/
}
selector::after{
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #170b21 /*defina a cor do fade (de preferencia a cor do fundo que voce esteja usando*/); )
    transition: 0.5s; /*defina o tempo de transição para esconder o conteúdo. */
}
selector:hover::after{
    opacity: 0; /*remove a cor do fade ao sair do hover*/
}
				
			

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean faucibus arcu dui, id bibendum diam ultricies sed. In vestibulum finibus tempor. Duis volutpat cursus velit at ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla aliquam luctus hendrerit. Etiam ante ligula, suscipit non bibendum vitae, finibus eget sapien. Phasellus sit amet rutrum ligula, et ultrices elit. Aenean lacus sapien, interdum quis pretium sit amet, varius eget lorem. Sed id facilisis massa. Sed sed dolor a magna posuere placerat sit amet nec lorem. Fusce id ante non velit hendrerit vehicula ac id felis. Sed at viverra mi. Morbi mollis odio enim, sed vulputate ligula gravida vitae. Donec sit amet diam lorem. Aliquam erat volutpat. Nunc vel mi quis nunc imperdiet egestas.

Te invitamos a compartir este artículo
Hablemos

Déjanos tus datos de contacto y te llamaremos en breve.

Responderemos específicamente todas las preguntas que tengas.

Te explicaremos paso a paso cómo trabajaremos tu proyecto Web.

Y si te animas, afinaremos los detalles para desarrollar tu nuevo Sitio Web!

¿Hablemos?
Empieza hoy con tu Página web

*Tu información esta 100% segura con nosotros y jamás será compartida a terceros.