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

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

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

آیا می خواهید بهترین وب سایت را ایجاد کنید؟

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

نحوه استفاده از وردپرس و Elementor

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

ساخت وب سایت وردپرس

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

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

• نام دامنه و هاست
• وردپرس
• المنتور
• عناصر Envato
• موضوع

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

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

برای آموزش ایجاد یک وب سایت تجارت الکترونیک، توصیه می کنیم به آموزش WooCommerce ما نگاهی بیندازید.

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

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

با این راهنماها می توانید وب سایت خود را بهبود ببخشید و از آن نهایت استفاده را ببرید.

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

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

1. یک دامنه و میزبانی وب دریافت کنید

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

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

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

اگر کاملاً روی یک نام دامنه گیر کرده اید و نمی توانید به چیزی فکر کنید، از ابزارهایی مانند Namesh یا Panabee برای ایجاد یک نام استفاده کنید.

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

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

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

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

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

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

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

2. وردپرس را نصب کنید

قبل از ادامه نصب، مایلیم به تفاوت بین wordpress.org و wordpress.com اشاره کنیم، زیرا آنها اغلب باعث سردرگمی می شوند و به جای یکدیگر استفاده می شوند.

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

تفاوت wordpress.org و wordpress.com :

WordPress.com خدمات و گزینه های بیشتری ارائه می دهد و بنابراین یک اشتراک پولی است. در اینجا شما این گزینه را خواهید داشت که یک وب سایت با میزبانی چند دقیقه ای و بدون خدمات اضافی و شخص ثالث دریافت کنید.

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

دارای پنج طرح قیمت گذاری، از جمله رایگان که گران ترین طرح حدود 45 دلار در ماه است.

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

در حالی که wordpress.com یک طرح رایگان دارد، اما از نظر مالکیت و کنترل بسیار محدود است. مثلا:

اگر شرایط خدمات آنها را نقض کنید، آنها به سادگی می توانند وب سایت شما را حذف کنند.

نسخه رایگان با نام دامنه wordpress.com ارائه می شود.

برای حذف این عوامل محدودکننده، باید به یک طرح گران‌تر (الزاماً کم‌هزینه‌تر بعدی) ارتقا دهید.

کنترل کامل کاربر بر وب‌سایت wordpress.org را می‌توان در این واقعیت نیز اندازه‌گیری کرد که اجازه می‌دهد:

هر افزونه ای را از مخزن افزونه وردپرس اضافه کنید.

هر تم سازگار را اضافه کنید.

از طرف دیگر WordPress.com اجازه آپلود پلاگین های سفارشی را نمی دهد، زیرا نسخه رایگان با عناصر از پیش نصب شده جت ارائه می شود. علاوه بر این، در حالی که مجموعه‌ای از تم‌های رایگان و همچنین تم‌های ممتاز وجود دارد، در مقایسه با تعداد بیشماری از تم‌هایی که wordpress.org مستقیماً یا از طریق افزونه‌های شخص ثالث ارائه می‌کند کمرنگ است.

یکی دیگر از مزایای عالی برای این یکی این است که می توانید تبلیغات را در وب سایت خود قرار دهید و مستقیماً بدون تقسیم سود کسب درآمد کنید.

WordPress.com اجازه درج تبلیغات را نمی دهد و از سیستمی به نام WordAds استفاده می کند که درآمد آن باید از طریق کمیسیون با wordpress.com به اشتراک گذاشته شود.

علاوه بر این، wordpress.org به شما امکان می دهد از یک ابزار تحلیلی مهم مانند Google Analytics استفاده کنید.

طرح رایگان اجازه استفاده از Google Analytics را نمی دهد و در واقع برای استفاده از آن باید در طرح پریمیوم ثبت نام کنید.

مبتدیان باید توجه داشته باشند که با wordpress.org، کاربران مسئول به روز رسانی نرم افزار و ایجاد نسخه پشتیبان هستند.

WordPress.com به این مسائل رسیدگی می کند و کاربران باید نگران به روز رسانی و تهیه نسخه پشتیبان باشند.

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

شما باید یک نام کاربری و رمز عبور را وارد کنید که از آن برای ورود به سایت خود به همراه برخی اطلاعات دیگر استفاده می کنید. سپس روی دکمه Finish install کلیک کنید و منتظر بمانید تا وردپرس نصب شود.

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

3. Elementor را نصب کنید

در داشبورد وردپرس خود، به Plugins > Add New بروید. Elementor را جستجو کنید و روی Install کلیک کنید. وقتی Elementor نصب شد، روی Activate کلیک کنید.

همچنین برای استفاده کامل از قابلیت های Elementor به Elementor Pro نیاز دارید. به Elementor.com مراجعه کنید و نسخه Pro افزونه را خریداری کنید و سپس آن را به روش فوق نصب و فعال کنید. پس از نصب Elementor Pro، باید مجوز خود را با رفتن به داشبورد وردپرس خود و رفتن به Elementor > License وارد کنید.

