ڈوی بلڈر کے ساتھ امیجز پر ایک خاکہ کیسے بنائیں

Blair2004 ورڈپریس سبق Jan 10, 2021

آپ کے زائرین کو اضافی معلومات دکھا کر زائرین کو شامل کرنے کے ل Image تصویری احاطہ ایک بہت عمدہ طریقہ ہے۔ عام طور پر ، ایسا ہوتا ہے جب ماؤس کسی عنصر یا شبیہ پر ہوور کرتا ہے۔ چونکہ یہ کافی مشہور ہے ، آپ نے پہلے ہی بہت سے ورڈپریس پلگ ان کو نوٹ کیا ہوگا جو اس کو حاصل کرنے میں آپ کی مدد کرتے ہیں۔ اگر آپ کو میری طرح ڈوی سے پیار ہے ، آپ کو تعجب ہوگا کہ اس کو Divi کے ساتھ کیسے کریں؟ آج ہم اسی کو احاطہ کرنے جارہے ہیں۔

اس ٹیوٹوریل میں ، ہم آپ کو یہ دیکھنے کے لئے جارہے ہیں کہ کس طرح ڈوی بلڈر میں کسٹم تصویری اوورلیوں کو ڈیزائن کیا جا over۔ جب یہ ماؤس ان کے اوپر چلے گا تو عناصر ٹوگل اور انکشاف کریں گے۔ جو چیز آپ کو دلچسپ نظر آسکتی ہے وہ یہ ہے کہ آپ صرف ڈویی بلٹ ان آپشنز کا استعمال کرکے ڈیزائن پر زیادہ بہتر کنٹرول حاصل کرسکتے ہیں۔ ہم کچھ سی ایس ایس کوڈ کا استعمال کرتے ہوئے ختم کرسکتے ہیں ، جس سے چیزیں مزید بہتر نظر آئیں گی۔

متوقع نتیجہ

یہاں ایک سرسری نظر ہے کہ آپ کو اس سبق کے اختتام تک کیا مل سکتا ہے۔

شروع کرنے سے پہلے مطلوبہ اجزاء

سبق میں کودنے سے پہلے ، آپ کو کچھ ضروریات کو پورا کرنے کی ضرورت ہے کیونکہ انہیں اس سبق کو دوبارہ پیش کرنے کے قابل ہونے کی ضرورت ہے۔ لہذا آپ کو ضرورت ہوگی:

  • Divi نصب اور فعال کریں
  • ورڈپریس میں ایک نیا صفحہ بنائیں اور فرنٹ اینڈ پر ڈیووی بلڈر کا استعمال کریں
  • "سکریچ سے تعمیر کریں" کا اختیار منتخب کریں۔

اگر اس کے بعد آپ کے پاس خالی صفحہ ہے تو ، آپ جانے کے لئے تیار ہیں۔

ڈوی میں اپنی مرضی کے امیج اوورلیز بنانا

سیکشن ، قطار اور کالم کی تعمیر

ہم پہلے سے طے شدہ حصے کے اندر تین کالم کی قطار منتخب کرکے شروع کریں گے۔

حصے کی ترتیبات کھولیں اور درج ذیل پس منظر کا رنگ استعمال کریں۔

  • پس منظر کا رنگ: # 3a0ca3

اگلا ، کالم 1 کی ترتیبات میں جائیں اور درج ذیل آپشنز کو تبدیل کریں۔

  • سی ایس ایس کلاس: ET - اتپرواہ کنٹینر
  • افقی اتپرواہ: پوشیدہ
  • عمودی بہاؤ: پوشیدہ

ہم تیار کرنے والے اوورلے آئٹمز کے ہوور اثرات کو متحرک کرنے کے لئے سی ایس ایس کلاس کی ضرورت ہے۔ چھپی ہوئی اوور فلو کی ضرورت ہے کیونکہ ہمارے پاس ہور کا اثر ہوگا جو کالم کنٹینر سے آگے کی تصویر کو ترازو کرتا ہے۔

