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

آموزش طراحی سایت با المنتور: با ویژگی های اساسی 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’ کلیک کنید.

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