Как да оптимизираме оформлението на уебсайта си с Elementor

Искате да знаете как да оптимизирате оформлението на уебсайта си с Elementor ?

Оптимизирането на работата на уебсайта е един от най -важните му аспекти потребителско изживяване. Бавно зареждащият се уебсайт може да разочарова всеки потребител, което често води до a процент на отпадане високи, което може да повлияе неблагоприятно на успеха на нашия бизнес.

Производителността на уебсайта може да бъде повлияна от много фактори, например: големи размери на изображения, конфигурации на сървъра, твърде много плъгини, наред с други фактори.

Ефективността на уебсайта е една от най -силните ни ценности като уеб създатели. Ето защо създадохме този курс в 5 части.

Сега можете да научите как да създавате оформления и публикации, използвайки оптимални техники. Тези знания ще гарантират, че вашите уебсайтове няма да включват излишни секции, колони или приспособления, които просто не са необходими. Ще изследваме и някои вградени функции на джаджи, за да подобрим времето за зареждане.

До края на този урок ще бъдете напълно готови да оптимизирате работата на всеки уебсайт Elementor вие създавате и веднага жънете наградите.

Урок 1: Най -добри практики за оптимизиране на оформлението

В първия ни урок ще разгледаме най-ефективния начин за създаване на вашите страници и публикации в редактора Elementor. Често виждаме използването на твърде много секции, колони, вътрешни секции и уиджети, когато същото оформление можеше да бъде постигнато с много по-малко елементи.

Използването на прекомерно количество елементи забавя работата на вашия уебсайт, така че нека се потопим и научим как да изграждаме уебсайтове с Elementor по най -ефективния начин.

Ще разгледаме следните теми:

• По -подробен поглед върху структурата на правилната страница
• Преглед и тестване на производителността на вашия уебсайт
• Оптимизиране на съдържанието на заглавката, долния колонтитул и страницата
• Примери за добри и лоши практики за оформление на уебсайтове
• Правилно използване на приспособления, позициониране и глобални стилове
• Съвети за избягване на забавяне на натоварването, подобряване SEO и увеличете времето за зареждане
• Оптимизиране на достъпността
• Намаляване на количеството DOM елементи
• И още много !

За да разберем по -добре оптималните оформления в Elementor, ще проучим шаблон на Elementor, който показва често срещани злоупотреби със секции, колони и приспособления. До края на този урок ще възстановим напълно цялата страница, като намалим броя на колоните и приспособленията. Първоначалната ни страница се състои от девет раздела, 31 колони, пет вътрешни раздела и 44 джаджи.

В края на урока оптимизираната ни страница ще бъде намалена до шест раздела, седем колони и 16 приспособления.

Ще използваме безплатната, лека Здравей Темаи ние ще пресъздадем всеки раздел от шаблона и ще подобрим цялостната работа на уебсайта, като използваме най -добрите практики.

Тестване за лоши практики

Преди да се потопим в оптимизирането на оформлението на уебсайта, нека направим тест на нашата страница, за да разберем напълно какво се случва, когато някой посети нашия уебсайт. След като всички наши оптимизации бъдат направени, ще повторим теста и ще сравним резултатите.

Стъпка 1: Проверете уебсайта си в прозорец в режим „инкогнито“

• Отворете нов прозорец в режим „инкогнито“ и въведете URL адреса на уеб страницата, която тествате.

Стъпка 2: Проверете дали използвате директния URL адрес

Ако не сте сигурни в връзката към страницата си, можете лесно да я намерите, като отидете на таблото си за управление на WP:

• Кликнете върху „Страници“, за да видите всички страници на вашия уебсайт.
• Задръжте курсора на мишката върху страницата си и кликнете върху опцията „Преглед“. Това ще ви отведе директно на вашата страница.
• Копирайте и поставете този URL адрес в прозореца за инкогнито и след като уебсайтът се зареди, сте готови да го тествате!

