Divi اور Divi بلڈر کا استعمال کرتے ہوئے خوبصورت ورڈپریس ویب سائٹس کی تعمیر

ڈوی پر ویڈیو چلاتے ہوئے کال ٹو ایکشن بٹن کیسے دکھائیں

Rifat Divi سبق Jun 8, 2021

ویڈیو ایک طاقتور ٹول ہے ، اور یہ ممکنہ ناظرین کو ضروری معلومات فراہم کرتا ہے۔ ایک سروے کے مطابق ، 94 فیصد مارکیٹرز کا کہنا ہے کہ ویڈیو مارکیٹنگ ان کے کاروبار میں کامیابی کی ایک کلید ہے۔ اگر ویڈیو دیکھتے ہوئے "کال ٹو ایکشن" سسٹم کو برقرار رکھا جاسکتا ہے تو ، اس کی پہنچ اور فروخت دونوں کے امکانات کئی گنا بڑھ سکتے ہیں۔ آج کے Divi سبق میں ، ہم دیکھیں گے کہ کسی HTML وقت پر مخصوص وقت پر CTA کا بٹن کیسے ترتیب دیا جائے۔ واقعتا، ، ویڈیو میں ایک سی ٹی اے بٹن ایک زبردست مارکیٹنگ ٹول ہے جس کا مقصد ہر مواد کے معنی خیز بنانا ہے۔

آو شروع کریں.

پیش نظارہ

آئیے یہ دیکھنے کے لئے کہ ہمارے آج کے ڈیزائن کی طرح دکھائی دیتے ہیں کچھ سیکنڈ خرچ کرتے ہیں۔

ویڈیو چلاتے وقت ایک پاپ اپ بٹن بنائیں

پریمیڈ لینڈنگ پیج اپ لوڈ کریں

ہم اپنے آج کے ٹیوٹوریل کا آغاز "ساکر کلب لینڈنگ پیج" کے نام سے پہلے سے تیار لینڈنگ پیج لے آؤٹ کا استعمال کرکے کریں گے۔ یہ "سوکر کلب" لے آؤٹ پیک کی ایک آئٹم ہے

Divi ڈاؤن لوڈ، اتارنا بہترین ورڈپریس تھیم

دنیا میں سب سے زیادہ مقبول ورڈپریس تھیم اور حتمی ورڈپریس پیج بلڈر

Divi ڈاؤن لوڈ، اتارنا

"پری میڈ ڈیزائن منتخب کریں" سے شروع کریں اور لے آؤٹ کو فعال کریں۔

ویڈیو کو اپ ڈیٹ کرنا

اپنی پسند کی ویڈیو شامل کریں۔ آپ ایم پی 4 / ایم کے وی / ویب فارمٹ میں ویڈیو اپ لوڈ کرسکتے ہیں۔

اب ، ایڈوانسڈ ٹیب سے ، ویڈیو کو ایک CSS ID دیں۔

  • سی ایس ایس ID: ڈویوی ویڈیو کنٹینر

بٹن کی اعلی ترتیبات

ٹرانسفارم سیکشن میں اوپری بٹن اور تبدیلی کی قیمت کے ل settings سیٹنگیں کھولیں۔

  • ترجمہ کریں Y محور: 100٪

نیز ، اس بٹن میں سی ایس ایس کلاس شامل کریں۔

  • سی ایس ایس کلاس: تقسیم - تاخیر سے بٹن -1

نیچے والے بٹن کی ترتیبات

نیچے والے بٹن کے لئے ترتیبات کو تبدیل کرنے کا وقت

  • Y - محور کا ترجمہ کریں: -100٪

نیز اس نچلے بٹن میں سی ایس ایس کلاس بھی شامل کریں۔

  • سی ایس ایس کلاس: تقسیم - تاخیر سے بٹن -2

اب ، ان بٹنوں میں امپورٹڈ ٹیمپلیٹ سے حرکت پذیری ہے۔ ہمیں حرکت پذیری کی ضرورت نہیں ہے۔ لہذا ، ہم متحرک طرز کو کسی سے بھی متعین نہیں کریں گے۔

  • حرکت پذیری کا انداز: کوئی نہیں

ڈیزائن میں کوڈ شامل کریں

کوڈ ماڈیول شامل کرنا

ہمارے آج کے سبق کے آخری حصے پر ، ہم اپنی ترتیب میں کوڈنگ شامل کریں گے۔ اس کے لئے نیچے والے بٹن کے نیچے کوڈ ماڈیول شامل کریں۔

سی ایس ایس کوڈ شامل کریں

کوڈنگ ماڈیول میں درج ذیل CSS کوڈ شامل کریں۔ ان کو اسٹائل ٹیگ کے اندر رکھنا یقینی بنائیں۔

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

JQuery کوڈ شامل کریں

اب CSS کوڈ کے نیچے درج ذیل JQuery کوڈ شامل کریں۔ اسکرپٹ ٹیگ کے اندر رکھنا یقینی بنائیں۔

(function ($) {
  $(document).ready(function () {
    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");
 
    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }
 
      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });
  });
})(jQuery);

اور ہم اپنے ڈیزائن کے ساتھ کر رہے ہیں۔

حتمی نظارہ

ہمارا آخری ڈیزائن یہ ہے۔

نتیجہ اخذ کرنا

آج کل کے ڈیزائن کی طرح نئی مارکیٹنگ کی حکمت عملی تیار کرنے کی بات آتی ہے۔ سی ٹی اے (پاپ اپ ایکشن بٹن) کسی بھی خدمت کے ل very بہت مفید ہے ، اور ہم امید کرتے ہیں کہ آپ اس طرح ایک آسان طریقہ استعمال کرکے بالٹی میں مزید منافع بخشیں گے۔ اگر آپ آج کا سبق پسند کرتے ہیں تو ، ایک حصہ بقایا ہوگا!