Elementor یک افزونه فوق العاده برای صفحه ساز کشیدن و رها کردن است که توسط آن می توانید صفحات ورود سفارشی را در وردپرس درست مانند سرگرمی ایجاد کنید. اگر قبلاً با المنتور آشنایی دارید، عالی است و اگر تازه وارد این افزونه شده اید مشکلی نیست.

در این مقاله راهنمای دقیقی در مورد نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور توضیح داده می شود. قبل از آن، ما یک بحث کوتاه در مورد محدودیت‌های یک صفحه ورود به سیستم پیش‌فرض و اینکه چرا ممکن است ایجاد یک صفحه ورود سفارشی در وردپرس را در نظر بگیرید، پوشش خواهیم داد. بیایید نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور را شروع کنیم!

صفحه ورود سفارشی در وردپرس چیست؟

قبل از آموزش نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور به این می پردازیم که اصلاً یک صفحه ورود سفارشی در وردپرس چیست.  یک صفحه ورود سفارشی در وردپرس با المنتور یک رابط کاربری منحصر به فرد و شخصی است که جایگزین صفحه ورود پیش فرض ارائه شده توسط وردپرس می شود. یک صفحه ورود سفارشی در وردپرس به کاربرانی که سعی می کنند وارد وب سایت وردپرس خود شوند، عناصر جذاب بصری و مارک دارتری را نشان می دهد.

پس ایجاد یک صفحه ورود سفارشی در وردپرس می تواند برای یک کاربر جذاب باشد. با این توضیحاتی که در مورد صفحه ورود سفارشی در وردپرس دادیم اکنون در تصویر زیر به صفحه ورود پیش فرض وردپرس نگاه کنید.

این صفحه ورود سفارشی در وردپرس معمولا شامل یک فرم پیش فرض با فیلدهای نام کاربری و رمز عبور، همراه با لوگوی استاندارد وردپرس است. اگرچه صفحه عملکرد خوبی دارد، اما فاقد گزینه های سفارشی سازی است. در واقع ممکن است با طراحی کلی و برند وب سایت مربوطه مطابقت نداشته باشد.

از سوی دیگر، صفحات ورود سفارشی به صاحبان وب سایت اجازه می دهد تا هویت برند و زیبایی طراحی خود را ارتقا دهند. این انعطاف‌پذیری را برای سفارشی کردن عناصر مختلف مانند رنگ، فونت، لوگو، پس‌زمینه و آیکون‌ها برای منحصربه‌فرد کردن رابط ارائه می‌دهد.

علاوه بر این، با ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور می توانید برخی از ویژگی های امنیتی مانند CAPTCHA را برای جلوگیری از ورود کاربران ربات به سیستم اضافه کنید.

چرا باید از Elementor برای ایجاد یک صفحه ورود سفارشی در وردپرس استفاده کنید؟

یکی از بزرگترین دلایل انتخاب Elementor انعطاف پذیری فوق العاده طراحی آن است که به شما امکان می دهد هر صفحه ای را که می خواهید ایجاد کنید. به علاوه، دارای یک ویجت ورود جداگانه است. هنگامی که ویجت را بکشید و رها کنید، بلافاصله یک رابط ورود به سیستم با فیلدهای مورد نیاز مانند نام کاربری و رمز عبور ایجاد می شود.

پس از آن، می توانید فیلدها را سفارشی کنید، عناصر جدید اضافه کنید، رنگ ها را تغییر دهید و ویژگی های لازم را ارتقا دهید. در زیر لیستی از کارهای دیگری وجود دارد که می توانید با Elementor در صفحه ورود انجام دهید.

• برای ایجاد یک صفحه ورود سفارشی در وردپرس فیلدها را شخصی سازی کنید: نام کاربری، ایمیل و رمز عبور، از جمله برچسب های آنها
• هنگام ایجاد یک صفحه ورود سفارشی در وردپرس دکمه ورود را سفارشی کنید، متن، اندازه، سبک و تراز آن را تغییر دهید.
• برای ایجاد یک صفحه ورود سفارشی در وردپرسصفحه ای را مشخص کنید که کاربران پس از ورود به آن هدایت شوند.
• ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور گزینه فراموشی رمز عبور و به خاطر بسپار را ویرایش کنید.
• ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور صفحه را برای همه دستگاه ها کاملاً واکنش گرا کنید.
• ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور افزونه های مربوطه را در صفحه ادغام کنید.

نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور

Login ویجت ممتاز پلاگین Elementor است. شما باید نسخه پریمیوم افزونه را به همراه نسخه رایگان آن در سایت خود نصب کرده باشید. پس از نصب و فعال سازی افزونه ها، به بخش آموزش  ایجاد یک صفحه ورود سفارشی در وردپرس با المنتوربروید.

مرحله 01: برای ایجاد یک صفحه ورود  سفارشی در وردپرس، صفحه ورود را با Elementor باز کنید.

برای  ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور وارد داشبورد وردپرس خود شوید. پس از پیمایش به صفحات > افزودن جدید Pages > Add New، صفحه جدیدی ایجاد کنید. ما صفحه ای با نام Login ایجاد کرده ایم. پس از آن، دکمه Edit with Elementor را فشار دهید . با این کار صفحه Elementor Canvas باز می شود.

مرحله 02: برای ایجاد یک صفحه ورود سفارشی در وردپرس، ساختار مورد نظر خود را روی بوم Canvas  تعریف کنید.

هنگامی که صفحه با Elementor باز می شود، محتوای غیر ضروری بسیاری از جمله سرصفحه و پاورقی را در صفحه خواهید دید. برای حذف محتوای غیر ضروری، به Settings > Page Layout > Elementor Full Width بروید. با این کار تمام محتوای صفحه به جز هدر و پاورقی حذف می شود.

نماد Plus (+) را در صفحه فشار دهید. این به شما امکان می دهد یک ساختار ستونی مناسب برای صفحه انتخاب کنید. در تصویر زیر می بینید که ما یک ساختار (طرح) تک ستونی را برای بخش انتخاب کرده ایم. ویجت Login را روی آن قرار می دهیم .

مرحله 03: برای ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور با استفاده از ظرف Flexbox یک طرح بندی مناسب ایجاد کنید.

ظرف Flexbox را روی ستون بکشید و رها کنید. ظرف فلکس باکس یکی از ساده ترین راه ها برای ایجاد چیدمان دلخواه با انعطاف پذیری فوق العاده است. حتی می‌توانید ظروف فلکس‌باکس را در یک فلکس‌باکس قرار دهید و یک رابطه والدین و فرزند ایجاد کنید.

این فلکس باکس فعلی ظرف والدین ما خواهد بود. ما چند بلوک دیگر را برای ایجاد یک طرح در آن قرار می دهیم. قبل از آن باید جهت را مشخص کنیم. بخش Container را باز کنید . فلش سمت راست را در کنار گزینه Direction انتخاب کنید .

ویجت Container را بکشید و رها کنید تا جعبه‌های انعطاف‌پذیر بیشتری در ظرف اصلی اضافه کنید. ما سه فلکس باکس را برای ایجاد یک طرح سه ستونی اضافه کرده ایم. می توانید اندازه آنها را به صورت دستی تغییر دهید. مشکلی نیست!

مرحله 04: ویجت ورود را بکشید و رها کنید.

Login را در کادر جستجو در پنل Elementor تایپ کنید. هنگامی که ویجت Login در زیر ظاهر شد، آن را بکشید و در ستون مناسب روی بوم Elementor رها کنید.

اگر احساس می کنید که فرم ورود به هدر و پاورقی خیلی نزدیک است، جای نگرانی نیست. با استفاده از ویجت Spacer می توانید بین آنها فاصله ایجاد کنید .

ویجت Spacer را در flexbox والد اما از سه ستون فرزند که چندی پیش اضافه کردیم، بکشید و رها کنید . به طور مشابه، ویجت Spacer دیگری را به پایین ستون های فرزند اضافه کنید. فضاها به صورت خودکار ایجاد خواهند شد.

مرحله 05: برای ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور فرم ورود را سفارشی و سبک کنید.

با کلیک بر روی نماد مداد در گوشه سمت راست بالای فرم، فرم ورود راLogin form انتخاب کنید. با این کار تب Content، Style و Advanced در پنل Elementor فعال می شود. با استفاده از این برگه ها می توانید عناصر و گزینه های مربوط به فرم ورود را سفارشی کنید.

برگه محتوا را کاوش کنید.

