Прозрачните заглавки са модерни в наши дни и се използват от все по-голям брой уебсайтове. Тези видове заглавки правят вашата страница да изглежда опитна и насърчават потребителите да бъдат на страницата за по-дълго време.
Над сгъвката, прозрачният хедър на Beaver Builder се отнася до областта на уеб страницата, която се вижда от потребителите на пръв поглед, т.е. това, което потребителите виждат, без да превъртат страницата.
Любопитни сте за Beaver Builder, не се притеснявайте, че ще ви покрия наш подробен преглед на Beaver Builder.
Ще отговоря на тези въпроси в блога, вижте:
- Какво е горен колонтитул на страница?
- Какво е значението на прозрачен хедър?
- Какво прави добавянето на прозрачен хедър към вашия уебсайт?
- Какви са характеристиките на Beaver Builder?
- Как да задам прозрачен хедър с Beaver Builder?
- Какви са стъпките, за да направите заглавката на вашата уеб страница прозрачна?
- Кои важни термини от кода трябва да знаете?
- Каква е цената на Beaver Builder?
Съдържание
Какво е горен колонтитул на страница?
Заглавката на страницата се нарича горната секция на всяка уеб страница, присъстваща на вашия уебсайт. Заглавките често се тълкуват погрешно само с горната лента, която има логото на вашата компания/уебсайт и лента с менюта.
Но това не е така, заглавката на страницата е цялото съдържание, което потребителят вижда, когато стигне до вашата страница, което се нарича съдържание на видимата на екрана част от страницата, както е споменато по-горе.
Има различни функции, които вашият хедър може да има, които можете да добавите според вашите изисквания.
Това са:
- Лого на вашата компания или уебсайт
- Всеки тип призив за действие, който би отвел потребителите до вашата целева страница
- Заглавие или мото, което представя вас и вашата марка
- Лента с менюта за удобство на потребителя
- Опция за търсене за лесно навигиране в уебсайта ви.
Какво означава прозрачен хедър?
Нормалните заглавки имат подобен на лента правоъгълник в горната част на вашата уеб страница, който разделя съдържанието на заглавката ви и съдържанието на страницата в някои случаи едно от друго.
При случай, че използвате прозрачен хедър, той помага да обедините съдържанието на страницата си с хедъра, както и горната правоъгълна лента, която може да има логото на вашия уебсайт, призив за действие и меню.
Характеристики на Beaver Builder
Няколко функции идват с Строител на бобър. Нека обсъдим някои от важните характеристики.
1. Шаблони на страници
Page templated е вид тема, която можете да зададете за вашите уеб страници. С beaver builder можете да имате различен шаблон на страница за всяка отделна уеб страница или можете да имате общ.
Зависи от теб. Тези шаблони са креативни, уникални, удобни за потребителя и най-важното отзивчиви за мобилни устройства.
2. Поставяне на съдържание
Можете да преоразмерявате, местите и изрязвате снимки по желания от вас начин, като просто щракнете. Поставете своя призив за действие, привлекателни символи и заглавки от опростеното табло за управление на избраната от вас тема Beaver Builder.
Можете също така да разделите страницата си на сегменти, за да поставите повече съдържание на страницата си и да изглеждате малко намалени с цел да има запомнящо се въздействие върху клиентите.
3. Powerpack Beaver Builder
Това е добавка, която можете да интегрирате с beaver builder и да получите огромен брой интеграции, за да подобрите ефективността на уебсайта си и да разкрасите уеб страниците.
Трябва да напишете съдържанието си в интерфейса на WordPress? Не се притеснявайте за това, с Beaver Builder можете да композирате съдържанието си в типичния интерфейс на WordPress и да го импортирате заедно в темата на beaver builder, която решите да използвате за вашата страница.
Ако решите да не използвате повече beaver builder, можете да експортирате страниците, създадени от шаблона на beaver builder, към вашия обикновен интерфейс на WordPress страница, без да загубите и вашето съдържание.
Може също да харесате това:
Как да задам прозрачен хедър с Beaver Builder?
Има само един инструмент, необходим за задаване на прозрачен хедър на която и да е от уеб страниците на вашия уебсайт, The Beaver Themer. Нека обсъдим Beaver Themer подробно.
Бивър Темер
Beaver Themer ще ви помогне направи привлекателни и оптимизирани уеб страници само с едно кликване чрез лесното за използване табло.
Позволява ви да имате функцията, в която можете да създавате горни и долни колонтитули, Страница за грешка 404, а заедно с него и страниците, които сте архивирали. Той също така ви позволява да създадете горен и долен колонтитул за всяка уеб страница, което помага на потребителя да навигира лесно във вашия уебсайт.
Характеристики:
- Различни теми за избор
Можете да изберете темата за всяка страница на вашия уебсайт и всички те също могат да бъдат различни.
Използвайки тези теми, можете да създавате блогове и целеви страници, както и да променяте страниците с грешка 404, така че тези страници да могат да помогнат на вашите потребители да отидат на уебсайта на правилната страница.
- Части на темата
Тези части са много уникална характеристика и рядко се срещат във всеки друг инструмент за оформление на тема.
Помага ви да създавате частични оформления, например, горен или долен колонтитул може да бъде създаден с помощта на тези части на всяка от вашите страници, независимо дали страницата е направена с тема Beaver или не. Не е ли невероятно!
- Полеви връзки
Можете да интегрирате темата Beaver с която и да е от вашите съществуващи страници и съдържанието да бъде защитено, докато извършвате този процес.
С други инструменти за оформление на теми съществува опасност от загуба на съдържание, докато включвате инструмента във вашата нормално направена страница или страница, направена с друг инструмент за оформление на теми.
- Решетки за публикации
Можете да изберете тема, която поставя вашите блогове в мрежи и можете да редактирате всяка мрежа според вашите нужди. Това ще ви помогне да направите страницата си лесна за навигация и ще й придаде прекрасен външен вид.
- Общо съдържание
Искате малък фрагмент от динамично съдържание да бъде общ и показван на всички страници? Ако да, темата за бобър е вашето решение, с темата за бобър получавате напълно различно табло за управление, за да създадете съдържание, което да се показва на всяка страница от вашия уебсайт.
Можете да изберете дали искате съдържанието да бъде динамично, плъзгащо се или просто да остане статично. Само имайте предвид да не поставяте дълго съдържание толкова често, тъй като това може да доведе до дублиране на съдържание на всички ваши страници.
Можете да създадете следните форми на съдържание - текст, изображения, връзки и персонализирани полета, след като бъдат създадени, свържете ги към всички страници, на които искате това съдържание да се показва.
Стъпки, за да направите заглавката на вашата уеб страница прозрачна
Ето някои ключови стъпки, които трябва да следвате:
Етап 1: Изтеглете Beaver и започнете да правите страница за вашия сайт с помощта на Beaver Builder
Първото и основно нещо, което трябва да се направи, е производството на страницата Beaver Builder.
В WordPress след въвеждане на модула beaver producent, вместо да правите страница чрез WordPress, просто отворете страницата, добавете заглавие към страницата с помощта на WordPress и след това щракнете върху промяна с beaver developer и започнете работата си.
Стъпка 2: Добавяне на съдържание
След като създадете основно оформление на страницата, решете съдържанието, което искате да добавите в горната част на страницата, т.е. съдържанието на видимата на екрана част от страницата, което може да бъде заглавие, последвано от изречение, заглавие, подзаглавие или призив за действие, или само лого и изображение.
Сега създайте ред с помощта на beaver builder и добавете планираното съдържание към реда. Под реда добавете фоновото изображение, което искате, за да се появи прозрачната заглавка върху него.
Стъпка 3: Добавяне на клас
Трябва да отидете до бутона за гаечен ключ на горния ред за добавяне на клас. След това добавете CSS клас, като отидете в опцията Advanced. Не забравяйте да щракнете върху бутона Запазване.
Стъпка 4: Направете заглавката прозрачна
Така че сега планираме да преместим колоната за горен банер под заглавката. Преди всичко трябва да направим заглавката ясна.
Правим това сега с цел да можем да видим къде се затваря главата на колоната с горен банер, когато използваме CSS, за да я поставим под заглавката на сайта.
Добавете вашия CSS файл в style.css или директно го включете в Beaver builder.
Някои важни термини от кода, които трябва да знаете:
- Тяло. fl-page-header-primary:
Горният CSS фрагмент е този, който се използва от beaver builder за кодиране на заглавката в горната част на страницата на вашия уебсайт.
Добавяме тялото на страницата отпред, за да увеличим спецификата на страницата. Друга причина да се насочите към горния кодов фрагмент е да създадете дубликат на основния код, използван от beaver builder за заглавката, и след това да извършите модификацията.
Това предпазва заглавката ви от окончателно унищожаване, в случай че нещо се обърка с кода.
- Фон: прозрачен:
Този CSS фрагмент се използва за премахване на фона, който е зададен по подразбиране, когато започнете да използвате Beaver builder, ако страницата ви не е направена чрез Beaver builder, все още можете да направите заглавката прозрачна, като експортирате CSS файла в разширената опция, която ви е дадена на горния ред.
Но цветът на фона трябва да бъде премахнат във всеки от случаите чрез горния CSS фрагмент.
- Позиция: относителна и z-индекс:10:
За да осигурите подравняването на нашия прозрачен хедър, т.е. горния банер, със съществуващия фиксиран и с фоновия хедър, използвайте споменатия CSS фрагмент.
Стъпка 5: Подравняване на горния банерен ред
Трябва да се добави друг CSS код на същото място, където сте добавили горните CSS фрагменти.
Важни CSS термини, които ще срещнете в кода:
@медиен екран и (мин. ширина 660px): Използването на този код е просто подравняване на горния банер със съществуващия хедър. Споменатата px стойност, която в този случай е 660, е много важна. Стойността може да дойде заедно с кода по подразбиране или може да се наложи да я добавите ръчно.
Стойността по подразбиране или средната стойност на px, която ще трябва да зададете, може да бъде в диапазона 990-995px в зависимост от конфигурацията на вашата система.
.горен банер .fl-row-content-wrap: Този фрагмент от CSS ви помага да коригирате подложката според вашите изисквания.
margin-top:-100px: Този фрагмент ви помага да коригирате полето на горния колонтитул от четирите страни според вашите изисквания.
Стъпка 6:
Персонализирайте и разкрасете прозрачната заглавка, за да настроите вашето лого и меню по начин, който изглежда добре и се слива с прозрачността на заглавката.
Направете заглавката прозрачна в световен мащаб
с Beaver Builder, имате функцията да запазите създадения горен банер и да го използвате на други уеб страници на вашия уебсайт.
Чести проблеми, възникващи при правенето на заглавката прозрачна
- Заглавката може да се види само на настолни компютри, но не и на мобилни телефони и таблети.
Този проблем е лесно разрешим. Просто трябва да посетите Външен вид > Персонализиране > Общи > Фон и трябва да зададете цвета така, че да контрастира със заглавката ви, така че да се откроява и да се чете.
- Горната лента на заглавката не се вижда.
Проблемите тук са с CSS фрагмент на кода, който сте копирали и поставили или сте написали сами, което включва тялото. fl-страница-лента.
Ценообразуване на Beaver Builder
За да добавите прозрачен хедър, ви е необходима тема за бобър, която идва с платената версия на пакета за създаване на бобри.
Ще трябва да платите $149 за една година Beaver Builder услуга, която ще включва теми на Beaver, които ще ви помогнат лесно да добавите прозрачни заглавки към уебсайта си.
Плюсове и минуси на Прозрачен хедър на Beaver Builder
Професионалисти
- Ако искате визуално привлекателна страница, тогава темата Beaver е задължителна тема
- Можете да промените оформлението за всяко устройство поотделно, т.е. мобилни телефони, таблети и настолни компютри. Можете също така да го създадете заедно с различна целева страница или нормална страница и за трите устройства.
Против
- Единственото отрицателно нещо на темата Beaver е, че цената за платените планове е малко висока. Но гледайки функциите, които предоставя, определено си заслужава.
Отзиви на клиенти на Beaver Builder
Бързи връзки:
- Промоционални и купонни кодове на Beaver Builder
- Beaver Builder срещу Divi
- Beaver Builder срещу Elementor
- Beaver Builder срещу Visual Composer
ЧЗВ | Прозрачен хедър на Beaver Builder
Къде да получа CSS кода?
Можете да се свържете с отдела за поддръжка на клиенти на beaver builder и те бързо ще отговорят на вашето запитване и ще ви дадат решението, или можете да използвате платформи като git hub и да копирате кода от тези платформи директно, тъй като те са безплатни за използване.
Какво представлява прозрачният хедър в WP?
В WordPress прозрачният хедър има непрозрачност на цвета на фона, зададена на 0, което го прави прозрачен. Този ефект може да предложи на вашия уебсайт съвременен и минималистичен вид, като същевременно позволява съдържанието да се вижда през заглавката.
Как мога да персонализирам дизайна на моя прозрачен хедър?
Можете да промените избора на стил във вашия инструмент за създаване на страници, за да персонализирате външния вид на вашата полупрозрачна заглавка. В настройките на заглавния модул на Beaver Builder, например, можете да промените шрифта, размера на шрифта, цвета на шрифта и подравняването на текста. Можете също да добавите допълнителни компоненти или модули на заглавка, като лого или навигационно меню, и да промените техните стилистични параметри. Можете също така да използвате персонализиран CSS, за да персонализирате допълнително външния вид на вашата полупрозрачна заглавка.
Как да започнете с Beaver Builder?
Разделът със съдържанието на WordPress е различен от горния, долния колонтитул и страничната лента. Плъгинът Beaver Builder позволява създаването на оформления според областта на съдържанието. Освен това можете да използвате плъгина Beaver Themer за изграждане на оформления на места извън областта на съдържанието.
Как да активирам прозрачен хедър?
Придвижете се до Appearance > Customize > Header, за да активирате опцията Transparent Header. Опцията „Показване на прозрачен колонтитул само на началната страница“ ще стане достъпна, след като това бъде направено. Ако го изключите, заглавката ще стане полупрозрачна на всяка страница.
Как да направя заглавка прозрачна в Beaver Builder?
За да направите заглавка прозрачна в Beaver Builder, можете да следвате следните стъпки: Отворете редактора на Beaver Builder и щракнете върху модула за заглавка, който искате да редактирате. В настройките на модула отидете до раздела Стил. Под секцията Фон щракнете върху инструмента за избор на цвят до опцията Цвят на фона. В инструмента за избор на цвят плъзнете лентата за непрозрачност наляво, докато непрозрачността бъде зададена на 0. Това ще направи заглавката прозрачна. Запазете промените и публикувайте страницата, за да видите прозрачната заглавка.
Как да променя заглавката в Beaver Builder?
За да промените заглавката в Beaver Builder, можете да следвате следните стъпки: Отворете редактора на Beaver Builder и отидете до страницата, където искате да промените заглавката. Щракнете върху заглавния модул, който искате да редактирате. В настройките на модула можете да правите промени в оформлението, стила и съдържанието на заглавката. За да добавите нови елементи или модули към заглавката, можете да използвате интерфейса за плъзгане и пускане в Beaver Builder. След като направите желаните промени, запазете и публикувайте страницата, за да видите актуализираната заглавка.
Заключение: Създайте потребителски хедър с Beaver Builder 2024
Прозрачни заглавки са много важна характеристика на уебсайт, ако искате да бъдат привлекателни, стилни и модерни.
Той дори помага на вашия призив за действие в горния банер или съдържанието на видимата на екрана част от страницата да се открои. С beaver builder е лесно да създадете прозрачен хедър.
Горните стъпки може да са объркващи или да изглеждат трудни, но единственото нещо, което трябва да направите, е да копирате и поставите кода в интервал и да видите промените и да го направите глобален, ако желаете.
