Elementor: Si të shtoni një efekt zanor të butonit

Duhet të kuptoni se si të shtoni efektin e zërit të butonit Elementor ? Gjeni 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 ju duhet të krijoni butonin, ju mund ta personalizoni butonin ashtu siç dëshironi, sepse Elementor ka shumë opsione për ta bërë butonin tuaj të bukur.

Hapi 2: Përgatitni lidhjen e efektit të zërit

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.

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.

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.

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.

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.

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.

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.

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

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 më të mëdha të a Site Web. 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 përforcon ose sqaron ndjeshëm një mesazh të rëndësishëm për përdoruesin. Informoni përdoruesin për diçka që ka nevojë për vëmendjen e tij, në mënyrë që të mos ketë një ndikim negativ në tuaj Site Web në vend të kësaj.

Merrni Elementor Pro Tani!

Përfundim

Kështu që ! Kjo është e gjitha për këtë artikull që ju tregon se si të shtoni efektin e zërit të butonit 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.

...