سایت برتر

جلسه ۳۲ – طراحی صفحات سایت با المنتور

آموزش کار با المنتور

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

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

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

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

ویرایش صفحات سایت با المنتور
ویرایش صفحات سایت با المنتور

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

نحوه کار با صفحه ساز المنتور

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

بخش محتوا در افزونه المنتور
بخش محتوا در افزونه المنتور

شما می‌توانید از بخش استایل رنگ متن خود را به‌راحتی تغییر دهید. کار جالب دیگری که در المنتور وجود دارد این است که قابلیت ردیف کردن صفحات در آن وجود دارد. بنابراین ابتدا شما می‌توانید تمامی آیتم‌ها را با کلیک راست روی آنها حذف کنید. سپس روی افزودن ( دکمه +) کلیک کنید تا یک ردیف جدید برای شما ایجاد شود.

ایجاد ردیف جدید در افزونه Elementor
ایجاد ردیف جدید در افزونه Elementor

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

انتخاب ستون در افزونه Elementor
انتخاب ستون در افزونه Elementor

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

انتخاب المنت برای ستون‌ها در افزونه Elementor
انتخاب المنت برای ستون‌ها در افزونه Elementor

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

نحوه ویرایش المنت‌ در افزونه Elementor
نحوه ویرایش المنت‌ در افزونه Elementor

استایل

پس‌ازاینکه تنظیمات بالا را انجام دادید می‌توانید روی تب استایل کلیک کنید. در تب استایل شما می‌توانید رنگ‌بندی را تغییر دهید و آن را به رنگ‌بندی دلخواه خود تغییر دهید.

تنظیمات استایل در افزونه Elementor
تنظیمات استایل در افزونه Elementor

پیشرفته

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

تنظیمات پیشرفته در افزونه Elementor
تنظیمات پیشرفته در افزونه Elementor

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

ولی می‌توانید برای واردکردن متن‌های خود از تب سربرگ اضافه کنید و سپس در می‌توانید در تب استایل با کلیک روی گزینه تایپوگرافی اندازه متن خود را تغییر دهید و همچنین ارتفاع متن را تغییر دهید. امکان کم کردن وزن فونت نیز توسط این قسمت امکان‌پذیر است.

تنظیمات متن در افزونه Elementor
تنظیمات متن در افزونه Elementor

آشنایی با امکانات کلی المنتور

بنابراین شما باید سه نکته را در المنتور رعایت کنید. اول اینکه المنتور از ردیف تشکیل‌شده است و ردیف‌ها از ستون‌ها تشکیل‌شده‌اند. شما در هریک از این ستون‌ها می‌توانید اجزا دلخواه خود را قرار دهید. برای تغییر هریک از آیتم‌ها نیز تنها کافی است که روی آن کلیک کنید و تغییر دهید.

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

نحوه تغییر تنظیمات ردیف
نحوه تغییر تنظیمات ردیف

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

نحوه تغییر ستون‌‌ها
نحوه تغییر ستون‌‌ها

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

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

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

بررسی المنت‌های قالب اهورا در المنتور

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

اگر شما به مدت یک تا دو ساعت زمان بگذارید و با المنتور کارکنید می‌توانید بخش‌های زیادی از آن را یاد بگیرید. ما نیز تلاش می‌کنیم که به‌زودی یک دوره رایگان یا ثبت‌نامی برای المنتور در بخش آموزش‌های سایت قرار دهیم که بتوانید کار با المنتور را خیلی دقیق‌تر و حرفه‌ای‌تر یاد بگیرید.

موفق باشید. 🙂

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام میهن وردپرس عضو شوید.

آموزش کامل وردپرس

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

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

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

