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.
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.
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.
Adauga clasa de CSS „readmoretoggle”
CSS Buton Read More
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;
}
Concluzie
Concluzia acestui articol subliniază cât de simplu și accesibil este să creezi un buton „Citește mai mult” folosind Elementor, fără a investi în pluginuri suplimentare sau versiuni premium. Această soluție permite îmbunătățirea interactivității paginii și a experienței utilizatorilor, oferindu-le control asupra cantității de conținut afișat. Pe lângă funcționalitate, metoda prezentată se aliniază cerințelor moderne de design, permițând o integrare perfectă cu stilul general al site-ului.
Abordarea utilizării elementului „Toggle” ca punct de plecare demonstrează versatilitatea Elementor, chiar și în versiunea gratuită. De asemenea, utilizarea codurilor CSS personalizate oferă libertatea de a adapta butonul la diverse scenarii, fie că este vorba de un site minimalist sau unul complex. Prin simpla aplicare a unor linii de cod, putem obține o soluție eficientă, fără compromisuri de design sau performanță.
Această metodă reprezintă o alternativă atractivă pentru cei care doresc să evite instalarea de pluginuri suplimentare, reducând astfel riscul de încărcare a site-ului cu resurse inutile. În plus, tutorialul oferă utilizatorilor începători ocazia de a învăța și de a experimenta cu CSS, crescându-le astfel abilitățile tehnice și încrederea în gestionarea propriului site WordPress.
În final, acest buton „Citește mai mult” nu este doar o funcționalitate, ci și o expresie a atenției față de utilizatorii site-ului. Prin aplicarea soluției descrise, vei oferi o experiență mai curată și mai prietenoasă pentru cititorii tăi, consolidând profesionalismul și estetica site-ului. Implementarea sa este un pas mic cu un impact mare, demonstrând că detaliile fac diferența. Dacă ai urmat pașii descriși, ai acum o soluție practică și elegantă care să îmbogățească experiența vizitatorilor tăi.
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