در تب Content گزینه Form Fields را باز کنید. ممکن است تصمیم بگیرید که برچسب های فرم را با toggling on/off روشن یاخاموش کردن گزینه Label  نشان دهید یا مخفی کنید.

اگر می‌خواهید اندازه کادرهای فرم را تغییر دهید، روی نماد کشویی کنار اندازه ورودی  Input Size کلیک کنید. لیست کشویی شامل گزینه های بسیار کوچک، کوچک، متوسط، بزرگ و فوق العاده بزرگ است . Extra Small, Small, Medium, Large و Extra Large.

گزینه Button را باز کنید. گزینه هایی برای سفارشی کردن متن Text، اندازه Size و تراز کردن Alignment دریافت خواهید کرد. گزینه Button Size به شما امکان می دهد بین Extra Small، Small، Medium، Large و Extra Large یکی را انتخاب کنید .

تب Advanced Options را باز کنید. گزینه هایی برای تغییر مسیر صفحات پیدا خواهید کرد. صفحات مورد نظر خود را در کادرهای Redirect After Login و Redirect After Logout کپی کنید. پس از آن، می توانید برچسب ها را تغییر دهید.

تب Style را کاوش کنید.

بعد از آن به تب Style بروید . سپس گزینه Form را گسترش دهید. می توانید با استفاده از Row Gap بین دکمه و کادرها در فرم Login فاصله اضافه کنید.

گزینه Label را باز کنید. می توانید فاصله بین برچسب ها را در فرم سفارشی کنید، از جمله رنگ متن  text color، برچسب label و تایپوگرافی typography.

سپس به بخش Fields بیایید. به شما اجازه داده می شود تایپوگرافی  typography مکان نگهدار، رنگ حاشیه، عرض حاشیه و شعاع حاشیه را سبک کنید. آنها را همانطور که می خواهید سفارشی کنید.

گزینه Button را باز کنید. شما همه گزینه ها را برای سبک سازی دکمه روی فرم دریافت خواهید کرد. می‌توانید تایپوگرافی typography ، رنگ پس‌زمینه background color، افکت شناور hover effect ، شعاع حاشیه border radius، و لایه‌بندی متن text padding آن را تغییر دهید.

به طور مشابه، گزینه Logged in Message و تب Advanced را در پنل Elementor کاوش کنید. کار و زمان زیادی نیاز نخواهد داشت.

مرحله 06: در صورت لزوم محتوای اضافی و سبک سازی اضافه کنید.

اگر از پس زمینه سفید خسته شده اید، می توانید با اعمال هر کد رنگی خاص یا هر تصویری، رنگ آن را تغییر دهید. به نحوه اعمال رنگ پس زمینه نگاهی بیندازید.

با کلیک بر روی نماد شش نقطه در بالا، کل flexbox والد را انتخاب کنید . به تب Style بروید و بخش Background را باز کنید. برای افزودن رنگ پس زمینه، از گزینه کنار رنگ اشاره شده در تصویر زیر استفاده کنید.

از گزینه Image می توانید تصویری را به عنوان پس زمینه به فرم اضافه کنید. Elementor Pro قبلاً مولد تصویر هوش مصنوعی را ادغام کرده است. می توانید از این گزینه برای ایجاد تصویر بر اساس درخواست ها و اضافه کردن آن به عنوان پس زمینه استفاده کنید.

مرحله 07: برای ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور  صفحه ورود را ریسپانسیو کنید.

گزینه Responsive Mode را در پایین پنل Elementor فشار دهید. یک نوار بالای صفحه روی بوم Elementor با گزینه ای برای تغییر صفحه بین اندازه های مختلف صفحه نمایش داده می شود – دسکتاپ، تبلت و تلفن همراه .

بررسی کنید که آیا صفحه شما در همه اندازه‌های صفحه به خوبی کار می‌کند. اگر با هر دستگاه خاصی مشکل دارد، اندازه ارتفاع و عرض کادرها و دکمه، از جمله تایپوگرافی را تغییر دهید. سفارشی‌سازی که برای یک دستگاه خاص در صفحه اعمال می‌کنید منحصراً برای آن حفظ می‌شود.

مرحله 08: صفحه را منتشر و پیش نمایش کنید.

امیدوارم طرح شما آماده باشد. دکمه PUBLISH/UPDATE را در پایین پنل Elementor بزنید.

پیش نمایش صفحه ورود

شما می توانید ببینید که صفحه در انتهای ما به خوبی کار می کند. سعی کنید با استفاده از نام کاربری/آدرس ایمیل و رمز عبور معتبر وارد وبسایت خود شوید.

اما ممکن است در این صفحه با مشکل مواجه شوید. اگر به اشتباه رمز عبور را اشتباه وارد کنید، به صفحه ورود پیش فرض وردپرس هدایت می شوید. از شما خواسته می شود آدرس ایمیل خود را در صفحه پیش فرض برای بازیابی رمز عبور تایپ کنید. ممکن است از آن احساس انزجار کنید.

با این حال، این مشکل نیز راه حلی دارد. مهم نیست که چند بار رمز عبور را اشتباه تایپ کنید، در صفحه سفارشی شده باقی خواهید ماند. برای رفع مشکل باید یک افزونه نصب کنید.

نحوه رفع مشکلات فرم ورود سفارشی در وردپرس

به داشبورد وردپرس بروید. به Plugins > Add New بروید. Frontend Reset Password را در کادر جستجو تایپ کنید . افزونه را نصب و فعال کنید .

به صفحات > افزودن جدید  Pages > Add New بروید. یک صفحه جدید ایجاد کنید. ما Password Reset را به عنوان نام صفحه تنظیم کرده ایم. آن را منتشر Publish کنید . نیازی به اضافه کردن محتوایی به صفحه ندارید.

اکنون به Settings > Frontend Reset Password > Settings بروید. کد کوتاه [reset_password] را که روی تصویر مشخص کرده ایم کپی کنید.

پس از آن، لیست کشویی که در تصویر زیر مشخص شده است را زده و گزینه Password Reset را انتخاب کنید. این گزینه پس از اینکه چندی پیش صفحه بازنشانی رمز عبور را ایجاد کردید در لیست آمده است.

به انتهای صفحه بیایید و دکمه Save Changes را بزنید. اگر نمی‌توانید تغییرات را ذخیره کنید، پیکربندی به‌روزرسانی‌شده کار نخواهد کرد.

کد کوتاه را در صفحه Password Reset قرار دهید و در پایان آن را به روز Update کنید . حالا دوباره به صفحه Login رفته و گزینه Forget/Lost Password را فشار دهید . امیدواریم که صفحه به همین شکل باقی بماند.

سوالات متداول در مورد نحوه ایجاد یک صفحه ورود سفارشی در وردپرس با Elementor

اگرچه این یک پست آموزشی طولانی بوده است، اما امیدواریم که احساس خستگی نکرده باشید. در واقع، پرداختن به موضوعات جامع با کلمات محدود دشوار است. با این حال، اگر هنوز تازه کار هستید، در اینجا یک بخش سؤالات متداول وجود دارد که به برخی از رایج ترین سؤالات آنلاین پاسخ می دهد.

نتیجه گیری

ایجاد یک صفحه ورود سفارشی در وردپرس، در واقع ایجاد یک صفحه ورود ایمن و زیبا برای حفظ یکپارچگی و قابل اعتماد بودن آنلاین بسیار مهم است. اگر یک توسعه دهنده حرفه ای هستید و وب سایت هایی را برای مشتریان توسعه می دهید، ایجاد چنین صفحه ورود به سیستم سفارشی می تواند به شما کمک کند تا در ذهن آنها جذابیت ایجاد کنید. پس از خواندن این آموزش ایجاد یک صفحه ورود سفارشی در وردپرس با المنتور، امیدواریم متوجه شوید که ایجاد یک صفحه ورود سفارشی با Elementor کار دشواری نیست.

اگر این مقاله را دوست داشتید از سایر مقالات ما در سایت آموزش تکنیک های سئو، نحوه ایجاد یک صفحه جدید در وردپرس، نحوه نمایش پست های اخیر در وردپرس، آموزش طراحی سایت با المنتور  دیدن فرمایید.

صفحات وردپرس به یک نوع پست حاوی محتوای ثابت اشاره دارد. این صفحات اطلاعات مربوط به وب سایت هایی را نگه می دارند که کمترین احتمال تغییر را دارند.

