Agregar Copyright © año en WordPress con actualizaciones automáticas
//FECHA EN EL COPYRIGHT
add_filter ('widget_text', 'do_shortcode');
function year_shortcode () {
$year = date_i18n ('Y');
return $year;
}
add_shortcode ('year', 'year_shortcode');
//SIN ESPACIOS EN LOS CORCHETES
[ year ]
Rotación de imagen infinito (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); } }
Efecto de Parpadeo en Botón
1.-Crear un Boton con Elementor
btv
#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
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 Avanzado – Custon 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);
}
}
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.
2.-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.
GUIAS PARA ELEMENTOR
1.-Este código solamente es visible en el constructor de elementor, para ocultarlo hay que quitar el código
2.-Agregar el siguiente código en Avanzado – Custon CSS.
/*para ordenador*/
@media (min-width: 1025px){
:root{
--colunas: 12;
--largura: 1140px;
--offset: 0px;
--gutter: 20px;
--cor: #ffffff10;
}
}
/*para tablet*/
@media (min-width: 768px) and (max-width: 1024px){
:root{
--colunas: 6;
--largura: 600px;
--offset: 48px;
--gutter: 16px;
--cor: #ffffff10;
}
}
/*para celular*/
@media (max-width: 767px){
:root{
--colunas: 8;
--largura: 340px;
--offset: 0px;
--gutter: 8px;
--cor: #ffffff10;
}
}
body.elementor-editor-active::after {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin-right: auto;
margin-left: auto;
pointer-events: none;
z-index: 1000;
min-height: 100vh;
width: calc(100% - (2 * var(--offset)));
max-width: var(--largura);
background-size: calc(100% + var(--gutter)) 100%;
background-image: repeating-linear-gradient( to right, var(--cor), var(--cor) calc((100% / var(--colunas)) - var(--gutter)), transparent calc((100% / var(--colunas)) - var(--gutter)), transparent calc(100% / var(--colunas)) );
}
