Doriți să creați un buton de descărcare a fișierelor PDF cu Elementor Page Builder?
La crearea unei pagini Elementor ajutor (fie că este o pagină de pornire, o pagină de destinație etc...), puteți adăuga un buton de descărcare prin care, atunci când un vizitator face clic pe buton, fișierul este descărcat direct în loc să fie direcționat către o nouă filă de browser web pentru a vizualiza fişier.
Elementor dispose d'un Widget cu butoane pe care îl puteți folosi pentru a crea un buton de descărcare a fișierului. În timp ce adăugați widget-ul Buton, puteți pur și simplu să adăugați linkul fișierului dvs. în panoul de setări.
Cu toate acestea, setarea implicită va direcționa vizitatorul către o nouă filă pentru a vizualiza fișierul pentru anumite formate de fișiere, inclusiv PDF și formate de imagine precum JPG și PNG. Dacă doriți ca fișierul să fie descărcat direct, trebuie să adăugați un atribut personalizat la linkul de descărcare.
Crearea unui buton de descărcare a fișierelor PDF în Elementor
Mai întâi, încărcați fișierul PDF în biblioteca media WordPress. Pentru a face acest lucru, conectați-vă la tabloul de bord WordPress și navigați la Media -> Adăugați. Faceți clic pe butonul Selectati fisierele pentru a vă selecta fișierul.
Odată ce fișierul este încărcat, veți vedea un buton Copiați adresa URL în clipboard pentru a copia adresa URL a fișierului și un link Modificatorul pentru a edita fișierul.
Faceți clic pe butonul Copiați adresa URL în clipboard.
De asemenea, puteți găsi adresa URL a fișierului din biblioteca media WordPress (Media -> Biblioteca media). Pur și simplu selectați fișierul pe care doriți să-l utilizați și faceți clic pe Copiere URL în fișier. clipboard în fereastra care apare.
Odată ce URL-ul este copiat, accesați editorul Elementor și adăugați widgetul Button. Lipiți adresa URL pe care tocmai ați copiat-o în câmp Legătură din panoul de setări.
Pentru a adăuga atributul personalizat, faceți clic pe pictograma roată din câmp Legătură. Puteți introduce orice nume în câmpul Atribute personalizate.
Puteți utiliza următorul format: Télécharger|[nom fichier]. Acasa as avea Télécharger|Elementor
Aici. Puteți accesa fila Stil pentru a personaliza butonul. După ce ați terminat de editat întreaga pagină, vă puteți actualiza sau publica pagina.
pe scurt
Elementor are un widget Button pe care îl puteți folosi pentru a adăuga un buton de descărcare a fișierelor pe pagina dvs. Puteți adăuga orice fișier acceptat de sistemul WordPress, cum ar fi: PDF, ZIP, JPG, PNG etc...
Cu toate acestea, pentru formate de fișiere, cum ar fi PDF, JPG și PNG, trebuie să adăugați un atribut de link personalizat pentru ca fișierul să fie descărcat direct.
Aici ! Asta este tot pentru acest articol care vă arată Cum să creați un buton de descărcare a fișierelor PDF cu Elementor Page Builder. Dacă ți-a plăcut acest articol, nu ezita distribuie pe rețeaua ta socială preferată.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.
Povestiți-ne despre dumneavoastră comentarii și sugestii în secțiunea dedicată.
Elementor oferă în mod regulat teme care vă ajută să construiți un site web complet din acestea. În fiecare lună lansăm noi teme construite în jurul unei nișe specifice, dar suficient de flexibile încât să le puteți personaliza în sfârșit pentru a se potrivi propriilor dvs. nevoi.
Combinate cu Elementor Pro, aceste teme vă ajută să începeți rapid cu fiecare parte a site-ului dvs. web, inclusiv:
pvârste statice, cum ar fi pagina de pornire,
antetul
subsolul
pagina 404
secțiunea Arhivă
blog-ul
Popup-uri și altele
Prin urmare, în acest tutorial, vă vom arăta cum să construiți un site web complet folosind Elementor constructor de pagini vizuale.
Cum să construiți un site web complet cu teme Elementor
În acest tutorial, veți învăța cum să folosiți o temă ca bază pentru toate părțile importante ale site-ului dvs. web, apoi puneți totul împreună pentru a crea un site web coeziv.
Mai precis, tema Agenția digitală.
Website-ul dvs. va avea o serie de pagini de bază, cum ar fi pagini:
Bun venit
À propos
Servicii
Clienți
Blog
Contact
De asemenea, oferă secțiuni dedicate și conținutului dinamic. De exemplu, arhivele de postare ale blogului și șabloanele de postare se potrivesc automat cu paginile de sine stătătoare. De asemenea, puteți schimba antetul, subsolul și pagini 404.
Deci, iată cum să creați un site web cu o temă Elementor:
1. Instalați și activați tema Elementor Hello
Deoarece veți folosi Elementor și un șablon tematic pentru a vă construi întregul site web, nu este nevoie să căutați alte elemente.
În schimb, veți avea nevoie doar de un site web ușor, optimizat pentru performanță, pe care îl oferă tema Elementor Hello.
Pentru a începe, mergeți la Aspect → Teme → Adăugare și căutați " Salut elementor". Apoi instalați și activați tema.
2. Configurați paginile statice de bază ale site-ului dvs. web
Apoi accesați meniul Pagini → Adăugare pentru a crea paginile de bază ale site-ului dvs. web.
Mai întâi, creați o pagină numită „ Bun venit „Și faceți clic pe buton Editați cu Elementor pentru a lansa Elementor.
Faceți clic pe setările pentru a deschidesetările paginii și modificați aspectul acesteia pentru a fi egal cu Elementor Fullwidth.
Apoi deschideți biblioteca șabloanelor Elementor și căutați „Agenția digitală” din secțiunea pagini :
Ar trebui să vedeți o listă de șabloane de pagină pentru această temă. Introduceți șablonul Pagina Principală din lista modelelor.
Acum ar trebui să vedeți o pagină principală. Antetul pare cam anost pentru moment - dar nu vă faceți griji, vom rezolva asta în curând.
Apoi, adăugați o altă pagină pe care să o utilizați pentru " À propos".
Ca și înainte, creați o pagină și schimbați aspectul în Elementor Fullwidth. Apoi, deschideți biblioteca de șabloane și introduceți șablonul Despre a temei agenției digitale.
Acum repetați același proces pentru a crea toate celelalte pagini, inclusiv: Servicii, Clienți și A lua legatura.
Nu vă faceți griji pentru pagina de blog încă. Această pagină nu este statică ca și celelalte. Din acest motiv, îl veți crea acolo printr-o metodă diferită (pe care o vom acoperi ulterior în acest tutorial).
Pentru a finaliza configurarea paginilor statice, trebuie să spuneți instalării WordPress să folosească o pagină de pornire statică. Pentru a face acest lucru…
Continuă Setări → Redare
alege O pagină statică (alegeți mai jos) sub setările paginii de pornire
Selectați pagina care încorporează șablonul paginii de pornire a temei
3. Creați celelalte părți ale site-ului dvs. web
Acum sunteți gata să construiți celelalte părți ale site-ului dvs. folosind Elementor. Elementor vă permite să mergeți dincolo de crearea de pagini statice (cum ați făcut mai sus).
Cu Elementor, puteți proiecta și secțiuni precum: en-cap; subsolul, etc ...
Și datorită temei Elementor, veți putea importa șabloane pentru toate secțiunile care se află deja în paginile statice pe care le-ați creat în pasul anterior.
Pentru a accesa constructorul vizual al Elementor, accesați Templates→ Theme Builder. Va trebui să instalați Elementor Pro pentru a-l putea accesa.
Acum este timpul să creați secțiunile
Antet
Pentru a începe, accesați fila Antet a interfeței vizual constructor, apoi faceți clic pe Adaugă nou. Pe ecranul următor, veți vedea o selecție de șabloane în biblioteca Elementor. La fel cum ați făcut cu paginile statice, căutați „Agenție digitală”, apoi introduceți:
Acum ar trebui să vedeți o previzualizare vizuală a antetului dvs., precum și un meniu de navigare din șablonul pe care l-ați inserat.
Dacă vrei să-l schimbi
Continuă Aspect → Meniuri în tabloul de bord WordPress
Creați un meniu nou
După ce ați creat un meniu, puteți adăuga paginile pe care le-ați creat la pasul 2 în meniul de navigare.
Când ați terminat adăugarea elementelor din meniu, salvați meniul și reveniți la șablonul antetului din interfața Elementor.
atunci publica antetul dvs. și utilizați condițiile de afișare pentru a afișa șablonul antetului pe întregul site web. Dacă doriți, puteți utiliza, de asemenea, condiții de afișare pentru a crea anteturi diferite pentru diferite tipuri de conținut:
Apoi apăsați Salvați și închideți
subsol
Acum este timpul să creați subsolul site-ului dvs. web:
Reveniți la interfața constructorului de pagini vizuale
Faceți clic pe filă Subsol
Faceți clic pe butonul pentru Adăugați un subsol nou
În fereastra pop-up, dați un nume subsolului dvs. și faceți clic pe Creați șablon
Acum ar trebui să vedeți o listă de șabloane de subsol la fel cum ați făcut cu antetul. Căutați „Agenția digitală” și introduceți șablonul de subsol.
După ce ați introdus șablonul de subsol, ar trebui să vedeți o previzualizare a subsolului dvs.:
atunci publica șablonul de subsol și utilizați termenii afișați pentru a-l afișa pe întregul site web.
Pagina de blog
Spre deosebire de paginile statice pe care le-ați creat la pasul 2, pagina blogului site-ului dvs. web este un „ Arhiva ". Practic, asta înseamnă că afișează în mod dinamic cel mai recent conținut de pe site-ul tău.
Dacă un utilizator face clic pe un anumit articol de pe pagina blogului, acesta va fi direcționat către o pagină care afișează conținutul acelui articol. Aceasta se numește pagina „unică”. Designul tău unic asigură că tot conținutul tău va arăta la fel – singurul lucru care se schimbă este conținutul real (cum ar fi titlul postării, corpul, imaginea prezentată etc.).
Pentru a crea pagini de arhivă unice și șabloane de pagini, ar trebui să utilizați Elementor visual builder - nu zone pagină ou articol WordPress implicit.
A incepe…
Deschideți interfața Theme Builder
Accesați fila Arhivă
Faceți clic pe Adăugare nou
Dați-i un nume și faceți clic pe Creare șablon
La fel ca în antetul și subsolul dvs., veți vedea o listă de șabloane de pagini de arhivă. Căutați șablonul „Agenție digitală” și introduceți-l.
Acum ar trebui să vedeți designul de bază al paginii dvs. de articole.
Trebuie remarcat faptul că dacă vezi doar un articol este normal, deoarece WordPress vine doar cu un exemplu implicit care este „Hello World! ".
Deocamdată, tot ce trebuie să faci este publica pagina arhivă și setați-o să fie afișată în toate arhivele.
Apoi puteți accesa meniul de postări din tabloul de bord și puteți crea postări noi pe blog. Atribuiți fiecare articol unei categorii numite „Noutăți".
Acum, când accesați pagina de blog, ar trebui să vedeți automat toate aceste postări noi:
Crearea paginii șablon de postare pe blog
În acest moment, pagina dvs. de blog are un aspect destul de ușor de utilizat. Dar dacă faceți clic pe o anumită postare de blog, aspectul nu se va potrivi cu restul site-ului dvs.
Pentru a rezolva această problemă, trebuie să creați un șablon „unic” cu Elementor:
Deschideți constructor vizual Elementor
Accesați fila Singur Post
Faceți clic pe Adaugă nou
În pop-up Șablon nou :
Dă-i un nume
selecta Post din lista derulantă Selectați Tip de postare. Acest lucru spune Elementor că doriți să utilizați acest șablon pentru postările dvs. de blog (spre deosebire de Pagini sau un alt tip de post personalizat pe care l-ați putea utiliza)
Încă o dată, veți vedea biblioteca de șabloane Elementor. Găsiți șablonul de articol unic al șablonului „Agenția digitală” și introduceți-l.
Dacă doriți, puteți utiliza numeroase widget-uri de date de publicare dinamică pentru a controla aspectul paginii dvs.
De exemplu, dacă modificați widgetul Informații de postare, veți putea controla elementele de metadate care apar, ca și în publicație ...
Autor
Data publicării
comentarii
Etc
După ce sunteți mulțumit de modelul articolului dvs., faceți clic pe publica. Apoi, puteți utiliza opțiunile de afișare, astfel încât acest șablon unic să se aplice numai postărilor din categoria „Dincolo de știri”:
Selectați din categorie
Alegeți categoria Noutăți
Apoi apăsați Salvați și închideți.
Acum, toate postările dvs. de blog ar trebui să aibă un design care să se potrivească cu restul site-ului dvs. web.
Pentru a termina lucrurile, mergeți la Aspect → Meniuri și adăugați pagina de blog în meniul de navigare. Pentru a face acest lucru, puteți adăuga un link către categoria „Știri” din secțiune Categorii.
Pagina 404
În cele din urmă, trebuie să creezi pagina 404 a site-ului tău. Pagina 404 a site-ului dvs. web este ceea ce vor vedea vizitatorii dacă urmează un link spart sau încearcă să viziteze o pagină care nu există.
Aici este ! Gata pentru acest ghid care vă arată pas cu pas cum să construiți un site web complet cu Elementor. Dacă ai comentarii sau sugestii, nu ezitați să ne informați în secțiunea rezervată.
În acest articol vom arăta cum să creați un formular în mai mulți pași cu animație lottie pe Elementor.
Funcționalitatea formularului în mai multe etape a fost adăugată recent la constructorul vizual robust al Elementor. Acum aveți un constructor de forme care acoperă toate bazele!
Chiar dacă nu pare în partea de sus, ar trebui să știți că este o primă versiune și, inevitabil, vor apărea noi actualizări pentru a concretiza această funcționalitate.
Cu formularele în mai multe etape, formularele dvs. nu vor arăta doar mai bine, dar vor oferi rate mai mari de conversie atunci când doriți să colectați informații de la vizitatorii site-ului dvs. web.
Acum ajută-ți vizitatorii să finalizeze înregistrarea și să-ți îmbunătățească conversiile cu un formular cu mai multe etape.
Experiență de utilizator mai bună
Convingerea utilizatorilor să vă completeze formularele nu este o sarcină ușoară. După ce i-ați încurajat să citească formularul dvs. și chiar să luați în considerare completarea acestuia, trebuie să vă asigurați că îi mențineți angajați, mai ales că unele formulare pot fi intimidante.
Noul widget Form Multi-Step Form adresează această întrebare exactă: transformarea unei forme complexe într-un element de design simplu și frumos.
Creșterea conversiilor și a clienților
Nu există nici o îndoială că o formă plăcută pentru ochi și ușor de navigat va fi mai favorabilă convertirii. Acesta este obiectivul dvs. de constructor de site-uri și este, de asemenea, obiectivul widgetului Formular în mai multe etape.
Acest formular vă va permite să îmbunătățiți ratele de conversie în toate domeniile. Sunt deosebit de grozave în domenii precum asigurări, universități, imobiliare, turism și multe altele și sunt sigur că vă vor ajuta să creați forme de conversie ridicate, cu o flexibilitate nesfârșită.
Marche comment ça
După ce aruncați un formular pe pagină, adăugați câmpul „Pas”. Veți vedea că un câmp nou a fost adăugat automat și iese în evidență vizual. Mutați elementul Step în locația pe care doriți să o împărțiți în pași și voilà! Tocmai ați creat un formular în mai mulți pași.
Câmpul Pas va acționa ca un separator și va permite utilizatorilor să:
Alegeți indicația de etapă: Pictogramă, text, pictogramă și text, număr, număr și text, bara de progres sau niciuna
Adăugați o pictogramă ca indicator de reper
Personalizați aspectul pașilor
Personalizați articolele următoare și cele anterioare
și validați fiecare câmp pas
Du-ți site-ul la un nivel interactiv cu totul nou
Ți-ai dorit vreodată ca site-ul tău să fie și mai interactiv și mai interesant decât este deja?
Este posibil să fi renunțat la acest gând în trecut din mai multe motive, dar acest lucru este pe cale să se schimbe, odată cu introducerea Lottie Animations. Aceasta este șansa dvs. de a vă duce jocul de web designer la nivelul următor, alegând dintre mii de animații Lottie pe care să le adăugați pe site-ul dvs. web.
Le Widget Lottiepoate accepta animații Lottie din diverse surse, de exemplu LottieFiles.com. Puteți adăuga, de asemenea, propriile dvs. animații folosind funcția Plugin Lottiefiles sau pluginul Bodymovin pentru Adobe After Effects.
Uimeste-ti clientii
Când îți încarci desenele și imaginile statice și le întinerești brusc cu mișcare, culoare și toate celelalte tipuri de efecte de animație, schimbi jocul.
Brusc, designul site-ului tău prinde viață. Este în mișcare și, prin aceasta, interacționează cu vizitatorul site-ului dvs. web. Animațiile Lottie sunt SVG, 100% responsive și super ușoare.
Creșteți implicarea utilizatorilor
Adăugarea de animații Lottie, durează câteva secunde și poate fi folosită pentru a îmbunătăți implicarea cu fiecare parte a site-ului.
Luăm de exemplu butoanele.
Știm cu toții cât de importante sunt butoanele de apel la acțiune. Cu Lottie, puteți îmbunătăți modul în care vizitatorii dvs. interacționează cu butoanele fără a petrece o mulțime de timp de codificare și perfecționare a detaliilor de design.
Gândiți-vă la un buton obișnuit versus un buton care are o săgeată animată. La care ai acorda mai multă atenție? Aceste mici lucruri vor face diferența, iar clienții dvs. vor aprecia cu siguranță meseria.
Cu widget-ul Lottie, vă puteți juca cu o mulțime de setări, cum ar fi declanșatoare, bucle, hover, animație inversă și opțiuni de randare. Nu există limită în ceea ce privește modul în care vă puteți anima site-urile web.
Adăugarea animațiilor Lottie și a formularelor în mai multe etape oferă două modalități excelente de a îmbunătăți nu numai experiența dvs. de utilizator, ci și interfața de utilizator.
Deoarece tendințele web se schimbă constant, este întotdeauna interesant să îmbunătățești funcționalitatea site-ului tău și să te poziționezi ca un adevărat expert. Dacă ai comentarii sau sugestii, nu ezitați să ne informați în secțiunea rezervată.
Astăzi vă vom spune despre o altă caracteristică destul de populară pe Elementor. Deși rămâne subestimată în mare măsură, această caracteristică vă va ajuta să vă îmbunătățiți productivitatea cu Elementor.
Paleta de culori a unui site web este o parte esențială a acestuia experiența utilizatorului. Alegerea unei palete greșite poate face din această experiență un dezastru și vă poate costa un număr mare de cititori. Dar găsirea celei mai bune scheme de culori poate îmbunătăți nu numai experiența utilizatorului.
Eșantionatorul de culori vă permite să extrageți culori din imagini și alte elemente de pe pagina dvs. pentru a crea o schemă de culori perfectă pe care o puteți utiliza pe un site web cu o singură pagină sau pe întregul dvs. site.
Acum să mergem mai departe și să vedem cum funcționează această caracteristică.
Pentru a finaliza acest tutorial, creați o pagină sau un șablon. Aici am importat un șablon de pagină. Pentru a face acest lucru, faceți clic pe pictograma folderului din caseta de editare.
În fereastra pop-up care apare, tastați în bara de căutare „Portofoliu” și alegeți ultimul element din lista de rezultate
Faceți clic pe insera iar șablonul va fi inserat în pagina sau în postarea dvs. În imaginea de mai jos veți descoperi pagina noastră principală.
Vom modifica fundalul albastru din dreapta folosind Color Sampler pentru a extrage culorile din imaginea din stânga.
Faceți clic pe Editați coloana
În panoul din stânga, faceți clic pe fila Stil și în bloc fundal, faceți clic pe Tip fundal Clasic.
Apoi, pe opțiunea de culoare, faceți clic pe selector de culoare iar după pe Sampler de culoare.
Faceți clic pe imaginea din stânga, o fereastră pop-up va prezenta paleta de culori găsită în această imagine. Selectați-l pe cel care vă place și fundalul din dreapta va primi imediat acea culoare.
Și iată-l, ai creat o schemă de culori perfectă, care se potrivește perfect cu imaginea ta.
Aici este ! Asta este pentru acest articol care vă arată cum să utilizați Color Sampler în Elementor.Dacă aveți nelămuriri cu privire la modul de a ajunge acolo fanunțați-ne în comentarii.
În acest tutorial WordPress, învață cum să creezi un site web cu Elementor în doar 3 minute datorită Elementor Cloud, o soluție automată pentru a crea un Blog WordPress cu Elementorpentru bloggeri sau webmasteri începători și experți.
Dacă preferați să urmați tutorialul video, faceți clic pe butonul de deasupra următorului videoclip:
Construirea propriului site web fără a învăța să codificați sau să angajați un dezvoltator a fost aproape imposibilă. Cu toate acestea, datorită platformelor precum WordPress și pluginurilor precum Elementor, ceea ce odată era misiune imposibilă este acum o realitate.
În acest tutorial, vă vom arăta cum să utilizați WordPress și Elementor pentru a crea un site web nou și vă vom ghida prin proces pas cu pas.
WordPress este un sistem puternic de management al conținutului care poate fi descărcat și utilizat gratuit și vă permite să creați orice tip de site web; de la simple bloguri personale și site-uri web de afaceri mici până la site-uri web corporative mari și aplicații bogate în funcții.
Elementor, pe de altă parte, este un generator de pagini ușor de utilizat, dar robust, care facilitează crearea unui site web pentru oricine, indiferent cât de complex.
În acest tutorial, vă vom arăta cum să creați un site web WordPress în trei minute cu noua platformă Elementor Cloud. Numele poate fi puternic, dar soluția este cu adevărat automatizată și ușoară pentru orice începător.
Primul lucru este să accesați pagina Elementor și să mergeți în partea de jos a paginii și să găsiți linkul Elementor Cloud.
Veți fi redirecționat către o pagină nouă. Derulați în jos și găsiți secțiunea FĂRĂ ZÂNE ASCUNSE. Faceți clic dreapta pe Buton Cumpară acum Ca in poza de mai jos.
Se va deschide pagina de plată și vi se va solicita să introduceți adresa de e-mail. După ce ați introdus, faceți clic pe butonul CREEAZĂ CONT
Apoi în pagina următoare introduceți țara, statul, adresa, codul poștal și așa mai departe, apoi faceți clic pe butonul A continua
După aceea, selectați metoda de plată. Puteți alege între card de credit sau PayPal. Noi am ales metoda PayPal.
Faceți clic pe butonul galben PayPal din partea dreaptă a ecranului.
Un pop-up se va deschide și vi se va solicita să introduceți informațiile dvs. de conectare PayPal și să validați.
Dacă procedura a avut succes, veți fi redirecționat către pagina de mulțumire care are două butoane. Primul Mergi la Contul Meu vă va duce la contul dvs. și al doilea Începeți să vă creați site-ul web spre crearea automată a site-ului dvs.
Faceți clic pe al doilea buton. Veți avea dreptul la o nouă fereastră pop-up care vă va invita să introduceți numele site-ului dvs. web. Validați făcând clic pe Pagina Următoare →.
Așteptați ca procedura automată de creare a site-ului dvs. să se încheie și apoi faceți clic pe butonul Să mergem!
Faceți clic pe Am înțeles ca in poza de mai jos.
Faceți clic pe Deschideți tabloul de bord WP pentru a vă deschide tabloul de bord.
În noul pop-up de bun venit, faceți clic pe butonul Utilizați un kit pentru site-uri web
Vi se va solicita să selectați un șablon de site web din lista pe care o oferă Elementor. Veți avea posibilitatea de a le filtra pe categorii făcând clic pe una dintre ele din stânga.
Dacă ați găsit modelul care corespunde aspirațiilor dvs., treceți cursorul mouse-ului peste el, va apărea un nou buton, faceți clic pe Vizualizați demonstrația
Veți putea vedea ce oferă acest model. Veți putea naviga pe toate paginile acestui model și dacă sunteți mulțumit de el, faceți clic pe butonul Aplicați Kit care va instala șablonul pe site-ul dvs.
Dacă nu ești, butonul Înapoi la bibliotecă vă va duce înapoi la lista de șabloane și puteți verifica altul.
După ce faceți clic pe Aplicați Kit, un pop-up de confirmare vă va întreba dacă doriți cu adevărat să instalați întregul model sau doar câteva pagini. Puteți da clic Aplica tot ou Particularizarea pentru a vă personaliza alegerile.
Va fi prezentat un rezumat al selecției dvs., faceți clic pe Pagina Următoare →
În cele din urmă faceți clic pe Înapoi la Panoul de bord pentru a reveni la tabloul de bord al site-ului dvs.
Pe tabloul de bord, dați clic Numele site-ului meu deasupra și în stânga ecranului, apoi pe Vpe site pentru a vedea cum funcționează site-ul dvs.
Și aici tocmai ți-ai creat site-ul web pe WordPress cu Elementor Cloud.
Tot ce mai rămâne de făcut este să-l personalizați după cum doriți. Pentru aceasta, oferim un Pachet de tutoriale Elementor pe care te invităm să-l descoperi.
Odată ce ați terminat cu acest ghid, poate doriți să consultați celelalte ghiduri și tutoriale ale noastre pentru pagini mai specifice.
Asa de ! Asta este pentru acest articol care vă arată cum să creați un site web cu Elementor în 3 minute. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.
Trebuie să aflați cum să adăugați un efect sonor de buton pe Elementor? Aflați în acest articol.
Vedeți aceste 2 butoane?
Când faceți clic pe Al pisicii, va face un miaunat, iar când dați clic pe butonul de pe chien, va produce un lătrat. În acest articol, vă vom arăta cum să adăugați Elementor un efect sonor pentru butonul atunci când este făcut clic.
Cum să adăugați un efect de sunet la butonul din Elementor
Pasul 1: Creați un buton
În primul rând, trebuie să creați butonul, îl puteți personaliza după cum doriți, deoarece Elementor are multe opțiuni pentru a face butonul să arate frumos.
Pasul 2: Pregătiți legătura cu efectul sonor
Odată ce butonul este gata, pregătiți acum efectul sonor pentru butonul și încărcați-l în biblioteca media WordPress. Puteți utiliza formatul de fișier MP3 sau WAV pentru efectul sonor.
Pentru a încărca fișierul de sunet în biblioteca media WordPress, navigați la tabloul de bord WordPress și faceți clic Media -> Adăugați. Puteți să glisați și să plasați fișierele sau să faceți clic Selectati fisierele pentru a le încărca.
Odată descărcate fișierele, accesați biblioteca media și faceți clic pe unul dintre sunete, apoi în fereastra care apare, copiați URL-ul fișierului pentru a obține linkul pentru efectul sonor.
Pasul 3: Adăugați următorul cod HTML
Pentru a produce sunet de la buton, trebuie să folosim următorul cod HTML.
Adăugați un widget HTML în zona de pânză și inserați codul în bloc Cod HTML.
Utilizați linkul pentru efectul sonor pentru a înlocui Adresa URL a efectului sonor în declarație
var audio1 = new Audio('Sound-Effect-URL')
Alegeți clasele CSS pentru buton și modificați codul claselor CSS ale butonului
$(".button-class").mousedown
După modificarea codului, va arăta așa.
Pasul 4: Adăugați o clasă CSS la buton
Pentru a conecta butonul la coduri, trebuie să adăugăm la buton clase CSS, astfel încât codul să știe pe ce buton se face clic și să declanșeze efectele sonore.
Și asta pentru un buton cu efect sonor. Acum vă puteți personaliza butonul. Și dacă doriți să adăugați mai multe butoane cu efecte sonore, este posibil prin copierea unei părți din cod și modificându-l puțin.
S-au adăugat butoane suplimentare cu efecte sonore
Creați butonul sau copiați butonul existent
Puteți copia butonul existent făcând clic dreapta pe butonul existent și selectând Copiere, apoi inserați-l în orice secțiune făcând clic dreapta în interiorul acelei secțiuni.
Copiați o parte din cod și ajustați variabilele și numele clasei CSS al celui de-al doilea buton
Să copiem câteva părți din codul HTML anterior care declanșează efectul sonor, este următorul cod de mai jos
//Audio 1 Starts
var audio1 = new Audio('Sound-Effect-URL')
$(".button-class").mousedown(function() {
audio1.load();
audio1.play();
});
//Audio 1 Ends
După ce copiați codul, lipiți-l chiar mai jos de Audio 1 Ends. Modificați variabila audio1 și tot codul care folosește variabila audio1 pe codul nou creat în audio2.
Apoi înlocuiți adresa URL a efectului de sunet dacă utilizați un nou efect de sunet pentru noul buton și schimbați codul clasa de butoane în clasele CSS de buton nou create.
Codul final va arăta ca imaginea următoare.
Înlocuiți numele clasei CSS al butonului
Butonul dvs. nou creat va avea, de asemenea, un efect sonor atunci când faceți clic. Puteți crea câte doriți.
Elementele audio se numără printre marile completări ale unui site web. Ele nu numai că oferă un element atractiv pentru site-uri web, dar ajută și la crearea unei impresii de durată asupra utilizatorilor finali.
Cu toate acestea, acțiunea sau rezultatul ar trebui să fie însoțite de sunet numai dacă întărește sau clarifică semnificativ un mesaj important pentru utilizator. Informarea utilizatorului despre ceva care necesită atenția sa, astfel încât să nu dea un impact negativ asupra site-ului dvs.
Asa de ! Asta este tot pentru acest articol care vă arată cum să adăugați un efect de sunet pentru buton pe Elementor. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.
Confidențialitate și cookie-uri: acest site folosește cookie-uri. Continuând să navigați pe acest site, sunteți de acord cu utilizarea noastră de către acesta.
Pentru a afla mai multe, inclusiv cum să controlați cookie-urile, consultați următoarele:
Politica cookie-urilor