انواع مختلفی از صفحات وردپرس وجود دارد. صفحه فرود محصول، صفحه اصلی، صفحه درباره، صفحه تماس، صفحه وبلاگ، صفحه خدمات و غیره. در این آموزش، نحوه ایجاد یک صفحه جدید در وردپرس را به شما نشان خواهیم داد. موارد زیر را نیز خواهید دانست.

• صفحه وردپرس چیست؟
• نحوه اضافه کردن صفحه جدید در وردپرس
• استفاده از بلوک های محتوای گوتنبرگ برای افزودن محتوای صفحه
• چگونه صفحه وردپرس خود را منتشر و زمان بندی کنید.
• نحوه ایجاد یک صفحه سفارشی در وردپرس
• چگونه یک صفحه مجزا برای پست های وبلاگ در وردپرس ایجاد کنیم.

بیایید شروع کنیم:

نحوه ایجاد یک صفحه جدید در وردپرس : صفحه وردپرس چیست؟

نحوه اضافه کردن صفحه جدید در وردپرس

وارد داشبورد وردپرس شوید. به صفحات > افزودن جدید Pages > Add New بروید. پس از کلیک بر روی دکمه افزودن جدید Add New ، صفحه ای در حالت ویرایشگر آن باز می شود.

چند ثانیه طول می کشد تا یک صفحه جدید باز شود. یک رابط مانند تصویر زیر دریافت خواهید کرد. در مرحله بعد، باید با استفاده از تنظیمات و گزینه های مربوطه در صفحه، محتوا را به صفحه اضافه کنید.

نحوه ایجاد یک صفحه جدید در وردپرس: تنظیمات اولیه در صفحه وردپرس

تنظیمات و گزینه های متعددی در ویرایشگر صفحه وردپرس وجود دارد. اگر کاربرد آنها را ندانید، در ایجاد صفحات فوق العاده با محتوای لازم شکست خواهید خورد. اکنون شما را با برخی از تنظیمات رایج آنها آشنا می کنیم تا تصویر واضحی داشته باشید.در تصویر زیر گزینه ها، تنظیمات و عناصر مختلف صفحه وردپرس را مشاهده می کنید که با ارقام عددی مشخص کرده ایم. حال با توجه به آن شکل عددی در بحث های بعدی به اختصار به آنها می پردازیم.

1. عنوان صفحه Page Title: شما باید عنوان صفحه خود را بلافاصله پس از ایجاد صفحه خود بنویسید.
2. انتشار Publish: برای انتشار صفحه خود باید بر روی دکمه انتشار کلیک کنید .
3. ذخیره پیش نویس Save Draft: شما می توانید با کلیک بر روی گزینه ذخیره پیش نویس، صفحه خود را پیش نویس کنید.
4. پیش نمایش Preview: با استفاده از گزینه پیش نمایش می توانید پیش نویس صفحه پیش نویس خود را مشاهده کنید.
5. List View: با کلیک بر روی این گزینه می توانید لیست بلوک های محتوایی که در این صفحه استفاده کرده اید را مشاهده کنید.
6. جزئیات Details: با این تنظیم می توانید محتوای صفحه جزئیات را به صورت کوتاه مانند فهرست مطالب مشاهده کنید.
7. Undo and Redo: همچنین می توانید محتوای صفحه خود را واگرد و دوباره انجام دهید.
8. ابزارها Tools : ابزارها تعاملات مختلفی را برای انتخاب، پیمایش و ویرایش بلوک ها فراهم می کنند. با فشار دادن Escape و Enter بین انتخاب و ویرایش جابه‌جا شوید.
9. Toggle Block Inserter: با استفاده از این نماد (+)، می توانید بلوک های محتوا را در صفحه خود وارد کنید.
10. نماد وردپرس WordPress Icon: اگر می‌خواهید قسمت همه صفحات را دریافت کنید، باید روی این نماد وردپرس کلیک کنید. قبل از بازگشت به همه صفحات، مطمئن شوید که صفحه فعلی خود را ذخیره کرده اید. در غیر این صورت، محتوای شما ذخیره نخواهد شد.

تمام تنظیمات لازم صفحه را در نوار کناری سمت راست پنل ویرایشگر صفحه پیدا خواهید کرد. آنها وضعیت و قابلیت مشاهده، پیوند ثابت، تصویر ویژگی Feature Image، بحث Discussion و ویژگی های صفحه Page Attributes هستند. این گزینه ها را در تصویر زیر مشاهده می کنید. بیایید در بخش‌های زیر بحث مختصری در مورد آنها داشته باشیم .

1. نحوه ایجاد یک صفحه جدید در وردپرس: وضعیت و دید Status & Visibility

در قسمت وضعیت و دید صفحه، می‌توانید وضعیت نمایان بودن صفحه خود را به صورت عمومی Public (قابل مشاهده برای همه عمومی)، خصوصی  Private (فقط مدیر و ویرایشگر می‌توانند صفحه را ببینند) و محافظت شده با رمز عبور (به افرادی که رمز عبور را دارند اجازه می‌دهد) تنظیم کنید. همچنین می توانید تاریخ انتشار و نویسنده صفحه خود را در این قسمت مدیریت کنید.

بر اساس نیاز خود، می‌توانید گزینه «بازبینی در انتظار» Pending Review را فعال کنید که به ویرایشگر یا مدیر شما اجازه می‌دهد قبل از انتشار صفحه را بررسی کنند. همچنین، می توانید صفحه را با استفاده از دکمه انتقال به سطل زباله Move To Trash حذف کنید .

2. نحوه ایجاد یک صفحه جدید در وردپرس: پیوند ثابت Permalink

در تنظیمات پیوند ثابت، می توانید پیوند ثابت یا URL صفحه خود را ویرایش کنید. همچنین، می توانید با استفاده از نشانی وب نمایش صفحه از صفحه بازدید کنید.

3. نحوه ایجاد یک صفحه جدید در وردپرس: تصویر ویژه Feature Image

اکثر وب سایت ها تمایلی به استفاده از تصاویر ویژگی در صفحات ندارند. گزینه Feature Image برای پست ها مفید است. بنابراین، ممکن است در مورد صفحات خود از این گزینه اجتناب کنید.

4. نحوه ایجاد یک صفحه جدید در وردپرس : بحث Discussion

گزینه Discussion به شما امکان می دهد بخش نظرات را فعال/غیرفعال کنید. اما مشابه گزینه Feature Image، گزینه نظر  comment در صفحات استفاده نمی شود. اگر همچنان مایل به دریافت نظرات کاربران در صفحات خود هستید، می توانید این گزینه را با علامت زدن در کادر انتخاب فعال کنید.

5. نحوه ایجاد یک صفحه جدید در وردپرس : صفات صفحه Page Attributes

اگر می‌خواهید صفحه فعلی خود را تحت یک صفحه والد اضافه کنید، باید به قسمت ویژگی صفحه بروید. در اینجا، می توانید والد مناسب را از لیست صفحه انتخاب کنید. ترتیب صفحه را تنظیم کنید زیرا یک صفحه والد ممکن است صفحات فرعی زیادی داشته باشد.

نحوه ایجاد صفحه فرود در وردپرس

صفحه فرود  landing page یک صفحه مستقل است که برای اهداف خاصی مانند بازاریابی، تبلیغات، فروش محصول و موارد دیگر طراحی شده است. این نوع صفحه به ویژه با سایر صفحات وب متفاوت است و هدف آن هدایت کاربران به انجام اقدامات دلخواه است.

راه های زیادی وجود دارد که می توانید یک صفحه فرود ایجاد کنید. چه با استفاده از ویرایشگر گوتنبرگ یا افزونه های سازنده صفحه. ما به شما ایده مختصری از نحوه ایجاد صفحات با استفاده از این دو ابزار خواهیم داد.

1. نحوه ایجاد یک صفحه جدید در وردپرس: نحوه ایجاد صفحه فرود با استفاده از ویرایشگر گوتنبرگ

وردپرس دارای یک ویرایشگر بلاک به نام گوتنبرگ است . این به شما امکان می دهد با استفاده از بلوک های از پیش ساخته شده، محتوا را به صفحه خود اضافه کنید. پس از باز کردن صفحه، یک نماد مثبت در صفحه مشاهده خواهید کرد. با فشار دادن نماد پلاس (+) ویرایشگر گوتنبرگ باز می شود. بیش از 100 بلوک پیش فرض را در آن خواهید یافت.

