Elementor: Creați un buton de descărcare a fișierului PDF

Elementor: Creați un buton de descărcare a fișierului PDF

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.

Citiți și: Cum să încorporați PDF în Elementor fără a scrie cod

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.

Citiți și: Cum se instalează Elementor pe WordPress

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.

creați un buton de descărcare a fișierelor PDF cu Elementor

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

creați un buton de descărcare a fișierelor PDF cu 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.

Previzualizare finală

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.

În cazul în care utilizați Elementor Pro, puteți utiliza și widgetul Buton pentru a crea un buton care poate fi acționat, cum ar fi butonul de chat WhatsApp, butonul facebook messengerEtc ...

Obțineți Elementor Pro acum!

Concluzie

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: Cum să construiți un site web complet pe WordPress

Elementor: Cum să construiți un site web complet pe WordPress

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.

Dar înainte, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

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.

Cum să creați un site web complet elementor blogpascher 1

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 deschide setă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:

Elementor - inserați șablonul antet

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.

Citiți și: 10 Instrumente de automatizare pentru comercializarea întreprinderilor mici

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.).

Descoperiți, de asemenea Cum să adăugați un conținut în WordPress cu Elementor

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.

Citiți ghidul nostru pe Cum să migrați manual un site web WordPress

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.

Citește și Mod de întreținere pe WordPress: explicație și configurare

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ă.

Descoperiți și noi plugin-uri 5 WordPress pentru a gestiona mai bine erorile 404

Pentru a vă crea pagina 404, utilizați generatorul vizual Elementor pentru a adăuga un alt șablon unic.

  • Deschideți constructor vizual Elementor
  • Accesați fila Eroare 404
  • Faceți clic pe Adaugă nou
  • Introduceți șablonul agenției digitale de pe pagina 404
Pagina 404 - creați un site web complet

Apoi, publicați șablonul pentru a vă completa site-ul.

Obțineți Elementor Pro acum!

Concluzie

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ă.

Cu toate acestea, puteți consulta și resursele noastre, 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 sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare

...

Elementor: Cum să creați un formular în mai mulți pași cu animație

Elementor: Cum să creați un formular în mai mulți pași cu animație

Î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.

Descoperiți și noi Pluginurile 10 WordPress pentru a crea un formular de contact

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.

Citiți articolul nostru pe Cum să sporiți conversiile: sporiți ofertele limitate

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.

Descoperiți, de asemenea Cum să construiți un site web complet cu Elementor

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 Lottie poate 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.

Pentru a citi, de asemenea: Cum să îmbunătățiți implicarea utilizatorilor pe WordPress

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.

Marche comment ça

  • Accesul la lottiefiles.com și alegeți o animație
  • Descărcați fișierul Lottie JSON
  • Înapoi în editorul Elementor, trageți în widgetul Lottie
  • Faceți clic pe pictograma bibliotecii media și descărcați fișierul Lottie JSON
  • Aici ! Ar trebui să începeți să vedeți animația.

Dacă ați creat o animație frumoasă, asigurați-vă că ne trimiteți link-ul din secțiunea de comentarii de mai jos.

Obțineți Elementor Pro acum!

Concluzie

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ă.

Cu toate acestea, puteți consulta și resursele noastre, 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 sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare

...

Elementor: Cum să utilizați Color Sampler

Elementor: Cum să utilizați Color Sampler

Doriți să utilizați Color Sampler în Elementor?

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.

Descopera: Cum se instalează Elementor pe WordPress

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.

Citiți și: Cum se folosește selectorul de culori în Elementor

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.

Cum se utilizează Color Sampler în Elementor

Î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.

Cum se utilizează Color Sampler în Elementor

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.

Cum se utilizează Color Sampler în Elementor

Și iată-l, ai creat o schemă de culori perfectă, care se potrivește perfect cu imaginea ta.

Obțineți Elementor Pro acum!

Concluzie

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.

Cu toate acestea, puteți consulta și resursele noastre, 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 sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...

Elementor Cloud: Cum să construiți un site web în 3 minute

Elementor Cloud: Cum să construiți un site web în 3 minute

Î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 Elementor pentru 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.

Dar înainte să vă invităm să descoperiți Cum se instalează Elementor pe WordPress sau Cum se instalează (se adaugă) un plugin pe WordPress

Creați un site web WordPress cu Elementor

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.

creați un site web cu 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.

creați un site web cu Elementor

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

Crearea contului Elementor cloud

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.

creați un blog WordPress cu Elementor

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

creați un blog WordPress cu Elementor

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 →

creați un blog WordPress cu Elementor

Î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.

Cu aceste tutoriale, veți putea să vă îmbunătățiți site-ul și să profitați la maximum de el.

Obțineți Elementor Pro acum!

Concluzie

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.

Cu toate acestea, puteți consulta și resursele noastre, 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 sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...

Elementor: Cum să adăugați un efect de sunet pentru buton

Elementor: Cum să adăugați un efect de sunet pentru buton

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.

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.

efect de sunet al butonului pe Elementor

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.

efect de sunet al butonului pe Elementor

Pasul 3: Adăugați următorul cod HTML

Pentru a produce sunet de la buton, trebuie să folosim următorul cod HTML.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  //Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends
});
</script>

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.

efect de sunet al butonului pe Elementor

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.

efect de sunet al butonului pe Elementor

Ș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.

efect de sunet al butonului pe Elementor

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.

Vezi și: Elementor: Cum să creați o carte de efect dintr-un portofoliu

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.

efect de sunet al butonului pe Elementor

Înlocuiți numele clasei CSS al butonului

efect de sunet al butonului pe Elementor

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.

Citiți și: Elementor: Cum să migrați un site web WordPress

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.

Obțineți Elementor Pro acum!

Concluzie

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.

Cu toate acestea, puteți consulta și resursele noastre, 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 sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...