چگونه می توان طرح وب سایت خود را با Elementor بهینه کرد

می خواهید بدانید که چگونه می توانید طرح بندی وب سایت خود را با آن بهینه کنید Elementor ?

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

عملکرد وب سایت می تواند تحت تأثیر عوامل زیادی قرار گیرد ، به عنوان مثال: اندازه تصویر بزرگ ، پیکربندی سرور ، افزونه های زیاد ، و سایر عوامل.

عملکرد وب سایت یکی از قوی ترین ارزش های ما به عنوان سازندگان وب است. به همین دلیل ما این دوره را در 5 قسمت ایجاد کردیم.

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

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

درس 1: بهترین شیوه های بهینه سازی طرح بندی

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

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

ما موضوعات زیر را پوشش خواهیم داد:

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

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

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

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

آزمایش روشهای بد

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

مرحله 1: وب سایت خود را در یک پنجره ناشناس تأیید کنید

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

مرحله 2: تأیید کنید که از مسیر مستقیم URL استفاده می کنید

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

• برای مشاهده همه صفحات وب سایت خود ، روی "صفحات" کلیک کنید.
• نشانگر خود را روی صفحه خود ببرید و روی گزینه "View" کلیک کنید. این شما را مستقیماً به صفحه شما می برد.
• این URL را در پنجره ناشناس کپی و جایگذاری کنید و پس از بارگیری وب سایت ، آماده آزمایش آن هستید!

آزمایش و مشاهده نتایج عملکرد

مرحله 1: نتایج عملکرد را آزمایش کنید

ممکن است در گذشته از Chrome Developer Tools استفاده کرده باشید.

در غیر این صورت ، به منظور بررسی و نمایش محتوای HTML و CSS صفحه خود:

• در هر نقطه از صفحه خود راست کلیک کرده و روی "بازرسی" کلیک کنید. چندین زبانه را مشاهده خواهید کرد که در آن می توانید HTML و CSS خود را بخوانید ، خطاها را بیابید ، نتایج SEO را دریافت کنید و آزمایش های مختلف را اجرا کنید.
• برگه Network را انتخاب کرده و دکمه های cmd یا ctrl + R را برای بارگیری نتایج فشار دهید.

همانطور که مشاهده می کنید ، چیدمان فعلی ما 2,88 ثانیه طول می کشد و 81 درخواست را انجام می دهد.

مرحله 2: مشاهده نتایج عملکرد

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

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

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

ما در حال حاضر رتبه عملکرد 73/100 را دریافت می کنیم ، که مطمئناً می توانیم روی آن کار کنیم.

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

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

بهینه سازی عناصر صفحه

مرحله 1: بهینه سازی سرصفحه

بیایید با سربرگ.

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

در ستون اول ، لوگوی ما شامل دو ویجت است:

1. Un ویجت تصویر که فایل تصویری .png لوگوی ما را نمایش می دهد
2. ویجت عنوان.

در ستون دوم ، منوی سربرگ شامل ویجت منوی ناوبری است.

ستون سوم شامل موارد زیر است:

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

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

مرحله 2: ایجاد سرصفحه جدید

ستون 1:

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

بهترین روش ها برای تصاویر:

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

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

• ابعاد تصویر را در داخل ویجت تعریف کنید.

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

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

ستون 2

بازگشت به پنل ابزارک ها:

• ویجت منوی ناوبری را در زیر لوگو بکشید و رها کنید
• اشاره گر را روی "هیچ" تنظیم کنید
• به برگه "Style" بروید و فونت دلخواه خود را اضافه کنید (به طوری که با طرح قبلی ما مطابقت داشته باشد)

بهترین شیوه ها برای یک ظاهر طراحی کلی:

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

فونت های جهانی:

این را می توان با استفاده از عملکرد Global Fonts انجام داد:

• به برگه "Style" بروید و فونت دلخواه خود را (به گونه ای که با طرح قبلی ما مطابقت داشته باشد) انتخاب کنید ، یک تغییر کوچک ایجاد کرده و روی نماد بعلاوه قرار دهید.
• روی نماد plus کلیک کنید و خانواده فونت مورد نیاز خود را انتخاب کنید
• سبک هایی را که در قالب استفاده می کنید به عنوان فونت جهانی ذخیره کنید

سپس می توانید از این سبک در هر ویجتی که ایجاد می کنید استفاده کنید.

رنگهای جهانی:

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

• روی "جهانی" کلیک کنید
• نشانگر را روی انتخاب کننده رنگ قرار دهید و روی آن کلیک کنید
• یک رنگ را انتخاب کرده و به نماد بعلاوه اشاره کنید
• روی "جهانی" کلیک کنید> "اصلی" را انتخاب کنید

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

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

مرحله 3: سرصفحه را ویرایش کنید

ستون 3

• به پنل "ابزارک" بروید
• ویجت Icon List را به زیر منو بکشید.
• موارد اضافی لیست را حذف کنید
• متن خود را اضافه کنید
• نماد مورد نظر خود را انتخاب کنید
• به برگه "سبک" بروید
• رنگ ها و فونت های مورد نظر خود را به طور کلی مشخص کنید

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

برای حل این مشکل:

• ویجت آرم سایت >> برگه 'Advanced' را انتخاب کنید
• "Positioning" را انتخاب کرده و عرض آن را روی "Inline" قرار دهید

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

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

تعریف موقعیت ستون با عناصر درون خطی

• ستون خود را انتخاب کنید >> به برگه "Layout" بروید
• در "تراز عمودی" ، "پایین" را انتخاب کنید
• "در تراز افقی" "فاصله بین" را انتخاب کنید

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

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

ما می توانیم این مشکل را با تنظیم حاشیه حل کنیم:

• ویجت منوی ناوبری >> برگه “Advanced” را انتخاب کنید
• حاشیه را گروه بندی کرده و فاصله را با مقدار منفی حذف کنید

مرحله 4: سرصفحه را پاسخگو کنید

حالا بیایید ببینیم نسخه فعلی وب سایت ما در دستگاه های تلفن همراه چگونه است.

بهترین روش ها برای پاسخگویی به تلفن همراه:

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

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

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

بیایید ببینیم چگونه می توانیم با استفاده از تنظیم "عرض سفارشی" برای ابزارک ها و عناصر خود ، به این مهم برسیم.

تنظیم عرض سفارشی برای رایانه لوحی

• بر روی زبانه 'Nav Menu' >> 'Advanced' کلیک کنید
• "Positioning" را انتخاب کنید >> عرض را روی "Custom" تنظیم کنید.
• "٪" >> را انتخاب کنید >> عرض یکسان (در درصد) ویجت را به فضای خالی اطراف آن بدهید.
• روی برگه "محتوا" کلیک کنید "" تغییر حالت ">" راست "را انتخاب کنید.

این به شما امکان می دهد تا منوی ضامن را در هر نقطه در عرض ویجت تراز کنید.

حالا بیایید سفارشی سازی منوی ضامن را به پایان برسانیم.

• "محتوا" >> روی ضامن "عرض کامل" کلیک کرده و آن را روی "بله" تنظیم کنید.
• "Style" >> پس زمینه را با کشیدن نوار "Color Picker" به سمت چپ حذف کنید.

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

تعیین عرض سفارشی برای تلفن همراه

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

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

برای حل این مشکل:

موقعیت یابی منوی Nav

• روی "Nav Menu" >> زبانه "Advanced" کلیک کنید
• "Positioning" را انتخاب کنید >> عرض را روی "Custom" تنظیم کنید
• "٪" را انتخاب کنید >> عرض ویجت را 30٪ بدهید ، تا در کنار لوگوی ما قرار گیرد

موقعیت یابی لیست آیکون ها

• روی برگه 'Icon List' >> 'Advanced' کلیک کنید
• "پر کردن" >> مقادیر گروه را انتخاب کنید
• پد 12px را به "TOP" اضافه کنید

می تونی باور کنی؟

سرصفحه ما در اصل استفاده شده است 2 بخش ، 12 ویجت و 10 ستون. اکنون سرصفحه ما استفاده می کند 1 بخش ، 3 ویجت و 1 ستون.

و نتیجه یکسان است!