هر بلوکی را که نیاز دارید، پیدا کنید و روی آن کلیک کنید. بلوک به صفحه اضافه خواهد شد. پس از آن می توانید محتوا را تایپ کرده یا به آن اضافه کنید. بیشتر بلوک گوتنبرگ گزینه های سفارشی سازی قوی مانند رنگ color، تایپوگرافی typography، حاشیه margin ، بالشتک padding و غیره را به شما ارائه می دهد.

این امکان برای ما وجود ندارد که در این مقاله در مورد تمام بلوک های گوتنبرگ صحبت کنیم. در عوض، ما کمی در مورد بلوک های رایج در پست ها و صفحات وردپرس صحبت خواهیم کرد.

بلوک متن گوتنبرگ Text Block

• پاراگراف Paragraph : با این بلوک یک پاراگراف به صفحه یا پست خود اضافه کنید.
• عنوان Heading : سرفصل های H1، H2، H3، H4، H5 و H6 وجود دارد که می توانید از آنها برای اضافه کردن عنوان استفاده کنید.
• لیست List: با این بلوک می توانید یک لیست سفارشی و نامرتب  Order & Unordered List را به وب سایت خود اضافه کنید.
• نقل قول Quote : برای درج یک نقل قول، می توانید از این بلوک استفاده کنید.
• کد Code : برای افزودن یک قطعه کد سفارشی، می توانید از این بلوک محتوای مفید استفاده کنید.
• Preformatted : با این بلوک می توانید متن طولانی را در یک خط اضافه کنید.
• Pullquote : این روش دیگری برای درج یک نقل قول شیک است.
• جدول Table : با این بلوک موثر می توانید جدولی را به صفحه یا پست خود اضافه کنید.
• بیت Verse : فقط برای افزودن متن آهنگ یا اشعار استفاده می شود.

بلوک رسانه Media Block

• تصویر Image: با این بلوک رسانه ای محبوب می توانید تصاویر را به وب سایت خود اضافه کنید.
• گالری Gallery: به شما امکان می دهد یک گالری عکس برای وب سایت خود ایجاد کنید.
• صدا Audio: شما می توانید از این بلوک برای درج یک کلیپ صوتی در صفحه وب خود استفاده کنید.
• جلد Cover: با استفاده از این بلوک خیره کننده، می توانید یک تصویر جلد را در صفحه خود قرار دهید.
• فایل File: با استفاده از این بلوک محتوای پیشرفته، گزینه آپلود فایل را در وب سایت خود اضافه می کنید.
• رسانه و متن Media & Text: به شما امکان می دهد یک فایل رسانه ای مانند تصویر و متن برای تزئین وب سایت خود اضافه کنید.
• ویدئو Video: شما می توانید با این بلوک گوتنبرگ یک ویدیو از رسانه خود اضافه کنید.

سایر بلوک های ضروری: نحوه ایجاد یک صفحه جدید در وردپرس

• دکمه Button : با استفاده از بلوک دکمه، می توانید یک دکمه CTA را به صفحه خود اضافه کنید.
• ستون Column: بر اساس نیاز خود، می توانید ستون هایی را به صفحه خود اضافه کنید.
• گروه Group : با استفاده از این بلوک محتوا می توانید چندین بلوک را در یک گروه نمایش دهید.
• کدهای کوتاه Shortcodes : این بلوک مفید به شما امکان می دهد کدهای کوتاه را به روشی سازمان یافته تر وارد کنید.
• جاسازی Embed : با این بلوک می‌توانید پست‌ها، ویدیوها و موارد دیگر را وبلاگ کنید.
• نمادهای اجتماعی Social Icons : شما می توانید کانال های اجتماعی خود را با استفاده از بلوک آیکون های اجتماعی نمایش دهید.
• آخرین پست ها Latest Posts : همچنین می توانید آخرین پست های خود را در وب سایت خود با بلوک گوتنبرگ به نمایش بگذارید.

با این حال، شما همچنین تعداد زیادی بلوک مفید در دسته‌های طراحی Design، ابزارک Widgets، تم Theme و جاسازی Embed دریافت خواهید کرد .

2. نحوه ایجاد یک صفحه جدید در وردپرس : نحوه ایجاد صفحه فرود با استفاده از Elementor

Elementor یکی از محبوب ترین و ساده ترین افزونه های صفحه ساز برای ایجاد صفحات فرود است. این افزونه در بین توسعه دهندگان و کاربران عادی بدون کد به همان اندازه محبوب است. به نحوه نصب، فعال سازی و استفاده از افزونه برای صفحه سازی نگاهی بیندازید.

وارد داشبورد وردپرس شوید. به Plugins > Add New بروید. شما این گزینه را خواهید داشت که افزونه را برای نصب آن پیدا کنید.

Elementor را در کادر جستجو در گوشه سمت راست بالا تایپ کنید. هنگامی که افزونه در زیر ظاهر شد، روی دکمه Install کلیک کنید . بعدش فعالش کن.

پس از فعال شدن Activate افزونه، آماده ایجاد صفحات فرود سفارشی با استفاده از افزونه هستید. یک صفحه جدید از صفحات > افزودن جدید Pages > Add New باز کنید .

پس از آن صفحه زیر را خواهید دید. در اینجا، شما باید انجام دهید.

1. عنوان صفحه را  بنویسید
2. الگوی ” Elementor Canvas ” را انتخاب کنید.
3.  برای انتشار صفحه بر روی  دکمه انتشار کلیک کنید.
4. در نهایت، برای طراحی صفحه وب سفارشی خود، روی ” ویرایش با Elementor ” کلیک کنید.

در صفحه بعد، تمام ویجت های Elementor را که می توانید برای طراحی صفحه سفارشی خود استفاده کنید، دریافت خواهید کرد.

چگونه صفحه وردپرس خود را زمان بندی و منتشر کنید.

پس از آماده شدن صفحه، مطمئناً می خواهید آن را منتشر کنید. وردپرس به شما این امکان را می دهد که صفحه را به صورت خودکار در زمان تعیین شده خود زمان بندی کنید. در اینجا نحوه انجام آن آمده است.

روی دکمه انتشار “Publish” در گوشه سمت راست بالا کلیک کنید .

پس از آن، یک اعلان دریافت خواهید کرد: Are you ready to publish « آیا آماده انتشار هستید؟ ». اگر همه چیز درست است، دوباره روی دکمه انتشار  “Publish” کلیک کنید .

اما اگر می خواهید صفحه را  “Schedule” زمان بندی کنید ، با استفاده از گزینه Calendar تاریخ انتشار مناسب را انتخاب کنید.

بیایید نگاهی به ظاهر فعلی صفحه خود بیندازیم.

بنابراین، ما به شما نشان دادیم که چگونه یک صفحه جدید ایجاد و اضافه کنید. اما در صورت تمایل می توانید یک صفحه سفارشی با وردپرس ایجاد کنید. ما قصد داریم در بخش بعدی آن را به شما نشان دهیم.

نحوه ایجاد یک صفحه جدید در وردپرس : چگونه یک صفحه اصلی جدید و صفحه آرشیو وبلاگ در وردپرس راه اندازی کنیم.

صفحه اصلی به صفحه ای اطلاق می شود که کاربران پس از ورود به صفحه با استفاده از آدرس دامنه ابتدا در آنجا فرود می آیند. شما می توانید هر صفحه ای را به عنوان صفحه اصلی تنظیم کنید. برای انجام این کار، به تنظیمات > خواندن  Settings > Reading بروید.

گزینه “ A Static Page ” را انتخاب کنید.

از گزینه ای که روی تصویر مشخص شده است، اجازه ورود به صفحه اصلی Homepage و پست صفحه Post Page را خواهید داشت. در تصویری که ما به ترتیب صفحات Home و Blog را انتخاب کرده ایم، مشاهده می کنید.

نحوه ایجاد یک صفحه فرعی در وردپرس

یک صفحه فرعی در وردپرس به عنوان صفحه فرزند نیز شناخته می شود. به صورت سلسله مراتبی بعد از یک صفحه والد قرار می گیرد. این به شما کمک می کند محتوای ساختار یافته را به صورت سلسله مراتبی با جزئیات ایجاد و نمایش دهید تا کاربران بتوانند به راحتی اطلاعات مورد نظر خود را پیدا کنند.

یک صفحه جدید باز کنید. محتوای لازم را به آن اضافه کنید. به بخش Page در نوار کناری سمت راست بروید . گزینه Page Attributes را گسترش دهید . با مکان نما روی کادر جستجو کلیک کنید. لیست تمام صفحات والدینی که تاکنون منتشر کرده اید در آنجا ظاهر می شود.