Тестване и преглед на резултатите от производителността

Стъпка 1: Тествайте резултатите от работата

Може да сте използвали Инструменти за програмисти на Chrome в миналото.

Ако не, за да проверите и покажете HTML и CSS съдържанието на страницата си:

• Щракнете с десния бутон навсякъде на страницата си и щракнете върху „Проверка“. Ще видите няколко раздела, където можете да прочетете HTML и CSS, да намерите грешки, да получите резултати от SEO и да изпълните различни тестове.
• Изберете раздела Мрежа и натиснете бутоните cmd или ctrl + R, за да заредите резултатите.

Както можете да видите, нашето текущо оформление отнема 2,88 секунди за зареждане и изпълнява 81 заявки.

Стъпка 2: Преглед на резултатите от производителността

• Преминете към раздела Lighthouse, където можем да изготвим одитен доклад на нашата страница.

Това ще ни даде повече информация за текущото представяне на страницата.

• Изберете „Генериране на отчет“. След няколко минути ще се появи вашият отчет.

В момента получаваме рейтинг на ефективност 73/100, върху който със сигурност можем да работим.

В идеалния случай бихме искали всички тези числа да са зелени. Сега нека да преминем към оптимизиране на нашата страница и подобряване на нашите статистика.

Имайте предвид, че след всяка стъпка на оптимизация, която правим, може да вземем някои най -добри практики от промените и да ги имаме предвид за бъдещите уебсайтове, които създаваме.

Оптимизиране на елементите на страницата

Стъпка 1: Оптимизирайте заглавката

Нека започнем с удар с глава.

Както можете да видите в този дизайн, заглавката е направена с три колони.

В първата колона нашето лого се състои от две джаджи:

1. Un Приспособление за изображение който показва .png файл с изображение на нашето лого
2. Джаджа за заглавие.

Във втората колона заглавното меню се състои от нашия приспособление за навигационно меню.

Третата колона съдържа:

1. Вътрешен приспособление за секции (което контролира позицията на приспособлението за икони).
2. Нашите данни за контакт за заглавката

Нека да видим как можем да сведем до минимум броя секции, приспособления и секции тук.

Стъпка 2: Създайте ново заглавие

Колона 1:

• Създайте 1 раздел само с 1 колона.
• Добавете Приспособление за лого на уебсайт и го плъзнете в секцията.

Най -добри практики за изображения:

• Дайте на всеки файл с изображение на вашия уебсайт подходящо заглавие и заместен текст в медийната библиотека.

Това ще подобри достъпността на вашата страница и класирането на търсачката ви. В логото, което първоначално използвахме, заглавието е без значение за действителното изображение и няма заместващ текст.

• Определете размерите на изображението вътре в приспособлението.

Това позволява страницата да бъде изложена с подходящо място преди зареждането на изображенията, като се избягва изоставането на оформлението (коефициент, измерен от браузърите).

В примера, по който работим заедно, разрешете този проблем, като отидете в раздела Стил и зададете ширината на изображението на 200 пиксела.

колона 2

Върнете се в панела с приспособления:

• Плъзнете и пуснете приспособлението за навигационно меню под логото
• Задайте показалеца на "Няма"
• Отидете в раздела „Стил“ и добавете шрифта по ваш избор (така че да съответства на предишния ни дизайн)

Най -добри практики за цялостен стил:

• Избягвайте да използвате повече от 2 различни шрифта, които включват множество тегла (Глобални шрифтове).
• Избягвайте да избирате различни цветове за всеки елемент с инструмента за избор на цвят (Глобални цветове).
• Подобрете скоростта на зареждане на уебсайта си, като генерирате по -малко заявки (общи шрифтове).
• Повторете ненужния код два пъти (глобални цветове).
• Поддържайте последователност и контрол на вашия модел (цялостен стил).

Глобални шрифтове:

Това може да стане с помощта на функцията Global Fonts:

