مقالات سری دوره رایگان آموزش وردپرس
طراحی صفحات سایت بدون برنامه نویسی با صفحه ساز
این جلسه از دوره رایگان آموزش وردپرس، بدون شک یکی از کلیدی‌ترین بخش‌های این دوره محسوب می‌شود. در این بخش، قصد داریم به شما نشان دهیم که چگونه می‌توانید صفحات سایت خود را بدون نیاز به دانش برنامه‌نویسی طراحی و ویرایش کنید. این مهارت، به ویژه برای کسانی که تازه وارد دنیای وردپرس شده‌اند، بسیار حیاتی است.
فرض کنید شما موفق شده‌اید سایت خود را راه‌اندازی کنید. حالا، مهم‌ترین کاری که باید انجام دهید، این است که محتوای صفحات سایت خود را به‌روزرسانی و شخصی‌سازی کنید. در واقع، در جلسات قبلی، نحوه ساختاردهی و طراحی بخش‌های مختلف سایت را به شما آموزش دادیم، و اکنون زمان آن رسیده که به قلب سایت، یعنی محتوای اصلی آن بپردازیم. این بخش، بدون شک مهم‌ترین قسمت سایت شماست.
هر قالبی که برای سایت خود انتخاب میکنید، معمولاً به همراه یک صفحه‌ساز ارائه می‌شود. برخی از قالب‌ها از صفحه‌ساز ویژوال کامپوزر استفاده می‌کنند، برخی دیگر المنتور را به کار می‌گیرند، و بعضی هم صفحه‌سازهای اختصاصی خود را دارند. البته، قالب‌هایی هم هستند که فاقد صفحه‌ساز می‌باشند، و ما به شما توصیه میکنیم از این قالب‌ها استفاده نکنید، زیرا کار را برای شما سخت‌تر خواهند کرد.
در این بخش از آموزش، تمرکز ما بر روی استفاده از افزونه Elementor است. برای شروع، باید این افزونه را نصب و فعال‌سازی کنید. این کار بسیار مهم است، زیرا اگر المنتور روی سایت شما نصب نباشد، بسیاری از امکانات و بخش‌هایی که در این آموزش به آنها اشاره می‌شود، در دسترس شما نخواهند بود. پس حتماً قبل از ادامه آموزش، مطمئن شوید که المنتور را نصب کرده‌اید.
بعد از نصب و فعال‌سازی المنتور، هر زمان که وارد صفحه‌ای از سایت خود شوید، می‌توانید با کلیک روی گزینه «ویرایش با المنتور»، به راحتی محتوای آن صفحه را ویرایش و مدیریت کنید. این ابزار به شما امکان می‌دهد تا بدون نیاز به کدنویسی، تغییرات مورد نظر خود را اعمال کنید.
کار با المنتور شبیه به این است که وارد یک فضای گسترده از امکانات شوید. درست مثل زمانی که در کامپیوتر خود وارد یک شاخه می‌شوید و با حجم زیادی از گزینه‌ها مواجه می‌شوید. در اینجا نیز، المنتور ابزارهای زیادی را در اختیار شما قرار می‌دهد، و ممکن است در ابتدا احساس کنید که زمان کافی برای کشف همه آنها را ندارید. به همین دلیل، توصیه میکنیم پس از اتمام این دوره، به سراغ دوره‌های آموزشی دیگر بروید تا مهارت‌های خود را به طور کامل توسعه دهید و به یک وبمستر حرفه‌ای تبدیل شوید. موفقیت در مدیریت سایت، نیازمند یادگیری مداوم و تسلط بر ابزارهای مختلف است.
نحوه کار با صفحه ساز المنتور
وقتی با المنتور کار میکنید، این قابلیت را دارید که هر متنی را که روی آن کلیک کنید، به سادگی ویرایش و تغییر دهید. این شامل تمام متن‌های موجود در صفحه، حتی متن‌هایی که داخل دکمه‌ها قرار دارند، می‌شود. یکی از جذاب‌ترین ویژگی‌های المنتور این است که وقتی روی هر عنصری کلیک میکنید، یک پنل تنظیمات در سمت راست صفحه ظاهر می‌شود. این پنل شامل سه بخش اصلی است: محتوا، استایل و تنظیمات پیشرفته. این بخش‌ها به شما امکان می‌دهند تا به راحتی عناصر مختلف صفحه را شخصی‌سازی کنید.
در بخش استایل، به سادگی می‌توانید رنگ متن را تغییر دهید یا سایر ویژگی‌های ظاهری آن را تنظیم کنید. اما یکی دیگر از قابلیت‌های جالب المنتور، امکان سازماندهی و ردیف‌بندی صفحات است. برای شروع، می‌توانید با کلیک راست روی هر آیتم، آن را حذف کنید. سپس، با کلیک روی دکمه «+» (افزودن)، یک ردیف جدید ایجاد کنید. این ردیف جدید فضایی است که می‌توانید عناصر مختلف را در آن قرار دهید.
زمانی که بر روی «+» برای ایجاد ردیف کلیک میکنید، در نسخه های قدیمی المنتور تنها یک بخش وجود داشت به اسم شبکه ای که فقط میتوانستید از آن استفاده کنید ولی در نسخه های جدید المنتور بخش دیگری هم اضافه شده با نام فلکس باکس که این فلکس باکس ویژگی و امکانات بیشتری دارد که بعدا به صورت کامل توضیح میدهیم، ولی فعلا در همین اندازه بدانید که ما در این آموزش از فکس باکس استفاده میکنیم.
پس از انتخاب چیدمان فلکس باکس یا شبکه ای باید یک ساختار اولیه هم برای آن انتخاب کنید که ما در اینجا از ساختار مشخص در تصویر زیر استفاده میکنیم.
بعد از تعیین ساختار تعداد ستونها، می‌توانید با حرکت دادن موس، اندازه هر ستون را به دلخواه تنظیم کنید.
داخل هر ستون، یک علامت مربع‌شکل یا «+» وجود دارد که با کلیک روی آن، می‌توانید عناصر مختلف را به ستون اضافه کنید.
در سمت راست صفحه، لیستی از المنت‌ها نمایش داده می‌شود که می‌توانید آنها را با کشیدن و رها کردن به داخل ستونها منتقل کنید. به عنوان مثال، اگر روی المنت «تصویر» کلیک کنید، می‌توانید یک تصویر را به سایت اضافه و بارگذاری کنید. یا اگر روی المنت «سربرگ» کلیک کنید، می‌توانید یک تیتر به ستون مورد نظر اضافه کنید.
در اینجا ما یک تصویر به سمت راست و یک سربرگ را به سمت چپ اضافه میکنیم.
در پنل سمت راست، امکان سفارشی‌سازی هر المنت وجود دارد. مثلاً برای تیتر، می‌توانید متن عنوان را وارد کنید، به آن لینک اضافه کنید، اندازه آن را تنظیم کنید، چیدمان آن را تغییر دهید و حتی تگ HTML آن را به دلخواه انتخاب کنید.
استایل
بعد از اینکه مراحل قبلی و تنظیمات مربوطه را به پایان رساندید، می‌توانید به سراغ تب استایل بروید. در این بخش، شما این امکان را دارید که رنگ‌بندی عناصر را به دلخواه خود تغییر دهید. این کار به شما اجازه می‌دهد تا ظاهر صفحه را کاملاً مطابق سلیقه و نیازهای خود شخصی‌سازی کنید. با استفاده از این گزینه، می‌توانید رنگ‌ها را به گونه‌ای تنظیم کنید که با هویت بصری سایت شما هماهنگ باشد و تجربه کاربری بهتری را برای بازدیدکنندگان فراهم کند.
پیشرفته
در بخش تنظیمات پیشرفته، ابتدا باید آیکون اول که در تصویر زیر قابل مشاهده است (اتصال مقادیر به یکدیگر) را غیرفعال کنید. علاوه بر این، با استفاده از آخرین دکمه‌ای که در سمت چپ قرار دارد، می‌توانید به عنصر مورد نظر فاصله‌ای بر اساس پیکسل اضافه کنید. این تنظیمات به شما کمک می‌کند تا کنترل دقیق‌تری روی چیدمان و فاصله‌بندی عناصر داشته باشید.
وقتی در بخش محتوا روی ویرایشگر متن کلیک میکنید، یک بخش جدید به ستون شما اضافه می‌شود که می‌توانید متن دلخواه خود را در آن وارد کنید. با این حال، اگر از ویرایشگر متن استفاده کنید، اندازه متن قابل تغییر نخواهد بود. این محدودیت ممکن است برای برخی کاربران چالش‌برانگیز باشد، اما راه‌حلی برای آن وجود دارد.
برای اضافه کردن متن‌های خود، می‌توانید از تب سربرگ استفاده کنید. پس از افزودن سربرگ، به تب استایل بروید و روی گزینه تایپوگرافی کلیک کنید. در این بخش، شما می‌توانید اندازه متن و همچنین ارتفاع آن را به راحتی تنظیم کنید. علاوه بر این، امکان کاهش وزن فونت نیز از طریق همین بخش فراهم شده است. این ویژگی‌ها به شما اجازه می‌دهند تا ظاهر متن را کاملاً مطابق نیازهای خود سفارشی‌سازی کنید و به نتیجه مطلوب برسید.
آشنایی با امکانات کلی المنتور
برای کار با المنتور، باید سه نکته کلیدی را در نظر بگیرید. اول اینکه ساختار المنتور بر پایه ردیف‌ها و ستونها استوار است. هر ردیف از چندین ستون تشکیل شده و شما می‌توانید در هر ستون، عناصر و اجزای مورد نظر خود را قرار دهید. اگر بخواهید هر یک از این آیتم‌ها را ویرایش کنید، کافی است روی آن کلیک کرده و تغییرات لازم را اعمال کنید. این فرآیند بسیار ساده و کاربردی است.
علاوه بر این، در هر ردیف، آیکونی وجود دارد که با کلیک روی آن می‌توانید تنظیمات مربوط به آن ردیف را تغییر دهید. مثلاً می‌توانید رنگ پس‌زمینه ردیف را عوض کنید یا عرض محتوا را از طریق بخش طرح‌بندی تنظیم کنید. در این بخش، امکان انجام کارهای متنوع و زیادی وجود دارد که به شما کمک می‌کند تا ظاهر صفحه را به دلخواه خود شخصی‌سازی کنید.
همچنین، هر ستون نیز تنظیمات خاص خود را دارد. با کلیک روی آیکون مربوط به هر ستون، می‌توانید عرض ستون را تغییر دهید، تراز عمودی یا افقی آن را تنظیم کنید، یا حتی پس‌زمینه ستون را عوض کرده و یک تصویر به عنوان پس‌زمینه اضافه کنید. این قابلیت‌ها به شما انعطاف زیادی در طراحی می‌دهند.
حالا فرض کنید برای ردیف خود یک تصویر پس‌زمینه انتخاب کرده‌اید، اما متن‌های شما به خوبی قابل مشاهده نیستند. در این حالت، می‌توانید از گزینه «روکش پس‌زمینه» در تنظیمات استایل استفاده کنید تا یک لایه رنگی روی تصویر قرار دهید و خوانایی متن را بهبود بخشید. همچنین، می‌توانید رنگ متن را تغییر دهید تا بهتر با پس‌زمینه هماهنگ شود.
از دیگر کارهایی که می‌توانید انجام دهید، تنظیم وضعیت جایگاه تصویر، تعیین حالت تکرار تصویر (مثلاً انتخاب گزینه «بدون تکرار» برای جلوگیری از تکرار تصویر) و تنظیم سایز تصویر است. اگر گزینه «Cover» را انتخاب کنید، تصویر به طور کامل صفحه را پوشش می‌دهد. این تنظیمات به شما کمک می‌کنند تا تصاویر پس‌زمینه را به بهترین شکل ممکن مدیریت کنید.
با المنتور، کارهای جالب و متنوع زیادی می‌توان انجام داد، اما باید به این نکته توجه داشته باشید که امکاناتی که در اختیار شما قرار می‌گیرد، تا حد زیادی به قالبی که استفاده میکنید بستگی دارد. برخی قالب‌ها ممکن است تمامی این ویژگی‌ها را پشتیبانی نکنند، بنابراین انتخاب یک قالب مناسب بسیار مهم است.
اگر حدود یک تا دو ساعت از وقت خود را صرف کار با المنتور کنید، می‌توانید بخش‌های قابل‌توجهی از این ابزار قدرتمند را به خوبی یاد بگیرید. المنتور آنقدر کاربرپسند طراحی شده که حتی کاربران مبتدی نیز می‌توانند در زمان کوتاهی با آن ارتباط برقرار کنند و به نتایج مطلوب برسند. ما هم در تلاش هستیم که در آینده‌ای نزدیک، یک دوره آموزشی جامع، چه به صورت رایگان و چه به شکل ثبت‌نامی، در بخش آموزش‌های سایت قرار دهیم. این دوره به شما کمک می‌کند تا با جزئیات بیشتری آشنا شوید و بتوانید به صورت حرفه‌ای‌تر از المنتور استفاده کنید.
موفق باشید و از یادگیری لذت ببرید! 😊
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
من وقتی ویرایش با المنتور و میزنم صفحه المنتور برام باز نمیشه و پیغام خطا میده چرا؟
با درود و احترام خدمت شما سحر عزیز،
از شما بابت به اشتراک گذاری نظرتان سپاسگزاریم. دلایل زیادی میتونه داشته باشه از ثبیل منابع کم هاست شما و یا تنظیمات سایت. میتونید این مورد را از بخش انجمن پشتیبانی مطرح کنید تا بررسی شود.