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

بن پنس
4 ژوئن 2024

0 نظر

معاملات بزرگ در حال آمدن است! ما در حال جشن B-Day عناصر هستیم.

جودی برلین
28 مه 2024

0 نظر

اظهار نظر
ایجاد شبکه

سازنده وب سایت و میزبانی
میزبانی استاتیک +معمار
صفحه سازنده صفحه -در
سلام موضوع
محتوای پویا
تجارت الکترونیک
تمور
زمین
سازنده پاپ
سازنده
بهینه سازی گردش کار
عناصر AI
بهینه کننده تصویر
سازنده WooCommerce
قیمت

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

عنصر

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

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

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

Elementor یک بستر برجسته سازنده وب سایت برای متخصصان وردپرس است. Elementor خدمات را برای متخصصان شبکه (از جمله توسعه دهندگان ، طراحان و کارکنان بازاریابی) ارائه می دهد و وب سایت جدیدی دارد که هر 10 ثانیه بر روی پلتفرم خود ایجاد می شود.
در اخبار ما مشترک شوید
پست الکترونیک

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

。 Elementor. کلیه حقوق محفوظ استقسمت “hou” را انتخاب کنید
یک فضا وارد کنید و متن مورد نظر خود را بعد از یک سال بنویسید -برای مثال ، “حفظ مالکیت”

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

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

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

این همان است ، طرح شما بهینه شده است!
مجدداً عملکرد وب سایت را امتحان کنید

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

برگه “شبکه” را انتخاب کنید:

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

این وب سایت اکنون برای بارگیری به 568 میلی ثانیه نیاز دارد
ما از 81 درخواست به 46 افزایش یافته است
برگه “فانوس دریایی” را انتخاب کنید ، نمره عملکرد ما را از 73 تا 98 مشاهده خواهید کرد

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

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

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

عنوان را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
گزینه “چسبناک” را روی “بالا” تنظیم کنید

قهرمان عنصر “ثابت” را بسازید:

قسمت قهرمان را انتخاب کنید
به برگه “سبک” روی آورید
لیست “ضمیمه” را انتخاب کنید و سپس “ثابت” را انتخاب کنید

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

عنوان قطعات کوچک را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

یک مؤلفه کوچک ویرایشگر متن را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

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

بازگشت به پنجره “بازرس”
برگه “فانوس دریایی” را انتخاب کنید
روی “گزارش تولید” کلیک کنید

اکنون می بینیم که نمره عملکرد ما به 97 کاهش یافته است- این یک تفاوت بزرگ نیست ، این باعث می شود وب سایت جالب تر و جالب تر شود.
آیا می توانید نمرات عملکرد جدید ما را باور کنید؟

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

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

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

یادگیری مبارک (عملکرد)!
اشتراک گذاری
به دنبال محتوای تازه هستید؟
از اخبار و ارتباطات هفتگی ما مقاله و نظرات دریافت کنید.
پست الکترونیکفضای بین توضیحات و دکمه را افزایش دهید
رنگ جهانی صحیح را برای هر دارایی انتخاب کنید
بخش “دکمه” را گسترش دهید
اندازه را به عنوان “بزرگ” تنظیم کنید
آن را با توجه به نیازهای خود ، مانند رنگ پس زمینه و قطر مرزی سفارشی کنید

تاکنون این دو ستون با 6 مؤلفه کوچک است. اکنون ، این یک قسمت ستون با تنها یک قسمت کوچک است!
مرحله 10: چرخش تصویر را بهینه کنید
بهینه سازی تروجان چرخش تصویر
در طراحی فعلی و نمایش چندین تصویر در تصویر ما در حال چرخش یک خطای مشترک وجود دارد.

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

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

برای ایجاد یک قسمت جدید از 1 ستون استفاده کنید
انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“تصویر چرخاننده تصویر” را از یک پنل قسمت کوچک انتخاب کرده و سپس آن را به ستون بکشید
تصاویری را که از کتابخانه رسانه انتخاب می کنید اضافه کنید

انتقال به برگه “محتوا”
“اندازه تصویر” را روی “متوسط -300 x 300” تنظیم کنید
مطابق با اولویت خود “فیلم نمایش اسلاید” ، “نورد نورد” و “ناوبری” را تنظیم کنید

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

انتقال به برگه “پیشرفته”
پر کردن لازم را اضافه کنید

بخشی از پنج ستون اکنون فقط 1 ستون است.

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

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

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

چه اتفاقی می افتد که گزینه “بار تنبل” را اعمال کنیم؟

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

می توانید این گزینه را در مؤلفه های مختلف مختلف مانند ویجت لوتی و ویجت گالری (PRO) پیدا کنید.

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

“مؤلفه کوچک ویدیویی” را انتخاب کنید
به برگه “سبک” برگردید
“بار تنبل” را انتخاب کنید

مرحله 12: پاورقی را بهینه کرده و به روزرسانی را نگه دارید
بهینه سازی فوتبال Elementor

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

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

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

ما برای انجام این کار اقدامات زیر را انجام خواهیم داد:

اجزای کوچک اضافی را حذف کنید ، و فقط عنوان های کوچک را ترک می کنند
عنوان قطعات کوچک را انتخاب کنید
روی نماد “Dynamic Tag” در سمت راست قسمت “عنوان” کلیک کنید (در غیر این صورت آن را “دکمه پدر” نامیده می شود

در منوی Drop -down ، مورد “زمان فعلی تاریخ” را انتخاب کنید
روی نماد والدین آچار کلیک کنید
روی برگه “Date Format” کلیک کنید ، و سپس مورد “سفارشی” را انتخاب کنید
محتوای فعلی را در قسمت “فرمت سفارشی” به جز “y” حذف کنید
برگه “پیشرفته” را انتخاب کنید
قسمت “جلو” را انتخاب کنید ، و سپس کلیدهای “گزینه ها” و “G” را همزمان (یا “کنترل” ، “Alt” و “C” حفظ کنید تا نماد “©” را تایپ کنید.
بعد از “添” فضایی اضافه کنیدمحتوای جعبه نماد

از منوی “مؤلفه کوچک” “Icon Frame Window” را انتخاب کنید و سپس آن را به ستون بکشید
“جعبه نماد” را انتخاب کنید
حلق آویز روی تصویر
“بارگذاری SVG” را انتخاب کنید **
نماد سفارشی خود را وارد کنید

** لطفا توجه داشته باشید: نشان پرونده SVG است. اگر این کار را نکرده اید ، لطفاً به صفحه ابزار WordPress بروید و سپس به تنظیمات Elementor >> بروید. شما باید بارگذاری را که فیلتر نشده است باز کنید.

“عنوان” خود را وارد کنید
“توضیحات” خود را وارد کنید
“سبک” را انتخاب کنید >> رنگ جهانی را انتخاب کنید
“اندازه” را انتخاب کرده و نوار را به اندازه انتخاب خود بکشید
“پر” را انتخاب کنید ، سپس نوار را به مقدار انتخاب خود بکشید

مرحله 8: قسمت “سرویس” را بهینه کنید
خدمات خانه طراحی

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

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

با یک ستون یک قسمت جدید ایجاد کنید
در “چیدمان” >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“جزء کوچک پنجره Frame Window” را از پانل اجزای کوچک انتخاب کرده و سپس آن را درون ستون بکشید

(ما قادر خواهیم بود تمام دارایی های این قسمت را برای این قسمت کوچک قرار دهیم)

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

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

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

به برگه “سبک” برگردید
“فاصله” بین عناصر را افزایش دهید
“عرض” تصویر را افزایش دهید
قسمت “محتوا” را گسترش دهید
تراز “مرکزی” را انتخاب کنید
“تراز عمودی” را به عنوان “میانه” تنظیم کنید
رنگ جهانی و قلم خود را تنظیم کنید

انتقال به برگه “پیشرفته”
10 ٪ پر کردن را به اجزای کوچک اضافه کنید

اکنون ، قسمت خدمات دارای همان طراحی است ، اما دارایی ها کمتر هستند.
مرحله 9: بخش فراخوانی اقدام را بهینه کنید
بهترین روش پیوند CTA:

اطمینان حاصل کنید که همه پیوندها و پیوندهای رسانه های اجتماعی به طور عادی کار می کنند ، و دکمه حاوی پیوندها است.
هنگام افزودن پیوندی به وب سایت های دیگر ، لطفاً این ویژگی را درج کنید: “rly | noopner”

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

بخش بعدی درخواست تجدید نظر در سرویس ما را پیشنهاد می کند.

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

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

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

انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
انتقال به برگه “پیشرفته” >> هرگونه پر کردن اضافی را حذف کنید

“تماس با اجزای کوچک” را از یک پنل قسمت کوچک انتخاب کنید و سپس آن را درون ستون بکشید
“موقعیت تصویر” را روی “سمت چپ” تنظیم کنید
تصویر خود را از کتابخانه رسانه انتخاب کنید
قسمت “محتوا” را گسترش دهید
عنوان را وارد کنید
توضیحات ورودی
متن دکمه ورودی

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

در این حالت ، ما تمام مؤلفه های کوچک هر سه عنوان را در Viewport نگه می داریم. اما لطفاً به یاد داشته باشید که برای برخی از وب سایت ها ، برخی از عناصر عنوان در تلفن همراه یا رایانه لوحی ممکن است معنی دار تر باشد.

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

برای حل این مسئله:

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

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را برای “سفارشی” انتخاب کنید
“٪” را انتخاب کنید> عرض یک جزء کوچک را به 30 ٪ بدهید ، بنابراین برای آرم ما مناسب است

موقعیت یابی لیست نماد

روی برگه “لیست نماد” >> “پیشرفته” کلیک کنید
“پر” >> unink مقدار را انتخاب کنید
12px را به “بالا” پر کنید

باور داری؟

در ابتدا ، عنوان ما از 2 قسمت ، 12 مؤلفه کوچک و 10 ستون استفاده کرد.
اکنون عنوان ما از 1 قسمت ، 3 مؤلفه کوچک و 1 ستون استفاده می کند.

همان به نظر می رسد!
مرحله 5: قسمت قهرمانانه را بهینه کنید

بیایید به قسمت بعدی وب سایت ما وارد شویم: Heroes.

بهترین تمرین قسمت قهرمان:

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

موقعیت مؤلفه کوچک در ستون را کنترل کنید

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

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

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

ستون اضافی را در سمت راست متن حذف کنید.
پد را حذف کنید.

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

ستون را انتخاب کنید.
“تراز عمودی” را روی “میانه” تنظیم کنید.
انتقال به برگه “پیشرفته”.
“پر” >> unink مقدار را انتخاب کنید
پر کردن صحیح را روی 50 ٪ تنظیم کنید.

قسمت را انتخاب کنید.
“حداقل ارتفاع” را انتخاب کنید >> آن را روی 80 تنظیم کنید.

تضاد بین متن و پس زمینه را برطرف کنید

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

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

عنوان خود را کلیک کنید
انتقال به برگه “سبک” >> “Text Shadow” را انتخاب کنید.

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

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

بخش “سبک” >> “پوشش پس زمینه” را انتخاب کنید
یکی از رنگهای جهانی خود را انتخاب کنید و با درجه ناقص بازی کنید تا نتیجه ایده آل

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

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

بیایید ببینیم که چگونه این قسمت را برای بهبود عملکرد آن ساده کنیم. رنگ جهانی:

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

روی “جهانی” کلیک کنید
روی انتخاب کننده رنگ آویزان شوید ، سپس روی آن کلیک کنید
یک رنگ را انتخاب کنید ، و سپس روی نماد شماره به علاوه شناور شوید
“جهانی” >> “پروردگار” را کلیک کنید

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

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

ستون 3

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

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

برای حل این مسئله:

برگه Site Logo Window قطعات کوچک >> “Advanced” را انتخاب کنید
“موقعیت یابی” را انتخاب کنید و عرض خود را روی “اتحادیه درونی” تنظیم کنید

این مرحله دقیق را برای “منوی ناوبری” اجزای کوچک و پنجره لیست آیکون تکرار کنید.

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

ستون خود را انتخاب کنید >> به برگه “چیدمان” بپیچید
در “تراز عمودی” ، “پایین” را انتخاب کنید
“در تراز افقی” ، “فضای بین” را انتخاب کنید

انتخاب “فضا” بین تراز در اولین و آخرین مؤلفه های کوچک در هر دو انتها قرار دارد ، تا فاصله مساوی بین سایر مؤلفه ها داشته باشد.

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

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

صفحه ناوبری منوی Parts Parts >> “Advanced” را انتخاب کنید
مرز پیوند را لغو کرده و فاصله را با مقادیر منفی حذف کنید

مرحله 4: پاسخ هدر را به سرعت انجام دهید
حال ، بیایید ظاهر نسخه فعلی وب سایت را در دستگاه تلفن همراه پیدا کنیم.

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

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

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

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

بیایید ببینیم که چگونه می توان از “عرض سفارشی” برای تعیین این هدف برای مؤلفه ها و عناصر کوچک خود استفاده کرد.
عرض سفارشی رایانه رایانه لوحی را تنظیم کنید

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را انتخاب کنید و عرض را روی “سفارشی” تنظیم کنید.
“٪” >> عرض عرض (در درصد درصد) را به عرض مؤلفه انتخاب کنید.

روی “Content” Tab >> “سوئیچینگ و تراز” >> “صحیح” را انتخاب کنید.

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

حال ، بیایید منوی سوئیچینگ شکل را تکمیل کنیم.

“محتوا” >> برای تغییر و تنظیم آن روی “بله” کلیک کنید.
“سبک” >> با کشیدن ستون “پیکر رنگ” به سمت چپ ، پس زمینه حذف می شود. با وارد کردن ایمیل ، شما موافقت می کنید یک ایمیل Elementor ، از جمله ایمیل بازاریابی ، دریافت کنید.
و با شرایط ، ضوابط و سیاست های حریم خصوصی ما موافق باشید.
تصویری از اشلی وایتهیر
اشلی وایتهیر
اشلی یک متخصص ابتدایی است و طراحی را به شدت تماشا می کند و مایل به ایجاد وب سایت های کاربر دوستانه و مؤثر است. هنگامی که او یک وب سایت و مواد آموزشی ایجاد نمی کند ، CrossFit ، دوچرخه کوهستانی ، خواندن و کاوش در جهان را دوست دارد.
شما همچنین ممکن است دوست داشته باشید
عملکرد وب سایت را از طریق بهینه ساز تصویر Elementor تقویت کنید

بن پنس
4 ژوئن 2024

0 نظر

معاملات بزرگ در حال آمدن است! ما در حال جشن B-Day عناصر هستیم.

جودی برلین
28 مه 2024

0 نظر

اظهار نظر
ایجاد شبکه

سازنده وب سایت و میزبانی
میزبانی استاتیک +معمار
صفحه سازنده صفحه -در
سلام موضوع
محتوای پویا
تجارت الکترونیک
تمور
زمین
سازنده پاپ
سازنده
بهینه سازی گردش کار
عناصر AI
بهینه کننده تصویر
سازنده WooCommerce
قیمت

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

عنصر

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

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

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

Elementor یک بستر برجسته سازنده وب سایت برای متخصصان وردپرس است. Elementor خدمات را برای متخصصان شبکه (از جمله توسعه دهندگان ، طراحان و کارکنان بازاریابی) ارائه می دهد و وب سایت جدیدی دارد که هر 10 ثانیه بر روی پلتفرم خود ایجاد می شود.
در اخبار ما مشترک شوید
پست الکترونیک

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

。 Elementor. کلیه حقوق محفوظ استقسمت “hou” را انتخاب کنید
یک فضا وارد کنید و متن مورد نظر خود را بعد از یک سال بنویسید -برای مثال ، “حفظ مالکیت”

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

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

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

این همان است ، طرح شما بهینه شده است!
مجدداً عملکرد وب سایت را امتحان کنید

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

برگه “شبکه” را انتخاب کنید:

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

این وب سایت اکنون برای بارگیری به 568 میلی ثانیه نیاز دارد
ما از 81 درخواست به 46 افزایش یافته است
برگه “فانوس دریایی” را انتخاب کنید ، نمره عملکرد ما را از 73 تا 98 مشاهده خواهید کرد

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

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

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

عنوان را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
گزینه “چسبناک” را روی “بالا” تنظیم کنید

قهرمان عنصر “ثابت” را بسازید:

قسمت قهرمان را انتخاب کنید
به برگه “سبک” برگردید
لیست “ضمیمه” را انتخاب کنید و سپس “ثابت” را انتخاب کنید

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

عنوان قطعات کوچک را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

یک مؤلفه کوچک ویرایشگر متن را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

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

بازگشت به پنجره “بازرس”
برگه “فانوس دریایی” را انتخاب کنید
روی “گزارش تولید” کلیک کنید

اکنون می بینیم که نمره عملکرد ما به 97 کاهش یافته است- این یک تفاوت بزرگ نیست ، این باعث می شود وب سایت جالب تر و جالب تر شود.
آیا می توانید نمرات عملکرد جدید ما را باور کنید؟

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

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

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

یادگیری مبارک (عملکرد)!
اشتراک گذاری
به دنبال محتوای تازه هستید؟
از اخبار و ارتباطات هفتگی ما مقاله و نظرات دریافت کنید.
پست الکترونیکفضای بین توضیحات و دکمه را افزایش دهید
رنگ جهانی صحیح را برای هر دارایی انتخاب کنید
بخش “دکمه” را گسترش دهید
اندازه را به عنوان “بزرگ” تنظیم کنید
آن را با توجه به نیازهای خود ، مانند رنگ پس زمینه و قطر مرزی سفارشی کنید

تاکنون این دو ستون با 6 مؤلفه کوچک است. اکنون ، این یک قسمت ستون با تنها یک قسمت کوچک است!
مرحله 10: چرخش تصویر را بهینه کنید
بهینه سازی تروجان چرخش تصویر
در طراحی فعلی و نمایش چندین تصویر در تصویر ما در حال چرخش یک خطای مشترک وجود دارد.

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

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

برای ایجاد یک قسمت جدید از 1 ستون استفاده کنید
انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“تصویر چرخاننده تصویر” را از یک پنل قسمت کوچک انتخاب کرده و سپس آن را به ستون بکشید
تصاویری را که از کتابخانه رسانه انتخاب می کنید اضافه کنید

انتقال به برگه “محتوا”
“اندازه تصویر” را روی “متوسط -300 x 300” تنظیم کنید
مطابق با اولویت خود “فیلم نمایش اسلاید” ، “نورد نورد” و “ناوبری” را تنظیم کنید

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

انتقال به برگه “پیشرفته”
پر کردن لازم را اضافه کنید

بخشی از پنج ستون اکنون فقط 1 ستون است.

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

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

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

چه اتفاقی می افتد که گزینه “بار تنبل” را اعمال کنیم؟

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

می توانید این گزینه را در مؤلفه های مختلف مختلف مانند ویجت لوتی و ویجت گالری (PRO) پیدا کنید.

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

“مؤلفه کوچک ویدیویی” را انتخاب کنید
به برگه “سبک” برگردید
“بار تنبل” را انتخاب کنید

مرحله 12: پاورقی را بهینه کرده و به روزرسانی را نگه دارید
بهینه سازی فوتبال Elementor

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

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

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

ما برای انجام این کار اقدامات زیر را انجام خواهیم داد:

اجزای کوچک اضافی را حذف کنید ، و فقط عنوان های کوچک را ترک می کنند
عنوان قطعات کوچک را انتخاب کنید
روی نماد “Dynamic Tag” در سمت راست قسمت “عنوان” کلیک کنید (در غیر این صورت آن را “دکمه پدر” نامیده می شود

در منوی Drop -down ، مورد منوی “زمان فعلی تاریخ” را انتخاب کنید
روی نماد والدین آچار کلیک کنید
روی برگه “Date Format” کلیک کنید ، و سپس مورد “سفارشی” را انتخاب کنید
محتوای فعلی را در قسمت “فرمت سفارشی” به جز “y” حذف کنید
برگه “پیشرفته” را انتخاب کنید
قسمت “جلو” را انتخاب کنید ، و سپس کلیدهای “گزینه ها” و “G” را همزمان (یا “کنترل” ، “Alt” و “C” حفظ کنید تا نماد “©” را تایپ کنید.
بعد از “添” فضایی اضافه کنیدمحتوای جعبه نماد

از منوی “مؤلفه کوچک” “Icon Frame Window” را انتخاب کنید و سپس آن را به ستون بکشید
“جعبه نماد” را انتخاب کنید
حلق آویز روی تصویر
“بارگذاری SVG” را انتخاب کنید **
نماد سفارشی خود را وارد کنید

** لطفا توجه داشته باشید: نشان پرونده SVG است. اگر این کار را نکرده اید ، لطفاً به صفحه ابزار WordPress بروید و سپس به تنظیمات Elementor >> بروید. شما باید بارگذاری را که فیلتر نشده است باز کنید.

“عنوان” خود را وارد کنید
“توضیحات” خود را وارد کنید
“سبک” را انتخاب کنید >> رنگ جهانی را انتخاب کنید
“اندازه” را انتخاب کرده و نوار را به اندازه انتخاب خود بکشید
“پر” را انتخاب کنید ، سپس نوار را به مقدار انتخاب خود بکشید

مرحله 8: قسمت “سرویس” را بهینه کنید
خدمات خانه طراحی

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

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

با یک ستون یک قسمت جدید ایجاد کنید
در “چیدمان” >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“جزء کوچک پنجره Frame Window” را از پانل اجزای کوچک انتخاب کرده و سپس آن را درون ستون بکشید

(ما قادر خواهیم بود تمام دارایی های این قسمت را برای این قسمت کوچک قرار دهیم)

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

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

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

به برگه “سبک” برگردید
“فاصله” بین عناصر را افزایش دهید
“عرض” تصویر را افزایش دهید
قسمت “محتوا” را گسترش دهید
تراز “مرکزی” را انتخاب کنید
“تراز عمودی” را به عنوان “میانه” تنظیم کنید
رنگ جهانی و قلم خود را تنظیم کنید

انتقال به برگه “پیشرفته”
10 ٪ پر کردن را به اجزای کوچک اضافه کنید

اکنون ، قسمت خدمات دارای همان طراحی است ، اما دارایی ها کمتر هستند.
مرحله 9: بخش فراخوانی اقدام را بهینه کنید
بهترین روش پیوند CTA:

اطمینان حاصل کنید که همه پیوندها و پیوندهای رسانه های اجتماعی به طور عادی کار می کنند ، و دکمه حاوی پیوندها است.
هنگام افزودن پیوندی به وب سایت های دیگر ، لطفاً این ویژگی را درج کنید: “rly | noopner”

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

بخش بعدی درخواست تجدید نظر در سرویس ما را پیشنهاد می کند.

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

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

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

انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
انتقال به برگه “پیشرفته” >> هرگونه پر کردن اضافی را حذف کنید

“تماس با اجزای کوچک” را از یک پنل قسمت کوچک انتخاب کنید و سپس آن را درون ستون بکشید
“موقعیت تصویر” را روی “سمت چپ” تنظیم کنید
تصویر خود را از کتابخانه رسانه انتخاب کنید
قسمت “محتوا” را گسترش دهید
عنوان را وارد کنید
توضیحات ورودی
متن دکمه ورودی

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

در این حالت ، ما تمام مؤلفه های کوچک هر سه عنوان را در Viewport نگه می داریم. اما لطفاً به یاد داشته باشید که برای برخی از وب سایت ها ، برخی از عناصر عنوان در تلفن همراه یا رایانه لوحی ممکن است معنی دار تر باشد.

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

برای حل این مسئله:

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

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را برای “سفارشی” انتخاب کنید
“٪” را انتخاب کنید> عرض یک جزء کوچک را به 30 ٪ بدهید ، بنابراین برای آرم ما مناسب است

موقعیت یابی لیست نماد

روی برگه “لیست نماد” >> “پیشرفته” کلیک کنید
“پر” >> unink مقدار را انتخاب کنید
12px را به “بالا” پر کنید

باور داری؟

در ابتدا ، عنوان ما از 2 قسمت ، 12 مؤلفه کوچک و 10 ستون استفاده کرد.
اکنون عنوان ما از 1 قسمت ، 3 مؤلفه کوچک و 1 ستون استفاده می کند.

همان به نظر می رسد!
مرحله 5: قسمت قهرمانانه را بهینه کنید

بیایید به قسمت بعدی وب سایت ما وارد شویم: Heroes.

بهترین تمرین قسمت قهرمان:

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

موقعیت مؤلفه کوچک در ستون را کنترل کنید

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

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

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

ستون اضافی را در سمت راست متن حذف کنید.
پد را حذف کنید.

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

ستون را انتخاب کنید.
“تراز عمودی” را روی “میانه” تنظیم کنید.
انتقال به برگه “پیشرفته”.
“پر” >> unink مقدار را انتخاب کنید
پر کردن صحیح را روی 50 ٪ تنظیم کنید.

قسمت را انتخاب کنید.
“حداقل ارتفاع” را انتخاب کنید >> آن را روی 80 تنظیم کنید.

تضاد بین متن و پس زمینه را برطرف کنید

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

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

عنوان خود را کلیک کنید
انتقال به برگه “سبک” >> “Text Shadow” را انتخاب کنید.

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

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

بخش “سبک” >> “پوشش پس زمینه” را انتخاب کنید
یکی از رنگهای جهانی خود را انتخاب کنید و با درجه ناقص بازی کنید تا نتیجه ایده آل

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

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

بیایید ببینیم که چگونه این قسمت را برای بهبود عملکرد آن ساده کنیم. رنگ جهانی:

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

روی “جهانی” کلیک کنید
روی انتخاب کننده رنگ آویزان شوید ، سپس روی آن کلیک کنید
یک رنگ را انتخاب کنید ، و سپس روی نماد شماره به علاوه شناور شوید
روی “جهانی” >> “پروردگار” را کلیک کنید

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

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

ستون 3

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

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

برای حل این مسئله:

برگه Site Logo Window قطعات کوچک >> “Advanced” را انتخاب کنید
“موقعیت یابی” را انتخاب کنید و عرض خود را روی “اتحادیه درونی” تنظیم کنید

این مرحله دقیق را برای “منوی ناوبری” اجزای کوچک و پنجره لیست آیکون تکرار کنید.

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

ستون خود را انتخاب کنید >> به برگه “چیدمان” بپیچید
در “تراز عمودی” ، “پایین” را انتخاب کنید
“در تراز افقی” ، “فضای بین” را انتخاب کنید

انتخاب “فضا” بین تراز در اولین و آخرین مؤلفه های کوچک در هر دو انتها قرار دارد ، تا فاصله مساوی بین سایر مؤلفه ها داشته باشد.

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

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

صفحه کوچک Nav Menu Window Parts >> “Advanced” را انتخاب کنید
مرز پیوند را لغو کرده و فاصله را با مقادیر منفی حذف کنید

مرحله 4: پاسخ هدر را به سرعت انجام دهید
حال ، بیایید ظاهر نسخه فعلی وب سایت را در دستگاه تلفن همراه پیدا کنیم.

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

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

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

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

بیایید نگاهی به نحوه استفاده از تنظیمات “عرض سفارشی” از اجزای کوچک و عناصر برای دستیابی به این هدف بیندازیم.
عرض سفارشی رایانه رایانه لوحی را تنظیم کنید

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را انتخاب کنید و عرض را روی “سفارشی” تنظیم کنید.
“٪” >> عرض عرض (در درصد درصد) را به عرض مؤلفه انتخاب کنید.

روی “Content” Tab >> “سوئیچینگ و تراز” >> “صحیح” را انتخاب کنید.

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

حال ، بیایید منوی سوئیچینگ شکل را تکمیل کنیم.

“محتوا” >> برای تغییر و تنظیم آن روی “بله” کلیک کنید.
“سبک” >> با کشیدن ستون “پیکر رنگ” به سمت چپ ، پس زمینه حذف می شود. “گزارش نسل” را انتخاب کنید. پس از مدتی گزارش شما ظاهر می شود.

نمره عملکرد فعلی ما 73/100 است ، البته ما می توانیم این کار را انجام دهیم.

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

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

بیایید از عنوان شروع کنیم.

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

در ستون اول ، آرم ما از دو مؤلفه کوچک تشکیل شده است:

یک مؤلفه کوچک از فایل تصویر .png که آرم آرم ما را نشان می دهد
عنوان قطعات کوچک.

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

ستون سوم شامل:

قطعات داخلی (موقعیت اجزای نماد کنترل).
عنوان اطلاعات تماس ما

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

ستون 1:

فقط از 1 ستون برای ایجاد 1 قسمت استفاده کنید.
اجزای کوچک سایت را اضافه کرده و آن را به قسمت بکشید.

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

عنوان و متن ALT را در هر فایل تصویری در وب سایت خود در کتابخانه رسانه به شما ارائه دهید.

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

اندازه تصویر را درون قسمت کوچک تنظیم کنید.

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

به عنوان مثال ، ما در حال تلاش برای حل این مشکل با روی آوردن به برگه “سبک” و تنظیم عرض تصویر به 200px هستیم.

ستون 2

بازگشت به پانل مؤلفه کوچک:

اجزای کوچک منوی ناوبری در زیر آرم
نشانگر را روی “هیچ” قرار دهید
به برگه “سبک” بروید و فونت های ترجیحی خود را اضافه کنید (تا بتواند با طراحی قبلی ما مطابقت داشته باشد)

بهترین تمرین سبک جهانی:
نحوه استفاده از Elementor 3 برای بهینه سازی طرح وب سایت خود با Elementor 3

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

فونت جهانی:

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

به برگه “سبک” بروید ، سپس یکی را انتخاب کنید ، مقدار کمی از تغییر ایجاد کنید و روی نماد Plus آویزان شوید ، قلم اولویت خود را اضافه کنید (تا بتواند با طرح قبلی ما مطابقت داشته باشد)
روی نماد اضافی کلیک کنید ، و سپس سری قلم مورد نیاز خود را انتخاب کنید
به عنوان قلم جهانی از سبک مورد استفاده در الگوی خود صرفه جویی کنید

سپس می توانید از این سبک در هر مؤلفه کوچک ایجاد شده استفاده کنید. فهرست مطالب

درس 1: بهینه سازی طرح
تست بد
آزمایش و مشاهده نتایج عملکرد
عنصر بهینه شده صفحه
مجدداً عملکرد وب سایت را امتحان کنید
آیا می توانید نمرات عملکرد جدید ما را باور کنید؟

درس 1: بهینه سازی طرح
بازرس عملکرد وب سایت

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

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

مباحث زیر را معرفی خواهیم کرد:

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

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

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

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

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

یک پنجره جدید را در “حالت خفا” باز کنید و سپس URL صفحه وب مورد نظر خود را تایپ کنید.

مرحله 2: تأیید کنید که آیا از یک مسیر URL مستقیم استفاده می کنید
نحوه استفاده از Elementor 1 برای بهینه سازی طرح وب سایت خود با تصویر URL مستقیم

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

برای مشاهده صفحه همه وب سایت ها ، روی “صفحه” کلیک کنید.
مکان نما را در صفحه آویزان کرده و روی گزینه “View” کلیک کنید. این باعث می شود شما مستقیماً به صفحه خود بروید.
پس از بارگیری سایت ، این URL را در پنجره Stealth قرار دهید.

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

در گذشته ، شما ممکن است از ابزارهای توسعه دهنده Chrome استفاده کرده باشید.

اگر اینطور نیست ، برای بررسی و مشاهده محتوای HTML & CSS صفحه:

راست را بر روی هر موقعیتی در صفحه کلیک کنید و سپس روی “چک” کلیک کنید.

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

برگه “شبکه” را انتخاب کرده و دکمه CMD یا CTRL + R را بزنید تا نتایج بارگیری شود.

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

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

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

همه دسته بندی ها
عنصر
طرح
بازار یابی
توسعه دادن
کسب و کار
اری
سرپرستی

جستجو کردن:
شروع

نحوه بهینه سازی طرح وب سایت خود با Elementor

اشلی وایتهیر
مجری
05.05.21

18 نظر

اولین درس 5 دوره جدید ما را معرفی کنید: “بهینه سازی عملکرد وب سایت با Elementor”. این مقاله و آموزش کمتر 1: بهترین روش بهینه سازی طرح. این آموزش نحوه بهینه سازی عملکرد وب سایت Elementor را به شما نشان می دهد.

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

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

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

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

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

5 دوره کامل شامل پنج دوره ویدیویی است:

درس 1: بهینه سازی طرح
درس 2: تصویر بهینه شده
درس 3: بهبود عملکرد اضافی
درس 4: میزبان شبکه مناسب را انتخاب کنید
درس 5: با ابزارهای حزبی سوم بهینه سازی کنیدپست الکترونیک

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

بن پنس
4 ژوئن 2024

0 نظر

معاملات بزرگ در حال آمدن است! ما در حال جشن B-Day عناصر هستیم.

جودی برلین
28 مه 2024

0 نظر

اظهار نظر
ایجاد شبکه

سازنده وب سایت و میزبانی
میزبانی استاتیک +معمار
صفحه سازنده صفحه -در
سلام موضوع
محتوای پویا
تجارت الکترونیک
تمور
زمین
سازنده پاپ
سازنده
بهینه سازی گردش کار
عناصر AI
بهینه کننده تصویر
سازنده WooCommerce
قیمت

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

عنصر

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

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

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

Elementor یک بستر برجسته سازنده وب سایت برای متخصصان وردپرس است. Elementor خدمات را برای متخصصان شبکه (از جمله توسعه دهندگان ، طراحان و کارکنان بازاریابی) ارائه می دهد و وب سایت جدیدی دارد که هر 10 ثانیه بر روی پلتفرم خود ایجاد می شود.
در اخبار ما مشترک شوید
پست الکترونیک

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

。 Elementor. کلیه حقوق محفوظ استروش این دوره

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

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

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

هر درس به این معنی است که کلاس حمل و نقل بر هزینه حمل و نقل تأثیر می گذارد
طبق دستور ، به این ترتیب ، بالاترین سفارش قیمت هزینه حمل و نقل را تعیین می کند

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

پس از داشتن منطقه حمل و نقل ، روش و مربع قیمت ، بیشتر پیکربندی حمل و نقل WooCommerce را تکمیل کرده اید. با این حال ، شما هنوز هم باید عملکرد سفارش را حل کنید.

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

با این حال ، Wookommerce مجموعه ای از سفارشات و تنظیمات موجودی را که باید درک کنید ارائه می دهد. به عنوان مثال ، برای مدیریت گزینه های موجودی خود ، می توانید به WooCommerce> “تنظیمات”> “محصول> موجودی: موجودی: موجودی:
واجد شرایط

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

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

در این مرحله ، ما دانش اساسی گزینه های حمل و نقل WooCommerce را پوشش دادیم. با این حال ، شما هنوز هم ممکن است به یاد داشته باشید که در پیش فرض ، تنظیم پلاگین -in تنها گزینه ای نیست که می توان از آن استفاده کرد.

به منظور ارتقاء تجربه حمل و نقل WooCommerce و عملکرد عملکرد خود ، می توانید از یک پسوند یا پلاگین سوم استفاده کنید. گزینه های زیادی برای این ابزارها وجود دارد ، از جمله:

WooCommerce Transport: شما می توانید مستقیماً از پسوند مناسب برچسب حمل و نقل از صفحه ابزار وب سایت چاپ کنید. علاوه بر استفاده رایگان ، می تواند برچسب هایی را برای USP و DHL چاپ کند. این پلاگین توسط JetPack پشتیبانی می شود. نام گسترده به طور مستقیم به WooCommerce متصل است ، بنابراین همه وزنه برداری سنگین را برای شما به ارمغان می آورد.
ادغام ShipStation: شما می توانید از ابزارهای رایگان برای ساده سازی حمل و نقل WooCommerce و انجام عملیات استفاده کنید. با استفاده از آن ، می توانید به طور خودکار سفارشات را از WooCommerce یا سایر سیستم عامل ها (مانند آمازون) وارد کنید. سپس می توانید برای استفاده از قیمت و تخفیف USPS در این فرآیند ، به یک لیست انتخاب شده انتخاب شده توسط اپراتور متصل شوید. همچنین می توانید ایمیل های اعلان ، برچسب های حمل و نقل و سفارشات بسته بندی را سفارشی کنید و صفحات ردیابی را برای برند تجاری خود تهیه کنید.

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

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

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

آیا در مورد پیکربندی گزینه های حمل و نقل WooCommerce سؤالی دارید؟ در قسمت نظرات پایین ما را آگاه کنید!
اشتراک گذاری
به دنبال محتوای تازه هستید؟
از اخبار و ارتباطات هفتگی ما مقاله و نظرات دریافت کنید. گزینه سوم وانت محلی است. مانند حمل و نقل نرخ بهره ثابت ، می توانید از این گزینه برای اضافه کردن مالکیت شخصی خود استفاده کنید ، برای وضعیت مشمول مالیات اقدام کنید و هزینه حمل و نقل را پیکربندی کنید:
بریده

با توجه به این وضعیت ، مشتریان ممکن است سفارشات را از فروشگاه فیزیکی شما شارژ کنند ، بنابراین ممکن است نیازی به ورود هزینه حمل و نقل نباشید. علاوه بر این ، لطفاً توجه داشته باشید که به طور پیش فرض ، گزینه حمل و نقل محلی WooCommerce وانت ، مالیات ها را بر اساس محل فروشگاه به جای آدرس مشتری محاسبه می کند.
مرحله 3: حمل و نقل و هزینه ها را تنظیم کنید

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

برای حمل و نقل نرخ بهره ثابت ، می توانید از بین چند گزینه پیشرفته انتخاب کنید. این شامل:

[Qty]: شما می توانید نرخ حمل و نقل را از تعداد موارد موجود در واگن برقی شارژ کنید.
[هزینه]: این به شما امکان می دهد هزینه های حمل و نقل را بر اساس کل هزینه سفارش اضافه کنید.

اگر می خواهید از تنظیمات [هزینه] استفاده کنید ، می توانید پارامترهای دیگری را انتخاب کنید:

درصد: حمل و نقل اضافی را به درصد تنظیم کنید.
min_fee: حداقل ارزش هزینه های اضافی را تعریف کنید.
max_fee: حداکثر مقدار هزینه اضافی را تنظیم کنید.

فرض کنید حمل و نقل نرخ بهره ثابت را به عنوان راهی برای حمل و نقل انتخاب می کنید. در زمینه هزینه می توانید یکی از موقعیت های فوق را وارد کنید. اگر از نماد اشغال مکان [مقدار] استفاده می کنید ، می توانید برای هر محصولی که به سبد خرید اضافه می شود ، هزینه اضافی را پرداخت کنید. به عنوان مثال ، اگر “2 +(5 * [qty]) را در قسمت هزینه قرار دهید ، این بدان معنی است که هزینه ثابت 2.00 دلار از مشتری را پرداخت می کنید و یک پرداخت اضافی از هر محصول را برای آنها به سبد خرید اضافه می کنید $ 5.00 دلار.

از طرف دیگر ، اگر دارنده دارنده [هزینه] را انتخاب کنید ، می توانید با توجه به درصد کل سفارش ، حمل و نقل اضافی را اضافه کنید. به عنوان مثال ، می توانید “2 + [fee ٪ =” 5 “max_fee =” 20 “] را اضافه کنید. این بدان معنی است که هزینه اصلی حمل و نقل 2.00 دلار است ، به علاوه 5 ٪ از کل هزینه خرید ، بیش از 20.00 دلار.

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

در مرحله بعد ، می توانید به سمت حمل و نقل> گزینه های حمل و نقل حرکت کنید:
گزینه تحویل

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

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

همچنین می توانید مقصد حمل و نقل پیش فرض را انتخاب کنید ::

آدرس حمل و نقل مشتری
آدرس صورتحساب مشتری
به آدرس صورتحساب مشتری منتقل می شود

پس از اتمام ، حتماً روی دکمه “ذخیره و تغییر” در پایین صفحه کلیک کنید تا اولویت خود را اعمال کنید.
مرحله 4: کلاس حمل و نقل را اضافه کنید

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

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

فرض کنید تجهیزات اسکی ، پوشاک و تجهیزات را می فروشید. در مقایسه با T -Shirts یا دستکش ، ممکن است هزینه های بیشتری را برای حمل کلاه ایمنی یا چکمه هزینه کنید.

برای افزودن یک کلاس حمل و نقل جدید ، می توانید به برگه “حمل و نقل” بروید ، سپس روی پیوند “کلاس حمل و نقل” کلیک کنید ، و سپس دکمه “افزودن حمل و نقل” را کلیک کنید:
راننده را اضافه کنید

در صفحه بعدی می توانید عنوان کلاس حمل و نقل را وارد کنید ، Slug و Design. به عنوان مثال ، ما از “کفش” استفاده خواهیم کرد:
نمونه حمل و نقل

پس از اتمام ، روی دوره “ذخیره و حمل و نقل” کلیک کنید. بعد ، فرض کنید حداقل یک نوع روش حمل و نقل را فعال کرده اید (ما نحوه انجام آن را در قسمت قبلی معرفی کردیم) ، سپس می توانید انتخاب کنیدWooCommerce پس از انتخاب منطقه حمل و نقل ، از شما می خواهد که روش حمل و نقل را برای آن انتخاب کنید. همچنین می توانید نرخ حمل و نقل مختلف را در هر منطقه اعمال کنید.

ابتدا به WooCommerce> “تنظیمات” در پانل های ابزار وردپرس بروید. در زیر برگه “معمولی” ، به قسمت گزینه عمومی بروید:
گزینه های WooCommerce-Gener

از منوی Drop -down ، می توانید کدام مکان را برای حمل و نقل انتخاب کنید. به عنوان مثال ، شما می توانید آنها را به همه کشورها /مناطق یا فقط به کشورهای خاص و مناطق منتقل کنید. برای این آموزش ، ما از سابق استفاده خواهیم کرد.

بعد ، روی برگه “حمل و نقل” کلیک کنید:
WooCommerce حامل آرا

در این صفحه ، تنظیمات پیش فرض WooCommerce Transport را پیدا خواهید کرد. به انتخاب منطقه حمل و نقل ادامه دهید و سپس دکمه “اضافه کردن منطقه حمل و نقل” را انتخاب کنید:
منطقه مهمات را اضافه کنید

در مرحله بعد ، می توانید از منوی Drop -down نام و منطقه منطقه ای را وارد کنید. ما نمونه ای از ایالات متحده و کانادا را انتخاب خواهیم کرد:
منطقه حمل و نقل

لطفاً توجه داشته باشید که مشتریان شما فقط می توانند گزینه های حمل و نقل را در منطقه خود مشاهده کنند. با کلیک بر روی محدودیت پیوند خاص ZIP/Post Code ، منطقه حمل و نقل بیشتر مشخص شده است.

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

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

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

حمل و نقل نرخ بهره ثابت زمانی است که شما بر اساس محاسبات حمل و نقل در مناطق خاص ، نرخ بهره ثابت را برای مشتریان جمع می کنید. می توانید در هر منطقه چندین نرخ ثابت اضافه کنید. این شامل نرخ استاندارد برای هر پروژه ، حمل و نقل یا سفارشات است. به عنوان مثال ، می توانید درصدی از هزینه های ثابت یا کل سفارشات (به عنوان مثال ، 10 ٪ از مبلغ خرید) اضافه کنید.

اگر نرخ بهره ثابت را به عنوان یک روش حمل و نقل انتخاب می کنید ، می توانید بر روی “لینک ویرایش” را تحت عنوان کلیک کنید و سپس یک پنجره جدید باز کنید:
تخصیص نرخ مسطح

در این صفحه می توانید یک عنوان متد را وارد کنید که برای مشتریان قابل مشاهده باشد و وضعیت مالیاتی را پیکربندی کنید ، به این معنی که آیا حمل و نقل باید مالیات شود. همچنین می توانید روش حمل و نقل را تنظیم کنید. به عنوان مثال ، اگر می خواهید 2.00 دلار شارژ کنید ، “2.00” را وارد کنید.

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

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

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

مانند حمل و نقل یکنواخت ، اگر این روش را به عنوان یک روش حمل و نقل انتخاب کنید ، می توانید روی “ویرایش پیوند” در WooCommerce> “صفحه حمل و نقل” کلیک کنید. یک پنجره جدید باز خواهد شد ، می توانید عنوان عنوان را وارد کنید و الزامات تحویل رایگان را انتخاب کنید:
حمل و نقل رایگان

برای این بخش ، اگر نمی خواهید سفارشات را برای تحویل رایگان مشخص کنید ، می توانید N/A را انتخاب کنید. علاوه بر این ، می توانید انتخاب کنید:

کوپن تحویل رایگان معتبر
حداقل مبلغ سفارش
حداقل مبلغ سفارش یا کوپن
حداقل مبلغ سفارش و کوپن

هنگامی که مشتری محصول را به سبد خرید WooCommerce اضافه می کند ، آنها می توانند مشاهده کنند که گزینه های حمل و نقل در دسترس است. پس از اتمام ، روی دکمه “ذخیره و تغییر” کلیک کنید.
حمل و نقل خاموش محلیاری
سرپرستی

جستجو کردن:
شروع

نحوه تنظیم گزینه های حمل و نقل WoooComerce (در 5 مرحله)

سرگئی داوودوف
onwoomommerce
18.05.21

0 نظر

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

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

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

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

آشنایی با حمل و نقل WooCommerce
نحوه تنظیم گزینه های حمل و نقل WoooComerce (در 5 مرحله)
مرحله 1: منطقه حمل و نقل را تنظیم کنید
مرحله 2: روش حمل و نقل صحیح را انتخاب کنید
مرحله 3: حمل و نقل و هزینه ها را تنظیم کنید
مرحله 4: کلاس حمل و نقل را اضافه کنید
مرحله 5: تنظیم عملکرد عملکرد سفارش
حمل و نقل ، موجودی و گسترش عملکرد WooCommerce

آشنایی با حمل و نقل WooCommerce

WooCommerce یک پلاگین محبوب وردپرس است ، می توانید فروشگاه های آنلاین را مستقیماً از وب سایت خود ایجاد و مدیریت کنید. می توانید از آن برای فروش شماره یا محصولات فیزیکی استفاده کنید:
WooCommerce-Website

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

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

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

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

به طور پیش فرض ، WooCommerce دارای گزینه های حمل و نقل ساخته شده است. با این حال ، شما همچنین می توانید از WooCommerce Plug -in برای گسترش توابع و کارکردهای سیستم عامل استفاده کنید. در پایان این مقاله ، ما چیزی را که ارزش در نظر گرفتن آن را دارد ، درگیر خواهیم کرد. حال ، بیایید روی چگونگی تنظیم گزینه های اصلی حمل و نقل WooCommerce خود تمرکز کنیم.
نحوه تنظیم گزینه های حمل و نقل WoooComerce (در 5 مرحله)

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

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

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

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

بن پنس
4 ژوئن 2024

0 نظر

معاملات بزرگ در حال آمدن است! ما در حال جشن B-Day عناصر هستیم.

جودی برلین
28 مه 2024

0 نظر

اظهار نظر
ایجاد شبکه

سازنده وب سایت و میزبانی
میزبانی استاتیک +معمار
صفحه سازنده صفحه -در
سلام موضوع
محتوای پویا
تجارت الکترونیک
تمور
زمین
سازنده پاپ
سازنده
بهینه سازی گردش کار
عناصر AI
بهینه کننده تصویر
سازنده WooCommerce
قیمت

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

عنصر

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

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

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

Elementor یک بستر برجسته سازنده وب سایت برای متخصصان وردپرس است. Elementor خدمات را برای متخصصان شبکه (از جمله توسعه دهندگان ، طراحان و کارکنان بازاریابی) ارائه می دهد و وب سایت جدیدی دارد که هر 10 ثانیه بر روی پلتفرم خود ایجاد می شود.
در اخبار ما مشترک شوید
پست الکترونیک

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

。 Elementor. کلیه حقوق محفوظ استقسمت “hou” را انتخاب کنید
یک فضا وارد کنید و متن مورد نظر خود را بعد از یک سال بنویسید -برای مثال ، “حفظ مالکیت”

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

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

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

این همان است ، طرح شما بهینه شده است!
مجدداً عملکرد وب سایت را امتحان کنید

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

برگه “شبکه” را انتخاب کنید:

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

این وب سایت اکنون برای بارگیری به 568 میلی ثانیه نیاز دارد
ما از 81 درخواست به 46 افزایش یافته است
برگه “فانوس دریایی” را انتخاب کنید ، نمره عملکرد ما را از 73 تا 98 مشاهده خواهید کرد

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

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

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

عنوان را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
گزینه “چسبناک” را روی “بالا” تنظیم کنید

قهرمان عنصر “ثابت” را بسازید:

قسمت قهرمان را انتخاب کنید
به برگه “سبک” روی آورید
لیست “ضمیمه” را انتخاب کنید و سپس “ثابت” را انتخاب کنید

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

عنوان قطعات کوچک را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

یک مؤلفه کوچک ویرایشگر متن را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

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

بازگشت به پنجره “بازرس”
برگه “فانوس دریایی” را انتخاب کنید
روی “گزارش تولید” کلیک کنید

اکنون می بینیم که نمره عملکرد ما به 97 کاهش یافته است- این یک تفاوت بزرگ نیست ، این باعث می شود وب سایت جالب تر و جالب تر شود.
آیا می توانید نمرات عملکرد جدید ما را باور کنید؟

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

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

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

یادگیری مبارک (عملکرد)!
اشتراک گذاری
به دنبال محتوای تازه هستید؟
از اخبار و ارتباطات هفتگی ما مقاله و نظرات دریافت کنید.
پست الکترونیکفضای بین توضیحات و دکمه را افزایش دهید
رنگ جهانی صحیح را برای هر دارایی انتخاب کنید
بخش “دکمه” را گسترش دهید
اندازه را به عنوان “بزرگ” تنظیم کنید
آن را با توجه به نیازهای خود ، مانند رنگ پس زمینه و قطر مرزی سفارشی کنید

تاکنون این دو ستون با 6 مؤلفه کوچک است. اکنون ، این یک قسمت ستون با تنها یک قسمت کوچک است!
مرحله 10: چرخش تصویر را بهینه کنید
بهینه سازی تروجان چرخش تصویر
در طراحی فعلی و نمایش چندین تصویر در تصویر ما در حال چرخش یک خطای مشترک وجود دارد.

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

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

برای ایجاد یک قسمت جدید از 1 ستون استفاده کنید
انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“تصویر چرخاننده تصویر” را از یک پنل قسمت کوچک انتخاب کرده و سپس آن را به ستون بکشید
تصاویری را که از کتابخانه رسانه انتخاب می کنید اضافه کنید

انتقال به برگه “محتوا”
“اندازه تصویر” را روی “متوسط -300 x 300” تنظیم کنید
مطابق با اولویت خود “فیلم نمایش اسلاید” ، “نورد نورد” و “ناوبری” را تنظیم کنید

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

انتقال به برگه “پیشرفته”
پر کردن لازم را اضافه کنید

بخشی از پنج ستون اکنون فقط 1 ستون است.

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

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

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

چه اتفاقی می افتد که گزینه “بار تنبل” را اعمال کنیم؟

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

می توانید این گزینه را در مؤلفه های مختلف مختلف مانند ویجت لوتی و ویجت گالری (PRO) پیدا کنید.

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

“مؤلفه کوچک ویدیویی” را انتخاب کنید
به برگه “سبک” برگردید
“بار تنبل” را انتخاب کنید

مرحله 12: پاورقی را بهینه کرده و به روزرسانی را نگه دارید
بهینه سازی فوتبال Elementor

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

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

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

ما برای انجام این کار اقدامات زیر را انجام خواهیم داد:

اجزای کوچک اضافی را حذف کنید ، و فقط عنوان های کوچک را ترک می کنند
عنوان قطعات کوچک را انتخاب کنید
روی نماد “Dynamic Tag” در سمت راست قسمت “عنوان” کلیک کنید (در غیر این صورت آن را “دکمه پدر” نامیده می شود

در منوی Drop -down ، مورد “زمان فعلی تاریخ” را انتخاب کنید
روی نماد والدین آچار کلیک کنید
روی برگه “Date Format” کلیک کنید ، و سپس مورد “سفارشی” را انتخاب کنید
محتوای فعلی را در قسمت “فرمت سفارشی” به جز “y” حذف کنید
برگه “پیشرفته” را انتخاب کنید
قسمت “جلو” را انتخاب کنید ، و سپس کلیدهای “گزینه ها” و “G” را همزمان (یا “کنترل” ، “Alt” و “C” حفظ کنید تا نماد “©” را تایپ کنید.
بعد از “添” فضایی اضافه کنیدمحتوای جعبه نماد

از منوی “مؤلفه کوچک” “Icon Frame Window” را انتخاب کنید و سپس آن را به ستون بکشید
“جعبه نماد” را انتخاب کنید
حلق آویز روی تصویر
“بارگذاری SVG” را انتخاب کنید **
نماد سفارشی خود را وارد کنید

** لطفا توجه داشته باشید: نشان پرونده SVG است. اگر این کار را نکرده اید ، لطفاً به صفحه ابزار WordPress بروید و سپس به تنظیمات Elementor >> بروید. شما باید بارگذاری را که فیلتر نشده است باز کنید.

“عنوان” خود را وارد کنید
“توضیحات” خود را وارد کنید
“سبک” را انتخاب کنید >> رنگ جهانی را انتخاب کنید
“اندازه” را انتخاب کرده و نوار را به اندازه انتخاب خود بکشید
“پر” را انتخاب کنید ، سپس نوار را به مقدار انتخاب خود بکشید

مرحله 8: قسمت “سرویس” را بهینه کنید
خدمات خانه طراحی

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

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

با یک ستون یک قسمت جدید ایجاد کنید
در “چیدمان” >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“جزء کوچک پنجره Frame Window” را از پانل اجزای کوچک انتخاب کرده و سپس آن را درون ستون بکشید

(ما قادر خواهیم بود تمام دارایی های این قسمت را برای این قسمت کوچک قرار دهیم)

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

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

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

به برگه “سبک” برگردید
“فاصله” بین عناصر را افزایش دهید
“عرض” تصویر را افزایش دهید
قسمت “محتوا” را گسترش دهید
تراز “مرکزی” را انتخاب کنید
“تراز عمودی” را به عنوان “میانه” تنظیم کنید
رنگ جهانی و قلم خود را تنظیم کنید

انتقال به برگه “پیشرفته”
10 ٪ پر کردن را به اجزای کوچک اضافه کنید

اکنون ، قسمت خدمات دارای همان طراحی است ، اما دارایی ها کمتر هستند.
مرحله 9: بخش فراخوانی اقدام را بهینه کنید
بهترین روش پیوند CTA:

اطمینان حاصل کنید که همه پیوندها و پیوندهای رسانه های اجتماعی به طور عادی کار می کنند ، و دکمه حاوی پیوندها است.
هنگام افزودن پیوندی به وب سایت های دیگر ، لطفاً این ویژگی را درج کنید: “rly | noopner”

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

بخش بعدی درخواست تجدید نظر در سرویس ما را پیشنهاد می کند.

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

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

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

انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
انتقال به برگه “پیشرفته” >> هرگونه پر کردن اضافی را حذف کنید

“تماس با اجزای کوچک” را از یک پنل قسمت کوچک انتخاب کنید و سپس آن را درون ستون بکشید
“موقعیت تصویر” را روی “سمت چپ” تنظیم کنید
تصویر خود را از کتابخانه رسانه انتخاب کنید
قسمت “محتوا” را گسترش دهید
عنوان را وارد کنید
توضیحات ورودی
متن دکمه ورودی

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

در این حالت ، ما تمام مؤلفه های کوچک هر سه عنوان را در Viewport نگه می داریم. اما لطفاً به یاد داشته باشید که برای برخی از وب سایت ها ، برخی از عناصر عنوان در تلفن همراه یا رایانه لوحی ممکن است معنی دار تر باشد.

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

برای حل این مسئله:

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

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را برای “سفارشی” انتخاب کنید
“٪” را انتخاب کنید> عرض یک جزء کوچک را به 30 ٪ بدهید ، بنابراین برای آرم ما مناسب است

موقعیت یابی لیست نماد

روی برگه “لیست نماد” >> “پیشرفته” کلیک کنید
“پر” >> unink مقدار را انتخاب کنید
12px را به “بالا” پر کنید

باور داری؟

در ابتدا ، عنوان ما از 2 قسمت ، 12 مؤلفه کوچک و 10 ستون استفاده کرد.
اکنون عنوان ما از 1 قسمت ، 3 مؤلفه کوچک و 1 ستون استفاده می کند.

همان به نظر می رسد!
مرحله 5: قسمت قهرمانانه را بهینه کنید

بیایید به قسمت بعدی وب سایت ما وارد شویم: Heroes.

بهترین تمرین قسمت قهرمان:

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

موقعیت مؤلفه کوچک در ستون را کنترل کنید

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

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

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

ستون اضافی را در سمت راست متن حذف کنید.
پد را حذف کنید.

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

ستون را انتخاب کنید.
“تراز عمودی” را روی “میانه” تنظیم کنید.
انتقال به برگه “پیشرفته”.
“پر” >> unink مقدار را انتخاب کنید
پر کردن صحیح را روی 50 ٪ تنظیم کنید.

قسمت را انتخاب کنید.
“حداقل ارتفاع” را انتخاب کنید >> آن را روی 80 تنظیم کنید.

تضاد بین متن و پس زمینه را برطرف کنید

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

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

عنوان خود را کلیک کنید
انتقال به برگه “سبک” >> “Text Shadow” را انتخاب کنید.

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

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

بخش “سبک” >> “پوشش پس زمینه” را انتخاب کنید
یکی از رنگهای جهانی خود را انتخاب کنید و با درجه ناقص بازی کنید تا نتیجه ایده آل

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

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

بیایید ببینیم که چگونه این قسمت را برای بهبود عملکرد آن ساده کنیم. رنگ جهانی:

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

روی “جهانی” کلیک کنید
روی انتخاب کننده رنگ آویزان شوید ، سپس روی آن کلیک کنید
یک رنگ را انتخاب کنید ، و سپس روی نماد شماره به علاوه شناور شوید
“جهانی” >> “پروردگار” را کلیک کنید

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

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

ستون 3

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

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

برای حل این مسئله:

برگه Site Logo Window قطعات کوچک >> “Advanced” را انتخاب کنید
“موقعیت یابی” را انتخاب کنید و عرض خود را روی “اتحادیه درونی” تنظیم کنید

این مرحله دقیق را برای “منوی ناوبری” اجزای کوچک و پنجره لیست آیکون تکرار کنید.

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

ستون خود را انتخاب کنید >> به برگه “چیدمان” بپیچید
در “تراز عمودی” ، “پایین” را انتخاب کنید
“در تراز افقی” ، “فضای بین” را انتخاب کنید

انتخاب “فضا” بین تراز در اولین و آخرین مؤلفه های کوچک در هر دو انتها قرار دارد ، تا فاصله مساوی بین سایر مؤلفه ها داشته باشد.

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

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

صفحه ناوبری منوی Parts Parts >> “Advanced” را انتخاب کنید
مرز پیوند را لغو کرده و فاصله را با مقادیر منفی حذف کنید

مرحله 4: پاسخ هدر را به سرعت انجام دهید
حال ، بیایید ظاهر نسخه فعلی وب سایت را در دستگاه تلفن همراه پیدا کنیم.

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

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

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

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

بیایید ببینیم که چگونه می توان از “عرض سفارشی” برای تعیین این هدف برای مؤلفه ها و عناصر کوچک خود استفاده کرد.
عرض سفارشی رایانه رایانه لوحی را تنظیم کنید

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را انتخاب کنید و عرض را روی “سفارشی” تنظیم کنید.
“٪” >> عرض عرض (در درصد درصد) را به عرض مؤلفه انتخاب کنید.

روی “Content” Tab >> “سوئیچینگ و تراز” >> “صحیح” را انتخاب کنید.

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

حال ، بیایید منوی سوئیچینگ شکل را تکمیل کنیم.

“محتوا” >> برای تغییر و تنظیم آن روی “بله” کلیک کنید.
“سبک” >> با کشیدن ستون “پیکر رنگ” به سمت چپ ، پس زمینه حذف می شود. با وارد کردن ایمیل ، شما موافقت می کنید یک ایمیل Elementor ، از جمله ایمیل بازاریابی ، دریافت کنید.
و با شرایط ، ضوابط و سیاست های حریم خصوصی ما موافق باشید.
تصویری از اشلی وایتهیر
اشلی وایتهیر
اشلی یک متخصص ابتدایی است و طراحی را به شدت تماشا می کند و مایل به ایجاد وب سایت های کاربر دوستانه و مؤثر است. هنگامی که او یک وب سایت و مواد آموزشی ایجاد نمی کند ، CrossFit ، دوچرخه کوهستانی ، خواندن و کاوش در جهان را دوست دارد.
شما همچنین ممکن است دوست داشته باشید
عملکرد وب سایت را از طریق بهینه ساز تصویر Elementor تقویت کنید

بن پنس
4 ژوئن 2024

0 نظر

معاملات بزرگ در حال آمدن است! ما در حال جشن B-Day عناصر هستیم.

جودی برلین
28 مه 2024

0 نظر

اظهار نظر
ایجاد شبکه

سازنده وب سایت و میزبانی
میزبانی استاتیک +معمار
صفحه سازنده صفحه -در
سلام موضوع
محتوای پویا
تجارت الکترونیک
تمور
زمین
سازنده پاپ
سازنده
بهینه سازی گردش کار
عناصر AI
بهینه کننده تصویر
سازنده WooCommerce
قیمت

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

عنصر

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

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

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

Elementor یک بستر برجسته سازنده وب سایت برای متخصصان وردپرس است. Elementor خدمات را برای متخصصان شبکه (از جمله توسعه دهندگان ، طراحان و کارکنان بازاریابی) ارائه می دهد و وب سایت جدیدی دارد که هر 10 ثانیه بر روی پلتفرم خود ایجاد می شود.
در اخبار ما مشترک شوید
پست الکترونیک

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

。 Elementor. کلیه حقوق محفوظ استقسمت “hou” را انتخاب کنید
یک فضا وارد کنید و متن مورد نظر خود را بعد از یک سال بنویسید -برای مثال ، “حفظ مالکیت”

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

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

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

این همان است ، طرح شما بهینه شده است!
مجدداً عملکرد وب سایت را امتحان کنید

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

برگه “شبکه” را انتخاب کنید:

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

این وب سایت اکنون برای بارگیری به 568 میلی ثانیه نیاز دارد
ما از 81 درخواست به 46 افزایش یافته است
برگه “فانوس دریایی” را انتخاب کنید ، نمره عملکرد ما را از 73 تا 98 مشاهده خواهید کرد

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

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

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

عنوان را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
گزینه “چسبناک” را روی “بالا” تنظیم کنید

قهرمان عنصر “ثابت” را بسازید:

قسمت قهرمان را انتخاب کنید
به برگه “سبک” برگردید
لیست “ضمیمه” را انتخاب کنید و سپس “ثابت” را انتخاب کنید

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

عنوان قطعات کوچک را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

یک مؤلفه کوچک ویرایشگر متن را انتخاب کنید
انتقال به برگه “پیشرفته”
برگه “اثر ورزشی” را گسترش دهید
“انیمیشن ورودی” را انتخاب کنید و آن را روی “Fite In و Fade Out” تنظیم کنید

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

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

بازگشت به پنجره “بازرس”
برگه “فانوس دریایی” را انتخاب کنید
روی “گزارش تولید” کلیک کنید

اکنون می بینیم که نمره عملکرد ما به 97 کاهش یافته است- این یک تفاوت بزرگ نیست ، این باعث می شود وب سایت جالب تر و جالب تر شود.
آیا می توانید نمرات عملکرد جدید ما را باور کنید؟

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

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

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

یادگیری مبارک (عملکرد)!
اشتراک گذاری
به دنبال محتوای تازه هستید؟
از اخبار و ارتباطات هفتگی ما مقاله و نظرات دریافت کنید.
پست الکترونیکفضای بین توضیحات و دکمه را افزایش دهید
رنگ جهانی صحیح را برای هر دارایی انتخاب کنید
بخش “دکمه” را گسترش دهید
اندازه را به عنوان “بزرگ” تنظیم کنید
آن را با توجه به نیازهای خود ، مانند رنگ پس زمینه و قطر مرزی سفارشی کنید

تاکنون این دو ستون با 6 مؤلفه کوچک است. اکنون ، این یک قسمت ستون با تنها یک قسمت کوچک است!
مرحله 10: چرخش تصویر را بهینه کنید
بهینه سازی تروجان چرخش تصویر
در طراحی فعلی و نمایش چندین تصویر در تصویر ما در حال چرخش یک خطای مشترک وجود دارد.

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

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

برای ایجاد یک قسمت جدید از 1 ستون استفاده کنید
انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“تصویر چرخاننده تصویر” را از یک پنل قسمت کوچک انتخاب کرده و سپس آن را به ستون بکشید
تصاویری را که از کتابخانه رسانه انتخاب می کنید اضافه کنید

انتقال به برگه “محتوا”
“اندازه تصویر” را روی “متوسط -300 x 300” تنظیم کنید
مطابق با اولویت خود “فیلم نمایش اسلاید” ، “نورد نورد” و “ناوبری” را تنظیم کنید

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

انتقال به برگه “پیشرفته”
پر کردن لازم را اضافه کنید

بخشی از پنج ستون اکنون فقط 1 ستون است.

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

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

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

چه اتفاقی می افتد که گزینه “بار تنبل” را اعمال کنیم؟

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

می توانید این گزینه را در مؤلفه های مختلف مختلف مانند ویجت لوتی و ویجت گالری (PRO) پیدا کنید.

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

“مؤلفه کوچک ویدیویی” را انتخاب کنید
به برگه “سبک” برگردید
“بار تنبل” را انتخاب کنید

مرحله 12: پاورقی را بهینه کرده و به روزرسانی را نگه دارید
بهینه سازی فوتبال Elementor

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

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

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

ما برای انجام این کار اقدامات زیر را انجام خواهیم داد:

اجزای کوچک اضافی را حذف کنید ، و فقط عنوان های کوچک را ترک می کنند
عنوان قطعات کوچک را انتخاب کنید
روی نماد “Dynamic Tag” در سمت راست قسمت “عنوان” کلیک کنید (در غیر این صورت آن را “دکمه پدر” نامیده می شود

در منوی Drop -down ، مورد منوی “زمان فعلی تاریخ” را انتخاب کنید
روی نماد والدین آچار کلیک کنید
روی برگه “Date Format” کلیک کنید ، و سپس مورد “سفارشی” را انتخاب کنید
محتوای فعلی را در قسمت “فرمت سفارشی” به جز “y” حذف کنید
برگه “پیشرفته” را انتخاب کنید
قسمت “جلو” را انتخاب کنید ، و سپس کلیدهای “گزینه ها” و “G” را همزمان (یا “کنترل” ، “Alt” و “C” حفظ کنید تا نماد “©” را تایپ کنید.
بعد از “添” فضایی اضافه کنیدمحتوای جعبه نماد

از منوی “مؤلفه کوچک” “Icon Frame Window” را انتخاب کنید و سپس آن را به ستون بکشید
“جعبه نماد” را انتخاب کنید
حلق آویز روی تصویر
“بارگذاری SVG” را انتخاب کنید **
نماد سفارشی خود را وارد کنید

** لطفا توجه داشته باشید: نشان پرونده SVG است. اگر این کار را نکرده اید ، لطفاً به صفحه ابزار WordPress بروید و سپس به تنظیمات Elementor >> بروید. شما باید بارگذاری را که فیلتر نشده است باز کنید.

“عنوان” خود را وارد کنید
“توضیحات” خود را وارد کنید
“سبک” را انتخاب کنید >> رنگ جهانی را انتخاب کنید
“اندازه” را انتخاب کرده و نوار را به اندازه انتخاب خود بکشید
“پر” را انتخاب کنید ، سپس نوار را به مقدار انتخاب خود بکشید

مرحله 8: قسمت “سرویس” را بهینه کنید
خدمات خانه طراحی

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

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

با یک ستون یک قسمت جدید ایجاد کنید
در “چیدمان” >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
“جزء کوچک پنجره Frame Window” را از پانل اجزای کوچک انتخاب کرده و سپس آن را درون ستون بکشید

(ما قادر خواهیم بود تمام دارایی های این قسمت را برای این قسمت کوچک قرار دهیم)

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

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

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

به برگه “سبک” برگردید
“فاصله” بین عناصر را افزایش دهید
“عرض” تصویر را افزایش دهید
قسمت “محتوا” را گسترش دهید
تراز “مرکزی” را انتخاب کنید
“تراز عمودی” را به عنوان “میانه” تنظیم کنید
رنگ جهانی و قلم خود را تنظیم کنید

انتقال به برگه “پیشرفته”
10 ٪ پر کردن را به اجزای کوچک اضافه کنید

اکنون ، قسمت خدمات دارای همان طراحی است ، اما دارایی ها کمتر هستند.
مرحله 9: بخش فراخوانی اقدام را بهینه کنید
بهترین روش پیوند CTA:

اطمینان حاصل کنید که همه پیوندها و پیوندهای رسانه های اجتماعی به طور عادی کار می کنند ، و دکمه حاوی پیوندها است.
هنگام افزودن پیوندی به وب سایت های دیگر ، لطفاً این ویژگی را درج کنید: “rly | noopner”

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

بخش بعدی درخواست تجدید نظر در سرویس ما را پیشنهاد می کند.

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

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

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

انتقال به “چیدمان” برگه >> “عرض محتوا” را به “کامل عرض” تنظیم کنید
انتقال به برگه “پیشرفته” >> هرگونه پر کردن اضافی را حذف کنید

“تماس با اجزای کوچک” را از یک پنل قسمت کوچک انتخاب کنید و سپس آن را درون ستون بکشید
“موقعیت تصویر” را روی “سمت چپ” تنظیم کنید
تصویر خود را از کتابخانه رسانه انتخاب کنید
قسمت “محتوا” را گسترش دهید
عنوان را وارد کنید
توضیحات ورودی
متن دکمه ورودی

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

در این حالت ، ما تمام مؤلفه های کوچک هر سه عنوان را در Viewport نگه می داریم. اما لطفاً به یاد داشته باشید که برای برخی از وب سایت ها ، برخی از عناصر عنوان در تلفن همراه یا رایانه لوحی ممکن است معنی دار تر باشد.

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

برای حل این مسئله:

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

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را برای “سفارشی” انتخاب کنید
“٪” را انتخاب کنید> عرض یک جزء کوچک را به 30 ٪ بدهید ، بنابراین برای آرم ما مناسب است

موقعیت یابی لیست نماد

روی برگه “لیست نماد” >> “پیشرفته” کلیک کنید
“پر” >> unink مقدار را انتخاب کنید
12px را به “بالا” پر کنید

باور داری؟

در ابتدا ، عنوان ما از 2 قسمت ، 12 مؤلفه کوچک و 10 ستون استفاده کرد.
اکنون عنوان ما از 1 قسمت ، 3 مؤلفه کوچک و 1 ستون استفاده می کند.

همان به نظر می رسد!
مرحله 5: قسمت قهرمانانه را بهینه کنید

بیایید به قسمت بعدی وب سایت ما وارد شویم: Heroes.

بهترین تمرین قسمت قهرمان:

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

موقعیت مؤلفه کوچک در ستون را کنترل کنید

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

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

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

ستون اضافی را در سمت راست متن حذف کنید.
پد را حذف کنید.

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

ستون را انتخاب کنید.
“تراز عمودی” را روی “میانه” تنظیم کنید.
انتقال به برگه “پیشرفته”.
“پر” >> unink مقدار را انتخاب کنید
پر کردن صحیح را روی 50 ٪ تنظیم کنید.

قسمت را انتخاب کنید.
“حداقل ارتفاع” را انتخاب کنید >> آن را روی 80 تنظیم کنید.

تضاد بین متن و پس زمینه را برطرف کنید

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

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

عنوان خود را کلیک کنید
انتقال به برگه “سبک” >> “Text Shadow” را انتخاب کنید.

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

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

بخش “سبک” >> “پوشش پس زمینه” را انتخاب کنید
یکی از رنگهای جهانی خود را انتخاب کنید و با درجه ناقص بازی کنید تا نتیجه ایده آل

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

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

بیایید ببینیم که چگونه این قسمت را برای بهبود عملکرد آن ساده کنیم. رنگ جهانی:

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

روی “جهانی” کلیک کنید
روی انتخاب کننده رنگ آویزان شوید ، سپس روی آن کلیک کنید
یک رنگ را انتخاب کنید ، و سپس روی نماد شماره به علاوه شناور شوید
روی “جهانی” >> “پروردگار” را کلیک کنید

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

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

ستون 3

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

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

برای حل این مسئله:

برگه Site Logo Window قطعات کوچک >> “Advanced” را انتخاب کنید
“موقعیت یابی” را انتخاب کنید و عرض خود را روی “اتحادیه درونی” تنظیم کنید

این مرحله دقیق را برای “منوی ناوبری” اجزای کوچک و پنجره لیست آیکون تکرار کنید.

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

ستون خود را انتخاب کنید >> به برگه “چیدمان” بپیچید
در “تراز عمودی” ، “پایین” را انتخاب کنید
“در تراز افقی” ، “فضای بین” را انتخاب کنید

انتخاب “فضا” بین تراز در اولین و آخرین مؤلفه های کوچک در هر دو انتها قرار دارد ، تا فاصله مساوی بین سایر مؤلفه ها داشته باشد.

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

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

صفحه کوچک Nav Menu Window Parts >> “Advanced” را انتخاب کنید
مرز پیوند را لغو کرده و فاصله را با مقادیر منفی حذف کنید

مرحله 4: پاسخ هدر را به سرعت انجام دهید
حال ، بیایید ظاهر نسخه فعلی وب سایت را در دستگاه تلفن همراه پیدا کنیم.

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

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

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

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

بیایید نگاهی به نحوه استفاده از تنظیمات “عرض سفارشی” از اجزای کوچک و عناصر برای دستیابی به این هدف بیندازیم.
عرض سفارشی رایانه رایانه لوحی را تنظیم کنید

روی برگه “منوی ناوبری” >> “پیشرفته” کلیک کنید
“موقعیت یابی” >> را انتخاب کنید و عرض را روی “سفارشی” تنظیم کنید.
“٪” >> عرض عرض (در درصد درصد) را به عرض مؤلفه انتخاب کنید.

روی “Content” Tab >> “سوئیچینگ و تراز” >> “صحیح” را انتخاب کنید.

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

حال ، بیایید منوی سوئیچینگ شکل را تکمیل کنیم.

“محتوا” >> برای تغییر و تنظیم آن روی “بله” کلیک کنید.
“سبک” >> با کشیدن ستون “پیکر رنگ” به سمت چپ ، پس زمینه حذف می شود. “گزارش نسل” را انتخاب کنید. پس از مدتی گزارش شما ظاهر می شود.

نمره عملکرد فعلی ما 73/100 است ، البته ما می توانیم این کار را انجام دهیم.

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

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

بیایید از عنوان شروع کنیم.

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

در ستون اول ، آرم ما از دو مؤلفه کوچک تشکیل شده است:

یک مؤلفه کوچک از فایل تصویر .png که آرم آرم ما را نشان می دهد
عنوان قطعات کوچک.

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

ستون سوم شامل:

قطعات داخلی (موقعیت اجزای نماد کنترل).
عنوان اطلاعات تماس ما

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

ستون 1:

فقط از 1 ستون برای ایجاد 1 قسمت استفاده کنید.
اجزای کوچک سایت را اضافه کرده و آن را به قسمت بکشید.

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

عنوان و متن ALT را در هر فایل تصویری در وب سایت خود در کتابخانه رسانه به شما ارائه دهید.

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

اندازه تصویر را درون قسمت کوچک تنظیم کنید.

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

به عنوان مثال ، ما در حال تلاش برای حل این مشکل با روی آوردن به برگه “سبک” و تنظیم عرض تصویر به 200px هستیم.

ستون 2

بازگشت به پانل مؤلفه کوچک:

اجزای کوچک منوی ناوبری در زیر آرم
نشانگر را روی “هیچ” قرار دهید
به برگه “سبک” بروید و فونت های ترجیحی خود را اضافه کنید (تا بتواند با طراحی قبلی ما مطابقت داشته باشد)

بهترین تمرین سبک جهانی:
نحوه استفاده از Elementor 3 برای بهینه سازی طرح وب سایت خود با Elementor 3

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

فونت جهانی:

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

به برگه “سبک” بروید ، سپس یکی را انتخاب کنید ، مقدار کمی از تغییر ایجاد کنید و روی نماد Plus آویزان شوید ، قلم اولویت خود را اضافه کنید (تا بتواند با طرح قبلی ما مطابقت داشته باشد)
روی نماد اضافی کلیک کنید ، و سپس سری قلم مورد نیاز خود را انتخاب کنید
به عنوان قلم جهانی از سبک مورد استفاده در الگوی خود صرفه جویی کنید

سپس می توانید از این سبک در هر مؤلفه کوچک ایجاد شده استفاده کنید. فهرست مطالب

درس 1: بهینه سازی طرح
تست بد
آزمایش و مشاهده نتایج عملکرد
عنصر بهینه شده صفحه
مجدداً عملکرد وب سایت را امتحان کنید
آیا می توانید نمرات عملکرد جدید ما را باور کنید؟

درس 1: بهینه سازی طرح
بازرس عملکرد وب سایت

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

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

مباحث زیر را معرفی خواهیم کرد:

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

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

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

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

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

یک پنجره جدید را در “حالت خفا” باز کنید و سپس URL صفحه وب مورد نظر خود را تایپ کنید.

مرحله 2: تأیید کنید که آیا از یک مسیر URL مستقیم استفاده می کنید
نحوه استفاده از Elementor 1 برای بهینه سازی طرح وب سایت خود با تصویر URL مستقیم

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

برای مشاهده صفحه همه وب سایت ها ، روی “صفحه” کلیک کنید.
مکان نما را در صفحه آویزان کرده و روی گزینه “View” کلیک کنید. این باعث می شود شما مستقیماً به صفحه خود بروید.
پس از بارگیری سایت ، این URL را در پنجره Stealth قرار دهید.

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

در گذشته ، شما ممکن است از ابزارهای توسعه دهنده Chrome استفاده کرده باشید.

اگر اینطور نیست ، برای بررسی و مشاهده محتوای HTML & CSS صفحه:

راست را بر روی هر موقعیتی در صفحه کلیک کنید و سپس روی “چک” کلیک کنید.

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

برگه “شبکه” را انتخاب کرده و دکمه CMD یا CTRL + R را بزنید تا نتایج بارگیری شود.

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

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

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

همه دسته بندی ها
عنصر
طرح
بازار یابی
توسعه دادن
کسب و کار
اری
سرپرستی

جستجو کردن:
شروع

نحوه بهینه سازی طرح وب سایت خود با Elementor

اشلی وایتهیر
مجری
05.05.21

18 نظر

اولین درس 5 دوره جدید ما را معرفی کنید: “بهینه سازی عملکرد وب سایت با Elementor”. این مقاله و آموزش کمتر 1: بهترین روش بهینه سازی طرح. این آموزش نحوه بهینه سازی عملکرد وب سایت Elementor را به شما نشان می دهد.

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

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

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

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

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

5 دوره کامل شامل پنج دوره ویدیویی است:

درس 1: بهینه سازی طرح
درس 2: تصویر بهینه شده
درس 3: بهبود عملکرد اضافی
درس 4: میزبان شبکه مناسب را انتخاب کنید
درس 5: با ابزارهای حزبی سوم بهینه سازی کنیدپست الکترونیک

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

بن پنس
4 ژوئن 2024

0 نظر

معاملات بزرگ در حال آمدن است! ما در حال جشن B-Day عناصر هستیم.

جودی برلین
28 مه 2024

0 نظر

اظهار نظر
ایجاد شبکه

سازنده وب سایت و میزبانی
میزبانی استاتیک +معمار
صفحه سازنده صفحه -در
سلام موضوع
محتوای پویا
تجارت الکترونیک
تمور
زمین
سازنده پاپ
سازنده
بهینه سازی گردش کار
عناصر AI
بهینه کننده تصویر
سازنده WooCommerce
قیمت

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

عنصر

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

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

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

Elementor یک بستر برجسته سازنده وب سایت برای متخصصان وردپرس است. Elementor خدمات را برای متخصصان شبکه (از جمله توسعه دهندگان ، طراحان و کارکنان بازاریابی) ارائه می دهد و وب سایت جدیدی دارد که هر 10 ثانیه بر روی پلتفرم خود ایجاد می شود.
در اخبار ما مشترک شوید
پست الکترونیک

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

。 Elementor. کلیه حقوق محفوظ استروش این دوره

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

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

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

هر درس به این معنی است که کلاس حمل و نقل بر هزینه حمل و نقل تأثیر می گذارد
طبق دستور ، به این ترتیب ، بالاترین سفارش قیمت هزینه حمل و نقل را تعیین می کند

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

پس از داشتن منطقه حمل و نقل ، روش و مربع قیمت ، بیشتر پیکربندی حمل و نقل WooCommerce را تکمیل کرده اید. با این حال ، شما هنوز هم باید عملکرد سفارش را حل کنید.

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

با این حال ، Wookommerce مجموعه ای از سفارشات و تنظیمات موجودی را که باید درک کنید ارائه می دهد. به عنوان مثال ، برای مدیریت گزینه های موجودی خود ، می توانید به WooCommerce> “تنظیمات”> “محصول> موجودی: موجودی: موجودی:
واجد شرایط

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

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

در این مرحله ، ما دانش اساسی گزینه های حمل و نقل WooCommerce را پوشش دادیم. با این حال ، شما هنوز هم ممکن است به یاد داشته باشید که در پیش فرض ، تنظیم پلاگین -in تنها گزینه ای نیست که می توان از آن استفاده کرد.

به منظور ارتقاء تجربه حمل و نقل WooCommerce و عملکرد عملکرد خود ، می توانید از یک پسوند یا پلاگین سوم استفاده کنید. گزینه های زیادی برای این ابزارها وجود دارد ، از جمله:

WooCommerce Transport: شما می توانید مستقیماً از پسوند مناسب برچسب حمل و نقل از صفحه ابزار وب سایت چاپ کنید. علاوه بر استفاده رایگان ، می تواند برچسب هایی را برای USP و DHL چاپ کند. این پلاگین توسط JetPack پشتیبانی می شود. نام گسترده به طور مستقیم به WooCommerce متصل است ، بنابراین همه وزنه برداری سنگین را برای شما به ارمغان می آورد.
ادغام ShipStation: شما می توانید از ابزارهای رایگان برای ساده سازی حمل و نقل WooCommerce و انجام عملیات استفاده کنید. با استفاده از آن ، می توانید به طور خودکار سفارشات را از WooCommerce یا سایر سیستم عامل ها (مانند آمازون) وارد کنید. سپس می توانید برای استفاده از قیمت و تخفیف USPS در این فرآیند ، به یک لیست انتخاب شده انتخاب شده توسط اپراتور متصل شوید. همچنین می توانید ایمیل های اعلان ، برچسب های حمل و نقل و سفارشات بسته بندی را سفارشی کنید و صفحات ردیابی را برای برند تجاری خود تهیه کنید.

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

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

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

آیا در مورد پیکربندی گزینه های حمل و نقل WooCommerce سؤالی دارید؟ در قسمت نظرات پایین ما را آگاه کنید!
اشتراک گذاری
به دنبال محتوای تازه هستید؟
از اخبار و ارتباطات هفتگی ما مقاله و نظرات دریافت کنید. گزینه سوم وانت محلی است. مانند حمل و نقل نرخ بهره ثابت ، می توانید از این گزینه برای اضافه کردن مالکیت شخصی خود استفاده کنید ، برای وضعیت مشمول مالیات اقدام کنید و هزینه حمل و نقل را پیکربندی کنید:
بریده

با توجه به این وضعیت ، مشتریان ممکن است سفارشات را از فروشگاه فیزیکی شما شارژ کنند ، بنابراین ممکن است نیازی به ورود هزینه حمل و نقل نباشید. علاوه بر این ، لطفاً توجه داشته باشید که به طور پیش فرض ، گزینه حمل و نقل محلی WooCommerce وانت ، مالیات ها را بر اساس محل فروشگاه به جای آدرس مشتری محاسبه می کند.
مرحله 3: حمل و نقل و هزینه ها را تنظیم کنید

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

برای حمل و نقل نرخ بهره ثابت ، می توانید از بین چند گزینه پیشرفته انتخاب کنید. این شامل:

[Qty]: شما می توانید نرخ حمل و نقل را از تعداد موارد موجود در واگن برقی شارژ کنید.
[هزینه]: این به شما امکان می دهد هزینه های حمل و نقل را بر اساس کل هزینه سفارش اضافه کنید.

اگر می خواهید از تنظیمات [هزینه] استفاده کنید ، می توانید پارامترهای دیگری را انتخاب کنید:

درصد: حمل و نقل اضافی را به درصد تنظیم کنید.
min_fee: حداقل ارزش هزینه های اضافی را تعریف کنید.
max_fee: حداکثر مقدار هزینه اضافی را تنظیم کنید.

فرض کنید حمل و نقل نرخ بهره ثابت را به عنوان راهی برای حمل و نقل انتخاب می کنید. در زمینه هزینه می توانید یکی از موقعیت های فوق را وارد کنید. اگر از نماد اشغال مکان [مقدار] استفاده می کنید ، می توانید برای هر محصولی که به سبد خرید اضافه می شود ، هزینه اضافی را پرداخت کنید. به عنوان مثال ، اگر “2 +(5 * [qty]) را در قسمت هزینه قرار دهید ، این بدان معنی است که هزینه ثابت 2.00 دلار از مشتری را پرداخت می کنید و یک پرداخت اضافی از هر محصول را برای آنها به سبد خرید اضافه می کنید $ 5.00 دلار.

از طرف دیگر ، اگر دارنده دارنده [هزینه] را انتخاب کنید ، می توانید با توجه به درصد کل سفارش ، حمل و نقل اضافی را اضافه کنید. به عنوان مثال ، می توانید “2 + [fee ٪ =” 5 “max_fee =” 20 “] را اضافه کنید. این بدان معنی است که هزینه اصلی حمل و نقل 2.00 دلار است ، به علاوه 5 ٪ از کل هزینه خرید ، بیش از 20.00 دلار.

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

در مرحله بعد ، می توانید به سمت حمل و نقل> گزینه های حمل و نقل حرکت کنید:
گزینه تحویل

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

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

همچنین می توانید مقصد حمل و نقل پیش فرض را انتخاب کنید ::

آدرس حمل و نقل مشتری
آدرس صورتحساب مشتری
به آدرس صورتحساب مشتری منتقل می شود

پس از اتمام ، حتماً روی دکمه “ذخیره و تغییر” در پایین صفحه کلیک کنید تا اولویت خود را اعمال کنید.
مرحله 4: کلاس حمل و نقل را اضافه کنید

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

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

فرض کنید تجهیزات اسکی ، پوشاک و تجهیزات را می فروشید. در مقایسه با T -Shirts یا دستکش ، ممکن است هزینه های بیشتری را برای حمل کلاه ایمنی یا چکمه هزینه کنید.

برای افزودن یک کلاس حمل و نقل جدید ، می توانید به برگه “حمل و نقل” بروید ، سپس روی پیوند “کلاس حمل و نقل” کلیک کنید ، و سپس دکمه “افزودن حمل و نقل” را کلیک کنید:
راننده را اضافه کنید

در صفحه بعدی می توانید عنوان کلاس حمل و نقل را وارد کنید ، Slug و Design. به عنوان مثال ، ما از “کفش” استفاده خواهیم کرد:
نمونه حمل و نقل

پس از اتمام ، روی دوره “ذخیره و حمل و نقل” کلیک کنید. بعد ، فرض کنید حداقل یک نوع روش حمل و نقل را فعال کرده اید (ما نحوه انجام آن را در قسمت قبلی معرفی کردیم) ، سپس می توانید انتخاب کنیدWooCommerce پس از انتخاب منطقه حمل و نقل ، از شما می خواهد که روش حمل و نقل را برای آن انتخاب کنید. همچنین می توانید نرخ حمل و نقل مختلف را در هر منطقه اعمال کنید.

ابتدا به WooCommerce> “تنظیمات” در پانل های ابزار وردپرس بروید. در زیر برگه “معمولی” ، به قسمت گزینه عمومی بروید:
گزینه های WooCommerce-Gener

از منوی Drop -down ، می توانید کدام مکان را برای حمل و نقل انتخاب کنید. به عنوان مثال ، شما می توانید آنها را به همه کشورها /مناطق یا فقط به کشورهای خاص و مناطق منتقل کنید. برای این آموزش ، ما از سابق استفاده خواهیم کرد.

بعد ، روی برگه “حمل و نقل” کلیک کنید:
WooCommerce حامل آرا

در این صفحه ، تنظیمات پیش فرض WooCommerce Transport را پیدا خواهید کرد. به انتخاب منطقه حمل و نقل ادامه دهید و سپس دکمه “اضافه کردن منطقه حمل و نقل” را انتخاب کنید:
منطقه مهمات را اضافه کنید

در مرحله بعد ، می توانید از منوی Drop -down نام و منطقه منطقه ای را وارد کنید. ما نمونه ای از ایالات متحده و کانادا را انتخاب خواهیم کرد:
منطقه حمل و نقل

لطفاً توجه داشته باشید که مشتریان شما فقط می توانند گزینه های حمل و نقل را در منطقه خود مشاهده کنند. با کلیک بر روی محدودیت پیوند خاص ZIP/Post Code ، منطقه حمل و نقل بیشتر مشخص شده است.

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

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

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

حمل و نقل نرخ بهره ثابت زمانی است که شما بر اساس محاسبات حمل و نقل در مناطق خاص ، نرخ بهره ثابت را برای مشتریان جمع می کنید. می توانید در هر منطقه چندین نرخ ثابت اضافه کنید. این شامل نرخ استاندارد برای هر پروژه ، حمل و نقل یا سفارشات است. به عنوان مثال ، می توانید درصدی از هزینه های ثابت یا کل سفارشات (به عنوان مثال ، 10 ٪ از مبلغ خرید) اضافه کنید.

اگر نرخ بهره ثابت را به عنوان یک روش حمل و نقل انتخاب می کنید ، می توانید بر روی “لینک ویرایش” را تحت عنوان کلیک کنید و سپس یک پنجره جدید باز کنید:
تخصیص نرخ مسطح

در این صفحه می توانید یک عنوان متد را وارد کنید که برای مشتریان قابل مشاهده باشد و وضعیت مالیاتی را پیکربندی کنید ، به این معنی که آیا حمل و نقل باید مالیات شود. همچنین می توانید روش حمل و نقل را تنظیم کنید. به عنوان مثال ، اگر می خواهید 2.00 دلار شارژ کنید ، “2.00” را وارد کنید.

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

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

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

مانند حمل و نقل یکنواخت ، اگر این روش را به عنوان یک روش حمل و نقل انتخاب کنید ، می توانید روی “ویرایش پیوند” در WooCommerce> “صفحه حمل و نقل” کلیک کنید. یک پنجره جدید باز خواهد شد ، می توانید عنوان عنوان را وارد کنید و الزامات تحویل رایگان را انتخاب کنید:
حمل و نقل رایگان

برای این بخش ، اگر نمی خواهید سفارشات را برای تحویل رایگان مشخص کنید ، می توانید N/A را انتخاب کنید. علاوه بر این ، می توانید انتخاب کنید:

کوپن تحویل رایگان معتبر
حداقل مبلغ سفارش
حداقل مبلغ سفارش یا کوپن
حداقل مبلغ سفارش و کوپن

هنگامی که مشتری محصول را به سبد خرید WooCommerce اضافه می کند ، آنها می توانند مشاهده کنند که گزینه های حمل و نقل در دسترس است. پس از اتمام ، روی دکمه “ذخیره و تغییر” کلیک کنید.
حمل و نقل خاموش محلیاری
سرپرستی

جستجو کردن:
شروع

نحوه تنظیم گزینه های حمل و نقل WoooComerce (در 5 مرحله)

سرگئی داوودوف
onwoomommerce
18.05.21

0 نظر

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

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

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

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

آشنایی با حمل و نقل WooCommerce
نحوه تنظیم گزینه های حمل و نقل WoooComerce (در 5 مرحله)
مرحله 1: منطقه حمل و نقل را تنظیم کنید
مرحله 2: روش حمل و نقل صحیح را انتخاب کنید
مرحله 3: حمل و نقل و هزینه ها را تنظیم کنید
مرحله 4: کلاس حمل و نقل را اضافه کنید
مرحله 5: تنظیم عملکرد عملکرد سفارش
حمل و نقل ، موجودی و گسترش عملکرد WooCommerce

آشنایی با حمل و نقل WooCommerce

WooCommerce یک پلاگین محبوب وردپرس است ، می توانید فروشگاه های آنلاین را مستقیماً از وب سایت خود ایجاد و مدیریت کنید. می توانید از آن برای فروش شماره یا محصولات فیزیکی استفاده کنید:
WooCommerce-Website

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

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

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

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

به طور پیش فرض ، WooCommerce دارای گزینه های حمل و نقل ساخته شده است. با این حال ، شما همچنین می توانید از WooCommerce Plug -in برای گسترش توابع و کارکردهای سیستم عامل استفاده کنید. در پایان این مقاله ، ما چیزی را که ارزش در نظر گرفتن آن را دارد ، درگیر خواهیم کرد. حال ، بیایید روی چگونگی تنظیم گزینه های اصلی حمل و نقل WooCommerce خود تمرکز کنیم.
نحوه تنظیم گزینه های حمل و نقل WoooComerce (در 5 مرحله)

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

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

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

همه دسته بندی ها
عنصر
طرح
بازار یابی
توسعه دادن
کسب و کار

بدون کامنت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *