آموزش افزونه المنتور – Elementor

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

[toc]

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

آموزش ساخت پنل کاربری ووکامرس

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

برای این آموزش ما به افزونه های زیر نیاز داریم :

1. افزونه المنتور (دانلود افزونه المنتور)
2. افزونه Elementor Pro (دانلود افزونه المنتور پرو)

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

نصب افزونه های مورد نیاز

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

• آموزش نصب افزونه در وردپرس
• آموزش نصب افزونه المنتور 

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

منظور از پنل کاربری ووکامرس چیه؟

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

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

در زیر یک پنل کاربری ووکامرس رو مشاهده میکنید :

سفارشی سازی پنل کاربری ووکامرس

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

کدهای استفاده شده در آموزش

.woocommerce-MyAccount-navigation {
display:none;
}

.woocommerce-account .woocommerce-MyAccount-content {
width: 100%;
}

فیلم آموزش سفارشی سازی پنل کاربری ووکامرس

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

[toc]

دلایل استفاده از لندینگ پیج (حتما بخونید)

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

آمورش ساخت لندینگ پیج در المنتور

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

نکاتی مهم برای ساخت صفحه فرود موثر و مفید

1 –  ارائه محتوای با کیفیت

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

در اینجا 4 عنصر متنی بسیار مهم هستند : 

عنوان ها

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

زیر عنوان ها

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

فراخوانی برای اقدام (Call to action)

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

استفاده از تصاویر مفهومی

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

فیلم آموزش ساخت لندنگ پیج در المنتور

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

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

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

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

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

مرحله 1: برای شروع ابتدا به قسمت پیشخوان وردپرس > قالب ها > قالب های ذخیره شده برید.

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

مرحله 3: بعد از انتخاب نام، روی دکمه ایجاد قالب کلیک کنید.

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

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

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

و یا میتوانید همانند تصویر زیر لوگوی سایت رو به صورت دستی به المنتور معرفی کنید :

مرحله 7: منو وب سایت را با یکی از فهرست های موجود در سایت تغییر بدید و در صورت نیاز تغییراتی در ظاهر منو ایجاد کنید.

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

مرحله 9: در این مرحله باید یک شرایط خاصی رو برای سربرگ ساخته شده انتخاب کنید. ما در این جا گزینه “ورودی سایت” رو انتخاب میکنیم. یعنی من میخوام که سربرگ ساخته شده برای تمامی بخش های سایت اعمال بشه و همچنین میتوانید برای هر برگه، نوشته، محصول و… یک سربرگ جدا بسازید و سایت رو حرفه ای تر کنید.

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

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

[su_box title=”نکته مهم ” box_color=”#ffb21c” radius=”5″]شما تا این مرحله یک سربرگ سفارشی توی المنتور ایجاد کردید و تمامی مراحل رو یاد گرفتید. حالا میتوانید از مرحله اول شروع کنید و یک سربرگ سفارشی بسیار زیبا طراحی کنید و در صفحاتتون استفاده کنید و سعی کنید از طرح های آماده کتابخانه المنتور استفاده نکنید و برای خود یک طرح بسازید. براحتی آب خوردن میتوانید این کار رو انجام بدید … ❤❤😂[/su_box]

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

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

نحوه رفع خطای لودینگ در المنتور

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

مشکل لودینگ در المنتور چیه؟

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

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

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

تصویر زیر همه چیز رو مشخص میکنه :

#4 روش عملی برای رفع مشکل بارگذاری بینهایت ابزارک ها در المنتور

در اینجا 5 روش کاملا عملی و 100% روبراتون آماده کردم که تماما بر اساس تجربه تهیه شده و حتما یکی از این روش ها میتونه مشکل لودینگ در المنتور رو رفع کنه وبراحتی بتوانید از صفحه ساز استفاده کنید.

#1 بررسی تداخل افزونه ای

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

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

• اگر رفع شد : اگر مشکل رفع شد یکی به یکی افزونه ها رو باید فعال کنید و یک بار دیگر بعد فعال کردن هر افزونه المنتور ر چک کنید و ببینید که آیا مشکل برطرف شده یا نه. باید تا رسیدن به افزونه مشکل زا این کار رو انجام بدید. (درسته یکم زمانبره ولی باید قدم به قدم برای هر افزونه این کار رو انجام بدید.)
• اگر رفع نشد : اگر برطرف نشد به روش بعدی مراجعه کنید.

#2 بررسی ورژن PHP هاست و محدودیت حافظه PHP

برای استفاده از بهترین عملکرد افزونه المنتور باید ورژن PHP هاست رو به آخرین نسخه آپدیت کنید که البته توی نسخه جدید وردپرس هم این کار اجباری شده و باید حتما هاست ار آخرین نسخه PHP استفاده کند. همچنین باید میزان حافظه رو بر روی 128M قرار بدید تا بهترین عملکرد رو از المنتور شاهد باشید. میتوانید برای افزایش ورژن php و حافظه به هاستینگ تیکت بدید تا این کار رو برای شما انجام بدن.

#3 چک کردن فایل .htaccess

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

یک فایل به نام .htaccess در ریشه اصلی هاست درست کنید و کدهای زیر رو توش قرار بدید و ذخیره کنید :

#This Apache config file was created by Duplicator Installer on 2019-02-17 07:51:14.
#The original can be found in archived file with the name htaccess.orig
 
# BEGIN WordPress
RewriteEngine On
RewriteBase /zenith/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /zenith/index.php [L]
# END WordPress

#4 تغییر روش بارگذاری ویرایشگر المنتور

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

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

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

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

ساخت فوتر پنهان در المنتور

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

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

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

یکی از این نمونه های آماده رو به دلخواه اینتخاب کنید :

بعد از درج فوتر موردنظرتون از نمونه های آماده، بر روی بخش اصلی کلیک کرده و به تنظیمات پیشرفته بخش برید، سپس مقدار z-index را روی 1 قرار دهید. (با این کار ما برای این بخش یا سکشن یک اولویت انتخاب میکنیم)

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

نکته : میتوانید برای چشم نواز بودن و رابط کاربری زیباتر، این بخش رو توی موبایل و تبلت پنهان کنید و فقط در دسکتاپ نمایش داده شود. (برای تنظیم براحتی میتوانید در بخش “شناور روی” دستگاهی را که میخوهید به نمایش در بیاید رو انتخاب کنید.)

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

section.elementor-element { z-index: 2; }

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

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