صفحه ای را که می خواهید به عنوان صفحه والد برای صفحه در حال اجرا تنظیم کنید، انتخاب کنید. در پایان دکمه انتشار  Publish را بزنید. بنابراین، می توانید صفحات فرعی در وردپرس ایجاد کنید.

آموزش طراحی سایت با المنتور: با ویژگی های اساسی Elementor آشنا شوید.

• Theme Builder: تم ساز به شما کمک می کند تا هر یک از قسمت های سایت خود مانند هدر، پاورقی، صفحه محصول و موارد دیگر را مستقیماً از ویرایشگر طراحی کنید.
• Popup Builder: به شما کمک می کند تا پاپ آپ هایی ایجاد کنید که برجسته و کاملاً مطابق با بقیه طراحی سایت شما باشد.

• بیش از 80 ابزارک: هر ویجت در Elementor سفارشی‌سازی پیشرفته طراحی را ارائه می‌دهد به طوری که برای انجام طراحی خود نیازی به نصب افزونه‌های اضافی ندارید.

• بیش از 100 قالب از پیش طراحی شده و بیش از 300 بلوک: شما می توانید از بین بیش از 100 قالب تمام صفحه وردپرس و 300 بلوک برای غنی سازی طراحی خود در چند لحظه انتخاب کنید.

آموزش طراحی سایت با المنتور: Elementor Free در مقابل Elementor Pro

واضح است که Elemento Pro ویجت‌ها، بلوک‌های از پیش ساخته، قالب‌ها و ویژگی‌های برتر را ارائه می‌دهد. با این حال، تنها با استفاده از نسخه رایگان Elementor، امکان ایجاد یک وب سایت از ابتدا وجود دارد.

به عنوان یک مبتدی، توصیه ما این است که ابتدا Elementor را رایگان امتحان کنید، سپس اگر واقعاً برای شما ضروری است، به سراغ Elementor pro بروید.

چه چیزی المنتور را به محبوب ترین صفحه ساز برای وردپرس تبدیل می کند.

Elementor یک صفحه ساز کشیدن و رها کردن برای وردپرس است. این افزونه به شما کمک می کند تا با استفاده از ویرایشگر بصری صفحات زیبایی ایجاد کنید. این افزونه وردپرس یک راه حل همه کاره است که به شما امکان می دهد هر قسمت از طراحی وب سایت خود را بر روی یک پلت فرم واحد کنترل کنید.

اساسا، Elementor بسیار محبوب است زیرا به افراد بدون هیچ پیشینه فنی قدرت می دهد تا وب سایت هایی را طراحی کنند که به زیبایی وب سایت های ساخته شده توسط حرفه ای ها به نظر می رسند.با ما با اموزش طراحی سایت با المنتور همراه باشید تا همه این ویژگی ها را برای شما توضیح دهیم.

آموزش طراحی سایت با المنتور : با استفاده از Elementor برای ساخت یک وب سایت:

• با آموزش طراحی سایت با المنتور در وقت خود صرفه جویی کنید و به المنتور شما کمک می کند تا با سرعت بیشتری وب سایت خود را طراحی و تکرار کنید.
• المنتور به شما امکان می دهد ویجت های شخص ثالث را ادغام کنید تا بتوانید با آموزش طراحی سایت با المنتور  یک وب سایت جامع تر و کامل تر ایجاد کنید تا تجربه آنلاین مثبتی را برای بازدیدکنندگان خود ایجاد کنید.
• با طراحی سایت با المنتور پیچیدگی وب‌سایت‌های خود را کاهش دهید، با آموزش طراحی سایت با المنتور اشکالات را حذف کنید و فرآیند تعمیر و نگهداری آسان‌تری را در مورد به‌روزرسانی و آزمایش ایجاد کنید.
• با المنتور و آموزش طراحی سایت با المنتور در هزینه خود صرفه جویی کنید و هزینه ها را ساده کنید تا بتوانید قیمت یک پروژه را بهتر تعیین کنید.

برای  توسعه دهندگان وردپرس ، المنتور هنوز هم یک پلتفرم انتخاب برتر با بهینه سازی اسکریپت، ویژگی های سفارشی و نسخه های برگشتی است.

برای درک بهتر، مقایسه ای بین صفحه سازهای برتر وردپرس انجام داده ایم . بیایید با آموزش طراحی سایت با المنتور  همه این موارد را با هم بررسی کنیم!

Elementor vs Divi vs Beaver Builder – جدول مقایسه

قبل از این که به آموزش طراحی سایت با المنتور بپردازیم بیایید به ویژگی های المنتور بپردازیم. به غیر از Elementor، چند صفحه ساز محبوب دیگر غیر از وردپرس در دسترس هستند. در میان این صفحه سازها، Divi و Beaver سرسخت ترین رقبای Elementor هستند. به همین دلیل است که ما یک جدول مقایسه ایجاد کرده ایم تا بفهمیم آیا المنتور بهتر از آن صفحه سازها است یا خیر.

پس از تجزیه و تحلیل جدول مقایسه، به نظر شما کدام صفحه ساز برای یک مبتدی بهتر است؟ این المنتور است، درست است! به همین دلیل است که Elementor را به جای دیگر صفحه سازهای محبوب انتخاب کردیم . بنابراین، وقت آن است که با صفحه ساز Elementor آشنا شوید پس با ما با با آموزش طراحی سایت با المنتور  همراه باشید.

مزایا و معایب استفاده از Elementor Page Builder در سایت وردپرس شما

واضح است که هر چیزی جنبه تاریک خود را نیز دارد. اما از نظر Elementor، در واقع قسمت تاریک آن نیست. در عوض، می‌توانیم بگوییم که محدودیت‌هایی دارد که می‌توان آنها را در طول زمان بهبود بخشید. آن ها چیست؟

خوب، قبل از آن، اجازه دهید جوانب مثبت آن را در یک نگاه بررسی کنیم.

آموزش طراحی سایت با المنتور: مزایای استفاده از Elementor در وردپرس

• این یک افزونه رایگان است! اکثر کاربران می توانند به طور کامل سایت خود را بدون نیاز به ارتقاء به نسخه حرفه ای بسازند .
• برای یک افزونه رایگان، دارای طیف گسترده ای از ویژگی ها است. ویژگی های تنظیم شده در نسخه رایگان با بسیاری از افزونه های پولی رقابت می کند.
• ویرایشگر بلادرنگ به شما این امکان را می‌دهد که تغییراتی در سایت خود ایجاد کنید و ببینید در زمان واقعی چه اتفاقی می‌افتد، بنابراین لازم نیست بین چندین صفحه به عقب و جلو بروید.
• شما می توانید چندین نسخه از سایت، دسکتاپ، موبایل و تبلت خود را ویرایش و مشاهده کنید و تغییرات منحصر به فردی در هر یک از این نسخه ها ایجاد کنید.

معایب استفاده از Elementor در وردپرس

• Elementor یک ویرایشگر قدرتمند است، اما با همه گزینه‌های انعطاف‌پذیری و سفارشی‌سازی، درست کردن همه چیز ممکن است سخت باشد.
• گاهی اوقات، صفحات شما ممکن است دارای لایه‌هایی از همپوشانی محتوای مختلف باشند و پیدا کردن ناحیه‌ای که می‌خواهید ویرایش کنید می‌تواند دشوار و زمان‌بر باشد.
• اگر سایت خود را با استفاده از Elementor می‌سازید، باید افزونه را نصب کنید در غیر این صورت، تمام طراحی‌ها و سفارشی‌سازی‌های خود را از دست خواهید داد.

آموزش طراحی سایت با المنتور: معرفی داشبورد Elementor

قبل از این که آموزش طراحی سایت با المنتور را شروع کنیم باید برای دسترسی به داشبورد Elemnetor، ابتدا  Elementor را در سایت وردپرس خود نصب کنیم. نصب المنتور بسیار است. با ما با آموزش طراحی سایت با المنتور همراه باشید تا مراحل زیر را دنبال کنید و المنتور را در لحظه نصب و فعال کنید.

آموزش طراحی سایت با المنتور:  چگونه المنتور را در وردپرس نصب و فعال کنیم؟

• مرحله 01: به داشبورد وردپرس خود > افزونه ها > افزودن جدید بروید.

• مرحله 02: “Elementor” را در کادر جستجو تایپ کنید و Elementor را از نتیجه جستجو پیدا کنید. سپس روی دکمه Install کلیک کنید.

