U ovom novom vodiču pokazat ćemo vam kako stvoriti višeredni gumb s ikonom Elementor.
Treba napomenuti da vam za to neće trebati dodatni dodatak. Verzija Elementor Pro će vam dati sve što vam je potrebno da stignete tamo
Da biste dobili ideju o tome što ćemo raditi u ovom vodiču, sljedeći videozapis pokazat će vam pregled onoga što ćemo raditi zajedno.
Sada idemo na posao.
Otkrijte i vi Kako stvoriti prilagođenu stranicu za WooCommerce u Tomentor
Kreirajmo novi odjeljak odabirom onog sa stupcem.
Zatim a na bočnoj ploči, odaberimo Minimalna visina za Visina i Minimalna visina kliknimo na VH i postavite klizač na 100.
Sada povucite Widget gumba u našem radnom području
U kartici Sadržaj s bočne trake Promijenimo polje Tekstovi ulaskom Preuzmite na App Storeu, zatim uključi poravnanje kliknimo na Centar
Zatim kliknite na gumb knjižnice ikona, upišite jabuka u traku za pretraživanje, odaberite ikonu koja nas zanima i kliknite gumb za umetanje.
Natrag na bočnu traku, promijenimo razmak ikona u 14
Pročitajte također: Kako napraviti karticu s efektom iz portfelja u Elementor
U kartici Stil, izmijenimo boja pozadine dugme uključeno Noire
Promijenimo to struk tipografija na 25
na granični radijus, uđimo 20 za sve radijuse rubova. Za unutarnje margine, uđimo 14-36-14-36 za margine Gore, desno, dolje i lijevo.
Vidi također: Kako promijeniti sliku jednim pritiskom na gumb u Elementor
Sada idemo na karticu Sadržaj i transformirajmo tekst gumba u dva retka.
Da biste to učinili, kopirajte i zalijepite sljedeći kod u tekstualno polje:
<span class="top-small-text">TEXTE DE PREMIERE LIGNE</span> <br> TEXTE DE DEUXIEME LIGNE
Promijenimo onda tekst FIRST LINE TEXT u Preuzimanje na i tekst SECOND LINE TEXT in App Store
Sada moramo imati više kontrole nad prvom i drugom linijom
Da biste to učinili, idemo na karticu napredan zatim u odjeljku Prilagođena CSS, kopirajte i zalijepite sljedeći kod:
selector .elementor-button-icon{
font-size: 62px;
}
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
NAPOMENA: Ako nemate ovaj odjeljak, morate brzo nadograditi na Pro verziju.
Da biste dovoljno personalizirali svoj gumb, možete, na primjer, povećati ikonu izmjenom vrijednosti font-size iz odjeljka koda:
selector .elementor-button-icon{
font-size: 62px;
}
Pročitajte također: Kako izvesti i uvesti elementarne modele
Da biste prilagodili boju prve linije samo promijenite vrijednost color a ako želite promijeniti vrijednost veličine fonta morate promijeniti font-size iz sljedećeg odjeljka koda:
selector .top-small-text{
font-size: 16px;
color: #ffffff;
}
I ovdje ste upravo stvorili višeredni gumb s ikonom. Možete ga pregledati.
Nabavite Elementor Pro sada!!!
Zaključak
Dakle! To je sve za ovaj članak koji vam pokazuje kako izraditi višeredni gumb s ikonom Elementor. Ako imate bilo kakvih nedoumica o tome kako doći tamo, voljeli bismo čuti vaše mišljenje u Komentari.
Međutim, možete se konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