• Отидете в раздела „Стил“ и добавете предпочитания от вас шрифт (така че да съответства на предишния ни дизайн), като изберете един, направете малка промяна и задръжте курсора на мишката върху иконата плюс.
• Щракнете върху иконата плюс и изберете семейството от шрифтове, от което се нуждаете
• Запазете стиловете, които ще използвате в шаблона като глобални шрифтове

След това можете да използвате този стил за всяка джаджа, която създавате.

Глобални цветове:

Същият метод може да се използва за вашите общи цветове:

• Кликнете върху „Глобално“
• Задръжте курсора на мишката върху инструмента за избор на цвят и кликнете върху него
• Изберете цвят и посочете иконата плюс
• Кликнете върху „Глобално“ >> изберете „Главен директор“

След като направите това, цветът ще бъде записан в цветовата палитра на вашия шаблон, така че можете да го изберете от списъка си с глобални цветове, когато имате нужда от него за елемент или приспособление.

Преди да продължим с заглавката, нека зададем вертикалната подложка на нула.

Стъпка 3: Редактирайте заглавката

Колона 3

• Отидете на панела „Приспособления“
• Плъзнете Widget Списък с икони под менюто.
• Премахнете допълнителни елементи от списъка
• Добавете вашия текст
• Изберете иконата по ваш избор
• Отидете в раздела "Стил"
• Определете общите цветове и шрифтове по ваш избор

Сега трябва да поправим още нещо - трите заглавни елемента в момента са подредени и не са подравнени един с друг. Можем да разрешим този проблем, като променим ширината на всеки елемент до действителния му размер, така че да не заема цялото пространство в колоната.

За да разрешите този проблем:

• Изберете джаджа за логото на сайта >> раздел „Разширени“
• Изберете „Позициониране“ и задайте ширината му на „Вграден“

Повторете тази точна стъпка за приспособлението за меню за навигация и за приспособлението за списък с икони.

Сега, когато всички заглавни елементи са в една линия, остава само да ги разположите правилно.

Дефиниране на позиционирането на колоната с вградени елементи

• Изберете вашата колона >> отидете на раздела "Оформление"
• В „Вертикално подравняване“ изберете „Отдолу“
• „При хоризонтално подравняване“ изберете „Разстояние между“

Избирането на подравняване „Пространство между“ позиционира първата и последната джаджа в двата края, като дава равно разстояние между всички останали джаджи.

Въпреки това, първата и последната джаджа имат различна ширина, така че равното пространство не винаги може да центрира нашата вътрешна джаджа.

Можем да разрешим този проблем, като коригираме маржовете:

• Изберете приспособление за навигационно меню >> раздел „Разширени“
• Разгрупирайте полето и премахнете интервала с отрицателна стойност

Стъпка 4: Направете заглавката отзивчива

Сега нека видим как изглежда текущата версия на нашия уебсайт на мобилни устройства.

Най -добри практики за отзивчивост на мобилни устройства:

• Опростете дизайна си и помислете за начини да направите същите секции отзивчиви, за да избегнете използването на двойно по -голямо количество код, което ще повлияе на скоростта на страницата ви.

Точно както виждате в тази заглавка - Обичайно е да видите същия раздел, преработен специално за таблети и мобилни устройства. Ето какво виждаме тук: създадени са две версии на дизайна: една версия за настолни компютри и една за мобилни устройства.

Вместо това, когато вашият дизайн и код реагират, скоростта на страницата ви се подобрява, защото ще използва по -малко код.

Нека да видим как можем да постигнем това, като използваме настройката „Персонализирана ширина“ за нашите джаджи и елементи.

Задаване на персонализирана ширина за таблет

• Кликнете върху „Nav Menu“ >> „Advanced“
• Изберете "Позициониране" >> задайте ширината на "Персонализиран".
• Изберете "%" >> дайте на джаджата същата ширина (в проценти) на празното пространство около нея.
• Кликнете върху раздела „Съдържание“ >> „Превключване на подравняването“ >> изберете „Надясно“.