مرحله 5: بخش Hero را بهینه کنید

بیایید به بخش بعدی وب سایت خود برویم: بخش قهرمان

بهترین شیوه ها برای بخش قهرمان:

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

کنترل موقعیت ویجت در یک ستون

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

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

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

• ستون اضافی سمت راست متن را حذف کنید.
• فاصله دهنده را بردارید.

در عوض ، برای قرار دادن متن قهرمان در جایی که می خواهیم ، از گزینه های تراز ستون استفاده می کنیم:

• ستون را انتخاب کنید.
• "تراز عمودی" را روی "وسط" قرار دهید.
• به برگه "Advanced" بروید.
• "پر کردن" >> مقادیر گروه را انتخاب کنید
• Padding راست را روی 50٪ تنظیم کنید.

• بخش را انتخاب کنید.
• "حداقل ارتفاع" را انتخاب کنید >> آن را روی 80 تنظیم کنید.

رفع کنتراست بین متون و پس زمینه

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

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

• روی سربرگ خود کلیک کنید.
• به برگه "Style" بروید> "Text text" را انتخاب کنید.

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

راه دیگر برای واضح تر شدن متن ، استفاده از روکش است.

• بخش >> برگه «سبک» >> «پوشش پس زمینه» را انتخاب کنید
• یکی از رنگهای کلی خود را انتخاب کرده و با کدورت بازی کنید تا به نتیجه دلخواه برسید

مرحله 6: بخش را با جعبه های نماد بهینه کنید

حالا بیایید به بخش بعدی خود برویم ، جایی که در حال حاضر یک بخش داخلی با چهار ستون داریم. در حال حاضر ، هر ستون دارای سه ویجت است: ویجت تصویر ، ویجت عنوان ، و ویجت ویرایشگر متن.

بیایید ببینیم چگونه می توانیم این بخش را برای بهبود عملکرد آن ساده کنیم.

محتوای ناحیه نماد

• دکمه »Widget Icon Box« را در منوی ویجت انتخاب کرده و آن را به ستون بکشید
• "جعبه نماد" را انتخاب کنید
• به تصویر نماد اشاره کنید
• "بارگیری SVG" را انتخاب کنید **
• نماد سفارشی خود را وارد کنید

** توجه: نشان ها فایل های SVG هستند. اگر نکرده اید ، به داشبورد وردپرس و سپس به Elementor >> Settings بروید. شما باید Enable Unfiltered File Downloads را فعال کنید.

• "عنوان" خود را تایپ کنید
• "توضیحات" خود را تایپ کنید
• "Style" را انتخاب کنید >> یک رنگ کلی را انتخاب کنید
• "اندازه" را انتخاب کرده و نوار را به اندازه دلخواه خود بکشید
• "Padding" را انتخاب کرده و نوار را به تعداد دلخواه خود بکشید

مرحله 8: بخش "خدمات" را بهینه کنید

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

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

• یک بخش جدید با یک ستون ایجاد کنید
• در "طرح بندی" >> "عرض محتوا" را روی "عرض کامل" تنظیم کنید
• "Widget Image Box" را در پنل ویجت انتخاب کرده و آن را به ستون بکشید

(ما قادر خواهیم بود تمام دارایی های بخش را در این ویجت ادغام کنیم)

• عنوان را تایپ کنید
• توضیحات را تایپ کنید

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

• همان تصویر را از کتابخانه رسانه وارد کنید
• به برگه "محتوا" بروید> "موقعیت تصویر" را روی "راست" تنظیم کنید

• به برگه "سبک" بروید
• فاصله بین عناصر را افزایش دهید
• "عرض" تصویر را افزایش دهید
• بخش "محتوا" را گسترش دهید
• تراز "مرکز" را انتخاب کنید
• "تراز عمودی" را روی "وسط" تنظیم کنید
• رنگ ها و فونت های مورد نظر خود را به طور کلی مشخص کنید
• به برگه "Advanced" بروید
• 10٪ پر کردن را به ویجت اضافه کنید

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

مرحله 9: بخش فراخوان به عمل را بهینه کنید

بهترین شیوه ها برای پیوندهای CTA:

• اطمینان حاصل کنید که همه پیوندهای رسانه های اجتماعی شما به درستی کار می کنند و دکمه حاوی پیوند است.
• وقتی پیوندی را به وب سایت دیگری اضافه می کنید ، این ویژگی را وارد کنید: "rel | noopener"

(می توانید این کار را با کلیک روی نماد چرخ دنده و تایپ ویژگی در "ویژگی های سفارشی" انجام دهید). با این کار پیوند در برگه مرورگر جدید باز می شود و نمره عملکرد شما افزایش می یابد.

بخش زیر یک فراخوان برای اقدام برای خدمات ما ارائه می دهد.

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

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

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

• به برگه "طرح بندی" بروید> "عرض محتوا" را روی "عرض کامل" تنظیم کنید
• به برگه "Advanced" بروید >> هرگونه پر کردن اضافی را حذف کنید

• "Call to Action Widget" را در پنل ویجت انتخاب کرده و آن را به ستون بکشید
• "موقعیت تصویر" را روی "چپ" تنظیم کنید
• تصویر خود را از کتابخانه رسانه انتخاب کنید
• بخش "محتوا" را گسترش دهید
• سرصفحه را تایپ کنید
• توضیحات را تایپ کنید
• متن دکمه را تایپ کنید

• به برگه "سبک" بروید
• "Padding" را بین عناصر اضافه کنید
• تنظیم عرض تصویر
• بخش "محتوا" را گسترش دهید
• فونت جهانی عنوان خود را انتخاب کنید
• فاصله بین توضیحات و دکمه را افزایش دهید
• رنگهای جهانی مناسب برای هر منبع را انتخاب کنید
• بخش "Button" را گسترش دهید
• اندازه آن را روی "بزرگ" تنظیم کنید
• آن را با توجه به نیازهای خود مانند رنگ پس زمینه و شعاع حاشیه سفارشی کنید

تا کنون این بخش 2 ستونی با 6 ویجت بوده است. در حال حاضر این یک بخش 1 ستونی با تنها 1 ویجت است!

مرحله 10: چرخ فلک تصویر را بهینه کنید

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

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

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

• یک بخش جدید با 1 ستون ایجاد کنید
• به برگه "طرح بندی" بروید> "عرض محتوا" را روی "عرض کامل" تنظیم کنید
• دکمه »Image Carousel Widget« را از پنل ویجت انتخاب کرده و آن را به ستون بکشید
• تصاویر دلخواه را از کتابخانه رسانه اضافه کنید

• به برگه "محتوا" بروید
• "اندازه تصویر" را روی "متوسط ​​- 300 300 XNUMX" تنظیم کنید
• "اسلاید برای نمایش" ، "اسلاید برای پیمایش" و "ناوبری" را مطابق با ترجیحات خود تنظیم کنید

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

• به برگه "Advanced" بروید
• پر کردن لازم را اضافه کنید

آنچه زمانی بخش 5 ستونی بود ، اکنون فقط 1 ستون است.

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

مرحله 11: بخش ویدیو را بهینه کنید

بهترین شیوه ها برای محتوای ویدیویی:

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

وقتی از گزینه "Lazy Load" استفاده می کنیم چه اتفاقی می افتد؟

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

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

• "ویجت ویدئو" را انتخاب کنید
• به برگه "سبک" بروید
• "بار تنبل" را انتخاب کنید

مرحله 12: پاورقی را بهینه کرده و آن را به روز نگه دارید

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

بیایید ببینیم چگونه پاورقی را بهینه کنیم و مطمئن شویم که همیشه به روز است.

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

برای انجام این کار ، ما به شرح زیر عمل می کنیم:

• ویدجت های اضافی را حذف کرده و فقط ویجت Title باقی می ماند
• ویجت عنوان را انتخاب کنید
• روی نماد "برچسب های پویا" در سمت راست قسمت "عنوان" (که به عنوان "دکمه والدین" نیز شناخته می شود) کلیک کنید.