• مرحله 03: در نهایت روی دکمه Activate کلیک کنید تا Elementor فعال شود و از آن استفاده کنید.

تنظیمات Elementor : آموزش طراحی سایت با المنتور

پس از فعال کردن صفحه ساز Elementor، به رابط زیر نشان داده شده خواهید رفت. یا برای دریافت این رابط به داشبورد WP > Elementor بروید.

تنظیمات :

• عمومی: در تب General تنظیمات Elementor، می‌توانید انواع پست‌هایی را که قصد استفاده از آن را دارید انتخاب کنید، همچنین رنگ‌ها و فونت‌های پیش‌فرض را غیرفعال کنید.

• سبک: گزینه‌هایی را خواهید یافت که شامل تنظیم فونت‌های عمومی پیش‌فرض، نقاط شکست تبلت و موبایل، و همچنین یک چک باکس برای فعال کردن لایت باکس تصویر است.

• پیشرفته:  گزینه تنظیم روش چاپ CSS، تغییر روش لودر هنگام عیب یابی مشکلات سرور و فعال کردن پشتیبانی SVG را خواهید داشت.

مدیر نقش : Role Manager

• انواع مختلف کاربران بسته به نقش خود می توانند سطوح مختلفی از دسترسی به وب سایت شما داشته باشند. اگر نسخه Pro را دارید، می توانید دسترسی کاربران را فقط به محتوا محدود کنید.

آموزش طراحی سایت با المنتور : ابزار Tools

• عمومی: ابزارهای عمومی به شما امکان می دهند CSS را در وب سایت خود بازسازی کنید و در صورت نیاز کتابخانه Elementor خود را به صورت دستی همگام سازی کنید.

• Replace URL: تب جایگزینی URL جایی است که همانطور که از نامش مشخص است، در صورت تغییر آدرس سایت، می توانید URL ها را جایگزین کنید.

• Maintenance Mode: در تب Maintenance Mode، تمام کنترل‌های حالت تعمیر و نگهداری وب‌سایت را که همیشه به آن نیاز دارید، دریافت می‌کنید.

• Font Awesome: به شما امکان می دهد به بیش از 1500 نماد شگفت انگیز فونت 5 دسترسی داشته باشید و از عملکرد سریعتر و انعطاف پذیری طراحی لذت ببرید.

آموزش طراحی سایت با المنتور: داشبورد المنتور

• برای دسترسی به داشبورد Elementor، به داشبورد وردپرس > صفحات > افزودن جدید بروید .

• سپس عنوان صفحه را وارد کرده و از منوی کشویی قالب سمت راست گزینه Elementor Canvas را انتخاب کنید.

• در نهایت بر روی دکمه “ Edit with Elementor ” کلیک کرده و با قدرتمندترین صفحه ساز شروع به کار کنید.

• با این حال، اگر می‌خواهید یک صفحه هیجان‌انگیز را با Elementor ویرایش کنید، به All Pages> Hovering Over a Page بروید .

• سپس دکمه ” ویرایش با Elementor ” ظاهر می شود. حالا روی دکمه کلیک کنید و شروع به ویرایش صفحه خود کنید.

اینجاست. داشبورد Elementor مورد انتظار ما . بیایید وارد آن شویم.

این رابطی است که در آن می توانید صفحه خود را با عناصر کشیدن و رها کردن طراحی کنید و پیش نمایش زنده سایت خود را مشاهده کنید.

• در بالای سمت چپ، یک نماد همبرگر برای برخی تنظیمات پیش‌فرض و کلی پیدا خواهید کرد.

• در بالای سمت راست، یک دکمه شماره گیری برای بازگشت به پنل اصلی پیدا خواهید کرد.

• پس از آن، یک کادر جستجو ظاهر می شود تا ویجت های فهرست شده و مورد نیاز را به سرعت پیدا کند.

• تمام ماژول های مفید را در پنل سمت چپ پیدا خواهید کرد.

• در پایین، تعدادی آیکون مفید برای تنظیمات صفحه، پیمایش سریع، تاریخچه، حالت پاسخگو و پیش نمایش پیدا خواهید کرد.

• همچنین، در اینجا یک دکمه انتشار برای زنده کردن صفحه خود یا ذخیره پیش نویس/الگو برای استفاده در آینده دریافت خواهید کرد.

علاوه بر این، می توانید با کلیک بر روی علامت فلشی که در سمت راست پانل ظاهر می شود، پانل ماژول را ناپدید کنید.

به این ترتیب یک پیش نمایش کامل از صفحه خود دریافت خواهید کرد.

می توانید تجربه Elementor خود را با استفاده از ابزارهای شخص ثالث افزایش دهید.ب دون شک Elementor یک صفحه ساز قدرتمند برای وردپرس است. با این حال، برای قدرتمندتر کردن آن و دادن انعطاف‌پذیری بیشتر در حین طراحی وب‌سایت، افزونه‌های شخص ثالث نقش خود را ایفا می‌کنند.

آموزش طراحی سایت با المنتور : نحوه استفاده از Elementor با وردپرس

همانطور که قبلاً گفتیم، Elementor با یک صفحه ساز کشیدن و رها کردن و یک تم ساز ارائه می شود. بنابراین، اکنون نحوه استفاده از این دو سازنده و در نهایت ایجاد یک الگو با استفاده از المنتور را یاد خواهیم گرفت.

1. نحوه استفاده از Elementor Page Builder
2. نحوه استفاده از Elementor Theme Builder
3. نحوه ایجاد پاپ آپ در المنتور

بنابراین، اساسا، آموزش ما قرار است از این بخش شروع شود. قبلاً با المنتور آشنا شده بودیم، حالا قرار است به صورت واقعی با آن کار کنیم.

آموزش طراحی سایت با المنتور: نحوه استفاده از Elementor Page Builder

برای اینکه به شما نشان دهیم چگونه از صفحه ساز Elementor استفاده کنید، اکنون می خواهیم یک صفحه اصلی برای یک وب سایت مسافرتی ایجاد کنیم . مراحل زیر آموزش طراحی سایت با المنتور را دنبال کنید و سعی کنید صفحه اصلی خود را در ویرایشگر خود طراحی کنید تا سریع آن را یاد بگیرید.

مرحله یک آموزش طراحی سایت با المنتور : یک صفحه جدید ایجاد کنید.

• به داشبورد وردپرس خود > صفحات > افزودن جدید بروید.

• به این صفحه یک نام بدهید در اینجا من نام آن را صفحه اصلی گذاشتم.
• همانطور که می خواهیم کل صفحه را با Elementor بسازیم، الگوی پیش فرض را روی ” Elementor Canvas ” قرار دهید. می‌توانید  Elementor Full Width را انتخاب کنید ، که به شما امکان می‌دهد کل صفحه را بدون منو سفارشی کنید.
• پس از آن، صفحه را از نوار کناری سمت راست منتشر کنید. همچنین می توانید آن را به عنوان پیش نویس نگه دارید.
• روی “ Edit with Elementor ” کلیک کنید و به صفحه ساز Elementor هدایت می شوید.

مرحله دوم آموزش طراحی سایت با المنتور: یک الگوی مناسب برای صفحه اصلی وب سایت سفر خود انتخاب کنید.

المنتور با بسیاری از قالب‌های رایگان و حرفه‌ای عرضه می‌شود، شما حتی نیازی به ساخت صفحات از ابتدا ندارید. شما فقط می توانید یک الگوی موجود را برای شروع سفر خود انتخاب کنید.

• روی دکمه Add Template کلیک کنید.

• شما یک دسته از الگوهای از پیش ساخته شده را دریافت خواهید کرد که می توانید هر یک از قالب ها را انتخاب کنید و آنها را بر اساس نیاز خود سفارشی کنید.
• پس از انتخاب موردی که می خواهید استفاده کنید، روی گزینه Insert کلیک کنید.

مرحله سوم آموزش طراحی سایت با المنتور: یک هدر به صفحه اصلی خود اضافه کنید.

پس از درج قالب ها صفحه آماده می شود و می توانید آن را برای استفاده در وب سایت مسافرتی خود سفارشی کنید.

• ما با  اضافه کردن یک هدر  به صفحه شروع می کنیم که نام و برچسب وب سایت ما را نمایش می دهد. در اینجا نحوه انجام این کار با کشیدن و رها کردن و کمی استایل می باشد.