Това ви позволява да подравните менюто за превключване навсякъде в ширината на приспособлението.

Сега нека завършим персонализирането на менюто за превключване.

• "Съдържание" >> Кликнете върху превключвателя "Пълна ширина" и го задайте на "Да".
• "Стил" >> Премахнете фона, като плъзнете лентата "Цвят на инструменти за избор" докрай наляво.

Сега нека видим как изглеждат нещата на мобилен екран.

Определяне на персонализирана ширина за мобилни устройства

В този сценарий ние ще запазим трите приспособления за заглавки вътре в прозореца за изглед. Но имайте предвид, че за някои уебсайтове може да има по -смисъл да се пропуснат някои елементи от заглавката, когато се гледат на мобилни устройства или таблети.

В този случай това, което се случва с заглавката ни, когато се показва на мобилни устройства, е, че приспособленията за навигационно меню и лого не могат да се поберат в един ред.

За да разрешите този проблем:

Позициониране на навигационното меню

• Кликнете върху „Nav Menu“ >> раздел „Advanced“
• Изберете „Позициониране“ >> задайте ширината на „Персонализиран“
• Изберете "%" >> Дайте на джаджата ширина 30%, така че да пасне до нашето лого

Позициониране на списъка с икони

• Кликнете върху „Списък с икони“ >> „Раздел„ Разширени “
• Изберете „Попълване“ >> Разгрупиране на стойностите
• Добавете 12px подложка към „TOP“

Можеш ли да повярваш?

Нашата заглавка първоначално използвана 2 раздела, 12 джаджи и 10 колони. Сега нашата заглавка използва 1 раздел, 3 джаджи и 1 колона.

И резултатът е същият!

Стъпка 5: Оптимизирайте секцията Hero

Нека преминем към следващия раздел на нашия уебсайт: раздела за герои

Най -добри практики за разделите за герои:

• Уверете се, че текстът на раздела ви за герои е лесно видим, особено когато има фоново изображение.

Контролиране на позицията на приспособлението в колона

Често срещана грешка, която виждаме направена в редактора на Elementor, е използването на допълнителни колони и интервали за контрол на позиционирането на приспособление.

В нашия примерен модел, нашият образ на герой се състои от раздел с фоново изображение. Заглавието и текстът са позиционирани хоризонтално, като се използват две колони. Вътре в секцията също има дистанционер за вертикално разположение на елементите.

Нека да видим как можем да създадем един и същ дизайн само с един раздел:

• Изтрийте допълнителната колона вдясно от текста.
• Свалете дистанционера.

Вместо това, за да позиционираме нашия герой текст там, където го искаме, ще използваме опциите за подравняване на колоните:

• Изберете колоната.
• Задайте „Вертикално подравняване“ на „Средно“.
• Отидете в раздела „Разширени“.
• Изберете „Попълване“ >> Разгрупиране на стойностите
• Задайте дясната подложка на 50%.

• Изберете секцията.
• Изберете "Минимална височина" >> задайте го на 80.

Фиксиран контраст между текстове и фон

Важно е всеки уебсайт да има добър контраст между текста и фона. Нечетимата информация влияе върху резултатите на вашия уебсайт и също може да прогони посетителите. Така или иначе, текстът винаги трябва да бъде ясно четлив.

Има няколко начина за подобряване на яснотата на раздел, чийто фон е цветно изображение (както виждаме в този шаблон):

• Кликнете върху заглавката си.
• Отидете в раздела „Стил“ >> Изберете „Текстова сянка“.

Това ще подобри четимостта на текста, като го отличи от фоновото му изображение.

Друг начин да направите текста си по -ясен е да използвате наслагвания.