سوال دارم

  1. U41112 ۱۵ تیر ۱۴۰۰

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

  2. U35610 ۲۷ خرداد ۱۴۰۰

    با سلام و احترام خدمت جناب راد و تیم عزیزتون
    ببخشید یک سوالی داشتم خدمتتون.بنده در هنگام آپدیت المنتور با خطای زیر مواجه میشم:
    هنگام به‌روز‌رسانی المنتور یک خطا رخ داده است: دریافت انجام نشد. cURL error 28: Operation timed out after 15000 milliseconds with 2780861 out of 6157459 bytes received
    مشکل از کجاست؟
    قابل ذکر هست که قالب روی لوکال هاست هست و در مرحله طراحی.در آپدیت های قبلی هم مشکلی وجود نداشت
    با تشکر و سپاس فراوان

    • تیم پشتیبانی تیم پشتیبانی ۲۷ خرداد ۱۴۰۰

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

  3. U40417 ۲۰ خرداد ۱۴۰۰

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

  4. U39373 ۸ اردیبهشت ۱۴۰۰

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

    • رضا حسینی راد رضا حسینی راد ۹ اردیبهشت ۱۴۰۰

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

  5. U38936 ۳ اردیبهشت ۱۴۰۰

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

  6. U39066 ۳۱ فروردین ۱۴۰۰

    سلام ببخشید من در جلسه سی و یکم دوره آموزش طراحی سایت برای ثبت درگاه رو گذروندم و تمام مراحل گفته شده رو دقیق انجام دادم و درگاه روی سایت نصب کردم اما وقتی روی دکمه ادامه جهت تسویه حساب کلیک کنم منویسه” صفحه ای پیدا نشد” اما من درست کردم پشتیبانی درگاه تماس گرفتم اما آنها گفتند که در گاه هیچ مشکلی نداره

  7. U38759 ۲۴ فروردین ۱۴۰۰

    سلام. وقتی که قالب اهورا رو خریداری کنیم، پایین قالب “ساخته شده با اهورا” رو مینویسه؟

  8. U37711 ۲۳ فروردین ۱۴۰۰

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

  9. U37711 ۲۲ فروردین ۱۴۰۰

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

  10. U16501 ۱۸ فروردین ۱۴۰۰

    با سلام و سپاس از محتوای آموزشیتون
    من سایتی دارم که با المنتور طراحی شده. آیا امکانش هست به ویژوال کامپوزر تغییرش بدم بدون اینکه اطلاعات و طراحی سایت از بین بره؟

  11. U38538 ۱۳ فروردین ۱۴۰۰

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

    • تیم پشتیبانی تیم پشتیبانی ۱۴ فروردین ۱۴۰۰

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

      • U38788 ۳۰ فروردین ۱۴۰۰

        سلام خسته نباشید
        من هم مشکل ایشئن رو داشتم
        به تنظیمات افزونه رفتم و تو بخش کلی>انواع نوشته همه تیک هارو فعال کردم ولی گزینه ویرایش المنتور اون بالا نیومد

        • تیم پشتیبانی تیم پشتیبانی ۳۰ فروردین ۱۴۰۰

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

  12. U37087 ۸ اسفند ۱۳۹۹

    سلام ببخشید من نسخه پرو افزونه المنتور رو دارم ولی در موقع نصبش مشکل دارم که ارروری به نام:
    پرونده بارگذاری شده بزرگ‌تر از upload_max_filesize در php.ini است.
    به نظر شما دلیلش چی میتونه باشه؟لطفاََ راهنمایی کنید!

  13. U34400 ۱ اسفند ۱۳۹۹

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

    • رضا حسینی راد رضا حسینی راد ۲ اسفند ۱۳۹۹

      سلام بستگی به تنظیمات قالب شما داره. معمولا توی آسترا از بخش نمایش > سفارشی سازی قابل تغییر هست.

  14. U36311 ۲۸ بهمن ۱۳۹۹

    سلام. وقت بخیر. آیا المنتور یه افزونه تمام رایگانه؟

    • رضا حسینی راد رضا حسینی راد ۲۹ بهمن ۱۳۹۹

      سلام وقت بخیر. دو نسخه رایگان و حرفه‌ای داره و نیازی به نسخه حرفه‌ای نیست رایگان تمام امکانات مورد نیاز رو داره

  15. U34527 ۱۸ دی ۱۳۹۹

    سلام وقت بخیر. من یه قالب از سایت wordpress دانلود نصب کردم و elementor رو هم نصب کردم . در حالت اولیه قالب دارای پست ها و صفحات و تصاویر اولیه و پیشفرض بود . من صفحه اول سایت رو با المنتور کلی تغییرات دادم و فونت ها و رنگ هارو تغییر دادم و تغییرات ثبت شد . بعدش دیدم بهتره این پست ها و تصاویر و صفحات اضافه رو کلا پاک کنم بهتره … برای همین همشو پاک کردم وصفحه اول رو تقریبا خالی کردم بجز لگو و تصویر و متنی ک خودم گذاشته بودم . بعدش دیدم تغییرات فونت و سایز و رنگ که با المنتور داده بودم کلا تغییر کرده و سایت به حالت اولیه برگشته! برای همین رفتم توی المنتور تا دوباره تغییرات رو اعمال کنم … ولی دیدم که توی المنتور همه ی تغییرات اوکی هست و همون فونت و رنک و سایزیه ک قبلا گذاشته بودم … الان هرچی تغییر میدم و ذخیره میکنم در سایت اصلی نمایش داده نمیشه ! و فونت ها و رنگ ها همون پیشفرض ها باقی موندن! نمیدونم چرا بعده پاک کردن پست ها و صفحات و تصاویر اضافه اینجوری شد!
    چیکار باس بکنم من تم رو هم تغییر دادم و دوباره این تم رو گذاشتم ولی درست نشد!

    • رضا حسینی راد رضا حسینی راد ۱۸ دی ۱۳۹۹

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

  16. U33757 ۱۳ دی ۱۳۹۹

    چرا سایت طراحی شده با المنتور برای سئو خوب نیست؟

  17. U16964 ۲۰ آذر ۱۳۹۹

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

    • تیم پشتیبانی تیم پشتیبانی ۲۲ آذر ۱۳۹۹

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

  18. U33204 ۲۰ آذر ۱۳۹۹

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

    • تیم پشتیبانی تیم پشتیبانی ۲۰ آذر ۱۳۹۹

      سلام
      چون فروش این قالب توسط ما متوقف شده آموزش های مربوط به این قالب هم توسط ما ارائه نمیشه

  19. U30041 ۱۶ مرداد ۱۳۹۹

    با سلام و تشکر از آموزش های خوبتون
    سه سوال داشتم: اگر ما با قالب اهورا صفحات سایتمون رو به کمک المنتور بخواهیم ویرایش کنیم، نیاز است که برای استفاده از ویژگی های پولیِ المنتور (VIP) ، المنتور رو به مدت محدود و تعداد محدود خریداری کنیم ؟
    و اینکه عکس هایی مثل اون مداله رو و یا تصاویر شاخص هر قسمت از آموزشتون رو از چه منبعی برداشت می کنید؟
    ویک قالب رایگان معرفی کنید که یک سری امکانات (حتی کم) داشته باشه و راست چین باشه تا ما بتونیم روی اون تمرین کنیم و سپس برای طراحی سایتی کامل از قالب های خوبتون کمک بگیریم؟

    • تیم پشتیبانی تیم پشتیبانی ۱۶ مرداد ۱۳۹۹

      با سلام
      بستگی به نیاز خودتون داره. اگر المانی مد نظرتون هست که توی سنخه رایگان نیست ، بله میتونید نسخه پولی رو خریداری کنید
      2.از unsplash
      3.https://mihanwp.com/themes/ توی این لینک میتونید قالب های رایگان رو مشاهده کنید

  20. U28379 ۱۰ تیر ۱۳۹۹

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

    • تیم پشتیبانی تیم پشتیبانی ۱۰ تیر ۱۳۹۹

      سلام
      ممنون از شما
      بله میتونید تصویر رو به عنوان پس زمینه ستون یا ردیف قرار بدید و لینک یا متن مورد نظر رو به ستون یا ردیف اضافه کنید.

  21. U28849 ۸ تیر ۱۳۹۹

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

  22. U25795 ۲۹ خرداد ۱۳۹۹

    سلام
    ممنون از مطلب خوبتون، دوره ای جامع مثل ویژوال کامپوزر برای المنتور در نظر ندارید؟