ورڈپریس کی انسٹالیشن اور بیسک سمجھنے کے بعد ہم نے اس میں آگے بڑھنا ہے اور ایک زبردست چیز ایلیمنٹر سیکھنا ہے۔ لیکن اس سے پہلے ہم shopify اور wordpress کے فائدے اور نقصان دیکھ لیتے ہیں تاکہ ہمیں پتہ چل سکے کہ دونوں میں سے بہتر یا ہمارے معیار پر پورا اترنے والا پلیٹ فارم کونسا ہے🤔۔
Table of Contents
Shopify vs WordPress
پہلے shopify کو دیکھیں تو اس کو manage کرنا آسان ہے۔ اس کے مقابلے میں ورڈ پریس پر ہمیں woocommerce استعمال کرنا ہوتا ہے۔ جو ان شاء اللہ ہم آگے چل کر سیکھیں گے۔ اس کی management ذرا مشکل ہے۔اس کے علاوہ shopify میں ہمیں application updates کی فکر نہیں ہوتی جب کہ ورڈ پریس میں اس کی فکر رہتی ہے😐۔
Reliability & Cost
اسی طرح shopify ایک reliable پلیٹ فارم ہے جو بریک نہیں ہوتا جب کہ ورڈ پریس میں اس کا خطرہ ہوتا ہے۔ مالی لحاظ سے دیکھا جائے تو shopify کی cost ذیادہ ہے💴 اور ورڈ پریس سستا ہے۔ Shopify کے تھیم بھی ذرا مہنگے جبکہ wordpress کے سستے ہوتے ہیں۔
Functions
ای کامرس کی بات کریں تو woocommerce میں ہمیں بہت ذیادہ plugin ایڈ کرنے پڑتے ہیں ۔ ہر فنکشن کا الگ سے plugin ہوتا ہے جیسے invoice اگر generate کرنی ہو یا پھر customer management کو دیکھ لیں اور اسی طرح payment option کی بھی بات کی جا سکتی ہے۔ جبکہ shopify میں یہ سب آسان انداز میں fingertips ✋پہ ہوتا ہے۔
Best for Bigger business
آسانی کے لئے جتنی بڑی کمپنیز ہیں وہ ورڈپریس کی بجائے shopify کو prefer کرتی ہیں۔ اسی طرح ہمیں بھی shopify کو ترجیح دینی چاہئے لیکن اگر بجٹ کا مسئلہ ہو یا client کو کام کر کے دینا پڑے تو ورڈ پریس پہ بھی کام کرنا آنا چاہئے😊۔
What is elementor
اب آتے ہیں واپس اپنے اصل ٹاپک کی طرف جو کہ elementor ہے ۔ یہ بنیادی طور پر ورڈ پریس سائٹ پر بآسانی مختلف سیکشن سے مزین خوبصورت ویب پیج بنانے کے لئے استعمال ہوتا ہے😇۔ اس کے ذریعے سے کسی بھی ویب سائٹ کا ڈیزائن بھی کاپی کر کے ہوبہو بنایا جا سکتا ہے۔
First install theme
اسے استعمال کرنے سے پہلے ہم اپنی کوئی اچھی سی تھیم choose کر لیں گے۔ اس کے لئے appearance میں جا کر تھیم میں جانا ہے اور add new سے کوئی سی اچھی فری تھیم جیسے twenty twentyانسٹال کر لینی ہے👍۔
Install Elementor Plugin
اب elementor کی طرف آتے ہیں۔ یہ بنیادی طور پر ایک plugin ہوتا ہے۔ اس کو انسٹال کرنا ہوتا ہے اس کے لئے پلگ ان پر جائیں اور add new پر کلک کریں۔ جہاں elementor سرچ کرنے پر ہمیں Elementor Website Builder کے نام سے یہ ملے گا جسے ہم انسٹال کر سکتے ہیں😎۔
Activation
انسٹال کے بعد اسے activate کریں گے تو یہ قابل استعمال ہو جائے گا۔ اس کی مثال ایسے ہی ہے جیسے ہم نے Shopify میں pagefly page builder سیکھا ہے۔ جس سے ہم اپنی ویب سائٹ کا خوبصورت پیج بآسانی بنا سکتے ہیں۔اس کے دو ورژن ہیں ایک فری اور دوسرا پریمئم۔ پریمئم کے لئے بھی پہلے فری ورژن ہونا ضروری ہے۔ فری میں فنکشن کچھ کم ہوتے ہیں لیکن اس سے بھی کام چلایا بلکہ دوڑایا جا سکتا ہے🏃 اور بہترین پیج بن سکتے ہیں۔
Key Steps to follow
اسے ایکٹویٹ کرنے کے بعد ہم نے پیج پر جانا ہے اور add new کرنا ہے۔ پہلے ٹائٹل ایڈ کرنا ہے۔ یا اس کے بغیر بھی ہمارے سامنے edit with elementor آرہا ہوگا اس پر کلک کرنے سے ہمارے سامنے elementorکا پیج بلڈر آجائے گا📃۔
Elements of Elementor
اس میں ایک طرف ہمیں ہمارا پیج نظر آتا ہے اور دوسری طرف مختلف elements ہوتےہیں جن کو استعمال کر کے ہم یہ پیج ڈیزائن کرتے ہیں۔ سب سے پہلے ہم پیج کو full width کرتے ہیں اس کے لئے ہم سیٹنگ میں جائیں گے جو کہ gear button کی شکل میں ہوگی⚙۔
Drag & Drop function
اس کے بعد page layout میں elementor full width کریں گے تو یہ ہو جائے گا۔ اس کے بعد تمام elements کو ہم drag and drop کے ذریعے سے استعمال کرتے ہیں🖱۔ یعنی اٹھایا اور پیج پر لگا دیا۔ جیسے ہم image کو کر سکتے ہیں اور اس کو پھر کنٹرول بھی کیا جا سکتا ہے جیسے ہم اس کی width 1920 اور height 420 رکھ سکتے ہیں۔کوئی بھی element add کرنے پر ہمارے پاس مندرجہ ذیل تین tabs آئیں گی۔
Content
سب سے پہلے content کی مدد سے ہم جو امیج چاہیں اسےlink یا میڈیا لائبریری سے upload کر کے استعمال کر سکتے ہیں📎۔ اسی طرح imageکی alignment بھی تبدیل کر سکتے ہیں اور اس کو کسی بھی لوکیشن سے لنک بھی کر سکتے ہیں تاکہ کلک ہو تو یوزر وہاں پہنچ جائے۔
Style
ہم style سے امیج کی لمبائی چوڑائی تبدیل کر سکتے ہیں۔ opacity بھی تبدیل ہو سکتی ہے اور بارڈر بھی ایڈ ہو سکتا ہے radius سے sides curve ہو جائیں گی۔chain کو disconnect کرنے سے ہر سائیڈ الگ سے manage کی جا سکتی ہے۔اسی طرح امیج نارمل میں کیسے دکھائی دی اور ماؤس لے جانے پر کیا effect آئے جسے hover کہتے ہیں تو وہ سیٹنگ بھی ادھر ہوتی ہے۔اسی طرح transition اور animation بھی سیٹ کی جا سکتی ہے جو کہ normally ہم بٹن پرapply کرتے ہیں🤗۔
Advance
اب ایڈوانس ٹیب کی بات ہو تو یہاں margin اور padding سیٹ کی جا سکتی ہے۔ motion effects میں جیسے ہی entrance ہو تو کیسے effectنظر آئیں🖼 سیٹ کئے جا سکتے ہیں۔ اسی طرح بیک گراؤنڈ سے اس سیکشن کا پس منظر تبدیل ہو سکتا ہے۔
Responsiveness
یہاں responsiveness بھی ہے جہاں سے اگر ہم موبائل پر کچھ hide کرنا چاہ رہے ہوں یا اس سے متعلقہ سیٹنگس درکار ہوں تو یہاں کی جا سکتی ہیں📱۔موبائل اور Desktop view اگر ہم دیکھنا چاہیں تو وہ بھی ٹاپ سے دیکھ سکتے ہیں۔
Section Setting
یہ تو اس element کی سیٹنگ ہم نے دیکھیں لیکن اگر ہم سیکشن کی سیٹنگ کرنا چاہیں تو اس سیکشن کے اوپر نظر آنے والے سینٹر بٹن پر کلک کر نے سے ہم اسے اپنی مرضی کے مطابق ڈھال سکتے ہیں اور full width بھی کر سکتے ہیں۔اسی طرح سیکشن کا بیک گراؤنڈ بھی اپنی پسندکا لگا سکتے ہیں جیسے ویڈیو📻، gradient، سلائیڈ شو وغیرہ۔
Making New Section
اسی طرح element پر + پر کلک کرنے سے ایک نیا سیکشن بن جاتا ہے جس کو جتنے حصوں میں ہم تقسیم کرنا چاہیں کر سکتے ہیں۔ جیسے ہم ایک سٹرکچر بنانا چاہتے ہیں مثال کے طور پر پہلے امیج اس کے نیچے نام پھر پیراگراف اور آخر میں بٹن آئے گا۔اس کے لئے elementor میں پہلے امیج ڈریگ کر کے ڈال دینا ہے اس کے بعد name کی ہیڈنگ ڈریگ کر کے اس کے نیچے لگا دینی ہے۔ اس کا فونٹ سائز اور کلر 🎨 ہم تبدیل کر سکتے ہیں۔جس کا بہترین طریقہ style سے اسے بدلنا ہے۔اس کے بعد پیراگراف ہم text editor سے ڈال لیں گے۔ آخر میں ہم بٹن ایڈ کر لیں گے۔ اور اس کی سیٹنگ بھی اپنی مرضی سے کر لیں گے۔
Copy Style of a section
اسی طرح اگر ہم ایک چیز کا سٹائل دوسرے element پر لگانا چاہتے ہیں تو اس پہ right click کر کے کاپی اور پھر جس پر apply کرنا ہو اس پر پیسٹ کرنے سے یہ ہو جائے گا۔ یا دوسرا طریقہ یہ ہے کہ اس element کے top left پر ایک آئیکن ہوگا اس پر کلک کر کے اسے duplicate کر لیں۔اسی طرح ہم سوشل آئیکن بھی ایڈ کر سکتے ہیں📱۔ یونہی مارجن کم کرنے کے لئے ہم negative value کے ذریعے سے بھی ایسا کر سکتے ہیں جو کہ advanced میں مارجن کے ذریعے سے ایسا ہو سکتا ہے۔ اسی طرح نیچے testimonial سیکشن بھی ایڈ ہو سکتا ہے۔
Mistakes & using of template
یاد رہے اگر کچھ غلطی ہو جائے😣 تو ctrl+z سے ہم واپس جا سکتے ہیں جیسے ہم ایم ایس ورڈ میں کرتے ہیں۔ پریکٹس کے لئے ہم elementor page template سرچ کرکے ویسے پیچ بنا کر یہ کام کر سکتے ہیں۔