Divi: Tema më e mirë e WordPress të të gjitha kohërave!

më shumë Shkarkimet e 901.000, Divi është tema më e popullarizuar e WordPress në botë. Është i plotë, i lehtë për t'u përdorur dhe vjen me më shumë se shabllona falas 62.

Duhet të zbuloni se si të shtoni një efekt tingulli të butonit në Elementor? Zbuloni në këtë artikull.

I shihni këto 2 butona?

Kur klikoni në E maces, do të bëjë një mjaullimë dhe kur të klikoni butonin në chien, do të prodhojë një tingull lehjeje. Në këtë artikull, ne do t'ju tregojmë se si të shtoni Elementor një efekt zanor në butonin kur klikohet.

Si të shtoni efekt zanor te butoni në Elementor

Hapi 1: Krijoni një buton

Së pari, duhet të krijoni butonin, mund ta personalizoni butonin sipas dëshirës, ​​sepse Elementor ka shumë opsione për ta bërë butonin tuaj të duket bukur.

Pasi butoni të jetë gati, tani përgatitni efektin zanor për butonin dhe ngarkoni atë në bibliotekën e mediave të WordPress. Mund të përdorni formatin e skedarit MP3 ose WAV për efekt zanor.

Për të ngarkuar skedarin e zërit në bibliotekën e mediave të WordPress, lundroni në panelin e kontrollit të WordPress dhe klikoni Media -> Shto. Mund të tërhiqni dhe lëshoni skedarët ose të klikoni Zgjidhni skedarët për t'i ngarkuar ato.

efekti i zërit të butonit në Elementor

Pasi të shkarkohen skedarët, shkoni te biblioteka e mediave dhe klikoni në një nga tingujt, më pas në dritaren që shfaqet, kopjoni URL-ja e skedarit për të marrë lidhjen për efektin e zërit.

efekti i zërit të butonit në Elementor

Hapi 3: Shtoni kodin e mëposhtëm HTML

Për të prodhuar zë nga butoni, duhet të përdorim kodin e mëposhtëm 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>

Shtoni një miniaplikacion HTML në zonën e kanavacës dhe ngjisni kodin në bllok Kodi HTML.

Krijoni me lehtësi faqen tuaj të internetit me Elementor

Elementor ju lejon të krijoni Lehtë dhe Falas çdo dizajn uebsajti apo blogu me pamje profesionale. Mos paguani shumë për një faqe interneti që mund ta bëni vetë.

Përdorni lidhjen tuaj të efektit zanor për ta zëvendësuar Sound-Efekt-URL në deklaratë

var audio1 = new Audio('Sound-Effect-URL')

Zgjidhni klasat CSS për butonin dhe modifikoni kodin e klasës CSS të butonit

$(".button-class").mousedown

Pas modifikimit të kodit, do të duket kështu.

efekti i zërit të butonit në Elementor

Hapi 4: Shtoni një klasë CSS në butonin

Për të lidhur butonin me kodet, duhet të shtojmë klasa CSS në buton, në mënyrë që kodi të dijë se cili buton klikohet dhe të aktivizojë efektet zanore.

efekti i zërit të butonit në Elementor

Dhe kjo është për një buton me një efekt zanor. Tani mund të personalizoni butonin tuaj. Dhe nëse doni të shtoni më shumë butona me efekte zanore, është e mundur duke kopjuar një pjesë të kodit dhe duke e modifikuar pak.

U shtuan butona shtesë me efekte zanore

Krijoni butonin ose kopjoni butonin ekzistues

Ju mund të kopjoni butonin ekzistues duke klikuar me të djathtën mbi butonin ekzistues dhe duke zgjedhur "Kopjo", më pas ngjisni atë në çdo seksion duke klikuar me të djathtën brenda atij seksioni.

efekti i zërit të butonit në Elementor

Kopjoni një pjesë të kodit dhe rregulloni variablat dhe emrin e klasës CSS të butonit të dytë

Le të kopjojmë disa pjesë të kodit të mëparshëm HTML që shkaktojnë efektin e zërit, është kodi i mëposhtëm më poshtë

//Audio 1 Starts
  var audio1 = new Audio('Sound-Effect-URL')
  $(".button-class").mousedown(function() {
    audio1.load();
    audio1.play();
  });
  //Audio 1 Ends

Pasi të kopjoni kodin, ngjisni atë pak më poshtë nga Audio 1 Përfundon. Modifiko variablin audio1 dhe të gjithë kodin që përdor variablin audio1 në kodin e krijuar rishtazi në audio2.

Shih gjithashtu: Elementor: Si të krijoni një kartë efekti nga një portofol

Më pas zëvendësoni url-në e efektit zanor nëse po përdorni një efekt të ri zanor për butonin e ri dhe ndryshoni kodin klasa e butonave në klasat CSS të butonave të sapo krijuar.

Kodi përfundimtar do të duket si imazhi i mëposhtëm.

efekti i zërit të butonit në Elementor

Zëvendësoni emrin e butonit të klasës CSS

efekti i zërit të butonit në Elementor

Butoni juaj i krijuar rishtazi do të ketë gjithashtu një efekt zëri kur klikohet. Mund të krijoni sa të doni.

Elementet audio janë ndër shtesat e shkëlqyera në një faqe interneti. Ato jo vetëm që ofrojnë një element tërheqës për faqet e internetit, por gjithashtu ndihmojnë në krijimin e një përshtypjeje të qëndrueshme për përdoruesit përfundimtarë.

Lexo gjithashtu: Elementor: Si të migroni një uebfaqe të WordPress

Megjithatë, veprimi ose rezultati duhet të shoqërohet me zë vetëm nëse ai përforcon ose sqaron ndjeshëm një mesazh të rëndësishëm për përdoruesin. Informimi i përdoruesit për diçka që ka nevojë për vëmendjen e tyre, në mënyrë që të mos japë një ndikim negativ në faqen tuaj të internetit.

Merrni Elementor Pro Tani!

përfundim

Kështu që ! Kjo është ajo për këtë artikull që ju tregon se si të shtoni efektin e zërit të butonit në Elementor. Nëse keni ndonjë shqetësim se si të arrini atje, na tregoni brenda komente.

Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...

0 aksionet
pjesë
cicërimë
Regjistrohem