بردکرامب چیست و چرا باید از آنها استفاده کرد؟

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

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

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

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

چرا می خواهید پست های اخیر را در وردپرس نمایش دهید؟

نمایش پست های اخیر در وردپرس می تواند مزایای بی شماری را برای بهبود تجربه کاربر و عملکرد وب سایت شما به طور همزمان ارائه دهد. بیایید نگاهی گذرا به برخی از این مزایای کلیدی نمایش پست های اخیر در وب سایت شما بیندازیم.

• نمایش پست های اخیر در وردپرس : بهبود تعامل کاربر

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

• نمایش پست های اخیر در وردپرس: افزایش تجربه کاربری

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

• نمایش پست های اخیر در وردپرس: مزایای SEO

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

• با نمایش پست های اخیر در وردپرس اقتدار ایجاد کنید.

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

نحوه نمایش پست های اخیر در وردپرس: 6 روش آسان

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

1. برای نحوه نمایش پست های اخیر در وردپرس از بلوک گوتنبرگ برای نمایش پست های اخیر استفاده کنید.
2. از ویجت پست های اخیر وردپرس استفاده کنید.
3. نمایش پست های اخیر با استفاده از یک افزونه
4. نمایش پست های اخیر با استفاده از کد کوتاه
5. نمایش پست های اخیر با استفاده از ابزارک Elementor Post Carousel
6. از بلوک پست‌های اخیر سفارشی Getwid استفاده کنید.

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

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

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

برای انجام این کار کافی است روی دکمه Plus (+) کلیک کنید تا یک بلوک درج شود و سپس  آخرین پست ها  ‘Latest Posts‘ را جستجو کنید.

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

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

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

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

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

این به شما امکان می‌دهد پست‌های اخیر را در نوار کناری، پاورقی یا هر جایی که وردپرس به شما امکان می‌دهد ویجت اضافه کنید اضافه کنید. این فرآیند ساده است و درست مانند افزودن هر ویجت دیگری است.

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

مرحله 1: وارد داشبورد مدیریت وردپرس خود شوید و به Appearance > Widgets بروید.

مرحله 2: اکنون ویجت پست های اخیر Recent Posts را به هر مکانی که می خواهید بکشید و رها کنید.

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

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

روش سوم نحوه نمایش پست های اخیر در وردپرس : نمایش پست های اخیر با استفاده از یک افزونه

اگر فکر می‌کنید برای نمایش پست‌های اخیر به جایگزینی برای روش‌های پیش‌فرض نیاز دارید، افزونه‌های کافی در مخزن وردپرس وجود دارد که شما را گیج می‌کند.

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

مرحله 1: ابتدا وارد داشبورد مدیریت وردپرس خود شوید و به Plugins > Add New بروید .

مرحله 2: اکنون با عبارت Recent Posts جستجو کنید. پس از یافتن افزونه مورد نظر، لطفا آن را نصب و فعال کنید.

مرحله 3: هنگامی که افزونه را فعال کردید، به Appearance > Widgets بروید. در اینجا، اکنون گزینه ای به نام پست های اخیر با ریز عکسها Recent Posts With Thumbnails را پیدا خواهید کرد .

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

مرحله 5: هنگامی که تنظیمات گزینه ها را انجام دادید، روی Save کلیک کنید.

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

اما اگر از گوتنبرگ استفاده نکنید و به جای آن از ویرایشگر کلاسیک استفاده کنید، چه؟

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

برای این کار به یک افزونه نیز نیاز داریم. در مورد ما، از افزونه ای به نام Latest Post Shortcode توسط Iulia Cazan استفاده خواهیم کرد . این افزونه به شما این امکان را می دهد که کدهای کوتاه را در داخل پست ها یا صفحات خود اضافه کنید تا پست های اخیر را نمایش دهید. بیایید ببینیم چگونه کار می کند.

مرحله 1: پلاگین را طبق مراحلی که قبلا ذکر کردیم نصب کنید.

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

[latest-selected-content limit="4" type="post" display="title,content-small" chrlimit="50" image="full" elements="0" css="two-columns" taxonomy="category" term="samples" orderby="dateA"]

شما می توانید کد را همانطور که می خواهید ویرایش کنید. مانند تغییر محدودیت محتوا content limit ، محدودیت نمودار  chart limit (که شبیه تعداد کاراکترهایی است که می‌خواهید نمایش دهید)، اندازه تصویر image size ، دسته‌بندی category ، و مرتب‌سازی sorting و موارد دیگر.

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

روش پنجم نحوه نمایش پست های اخیر در وردپرس: نمایش پست های اخیر با استفاده از ابزارک Elementor Post Carousel

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

اکنون به شما نشان خواهیم داد که چگونه با استفاده از افزونه، پست های اخیر را در پست های وبلاگ خود به نمایش بگذارید. شما باید افزونه های HappyAddons Lite و HappyAddons Pro را نصب کنید . هنگامی که آنها را در سایت خود قرار دادید، مراحل زیر را دنبال کنید.

مرحله 01: ناحیه ای را برای نمایش پست های اخیر انتخاب کنید.

مرحله 02: ویجت Post Carousel را پیدا کنید. آن را بکشید و در ناحیه مورد نظر رها کنید.

مرحله 03: بخش Query را گسترش دهید. تاریخ Date را در کنار گزینه Order By انتخاب کنید. این پست های اخیر شما را بر اساس تاریخ نمایش می دهد.

مرحله 04: لیست کشویی را در کنار گزینه تاریخ  Date باز کنید. هفت گزینه در لیست خواهید داشت. با انتخاب محدوده زمانی در لیست، می‌توانید تعیین کنید که پست‌های اخیر چگونه به بازدیدکنندگان وب نشان داده شود.

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

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

مرحله 01: بلوک پست‌های اخیر را  پیدا کرده و به پست/صفحه مورد نظر خود اضافه کنید. این به طور خودکار چندین پست اخیر را در صفحه وب شما نمایش می دهد.

مرحله 02: به بخش تنظیمات Settings section در نوار کناری سمت راست بروید. می توانید پست ها را در قالب شبکه یا لیست نمایش دهید. بخش تنظیمات گزینه های زیادی مانند ستون، عنوان، برچسب، اندازه تصویر، تاریخ نمایش، دسته ها و غیره را در اختیار شما قرار می دهد.

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

جمع بندی

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

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

اگر این مقاله برایتان مفید بود مقاله های دیگر ما را هم در سایت آموزش تکنیک های سئو مطالعه فرمایید.