Трябва да промените заглавката при превъртане на страница с Elementor?
Заглавката на уебсайт играе решаваща роля за потребителското изживяване. Това е първият елемент, който вашите посетители виждат, когато попаднат на вашия сайт, и не само трябва да привлече вниманието им, но и да осигури плавна навигация.
С Elementor, задължителният инструмент за създаване на страници на WordPress, имате способността да трансформирате този основен елемент, така че да реагира динамично, докато страницата се превърта.
В тази статия ще проучим как да използвате Elementor, за да промените заглавката, когато потребителите превъртат страницата ви. Ще научите как да прилагате атрактивни, персонализирани ефекти за превъртане, които не само разкрасяват вашия сайт, но и подобряват неговата функционалност.
Независимо дали искате да създадете фиксиран, прозрачен или анимиран хедър, Elementor предлага мощни инструменти, които да отговорят на вашите нужди. Следвайте нашето подробно ръководство, за да научите как да използвате тази функция ефективно и да придадете лифтинг на вашия сайт.
Съдържание
Защо да променяте заглавието при превъртане?
Промяната на заглавката при превъртане е техника за дизайн на уебсайт, която носи няколко забележителни предимства по отношение на функционалност и естетика. Ето защо тази функция е ценна за вашия сайт:
1. Подобрете навигацията
Фиксиран или динамичен хедър, който следва потребителя, докато превърта, прави навигацията по-достъпна. Посетителите имат лесен достъп до менюта и важни опции, без да се налага да превъртат обратно до горната част на страницата. Този лесен достъп подобрява потребителското изживяване, особено на сайтове с дълги страници или обширно съдържание.
2. Увеличете ангажираността на потребителите
Добре проектираната заглавка, която се променя, докато превъртате, може да привлече вниманието на посетителите и да ги насърчи да се ангажират допълнително с вашето съдържание. Например, заглавка, която става непрозрачна или променя външния си вид, може да насърчи потребителите да проучат сайта по-нататък. Може да се използва и за насърчаване призиви за действие или важна информация по по-видим начин.
3. Подобрете естетиката на сайта
Ефектите за превъртане придават модерен и динамичен щрих на вашия сайт. Заглавие, което се развива, докато превъртате, може да осигури привлекателен визуален външен вид, подсилвайки визуалната идентичност на вашата марка. Това персонализиране спомага за създаването на запомнящо се и професионално впечатление.
4. Оптимизирайте визуалното пространство
Използвайки сгъваеми или прозрачни заглавки, вие оптимизирате визуалното пространство на вашия сайт. Това е особено полезно при по-малки екрани, като тези на смартфони, където пространството е ограничено. Като позволите на заглавката да се свие или скрие, докато потребителят превърта, вие увеличавате максимално наличното пространство за основното съдържание.
5. Укрепете идентичността на марката
Като персонализирате заглавката да се променя, докато превъртате, можете по-добре да интегрирате брандиращи елементи като лога, цветове и типография. Това допринася за последователно и запомнящо се представяне на вашата марка през цялата навигация, подобрявайки визуалното въздействие и разпознаваемостта на марката.
6. Улеснете преобразуването
Добре проектираните заглавки с видими призиви за действие могат да подобрят процента на реализация. Като разполагате с бутони с подканваща фраза или важна информация, винаги достъпна чрез фиксирана или динамична заглавка, насърчавате посетителите да предприемат желани действия, като например да се регистрират за бюлетин или направете покупка.
7. Това еадаптиране към нуждите на потребителя
Някои потребители предпочитат заглавки, които остават видими за лесна навигация, докато други може да оценят заглавки, които се прибират, за да осигурят ясен изглед на съдържанието. Като предлагате персонализирани опции, вие отговаряте на разнообразните предпочитания на вашите посетители, като по този начин повишавате тяхното удовлетворение и комфорт при сърфиране.
Как да промените заглавката при превъртане на страница с Elementor
Elementor Pro, както знаете, идва с функция Създател на теми за да ви позволи да създадете персонализирана заглавка на вашия уебсайт WordPress. С тази функция вече не е необходимо да разчитате на това, което се предлага от вашия WordPress тема когато става въпрос за персонализиране на заглавки, което обикновено е ограничено.
Можете да добавите всеки елемент, който искате, да използвате всяка типография, която желаете, и да дефинирате всяко поведение, което искате.
Elementor Pro има вградена опция за настройка за добавяне на лепкава заглавка. Ще използваме тази функционалност, за да създадем заглавка, която се променя при превъртане на страницата. Персонализиран CSS също ще е необходим за този тип поведение на заглавката.
Но за да постигнете тази цел, ще ви трябва Pro версията на Elementor, която поддържа персонализиран CSS.
За да прочетете също така: Как да създадете персонализиран хедър в WordPress с Elementor
Ето пример за заглавка, която се променя при превъртане на страницата.
Стъпка 1: Създайте персонализирана заглавка
Преди да започнете, уверете се, че сте надстроили своя Elementor до професионалната версия, тъй като Theme Builder е наличен само в Elementor Pro. Можете да получите професионалната версия на Elementor Pro на него официален уебсайт.
След като сте готови:
- Стигнем до Шаблони -> Конструктор на теми на основното табло за управление на WordPress.
- В таблото за управление на конструктора на теми поставете показалеца си върху раздела Header
- Кликнете върху иконата + за да създадете нов шаблон за заглавие.
- В библиотеката с шаблони, която се показва, можете да изберете предварително дефиниран шаблон за заглавие, който харесвате. Или, ако искате да създадете заглавката от нулата, можете просто да затворите библиотеката с шаблони, за да отворите редактора на Elementor.
Открийте също: Как да създадете персонализирани фигури в Elementor
В тази статия ще създадем шаблона на заглавката от нулата.
- Започнете да създавате заглавката си, като добавите контейнер, след което добавете необходимите елементи
- Персонализирайте стиловете съответно.
След като добавите необходимите елементи и създадете стиловете,
- Отидете в раздела Разширено.
- Под блока Разширено, задайте Z индекс на 100
- Въведете CSS клас
header-1
- След това дублирайте заглавката, която току-що създадохте. Дублираният контейнер ще бъде вашият втори хедър, който ще се появи, когато потребителят превърти надолу.
- Редактиране на дублирана заглавка. Можете да добавите още елементи или да премахнете съществуващи елементи. Можете също да промените фона. Каквото искаш.
След като персонализирането на стила приключи:
- Отидете в раздела Разширено.
- Под блока Разширени настройки, преименувайте CSS класа на header-2.
След това отворете блока Ефекти на движение.
- Задайте падащ списък Лепкава, от Топ. Можете да дефинирате отместването на ефектите в полето Отместване на ефектите. Стойността, която зададете тук, ще определи дълбочината на превъртане, преди ефектът (в този случай лепкав) да се осъществи.
След като приключите с модифицирането на двата контейнера на заглавката:
- Променете реда им.
- Редактирайте първия контейнер, като зададете отрицателен марж, така че да се намира над горния контейнер. За да направите това, достъп раздела Разширени и задайте горното поле на около -76.
- Добавете условие за показване, като щракнете върху бутона ДОБАВЕТЕ УСЛОВИЕ.
- Кликнете върху бутона ЗАПАЗИ И ЗАТВОРИ след като приключите с настройката на състоянието на дисплея.
Стъпка 2: Добавете персонализиран CSS
CSS по-долу се използва за контролиране на ефекта на прехода. Можете да добавите CSS към персонализатора на темата.
- Стигнем до Външен вид -> Персонализиране в таблото за управление на WordPress.
- В таблото за персонализиране на теми отворете блока Допълнителни CSS и поставете следния CSS.
CSS фрагментът:
.header-2 {
transform: translatey(-80px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: none!important;
}- Кликнете върху бутона ПУБЛИКУВАНЕ за да приложите промяната.
И ето го, заглавката ви ще се промени, когато превъртате.
В резюме
Elementor Pro идва с функцията Theme Builder, където можете да създавате персонализирани шаблони за части от вашата тема, като например заглавката.
Когато създавате персонализирана заглавка с помощта на Elementor Theme Builder, можете да зададете каквото желаете поведение с възможността да добавяте персонализиран CSS. Дори без да добавяте персонализиран CSS, можете да зададете ефекти като лепкав и прозрачен.
Прочетете още: Как да създадете 404 страница в WordPress с Elementor
Промяната на заглавката на самата страница за превъртане предлага някои предимства.
Например, можете да използвате вторичната заглавка (заглавката, която се появява след превъртане на страницата надолу), за да увеличите шансовете страницата ви да бъде споделена, като показвате само бутони за споделяне в социалните медии. .
Често задавани
Мога ли да прилагам ефекти на превъртане към елементи, различни от заглавката?
Да, Elementor ви позволява да прилагате ефекти на превъртане към различни елементи на страницата, включително контейнери, секции, колони и джаджи.
Възможно ли е да се приложат ефекти на превъртане само на определени страници?
Да, можете да конфигурирате ефектите на превъртане да се показват само на определени страници, като използвате условията за показване в Elementor.
Ефектите на превъртане влияят ли на скоростта на зареждане на страницата?
Ефектите на превъртане може леко да повлияят на скоростта на зареждане. Важно е да тествате и оптимизирате ефективността на вашия сайт, за да осигурите добро потребителско изживяване.
Как да се върна към първоначалните настройки, ако промените не ми харесват?
Можете да се върнете към оригиналните настройки, като използвате функцията за отмяна в Elementor или като върнете настройките на заглавката към първоначалното им състояние в опциите за стил.
Мога ли да персонализирам ефектите на превъртане според типа устройство?
Да, Elementor ви позволява да персонализирате ефектите на превъртане за различни типове устройства (десктоп, таблет, мобилно), за да оптимизирате изживяването във всички платформи.
Други ресурси на Elementor
- Как да овладеете Elementor в WordPress: Инсталиране, използване и разширени функции –
- Преглед на Elementor – Само едно нещо има значение, нищо друго
- Как да създадете формуляр с безплатен Elementor
- Как да персонализирате формуляр за контакт 7 с Essential Addons
Заключение
Персонализирането на заглавката на уебсайта ви с Elementor не е свързано само с естетиката, но и с функционалността и потребителското изживяване. С помощта на инструментите и опциите, предлагани от Elementor, можете да създадете заглавка, която не само привлича вниманието на вашите посетители, но също така идеално се адаптира към техните нужди, докато превъртат през вашия сайт.
Независимо дали искате да добавите стилен ефект на превъртане, да оптимизирате отзивчивостта или просто да прецизирате дизайна, за да съответства на идентичността на вашата марка, Elementor предлага несравнима гъвкавост. Като внимателно подготвите заглавката си и използвате разширени функции, можете да подобрите външния вид и усещането на вашия сайт, като направите навигацията по-интуитивна и ангажираща.
Не забравяйте да проучите всички налични опции в Elementor, за да увеличите максимално въздействието на заглавката си. Тествайте различни ефекти и конфигурации, за да видите какво работи най-добре за вашия сайт.
Ако сте намерили тази статия за полезна, не се колебайте да го споделите с вашите колеги и приятели които също биха могли да се възползват от този съвет. И ако имате някакви въпроси или се нуждаете от допълнителни разяснения, Оставете коментар по-долу. Ние сме тук, за да ви помогнем да извлечете максимума от Elementor и да създадете невероятни уебсайтове.
Продължавайте да изследвате възможностите на Elementor и трансформирайте сайта си с въздействащи и функционални хедъри!
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
...