Искали ли сте някога да превъртите дълго изображение от портфолио на вашия уебсайт WordPress с Elementor ?
Създаването на онлайн портфолио е от съществено значение за представянето на вашата работа по елегантен и функционален начин. с Elementor, лесно е да създавате впечатляващи оформления, но превъртането през дълго изображение във вашето портфолио може да създаде някои предизвикателства.
Независимо дали искате да покажете произведение на изкуството, графичен дизайн или друг визуален проект, знанието как да включите плавно превъртане на дълго изображение може да подобри потребителското изживяване и да направи вашето портфолио още по-ангажиращо.
В тази статия ще разгледаме различните методи за превъртане на дълго изображение Elementor, като ви води през стъпките, необходими за постигане на професионален резултат.
Съдържание
Как да превъртите дълго изображение на портфолио в Elementor
Е, в тази статия ще ви кажем как да го направите, докато заемате малко място. Накратко във видеото по-долу открийте тази концепция.
Моля, обърнете внимание, че за да следвате този урок, ще трябва да заснемете цяла уеб страница. За да имате дълго изображение, можете да използвате GoFullPage разширение за хром и за избор на цветове върху обекти на страницата на инсталатора Разширение на ColorZilla.
Забележка: Разделът Персонализиран CSS е наличен само в Pro версията на Elementor. Надстройте вашата версия на Elementor до Pro версията или за да разберете повече, открийте разликите между Elementor Free и Elementor Pro.
- Създайте нова страница, след което я модифицирайте с Elementor.
- Изберете оформление с 4 колони.
- Нагласи Височина от Минимална височина и го оставете включено 400px
- Щракнете върху бутона плюс от първата колона
- Изберете Уиджет за изображения и го пуснете в тази колона
Прочетете и нашето ръководство за Как да оптимизираме оформлението на уебсайта си с Elementor
- Вмъкване на изображение които сте публикували преди това онлайн. Последният ще се появи изцяло в областта за редактиране на Elementor
- Sur Резолюция на изображението изберете цяла
Първата фаза на този урок е завършена. За да продължите с тази втора фаза, трябва да имате професионалната версия на Elementor, защото тук ще вмъкнем персонализиран CSS.
Ще използваме 2 CSS екстракта:
Първият CSS ни позволява да скрием препълването
selector {
height: 400px;
overflow-y: scroll !important;
overflow-x: hidden !important;
}Вторият CSS ви позволява да персонализирате лентата за превъртане
selector::-webkit-scrollbar{
width: 4px;
background: #777777;
}
selector::-webkit-scrollbar-thumb{
background: yellow;
}- Кликнете върху първия контейнер, за да го редактирате
- Кликнете върху раздела напреднал
- Вмъкнете първия CSS фрагмент в полето Персонализирана CSS
Ще обясним всеки ред от този CSS фрагмент
- селектор {: Позволява ни да изберем контейнера на нашето изображение
- Височина: 400px; : Определя височината на контейнера
- overflow-y: превъртане!важно; : Показва вертикалната лента за превъртане
- overflow-x: скрит! важно; : Скрива хоризонталната лента за превъртане
Но ще видите, че лентата за превъртане, която се появява, не е достатъчно удобна за потребителя, така че ще използваме втория CSS, за да го персонализираме.
Вижте и нашия урок за Как да създадете онлайн курс с Lutor LMS и Elementor
- Копирайте втория CSS фрагмент и го поставете под първия фрагмент в полето Митнически CSS
наш страничната лента изглежда по-красив и се съчетава добре с дизайна на страницата.
Ще обясним този код.
- /*Персонализирайте външния вид на лентата за превъртане*/
- селектор :: - webkit-scrollbar : позволява ви да изберете лентата за превъртане, показана по подразбиране.
- ширина: 4px; : позволява да се даде ширина на вашата странична лента, можете да промените тази стойност според вашето удобство
- фон: # 777777; : позволява ви да придадете цвят на фона на вашата странична лента. кодът #777777 съответства на сивия цвят
- селектор :: - webkit-scrollbar-thumb : избира областта за превъртане
- фон: жълт; : Показва тази област за превъртане в жълто; цвят, който можете да промените, за да съответства на цвета на акцента на страницата ви.
Прочетете още: Как да покажа датата на последната актуализация в Elementor
- Дублирайте този контейнер 3 пъти
- Изтрийте останалите 3 празни контейнера
- Редактирайте изображенията в другите 3 колони. и премахнете
Можете да промените цвета на лентата за навигация. За да направите това, просто сменете цвета жълт във втория CSS в цвета, който искате - зелен, син, червен, # 878888 и т.н....
- Визуализирайте работата си
- Запазете и го публикувайте
Често задавани
Кой е най-добрият метод за превъртане на дълго изображение в Elementor?
Най-добрият метод зависи от вашите специфични нужди. Използването на джаджи на Elementor е просто и ясно.
Възможно ли е изображение да се превърта вертикално?
Да, можете да превъртате изображение вертикално, като коригирате настройките за превъртане в опциите на уиджета или като използвате подходящия CSS.
Как да оптимизирам дълго изображение за уеб?
Оптимизирайте изображението, като го преоразмерите, използвате олекотен формат и го компресирате, за да подобрите скоростта на зареждане на страницата.
Заключение
Превъртането през дълго изображение в Elementor може да обогати визуалното изживяване на вашето портфолио и да ви плени посетители. Експериментирайте с тази техника, за да видите дали работи за вас.
Намирате ли тази статия за полезна? Споделете го с вашите колеги и приятели за да им помогнем да подобрят своето онлайн портфолио. Не ни забравяйте оставете коментар ако имате някакви въпроси или предложения!
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...