• Изберете раздела >> раздел "Стил" >> "Фоново наслагване"
• Изберете един от общите си цветове и играйте с непрозрачността, докато получите желания резултат

Стъпка 6: Оптимизирайте секцията с икони

Сега нека преминем към следващия ни раздел, където в момента имаме вътрешен раздел с четири колони. Понастоящем всяка колона има три приспособления: Image Widget, Title Widget и Text Editor Widget.

Нека да видим как можем да опростим този раздел, за да подобрим производителността му.

Съдържание на областта с икони

• Изберете бутона »Widget Icon Box« в менюто с приспособления и го плъзнете в колоната
• Изберете „Кутия с икони“
• Посочете изображението на иконата
• Изберете „Изтегляне на SVG“ **
• Поставете вашата персонализирана икона

** Забележка: Значките са SVG файлове. Ако не сте, отидете на таблото за управление на WordPress, след това отидете на Elementor >> Настройки. Ще трябва да активирате Enable Unfiltered File Downloads.

• Въведете вашето "заглавие"
• Въведете вашето „описание“
• Изберете "Стил" >> Изберете цялостен цвят
• Изберете „Размер“ и плъзнете лентата до размера по ваш избор
• Изберете „Padding“ и плъзнете лентата до номера по ваш избор

Стъпка 8: Оптимизирайте секцията „Услуги“

Сега ще възстановим секцията „Услуги“, която понастоящем използва две колони, две изображения, джаджа за заглавие и джаджа за текстов редактор.

Нека създадем същия дизайн в нов раздел, но само с една колона.

• Създайте нов раздел с колона
• В „Оформление“ >> задайте „Ширина на съдържанието“ на „Пълна ширина“
• Изберете „Widget Image Box“ в панела с приспособления и го плъзнете в колоната

(Ще можем да интегрираме всички активи на раздела в тази джаджа)

• Въведете заглавието
• Въведете описанието

За изображението ще запазим текущия дизайн, който използвахме за нашите изображения.

• Вмъкнете същото изображение от медийната библиотека
• Отидете в раздела „Съдържание“ >> Задайте „Позиция на изображението“ на „Вдясно“

• Отидете в раздела "Стил"
• Увеличете разстоянието между елементите
• Увеличете "ширината" на изображението
• Разгънете секцията „Съдържание“
• Изберете подравняването "в центъра"
• Задайте „Вертикално подравняване“ на „Средно“
• Определете общите цветове и шрифтове по ваш избор
• Отидете в раздела „Разширени“
• Добавете 10% запълване към джаджата

Сега секцията Услуги има същия дизайн, но с по -малко активи.

Стъпка 9: Оптимизирайте раздела за подканваща фраза

Най -добри практики за CTA връзки:

• Уверете се, че всичките ви връзки в социалните медии работят правилно и бутонът съдържа връзката.
• Когато добавите връзка към друг уебсайт, включете този атрибут: "rel | noopener"

(Можете да направите това, като кликнете върху иконата на зъбно колело и въведете атрибута в „Персонализирани атрибути“). Това ще отвори връзката в нов раздел на браузъра и ще увеличи резултата ви.

Следващият раздел представя призив за действие за нашите услуги.

Разделът в момента има две колони, които съдържат:

1. Фоново изображение с дистанционер
2. Две заглавки, вътрешен раздел, текстов редактор и бутон

Нека създадем същия дизайн в нов раздел, но само с една колона.

• Отидете в раздела „Оформление“ >> задайте „Ширина на съдържанието“ на „Пълна ширина“
• Отидете в раздела "Разширени" >> Премахнете всички допълнителни пълнежи

• Изберете „Призив за действие Widget“ в панела на джаджа и го плъзнете в колоната
• Задайте „Позиция на изображението“ на „Ляво“
• Изберете вашето изображение от медийната библиотека
• Разгънете секцията „Съдържание“
• Въведете заглавката
• Въведете описанието
• Въведете текста на бутона