• از منوی کشویی ، مورد منو "تاریخ و زمان کنونی" را انتخاب کنید
• روی نماد والد کلید کلیک کنید
• روی برگه "قالب تاریخ" کلیک کنید و مورد "سفارشی" را انتخاب کنید
• حذف آنچه در حال حاضر در قسمت "قالب سفارشی" وجود دارد ، به جز "Y"
• برگه "Advanced" را انتخاب کنید
• قسمت "Forward" را برجسته کرده و کلیدهای "option" و "G" را همزمان (یا "control" ، alt "و" C "به طور همزمان نگه دارید) تا نماد" © "را تایپ کنید.
• بعد از "©" فاصله اضافه کنید

• قسمت "بعد" را انتخاب کنید
• فضایی را تایپ کنید و متنی را که می خواهید بعد از سال ظاهر شود بنویسید ، مانند "همه حقوق محفوظ است"

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

در حالت ایده آل ، هرچه تعداد قسمت های شما کمتر باشد ، کد HTML اضافی کمتری خواهید داشت.

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

و تمام ، طرح شما بهینه شده است!

ارزیابی عملکرد وب سایت جدید

ما نتایج را در پنجره DevTools (Inspector) بررسی می کنیم:

• برگه "شبکه" را انتخاب کنید:

در اینجا تغییرات خوب و مثبتی وجود دارد:

• بارگیری وب سایت در حال حاضر 568 میلی ثانیه طول می کشد
• از 81 درخواست به 46 رسیدیم
• برگه "Lighthouse" را انتخاب کنید ، در آنجا خواهید دید که نمره عملکرد ما از 73 به 98 افزایش یافته است

به خاطر داشته باشید که ما عملکرد خود را بدون استفاده از هیچ افزونه شخص ثالث بهینه کرده ایم. تنها چیزی که لازم بود ترفندهای ساده و بهترین شیوه ها بود.

مرحله 13: نتایج را با جلوه های حرکتی آزمایش کنید

ما می خواهیم سایت خود را تعاملی تر و سرگرم کننده تر کنیم ، اما این چگونه بر نمرات عملکرد ما تأثیر می گذارد؟ ببینیم چه کار می توانیم بکنیم.

هدر را به یک عنصر "ثابت" تبدیل کنید:

• هدر را انتخاب کنید
• به برگه "Advanced" بروید
• برگه "جلوه های حرکتی" را گسترش دهید
• گزینه "Sticky" را روی "Top" قرار دهید

بخش قهرمان را به یک عنصر "ثابت" تبدیل کنید:

• بخش قهرمان را انتخاب کنید
• به برگه "سبک" بروید
• لیست کشویی "Attachment" را انتخاب کرده و "Fixed" را انتخاب کنید.

از یک انیمیشن ورودی برای متن قهرمان (سربرگ):

• ویجت Header را انتخاب کنید
• به برگه "Advanced" بروید
• برگه "جلوه های حرکتی" را گسترش دهید
• Input Animation را انتخاب کرده و روی "Fade In" تنظیم کنید

برای توصیف متن قهرمان (ویجت ویرایشگر متن) از انیمیشن ورودی استفاده کنید:

• ویجت ویرایشگر متن را انتخاب کنید
• به برگه "Advanced" بروید
• برگه "جلوه های حرکتی" را گسترش دهید
• "انیمیشن ورودی" را انتخاب کرده و روی "Fade In" تنظیم کنید

همین کار را برای ویدجت های بعدی انجام دهید ، برای جلوه های ظریف هنگام بارگذاری صفحه.

حالا بیایید دوباره تست عملکرد را اجرا کنیم تا ببینیم تأثیرات حرکتی چگونه بر نمره ما تأثیر می گذارد:

• به پنجره "Inspector" بازگردید
• برگه "Lighthouse" را انتخاب کنید
• روی "ایجاد گزارش" کلیک کنید

اکنون می بینیم که نمره عملکرد ما به 97 کاهش یافته است - این قطعاً تفاوت چندانی ندارد و وب سایت را جالب تر و سرگرم کننده تر می کند.

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

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

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

و این تازه آغاز کار است - قسمت بعدی این دوره را پوشش می دهدبهینه سازی تصویر.

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

اکنون Elementor Pro را دریافت کنید!

نتیجه

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

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

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

...