هدر کمک می کند تا بلافاصله پس از ورود بازدیدکنندگان به وب سایت شما، هویت برند شما نمایش داده شود. پس از سفارشی سازی هدر، اکنون بدنه صفحه اصلی را سفارشی می کنیم.

مرحله چهارم آموزش طراحی سایت با المنتور: امکانات هتل خود را برجسته کنید.

هنگامی که کار با هدر تمام شد، نوبت به طراحی قسمت اصلی صفحه اصلی می رسد. اگر کسی بخواهد در هتل شما اقامت داشته باشد، امکانات هتل مانند آنچه شما در هتل خود ارائه می دهید.

• می‌توانید هر تصویری را از فضای ذخیره‌سازی محلی خود آپلود کنید، یا می‌توانید تصویر موجود را با تصاویری که قبلاً آپلود شده‌اند از بخش رسانه جایگزین کنید. برای این کار فایل gif زیر را دنبال کنید.
• می‌توانید ارتفاع، عرض، کدورت، حاشیه، بالشتک و همه چیز را از گزینه‌های ویرایش تنظیم کنید.
• افزودن دکمه ها، متون، توضیحات همه چیز از گزینه ویرایش امکان پذیر است.

مرحله پنجم آموزش طراحی سایت با المنتور: یک ویدیو و گواهی اضافه کنید.

• می‌توانید ویدیویی اضافه کنید تا نشان دهید که محیط اطراف شما چگونه است و مردم وقتی اینجا هستند چگونه از استراحتگاه شما لذت می‌برند.
• افزودن گواهینامه تصمیم عاقلانه ای است تا مردم بدانند نظر مشتریان شما در مورد شما چیست.

مرحله ششم طراحی سایت با المنتور: یک فرم تماس اضافه کنید.

• یک فرم تماس اضافه کنید تا بازدیدکننده شما بتواند با شما تماس بگیرد. شماره تماس خود را مانند شماره تلفن، ایمیل یا شماره واتساپ در صفحه تماس تنظیم کنید تا به بازدیدکنندگان شما کمک کند در صورت داشتن هر گونه سوال با شما تماس بگیرند.
• شما همچنین می توانید یک نقشه گوگل اضافه کنید تا مردم بتوانند شما را از جایی که هستید پیدا کنند.

مرحله هفتم طراحی سایت با المنتور: آن را در همه پلتفرم‌ها ریسپانسیو کنید.

• اطمینان حاصل کنید که صفحه شما کاملاً ریسپانسیو است و در همه دستگاه ها به درستی به نظر می رسد. برای انجام این کار روی  گزینه Responsive Mode کلیک کنید  .
• پس از انجام سفارشی سازی، روی  دکمه Update کلیک کنید.

نمای کلی از صفحه اصلی ما

در اینجا نمای نهایی صفحه اصلی ما است که ما به تازگی ایجاد کرده ایم. و اینگونه است که می توانید از صفحه ساز Elementor برای ساخت هر صفحه ای از جمله صفحه اصلی، صفحه تماس، صفحه ویژگی یا هر صفحه دیگری فوراً استفاده کنید.

آموزش طراحی سایت با المنتور: نحوه استفاده از Elementor Theme Builder

سازنده تم Elementor یک تغییر دهنده بازی برای هر کسی است که با سازندگان صفحه آشنا است زیرا به شما امکان می دهد هدرها، فوترهای سفارشی و سایر محتوای پویا برای وب سایت خود ایجاد کنید. حتی به شما این امکان را می دهد که جنبه هایی از قالب وردپرس خود را نادیده بگیرید ، بنابراین می توانید آنچه را که کار می کند حفظ کنید و فقط تغییراتی را که می خواهید ایجاد کنید!

در این بخش، ما به شما نشان می دهیم که چگونه می توانید هدرهای زیبایی با سازنده تم Elementor بسازید.

توجه: سازنده تم Elementor برای نسخه حرفه ای آن موجود است. نسخه رایگان دارای ویژگی بسیار محدودی است.

مرحله اول طراحی سایت با المنتور: نوع قالب را انتخاب کنید.

• به داشبورد وردپرس خود > قالب ها > تم ساز بروید .
• سپس بر روی دکمه افزودن جدید کلیک کنید، یا اگر از قبل هدری را دیدید که ظاهر آن را دوست داشتید، می توانید آن را برای استفاده به عنوان نقطه شروع وارد کنید.

• پس از کلیک بر روی دکمه افزودن جدید، یک صفحه پاپ آپ در مقابل شما ظاهر می شود. در آنجا یک منوی کشویی برای انتخاب از بین یک نوع قالب مشاهده خواهید کرد.
• یک نوع معبد را انتخاب کنید، در اینجا ما Header را انتخاب می کنیم.
• بعد اسمشو بذار
• و در نهایت روی گزینه Create Template کلیک کنید.

توجه: Elementor Free فقط شامل قالب‌های بخش و صفحه می‌شود. نسخه Pro شامل چندین دسته قالب اضافی، از جمله ویجت جهانی، سرصفحه، پاورقی، تک و بایگانی است.

مرحله دوم طراحی سایت با المنتور: هدر خود را در Elementor سفارشی کنید.

شما می توانید انتخاب کنید که سربرگ خود را طراحی کنید یا می توانید هر یک از موارد از پیش ساخته شده را از کتابخانه الگوی Elementor انتخاب کنید.

• روی گزینه Add Template کلیک کنید تا یک هدر از پیش ساخته شده در ویرایشگر شما بارگذاری شود.

اگر این مرحله آشنا به نظر می رسد، به این دلیل است که دقیقاً همان ویرایشگر است که قبلاً برای ایجاد یک صفحه کامل استفاده می کردیم. اکنون، از این تجربه در اینجا برای ایجاد هدر برای وب سایت خود استفاده کنید.

پس از سفارشی کردن هدر خود و کلیک بر روی دکمه ” انتشار “، در صورت تمایل می توانید شرایطی را برای جایی که می خواهید هدر شما نمایش داده شود تعیین کنید.

توجه: برای ایجاد فوتر برای وب سایت خود نیز می توانید همین مراحل را دنبال کنید. هنگامی که در حال طراحی پاورقی با استفاده از Elementor Theme Builder هستید، فقط مطمئن شوید که “Footer” را به عنوان نوع قالب خود انتخاب کنید.

آموزش طراحی سایت با المنتور: نحوه ایجاد پاپ آپ در المنتور

ایجاد یک پنجره بازشو با Elementor بسیار آسان است. شما می توانید پنجره بازشو خود را با رابط بصری Elementor طراحی کنید که همه چیز را بکشید و رها کنید. کار شما آسان تر می شود زیرا Elementor قالب های بازشو از پیش ساخته شده را نیز ارائه می دهد. شما به سادگی می توانید یک الگو را انتخاب کنید، آن را منتشر کنید و ماشه را تنظیم کنید. همین!

توجه: سازنده تم Elementor فقط برای نسخه حرفه ای آن موجود است.

مرحله اول طراحی سایت با المنتور: یک فایل جدید اضافه کنید.

• به داشبورد وردپرس خود > قالب ها > پاپ آپ ها بروید. سپس روی دکمه افزودن جدید در سمت بالا کلیک کنید.

• به پنجره بازشو خود یک نام بدهید و روی  دکمه CREATE TEMPLATE کلیک کنید.

• یک الگوی بازشو که می خواهید استفاده کنید انتخاب کنید. ماوس خود را روی آن ببرید و روی  دکمه Insert کلیک کنید  تا آن را به ویرایشگر Elementor ببرید.

توجه: اگر ترجیح می دهید پنجره بازشو را از ابتدا ایجاد کنید، می توانید به سادگی کتابخانه الگو را ببندید تا ویرایشگر Elementor باز شود.

مرحله دوم طراحی سایت با المنتور: پنجره بازشو را سفارشی کنید.

پس از درج یک پنجره از پیش طراحی شده در ویرایشگر خود، نوبت به شخصی سازی آن پنجره می رسد. در ویرایشگر Elementor، می توانید پنجره بازشو را سفارشی کنید. شما می توانید محتوای پیش فرض را با محتوای خود جایگزین کنید.

ما قبلاً به شما نشان داده‌ایم که چگونه یک قالب Elementor از پیش طراحی شده را سفارشی کنید.

پس از اتمام کار، روی  PUBLISH کلیک کنید.

مرحله سوم طراحی سایت با المنتور: شرایط نمایش و محرک ها را تنظیم کنید.

در مرحله بعد از شما خواسته می شود که شرایط نمایش و محرک ها را تنظیم کنید. همچنین گزینه ای برای تنظیم قوانین پیشرفته وجود دارد.

