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

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

Muneeb ورڈپریس سبق May 1, 2021

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

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

آپ کو ربن کیوں استعمال کرنا چاہئے؟

جب آپ اعلان کر رہے ہوں تو ربن فوری طور پر اپنے ملاقاتی کو راغب کرنے کا ایک بہترین طریقہ ہے۔ مثال کے طور پر، آپ نے ایک مخصوص مصنوعات پر رعایت کا اعلان کیا ہے اور پھر آپ اس مصنوعات کے تھمبنیل پر ڈسکاؤنٹ ربن لگاتے ہیں، یہ فوری طور پر صارف کو مصنوعات پر کلک کرنے کے لئے مل جائے گا۔

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

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

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

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

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

عمل شروع کرنے کے لئے، آپ کو ایک اندرونی سیکشن شامل کرنے کی ضرورت ہے جہاں ہم وجیٹس شامل کریں گے۔

اس کے بعد، آپ کو سیکشن میں کالم گھسیٹنے کی ضرورت ہوگی۔ اس ٹیوٹوریل کے لئے، ہم ایک کالم کا ڈھانچہ استعمال کریں گے۔

ایک بار جب آپ اوپر کی ترتیبات کے ساتھ مکمل کر لیں، تو آپ آگے بڑھ سکتے ہیں اور اپنے ربن کے لئے ایک عنوان بنا سکتے ہیں۔

اگلے مرحلے کے لئے، ایڈوانس ٹیب میں سی ایس ایس کلاسوں میں آگے بڑھیں اور میدان میں "جی سی ربن طرز" شامل کریں۔

اس کے نیچے آپ کو درج ذیل کسٹم سی ایس ایس شامل کرنے کی ضرورت ہوگی۔

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

تم تقریبا مکمل کر چکے ہیں. اسے شائع کریں اور اپنی ویب سائٹ چیک کریں کہ یہ کیسے کام کرتی ہے۔

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

Share Your Thoughts