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ă. Câmpurile obligatorii sunt marcate cu *

Share

Hai sa colaboram

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

Ultimele postari

CRM Marketing: Cum să Gestionezi Relațiile cu Clienții în Mod Eficient

CRM Marketing este esențial pentru gestionarea eficientă a relațiilor cu clienții, ajutând companiile să îmbunătățească experiența clientului și să maximizeze…

Brand Marketing: Cum să Construiești o Identitate de Brand Puternic?

Brand marketing reprezintă un proces esențial pentru orice afacere care aspiră să își construiască o identitate puternică pe piață. Indiferent…

Facultatea de Marketing: Ce să Aștepți de la un Program de Studii în Marketing

Facultatea de Marketing reprezintă o oportunitate excepțională pentru tinerii care își doresc să înțeleagă complexitatea pieței moderne. Aceasta nu este…