Add Copyright © year on WordPress with automatic updates
//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 ]
Image rotation is infinite (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); } }
Flicker effect in Button
1.-Create a Button with 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);
}
Continuous slideshow 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;
}
Effect Floating for Logos
1.-Add Image with Elementor.
2.-Go Advanced | Position | Absolute and assign axis X – Y.
3.-Add the following code in Advanced – 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);
}
}
Remove bottom margin paragraphs
(text editor)
1.-Go to the menu Customize WP.
2.-Add in CSS with the following code.
.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 for 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. Thirst thirst pain to magna posuere placerat sit amet nec lorem. Admin 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.
Text fades
the expand/collapse
1.-Add Caption with Text Editor in 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 for 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. Thirst thirst pain to magna posuere placerat sit amet nec lorem. Admin 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)) );
}