• Отидете в раздела "Стил"
• Добавете „Padding“ между елементите
• Регулирайте ширината на изображението
• Разгънете секцията „Съдържание“
• Изберете глобалния шрифт за заглавието си
• Увеличете пространството между описанието и бутона
• Изберете глобалните цветове, подходящи за всеки ресурс
• Разгънете секцията „Бутон“
• Задайте размера му на "Голям"
• Персонализирайте го според вашите нужди, като цвят на фона и радиус на рамката

Досега това беше раздел с 2 колони с 6 джаджи. Сега това е раздел с 1 колона само с 1 джаджа!

Стъпка 10: Оптимизирайте въртележката на изображението

Настоящият дизайн на нашата секция Image Carousel има често срещана грешка с начина, по който показва няколко изображения.

Този дизайн се състои от 5 колони, практика, която много потребители са склонни да правят, за да контролират размера на своите изображения.

Нека да проучим по -прост начин, който също ще оптимизира производителността на вашия уебсайт.

• Създайте нов раздел с 1 колона
• Отидете в раздела „Оформление“ >> задайте „Ширина на съдържанието“ на „Пълна ширина“
• Изберете бутона »Image Carousel Widget« от панела с приспособления и го плъзнете в колоната
• Добавете желаните изображения от медийната библиотека

• Отидете в раздела „Съдържание“
• Задайте „Размер на изображението“ на „Среден - 300 x 300“
• Настройте „Слайдове за показване“, „Слайдове за превъртане“ и „Навигация“ според вашите предпочитания

• Отидете в раздела "Стил"
• Задайте „Вертикално подравняване“ на „Център“
• Персонализирайте „Разстоянието“

• Отидете в раздела „Разширени“
• Добавете необходимия пълнеж

Това, което някога е било секция с 5 колони, сега е само 1 колона.

Нека преминем към следващия раздел, където можем да оптимизираме видеоклиповете на нашия уебсайт.

Стъпка 11: Оптимизирайте видео секцията

Най -добри практики за видеосъдържание:

• Използвайте Lazy Load, когато е възможно, за да подобрите времето за зареждане на вашите уебсайтове.

Какво се случва, когато приложим опцията „Мързеливо зареждане“?

Технически погледнато, кодът за вграждане на видео се заменя със статично изображение. По този начин видеоклипът се зарежда само когато потребителят кликне върху изображението - което наистина помага с времето за зареждане на страницата ни.

Това, което ще направим сега, е да променим начина, по който използваме Video Widget, така че да не забавя скоростта на нашата страница или производителността на уебсайта.

• Изберете „Видео джаджа“
• Отидете в раздела "Стил"
• Изберете „Мързеливо зареждане“

Стъпка 12: Оптимизирайте долния колонтитул и го актуализирайте

Често срещана грешка, наблюдавана на много уебсайтове, е, че техният долен колонтитул използва множество заглавки за датата и описанието, както и икона за символа за авторски права.

Нека да видим как да оптимизираме долния колонтитул и да се уверим, че той винаги е актуален.

Ще конфигурираме този процес на непрекъснато актуализиране, като използваме Динамични тагове. По този начин няма да се налага да променяме съдържанието на заглавката всяка година, тъй като динамичните тагове автоматично ще се актуализират до текущата година.

За да направим това, ще действаме по следния начин:

• Премахнете допълнителните джаджи, като оставите само джаджата за заглавие
• Изберете джаджа за заглавие
• Кликнете върху символа „Динамични тагове“ вдясно от полето „Заглавие“ (известен също като „Бутон за родител“)