تصویر شامل کرنا

اب جب سیکشن ، قطار اور کالم تیار ہیں ، آگے بڑھیں اور کالم 1 میں ایک نیا امیج ماڈیول شامل کریں۔ یہ ہمارے اوورلی ڈیزائنوں کے پیچھے مرکزی تصویر ہوگی۔

ایسی تصویر اپ لوڈ کریں جو پورٹریٹ میں ہے۔ میں ایک استعمال کر رہا ہوں جو 1920px تک 1280px ہے۔ اس بات کو یقینی بنائیں کہ براؤزر کے تمام سائز پر کالم کی پوری چوڑائی پھیلانے کے ل it اس کی وسعت کافی ہے۔

ڈیزائن ٹیب سے ، درج ذیل کو تبدیل کریں:

  • حاشیہ: 0px نیچے

اعلی درجے کی ٹیب کے اندر ، درج ذیل سی ایس ایس کلاس شامل کریں:

  • سی ایس ایس کلاس: ET-overlay-image

ڈیویڈر ماڈیول کا استعمال کرتے ہوئے تصویری اوورلی رنگ منتخب کرنا

شبیہہ کو پوشیدہ رنگ بنانے کے ل we ، ہم ایک ڈیوائڈر ماڈیول استعمال کرنے جارہے ہیں۔ خیال یہ ہے کہ شبیہ پر پورے طور پر فٹ ہونے کے ل full ، کالم کا احاطہ کرتے ہوئے پوری اونچائی اور چوڑائی میں تقسیم کرنے والے کی وضاحت کرکے تصویر پر ایک سرورق بنائیں۔ ایک بار سیٹ ہوجانے کے بعد ، آپ جتنا چاہتے ہو اتنے رنگ کے حصول کے ل the تقسیم کار ماڈیول کا پس منظر کا رنگ ایڈجسٹ کرسکتے ہیں۔

تو آئیے پہلے شبیہ کے نیچے ایک ڈیویڈر ماڈیول شامل کریں۔

اس کے بعد تقسیم کو مطلق کی حیثیت سے رکھو تاکہ یہ شبیہ کے اوپری حصے میں نمودار ہو۔

  • پوزیشن: مطلق

مشمولات کے ٹیب میں ، درج ذیل کو اپ ڈیٹ کریں:

  • ڈیوائڈر دکھائیں: نہیں
  • پس منظر کا رنگ: rgba (247،37،133،0.8)

پھر تقسیم کنندہ کی اونچائی اور چوڑائی کو تبدیل کریں:

  • چوڑائی: 100٪
  • اونچائی: 100

ایک بار جب ڈیزائن کی وضاحت ہوجائے تو ، تقسیم کنندہ میں درج ذیل سی ایس ایس کلاس شامل کریں:

  • ET-overlay- آئٹم

انتباہ: اس طبقے کو تمام اوورلی ڈیزائن ڈیزائنوں میں شامل کرنا چاہئے جو آپ صرف ہوور پر دکھانا چاہتے ہیں۔ اگر آپ نہیں چاہتے ہیں کہ عنصر کو ابتدائی طور پر پوشیدہ رکھا جائے تو اسے استعمال نہ کریں۔

اختیاری طور پر آپ کو واضح طور پر قابل شناخت نام کے ساتھ تقسیم کنارے کو اوورلے میں تبدیل کرنے کا لیبل لگ سکتا ہے۔ اس کو پرت سے بنایا جاسکتا ہے اور آپ "اوورلی" استعمال کرسکتے ہیں۔

اوورلے ہیڈنگ ٹیکسٹ شامل کرنا

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

H2 عنوان کے ساتھ مواد کو تبدیل کریں:

<h2>Happiness</h2>

آپ بعد میں حوالہ دینے کیلئے ٹیکسٹ ماڈیول کا لیبل بھی تبدیل کرسکتے ہیں۔