4. Envato Elements را نصب کنید

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

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

برای نصب Envato Elements، به Plugins > Add New برگردید، Envato Elements را جستجو کنید و روی Install کلیک کنید. پس از نصب، افزونه را فعال کنید.

5. TwentySeventeen را نصب کنید

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

با ورود به داشبورد وردپرس خود، به Appearance > Themes بروید. با ورود به صفحه، روی دکمه افزودن جدید کلیک کنید. TwentySeventeen را جستجو کنید و سپس روی Install کلیک کنید. پس از اتمام نصب تم جدید، روی Activate کلیک کنید.

نحوه ایجاد صفحات سایت

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

1. صفحه اصلی را ایجاد کنید

در داشبورد وردپرس خود، به Elements بروید. روی پیوند غذا و نوشیدنی در بالا کلیک کنید و سپس به پایین بروید تا قالب Juice Bar را پیدا کنید. روی ششمین قالب با نام Home 6 کلیک کنید و سپس دکمه Import Pro را بزنید.

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

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

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

2. منو سایت خود را ایجاد کنید

برای ایجاد صفحه منو، منوی 5 را انتخاب کرده و روی Import Pro Template کلیک کنید. سپس می توانید همان مراحل بالا را برای ایجاد پیش نویس صفحه منو با این الگوی Elementor دنبال کنید.

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

3. صفحه درباره ایجاد کنید

صفحه درباره خود را به همان روش بالا ایجاد کنید، فقط این بار الگوی About 1 را انتخاب کنید.

4. یک صفحه تماس با ما ایجاد کنید

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

آشنایی با المنتور (نحوه طراحی سایت وردپرس با المنتور)

بهترین راه برای آشنایی با المنتور، دیدن آن در عمل است. با رفتن به صفحات > همه صفحات شروع کنید. صفحه اصلی را که ایجاد کرده اید پیدا کنید و روی نام صفحه قرار دهید. وقتی پیوندهای منو در زیر ظاهر شد، روی Edit with Elementor کلیک کنید.

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

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

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

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

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

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

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

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

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

کار با بخش ها یا ستون های داخلی در المنتور

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

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

کار با ویجت ها در المنتور

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

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

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

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

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

برای تغییر تنظیمات رنگ کلی، روی منوی همبرگر سمت چپ در صفحه ویرایش صفحه کلیک کنید. سپس، روی پیوند Default Colors در زیر منوی Style کلیک کنید.

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

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

سفارشی کردن تایپوگرافی در المنتور

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

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

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

سفارشی کردن تصاویر المنتور

هنگامی که رنگ ها و فونت ها را در سایت خود سفارشی کردید، زمان آن رسیده است که تصاویر استوک را با تصاویر خود جایگزین کنید. برای انجام این کار، روی بخشی که می خواهید با آن کار کنید کلیک کنید. در این صورت می خواهم تصویر را در قسمت Featured Menus تغییر دهم. روی ستون Kiwi Bliss کلیک کردم و سپس به تب Style رفتم.

ابتدا باید تصویر موجود را با کلیک بر روی Delete حذف کنید و سپس روی علامت + کلیک کنید تا تصویر خود را آپلود کنید. پس از بارگیری Media Library، روی آپلود فایل ها کلیک کنید و سپس روی دکمه Select files کلیک کنید.

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

نحوه طراحی سایت وردپرس با المنتور

اگر به جای تصاویر پس زمینه با تصاویر معمولی کار می کنید، گزینه های کمی کمتر خواهید داشت. به عنوان مثال، برای تغییر و سفارشی کردن تصاویر در بخش Meal Pricing صفحه اصلی، مراحل مشابه حذف تصویر موجود و سپس آپلود تصویر خود را دنبال خواهید کرد. سپس می توانید کدورت تصویر را تغییر دهید و فیلترهای مختلف CSS مانند Blur، Brightness و غیره را اضافه کنید.

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

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

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

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

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

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

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

پس از انجام تغییرات مورد نظر، روی دکمه سبز رنگ Publish کلیک کنید و تغییرات شما در سایت به صورت زنده نمایش داده می شود.

چگونه در المنتور پیوندهای رسانه های اجتماعی اضافه کنیم

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

روی دکمه Add Item کلیک کنید تا بتوانید پیوندهای بیشتری اضافه کنید. با تغییر شکل آیکون ها را سفارشی کنید و سپس روی زبانه Style کلیک کنید تا رنگ، اندازه، بالشتک و موارد دیگر آیکون را کنترل کنید.

همانطور که از اسکرین شات زیر می بینید، من یک نماد Pinterest اضافه کرده ام و نمادها را به شکل مربع با رنگ آبی تغییر داده ام.

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

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

