Cum sa faci foarte simplu un buton Read More cu Elementor

Nici un alt plugin nu este necesar! Nu necesita Elementor Pro!

Salut,

In acest tutorial scurt, o sa te ajut sa transformi elementul „Toggle” intr-un buton Read More (Citeste mai multe) si ii vom aplica si o animatie placuta si cursiva. Aceasta metoda o sa functioneze pentru toate elementele de tipul „toggle” din pagina, care vor avea clasa „readmoretoggle”.

Sa incepem deci cu inserarea elementului de toggle in locul in care doresti.

buton read more - folosind toggle si Elementor free

Urmeaza sa-l stilizezi dupa bunul plac si sa-i aplici clasa despre care vorbeam „readmoretoggle”.

Din cele 2 taburi, din cadrul elementului de Toggle, elimina unul si elimina si icoana. Daca preferi sa ai un stil de buton pe acest „read more”, elimina icoana si utilizeaza CSS-ul furnizat mai jos. Urmeaza sa elimini border-ul si padding-ul.

setari toggle Elementor

Poti sa stilizezi cum doresti tu, dar cel mai probabil iti vei dorii sa elimini border-ul si padding-ul, astfel incat sa arate in concordanta cu paragraful de mai sus.

border si padding toggle Elementor

Adauga clasa de CSS „readmoretoggle”

clasa CSS - Elementor

Intr-un final, trebuie sa adaugam acest CSS in aceeasi pagina unde se afla si acest buton read more.

Daca vrei acest buton doar intr-o singura pagina, poti adauga CSS-ul in  Page Settings -> Advance -> Custom CSS. Setarile paginii le gasesti in stanga jos, icoana de rotita.

Daca vrei ca CSS-ul sa fie global, este simplu, trebuie sa adaugam CSS-ul direct in tema folosita mergand in Theme customizer -> Additional CSS ( din WordPress -> Apparence -> Customizer, apoi adaugam CSS-ul)

				
					body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}  

				
			

Pentru a centra butonul, utilizati acest CSS:

				
					body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}

.readmoretoggle .elementor-toggle .elementor-tab-title {
display: flex;
justify-content: center;
}  

				
			

Daca preferi un look care seamana mai mult cu un buton, foloseste CSS-ul de mai jos in locul celor de mai sus.

				
					body:not(.elementor-editor-active) .readmoretoggle .elementor-tab-title.elementor-active{
display: none;
}

/* button styling below */
.readmoretoggle .elementor-tab-title a{
display:inline-block;
padding:0.4em 1.6em;
margin:0.14em 0 ;
border:0.16em solid rgba(0,0,0,0);
border-radius:2em;
font-weight:300;
color:rgba(255,255,255,0.9); /* button text color */
text-align:center;
background-color: rgba(0,0,0,.71); /* button color */
transition: all 0.34s ease;
}

/* hover button styling */
.readmoretoggle .elementor-tab-title a:hover{
color:rgba(255,255,255,1); /* change color of text when hovering */
transform: scale(1.03); /* delete to remove the zoom in effect */
} 

				
			

Poti edita stilizarea foarte usor modificand acest cod CSS. De asemenea tineti cont de faptul ca textul „Read more”  o sa fie vizibil si in modul de editor. Acest lucru iti face munca de stilizare mult mai usoara.

Intr-un final, pentru a face acest buton Read more sa devina „Read less”, trebuie sa folositi, in schimb, codul de mai jos.

Poti schimba „Read less” in orice alt text se potriveste cu site-ul tau.

De asemenea, va trebuii sa introduceti stilul pentru textul „Read less” direct in cod, deoarece ceea ce ati configurat in fila „Stilizare” nu se va aplica automat.

Pe scurt, schimbati prima parte a codului pentru a transforma „Read less” in ceea ce doriti.

				
					.readmoretoggle .elementor-tab-title.elementor-active::before {
    content: 'Read Less';
    font-family:roboto;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    }

.readmoretoggle .elementor-toggle-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column-reverse;
}

.readmoretoggle .elementor-tab-title.elementor-active a{
    display:none;
} 


				
			

Si asta este tot!

Daca ai nevoie de o echipa de profesionisti, suntem mereu la un click distanta de tine! Nu ezita sa ne contactezi aici.

 

Multumim de lectuare! O zi faina sa ai,

Robert P. – Co-fondator Pixelromanesc.ro

Lasă un răspuns

Adresa ta de email nu va fi publicată.

Ultimele postari

Cum sa faci foarte simplu un buton Read More cu Elementor

Nici un alt plugin nu este necesar! Nu necesita Elementor Pro! Salut, In acest tutorial scurt, o sa te ajut…

Cum sa-ti creezi un website wordpress pas cu pas - Elementor

Salut, Scopul acestui tutorial este acela de a va invata pas cu pas cum sa va folositi de Elementor pentru…

Cum alegi o agentie web buna, in 5 pasi!

Salut, De aceasta data venim in sprijinul tau cu sfaturi despre cum ar trebuii sa alegi agentia web care sa-ti…

Hai in club

Hai sa colaboram

Esti in cautarea unui expert? Noi te putem ajuta cu dezvoltarea website-ul tau.

Lasă un răspuns

Adresa ta de email nu va fi publicată.