ٹیکسٹ ڈیزائن کی ترتیبات کے تحت ، اسے تبدیل کریں:

  • متن کی سیدھ: مرکز
  • متن کا رنگ: ہلکا
  • سرخی 2 فونٹ: پرہیز گارمنڈ
  • سرخی 2 فونٹ وزن: بولڈ
  • سرخی 2 ٹیکسٹ سائز: 40px
  • چوڑائی: 100٪
  • زیادہ سے زیادہ چوڑائی: 85٪

اعلی درجے کی ٹیب کے اندر ، پوزیشن کو حسب ذیل تبدیل کریں:

  • پوزیشن: مطلق
  • مقام: ٹاپ سینٹر
  • عمودی آفسیٹ: 10٪

انتباہ: عمودی آفسیٹ کو شبیہ کے پہلو تناسب کے سائز کے مطابق ایڈجسٹ کرنے کی ضرورت پڑسکتی ہے۔

اس کے بعد ، ٹیکسٹ ماڈیول میں درج ذیل CSS کلاسز شامل کریں:

  • سی ایس ایس کلاس: ET-overlay- آئٹم منتقل

"ET-overlay-item" کلاس کے علاوہ ، ہم ہوور پر سرخی کو نیچے کی طرف تھوڑا سا منتقل کرنے کے لئے کسٹم سی ایس ایس کا استعمال کرنے کے لئے ایک اضافی "اقدام ڈاون" کلاس شامل کررہے ہیں۔

اوورلی باڈی ٹیکسٹ بنانا

اتبشایی متن بنانے کے ل we ، ہم اوورلے ہیڈنگ کے لئے استعمال شدہ ٹیکسٹ ماڈیول کی نقل تیار کرسکتے ہیں۔ ترتیبات کو تبدیل کرنے سے پہلے ، آئیے اس ماڈیول کو ایک مختلف لیبل دیں۔ اس بار ، ہم "اوورلے باڈی" استعمال کریں گے۔

نئے ٹیکسٹ ماڈیول کے لئے ٹیکسٹ سیٹنگیں کھولیں اور پیراگراف ٹیکسٹ کے چند جملے کے ساتھ جسمانی مواد کو اپ ڈیٹ کریں۔

اعلی درجے کی ٹیب کے تحت ، ماڈیول کی مطلق جگہ کو مرکز میں تبدیل کریں۔

چونکہ ہم نہیں چاہتے ہیں کہ یہ ایک ہوور (صرف ظاہر ہوتا ہے) پر چلا جائے ، لہذا سی ایس ایس کلاس کو صرف درج ذیل میں شامل کریں۔

  • سی ایس ایس کلاس: ET-overlay- آئٹم

اوورلے بٹن بنانا

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

ڈیزائن کو اپ ڈیٹ کرنے سے پہلے ، بٹن کی پوزیشن کو حسب ذیل تبدیل کریں:

  • مقام: مطلق
  • عمودی آفسیٹ: 10٪

اب بٹن کو تصویر کے نیچے والے حصے میں مرکوز کرنا چاہئے۔

اعلی درجے کی ٹیب میں رہتے ہوئے ، سی ایس ایس کلاس کو اپ ڈیٹ کریں اور حسب ضرورت سی ایس ایس کا ٹکڑا مین عنصر میں شامل کریں۔

  • سی ایس ایس کلاس: ET-overlay- آئٹم منتقل
  • مین عنصر سی ایس ایس: منٹ کی چوڑائی: 15 ایم

نوٹ کریں کہ یہاں بٹن میں اضافی کلاس شامل کی گئی ہے تاکہ اسے ہوور پر قدرے اوپر کی طرف لے جاسکے۔ یہ ہور پر عبارت کو نیچے کی تحریک کی تکمیل کرے گا۔