در این مثال، آیکون ها را به بخش About که در مرحله قبل ایجاد شده بود اضافه کردم.

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

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

تاکنون اکثر سفارشی سازی های شما در صفحه اصلی انجام شده است. بیایید نگاهی بیندازیم که چگونه می توانید سایر عناصر مانند فرم تماس در صفحه تماس با ما را تغییر دهید. با بازگشت به صفحات > همه صفحات و انتخاب صفحه تماس با ما شروع کنید. روی Edit with Elementor کلیک کنید.

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

7 راه برای بهبود وب سایت شما

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

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

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

وظیفه بعدی در لیست شما سفارشی کردن کپی روی الگوها است. برای انجام این کار، ویجت ها را مستقیماً ویرایش می کنید و متن را با متن خود جایگزین می کنید. می‌توانید با هر صفحه‌ای با رفتن به صفحه‌ها > همه صفحات شروع کنید و سپس روی صفحه‌ای که می‌خواهید ویرایش کنید نگه دارید. بر روی Edit with Elementor کلیک کنید. در مثال زیر، من در حال ویرایش کپی صفحه درباره هستم.

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

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

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

با استفاده از بلوک ها، قالب های سرصفحه و پاورقی را اضافه کنید

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

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

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

یک بلوک هدر را که دوست دارید انتخاب کنید و سپس روی دکمه Insert کلیک کنید. سپس، روی Section Settings کلیک کنید و در زیر تنظیمات Layout، تگ HTML را روی هدر قرار دهید. همچنین می توانید عرض را روی تمام عرض تنظیم کنید، فاصله بین ویجت ها را تنظیم کنید، ویجت های بیشتری را به آن اضافه کنید و موارد دیگر.

همانطور که در تصویر زیر می بینید، نماد جستجو را حذف کرده و آیکون های اجتماعی را جایگزین آن کرده ام. پس از انجام تنظیمات هدر، روی دسته آن کلیک راست کرده و Save as a template را انتخاب کنید. سپس می توانید از هدر در تمام صفحات سایت خود مجددا استفاده کنید.

چگونه پاورقی های سفارشی را به المنتور اضافه کنیم؟

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

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

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

نقشه سایت چیست ؟الگوی سایت مپ

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

برای افزودن پاورقی، به پایین صفحه بروید و روی نماد پوشه در پایین صفحه کلیک کنید. روی My Templates کلیک کنید و سپس بلوک پاورقی ذخیره شده را انتخاب کنید. برای ذخیره تغییرات خود روی Update کلیک کنید.

سفارشی کردن وب سایت وردپرس

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

یک لوگو بارگذاری کنید

بیایید با بارگذاری یک لوگو شروع کنیم. برای انجام این کار، در داشبورد وردپرس خود به Appearance > Customize بروید. پس از بارگیری سفارشی ساز، بر روی Site Identity و سپس Select Logo کلیک کنید.

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

نحوه ایجاد منو در وردپرس

هنگامی که لوگو را آپلود کردید، به Appearance > Menu بروید و یک نام برای منوی خود وارد کنید. سپس روی Create Menu کلیک کنید. از آنجا، صفحاتی را که در بالا ایجاد و سفارشی کرده‌اید در سمت راست صفحه بررسی کنید.

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

چگونه صفحه اصلی سایت را تنظیم کنیم

آخرین مرحله سفارشی سازی وردپرس این است که صفحه ای را تنظیم کنید که به عنوان صفحه اصلی سایت شما باشد. برای انجام این کار، به تنظیمات > خواندن بروید. در کنار خطی که می گوید «صفحه اصلی شما نمایش داده می شود» یک صفحه ثابت را انتخاب کنید و صفحه اصلی را که ایجاد کرده اید انتخاب کنید. روی ذخیره تغییرات کلیک کنید و سپس از سایت خود دیدن کنید تا ببینید چگونه به نظر می رسد.

تنظیمات سئوی سایت

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

نحوه تنظیم عناوین متا در سایت

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

توضیحات متا

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

Slugs/URL

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

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

نحوه ایجاد قالب های دینامیک پویا

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

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

چگونه یک قالب وبلاگ ایجاد کنیم

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

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

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

یک قالب بایگانی وبلاگ ایجاد کنید

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

برای ایجاد یک الگو بایگانی وبلاگ، به داشبورد وردپرس خود بروید و به Elementor> My Templates بروید. روی بایگانی کلیک کنید و سپس دکمه آرشیو جدید اضافه کنید. این بار، شما بایگانی را از منوی کشویی انتخاب خواهید کرد و سپس نام آن را وارد کنید. سپس، روی دکمه Green Create Template کلیک کنید.

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

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

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

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

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

ساخت وب سایت خود را با Elementor شروع کنید – این برنامه رایگان است.