• شرایط نمایش:  تعیین کنید که پنجره بازشو در چه صفحاتی در سراسر وب سایت شما نمایش داده می شود. می توانید پنجره بازشو را طوری تنظیم کنید که در کل وب سایت، صفحات خاص، پست های خاص، دسته بندی های خاص و غیره ظاهر شود.

• Triggers:  یک ماشه اقدامی برای نمایش پنجره بازشو است. Elementor از 6 نوع ماشه پشتیبانی می کند: در بارگذاری صفحه، در اسکرول، در اسکرول به عنصر، با کلیک، پس از عدم فعالیت، قصد خروج در صفحه.

• قوانین پیشرفته:  برای نمایش پنجره بازشو باید شرایط لازم رعایت شود. به عنوان مثال، می‌توانید پنجره بازشو را طوری تنظیم کنید که اگر بازدیدکننده از طریق موتور جستجو یا UR خاصی به وب‌سایت شما آمد، ظاهر شود. خود Elementor Popup Builder دارای 7 گزینه قوانین پیشرفته است که می توانید انتخاب کنید.

اگر می خواهید زمانی که کاربر روی دکمه ای کلیک می کند، پنجره بازشو نمایش داده شود،  تب Triggers را باز کرده و گزینه On Click را فعال کنید. سپس روی  Save & CLOSE کلیک کنید.

مرحله چهارم طراحی سایت با المنتور: پاپ آپ را به یک صفحه پیوند دهید.

یک صفحه/پست جدید ایجاد کنید و آن را با Elementor ویرایش کنید (شما همچنین می توانید یک صفحه موجود را ویرایش کنید).

• ویجت Button را با کشیدن آن از پانل سمت چپ به قسمت بوم اضافه کنید. یا اگر در حال ویرایش یک صفحه موجود هستید که از قبل حاوی یک دکمه است، روی ویجت دکمه کلیک کنید تا آن را به حالت ویرایش تبدیل کنید.

• در  گزینه Button در  تب Content ، پیوند را روی  Popup قرار دهید. برای این کار می توانید روی  Dynamic در  قسمت Link کلیک کنید.

• روی نماد آچار در  قسمت Popup کلیک کنید و پنجره ای را که به تازگی ایجاد کرده اید انتخاب کنید. نام پاپ آپ را تایپ کنید تا پنجره بازشو خود را پیدا کنید.

پس از اتمام ویرایش صفحه، روی Publish/Update کلیک کنید  .

قبل از کلیک  بر روی دکمه انتشار/به‌روزرسانی، می‌توانید ابتدا صفحه خود را پیش‌نمایش کنید تا ببینید آیا پنجره بازشو قبلاً کار می‌کند یا خیر.

آموزش طراحی سایت با المنتور: نحوه استفاده از ویژگی های پیشرفته Elementor

در این بخش آموزش طراحی سایت با المنتور به طور عمده به دو موضوع متفاوت می پردازیم. آنها هستند،

• در این آموزش طراحی سایت با المنتور به نحوه سفارشی کردن صفحه محصول ووکامرس در المنتور می پردازیم.
• در این آموزش طراحی سایت با المنتور به این که چگونه یک الگوی المنتور را از یک فایل JSON وارد کنیم می پردازیم.

بنابراین، بیایید طراحی سایت با المنتور را شروع کنیم.

آموزش طراحی سایت با المنتور:  نحوه سفارشی کردن صفحه محصول ووکامرس در المنتور

قبل از اینکه بتوانید صفحه محصول WooCommerce خود را سفارشی کنید ، باید WooCommerce را در داشبورد وردپرس خود نصب و فعال کنید. همچنین باید چند محصول را به وب سایت خود اضافه کنید.

پس از راه اندازی، می توانید صفحه محصول خود را طراحی کنید. این مراحل را دنبال کنید.

مرحله اول طراحی سایت با المنتور: الگوی محصول واحد را ایجاد کنید.

• در داشبورد وردپرس خود، به  Elementor  >  My Templates بروید .
• بر روی  دکمه افزودن جدید کلیک کنید  .
• یک محصول را  به عنوان نوع قالب خود  انتخاب کنید و روی ایجاد الگو کلیک کنید.

مرحله دوم طراحی سایت با المنتور: یک الگوی صفحه محصول از پیش طراحی شده را انتخاب کنید یا از ابتدا یکی بسازید.

• کتابخانه Elementor بارگیری می شود.
• در مرحله بعد، یک قالب صفحه محصول از پیش طراحی شده را انتخاب کنید یا از ابتدا یکی بسازید.
• اگر یک الگوی صفحه محصول از پیش ساخته شده را انتخاب می کنید، آن را مطابق با مهارت های طراحی خود سفارشی کنید (اکنون شما تجربه سفارشی کردن یک طرح را دارید همانطور که قبل از این بخش نحوه سفارشی کردن یک صفحه را نشان دادیم).

مرحله سوم طراحی سایت با المنتور: ابزارک های مختلف محصول را برای سفارشی کردن صفحه خود اضافه کنید.

• اکنون زمان آن رسیده است که عناصری را بسازید که صفحه محصول شما را تشکیل می دهند. برای طراحی صفحه محصول خود اسکرین شات زیر را دنبال کنید. می توانید هر ویجتی را که نیاز دارید اضافه یا حذف کنید.

مرحله چهارم طراحی سایت با المنتور: صفحه را منتشر کنید.

• هنگامی که برای پیش نمایش صفحه خود آماده شدید، روی نماد چشم در پانل پایین سمت چپ کلیک کنید.
• روی تنظیمات کلیک کنید ، سپس محصول مورد نظر برای نمایش را انتخاب کنید.
• برای انتشار صفحه خود، روی دکمه سبز رنگ  انتشار  در پنل پایین سمت چپ کلیک کنید.

ممکن است شبیه تصویر زیر باشد.

آموزش طراحی سایت با المنتور: چگونه یک الگوی Elementor را از یک فایل JSON وارد کنیم.

Elementor به شما امکان می دهد یک الگو را از یک فایل JSON وارد کنید. برای اینکه شما این کار را انجام دهید، دو راه وجود دارد. بیایید یاد بگیریم که چگونه کار می کنند!

مرحله پنجم طرلحی سایت با المنتور: یک الگوی تجارت الکترونیک را انتخاب کنید.

• به داشبورد وردپرس خود > صفحات > افزودن جدید بروید.
• به این صفحه یک نام بدهید.
• همانطور که می خواهیم کل صفحه را با Elementor بسازیم، الگوی پیش فرض را روی ” Elementor Canvas ” قرار دهید. شما می توانید  Elementor Full Width را انتخاب کنید را انتخاب کنید، که به شما امکان می‌دهد کل صفحه را بدون منو سفارشی کنید.
• پس از آن، صفحه را از نوار کناری سمت راست منتشر کنید. همچنین می توانید آن را به عنوان پیش نویس نگه دارید.
• روی “ Edit with Elementor ” کلیک کنید و به صفحه ساز Elementor هدایت می شوید.

• یک قالب از پیش طراحی شده برای سایت تجارت الکترونیک خود اضافه کنید.

• یک قالب از پیش طراحی شده را انتخاب کرده و گزینه Insert را کلیک کنید.

مرحله ششم طراحی سایت با المنتور: قالب را سفارشی کنید.

کل فرآیند سفارشی‌سازی همان است که در بخش قبلی نشان داده‌اید – نحوه استفاده از Elementor Page Builder. همین مراحل را برای انجام طراحی خود دنبال کنید.

می توانید لوگو، طرح رنگ، پیوندهای ناوبری، کپی وب سایت و هر ویژگی دیگری را که می خواهید تغییر دهید. همچنین می توانید از ویجت های Elementorرای افزودن قابلیت های خاصی به وب سایت خود استفاده کنید.

مرحله هفتم طراحی سایت با المنتور: صفحه را منتشر کنید.

هنگامی که از طراحی، رابط و عملکرد وب سایت خود کاملاً راضی بودید، نوبت به انتشار زنده آن می رسد.

• برای پیش نمایش سایت، روی نماد کلیک کنید.
• اگر از نتیجه راضی هستید، ادامه دهید و روی دکمه انتشار/به‌روزرسانی کلیک کنید.
• برای مشاهده صفحه منتشر شده، روی ‘Have a Look’ کلیک کنید.

سوالات متداول آموزش طراحی سایت با المنتور