پھر مندرجہ ذیل ڈیزائن کی ترتیبات کو اپ ڈیٹ کریں:

  • بٹن سیدھ: مرکز
  • بٹن ٹیکسٹ سائز: 14px
  • بٹن کے پس منظر کا رنگ: # 4361
  • بٹن بارڈر چوڑائی: 0 px
  • بٹن خط وقفہ کاری: 0.1 ایم
  • بٹن فونٹ وزن: بولڈ
  • بٹن فونٹ انداز: ٹی ٹی
  • بھرتی: 0.8 ایم ٹاپ ، 0.8 ایم نیچے ، 0px بائیں ، 0px دائیں

کسٹم کوڈ ماڈیول کی تکمیل

دوسرے ورژن میں جانے سے پہلے آئیے ہوور اثر کو شامل کرنے کے لئے کچھ سی ایس ایس شامل کریں۔ ایسا کرنے کے لئے ، بٹن کے نیچے کوڈ ماڈیول شامل کریں۔

اس کے بعد درج ذیل CSS کوڈ مواد کے اندر چسپاں کریں۔ کوڈ کو ضروری اسکرپٹ ٹیگز میں لپیٹنا مت بھولیں۔

<style>@media all and (min-width: 981px) { .et-fb-root-ancestor .et-overlay-item {opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/}.et-overlay-item {opacity: 0; /*hides overlay items by default*/margin-bottom: 0px;}.et-overlay-item, .et-overlay-image {transition: all 400ms !important; /*sets transition speed of all overlay items*/}.et-overlay-container:hover .et-overlay-item {opacity: 1; /*reveals hidden overlay items on hover*/}.et-overlay-container:hover .et-overlay-image {/*add new styles here to change image on hover*/}.et-overlay-container:hover .et-overlay-image.et-scale {transform: scale(1.2); /*adjust scale of image here*/}.et-overlay-container:hover .et-overlay-image.et-rotate {transform: scale(1.4)rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/}  .et-overlay-container:hover .et-overlay-item.move-up {margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/}.et-overlay-container:hover .et-overlay-item.move-down {margin-top: 10%; /*adjust how far you want the overlay item to move down*/} }</style>

کوڈ میں کچھ تبصرہ کیا گیا ہے تاکہ آپ یہ سمجھ سکیں کہ ضرورت کے مطابق آپ سی ایس ایس کو کہاں ایڈجسٹ کرسکتے ہیں۔

دوسرے حصوں کے لئے کالم کی نقل تیار کرنا

اگرچہ ہمارے پاس کام کرنے کے لئے پہلے ہی دو اضافی خالی کالم موجود ہیں ، لیکن پہلے ہی کالم کے اندر تمام ماڈیولز اور ڈیزائن کو پورے کالم کو نقل کرکے نئے کالم میں منتقل کرنا آسان ہے۔ ایسا کرنے کے ل the ، پرتوں کو موڈل کھولیں ، دو خالی کالموں کو حذف کریں ، اور پھر کالم کو دو بار دو بار نقش بنائیں۔ آپ کو ایک جیسے ڈیزائن کے ساتھ کل تین کالمز رکھنے چاہ.۔

میں آپ کو یہ فیصلہ کرنے دیتا ہوں کہ آپ کالم 2 اور 3 پر کس رنگ کا مجموعہ رکھتے ہیں۔ آئیے یہ نہیں دیکھتے ہیں کہ حتمی نتیجہ کیا ہے۔

حتمی نتائج

اب جبکہ ہمارے تین ڈیزائن مکمل ہیں (امید ہے کہ آپ نے باقی 2 کالموں کے لئے ڈیزائن کو تبدیل کر دیا ہے) ، آئیے اپنے ڈیزائنوں کے حتمی نتائج دیکھیں۔

خلاصہ

تصویری اوورلی بنانا دراصل دو کے ساتھ ممکن ہے۔ ایسے لاتعداد ڈیزائن موجود ہیں جو آپ ڈوی بلڈر کے ساتھ ضعف تخلیق کرسکتے ہیں اور کچھ ہور اثرات کو لاگو کرنے کے لئے یہ اپنی مرضی کے مطابق سی ایس ایس کی تھوڑی سی رقم لیتا ہے۔