• От падащото меню изберете елемента от менюто „Текуща дата и час“
• Кликнете върху родителската икона на ключа
• Кликнете върху раздела „Формат на датата“ и изберете елемента от менюто „Персонализиран“
• Изтрийте това, което в момента е в полето „Персонализиран формат“, с изключение на „Y“
• Изберете раздела „Разширени“
• Маркирайте полето "Напред" и задръжте едновременно клавишите "опция" и "G" (или "контрол", alt "и" C "едновременно), за да въведете символа" © ".
• Добавете интервал след "©"

• Изберете полето "След"
• Въведете интервал и напишете текста, който искате да се появи след годината, например „Всички права запазени“

Може да забележите, че в примерния уебсайт в този урок всяка джаджа има свой собствен раздел. Направихме това, за да направим урока по -ясен и по -лесен за следване.

В идеалния случай, колкото по -малко секции имате, толкова по -малко допълнителен HTML КОД ще имате.

Можете да обедините някои приспособления в същия раздел, като ги плъзнете и пуснете в горния раздел и след това изтриете празния раздел.

И това е, вашето оформление е оптимизирано!

Оценка на ефективността на нов уебсайт

Ще проверим резултатите в прозореца DevTools (Inspector):

• Изберете раздела „Мрежа“:

Тук има някои хубави и положителни промени:

• Зареждането на уебсайта отнема 568 милисекунди
• Преминахме от 81 заявки към 46
• Изберете раздела „Lighthouse“, където ще видите, че нашият резултат се е увеличил от 73 на 98

Имайте предвид, че оптимизирахме работата си, без да използваме приставки на трети страни. Нужни бяха само прости ощипвания и най -добри практики.

Стъпка 13: Тествайте резултатите с ефекти на движение

Искаме да направим нашия сайт по -интерактивен и забавен, но как това ще се отрази на нашите резултати? Нека видим какво можем да направим.

Направете заглавката „фиксиран“ елемент:

• Изберете заглавката
• Отидете в раздела „Разширени“
• Разгънете раздела „Ефекти на движението“
• Задайте опцията „Sticky“ на „Top“

Направете секцията с герои „фиксиран“ елемент:

• Изберете секцията за герои
• Отидете в раздела "Стил"
• Изберете падащия списък „Прикачен файл“ и изберете „Поправено“

Използвайте a Входна анимация за текста на героя (заглавка):

• Изберете джаджа за заглавка
• Отидете в раздела „Разширени“
• Разгънете раздела „Ефекти на движението“
• Изберете Input Animation и го задайте на „Fade In“

Използвайте анимация за въвеждане за текстовото описание на героя (джаджа за текстов редактор):

• Изберете джаджа за текстов редактор
• Отидете в раздела „Разширени“
• Разгънете раздела „Ефекти на движението“
• Изберете „Анимация за въвеждане“ и го задайте на „Fade In“

Направете същото за приспособленията, които идват след това, за фини ефекти, когато страницата се зареди.

Сега нека отново проведем теста за производителност, за да видим как влиянието на движението се отрази на нашия резултат:

• Върнете се в прозореца "Инспектор"
• Изберете раздела „Lighthouse“
• Кликнете върху „Генериране на отчет“

Сега виждаме, че нашият резултат е намален до 97 - това определено не е голяма разлика и прави уебсайта по -интересен и забавен.

Можете ли да повярвате на новия ни резултат?

Радваме се, че сега сте напълно оборудвани, за да увеличите резултата си от всеки уебсайт на Elementor, който създавате. Това ще има голямо значение за целите на изграждането на вашия уебсайт и успеха на вашия бизнес.

Предлагаме ви да маркирате този урок за бъдещи справки, за да можете да проверите ефективността на страниците на уебсайта си и да приложите най -добрите практики за оптимизиране на оформлението си.

И това е само началото - следващата част от този курс обхващаоптимизация на изображението.

В урока ще преминем през всяко изображение в примерния уебсайт и ще научим как да ги подобрим за още по -ефективно време на зареждане.

Вземете Elementor Pro сега!

Заключение

Така ! Това е всичко за тази статия, която ви показва как да оптимизирате оформлението на уебсайта си с Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в рамките на Връзка.

Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...