Как да зададете фон на изображение в WordPress

Как да зададете фон на изображение в WordPress
Фоново изображение на WordPress за начална страница с други елементи.

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

Изпробвайте мощните блокове, настройки и функции в плъгина Citadela Pro. Можете да разгледате перфектния инструмент, който ви позволява да добавяте фонови изображения към страници, публикации и персонализирани типове публикации в WordPress.

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

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

Как да добавите фоново изображение в WordPress с помощта на блок Gutenberg

Започнете сега

Еднократно плащане. 90-дневна гаранция за връщане на парите.

Фоново изображение на WordPress чрез блок Cluster

Представяме ви удобен блок, който направихме за блока на WordPress Gutenberg за фоново изображение - Cluster block. Той е част от нашата собствена група блокове. Плъгинът Citadela Pro има много функции, които ви помагат да създавате красиви уебсайтове. Всички персонализирани блокове на AitThemes са налични в Citadela Pro плъгин.

Моля, прочетете Документация за клъстерния блок за подробни настройки.

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

Клъстерът няма да се разтегне до пълната си ширина, ако:

  • Имате активна странична лента
  • Ако използвате колони, които ще ограничат пространството за Клъстер

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

В тази статия ще ви покажем:

Как да добавите блок Cluster

Клъстерният блок е премиум блок и е достъпен само ако инсталирате и активирате Citadela Блокове плъгин. След като инсталирате плъгина, блокът Cluster ще бъде добавен автоматично в редактора на блокове на WordPress и ще можете веднага да започнете работа с него.

Клъстерният блок може да бъде добавен както в публикации, така и в страници. Просто кликнете върху знака "+" в горната лента или навсякъде на работния плот на редактора. След това просто потърсете блок "Клъстер".

Добавяне на блок с клъстери в редактора на WordPress чрез кликване върху "+"
Добавяне на блок с клъстери чрез кликване върху "+"

Вторият вариант за добавяне на клъстерен блок е чрез въвеждане на "/" и името на блока след това. След това клъстерният блок е готов за използване.

Добавяне на блок Cluster с наклонена черта "/"
Добавяне на блок за клъстери с използване на наклонена черта "/"

Групиране на блокове с помощта на Cluster

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

Процес на избор на вложени блокове
Процес на избор и вмъкване на вложени блокове

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

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

Блок с изображения, вложен в блок с клъстери
Уебсайт за портфолио, създаден с помощта на блок Cluster

Клъстерният блок може да се използва и за създаване на атрактивно представяне на продукти. Можете да зададете изображение на продукта като фон на секцията и да изберете цвета му. Сервизен блок могат да бъдат вложени и в блок Cluster.

Блок за услуги, вложен в блок за клъстери
Използвайте блок "Услуги" в блок "Клъстер", за да представите продукта си (и неговите характеристики) по по-атрактивен начин

Няколко блока в един

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

Типичен пример за множество колони в комбинация с блок Cluster е уебсайт с една страница.

Блок Колони, вложен в блок Клъстер
Как може да се използва клъстерният блок в уебсайт от една страница

Основни настройки в лентата с инструменти: Опции за подравняване на съдържанието

По подразбиране ширината на клъстерния блок е настроена на размера на съдържанието. Можете да промените това поведение в лентата с инструменти. Налични са следните опции:

  • Размер на съдържанието - опция по подразбиране, блокът Cluster има същата ширина като съдържанието.
  • Широк размер - съдържанието в клъстера е по-широко от ширината на съдържанието.
  • Размер по цялата ширина - в този случай ширината на клъстера е от страната до страната на прозореца на браузъра.

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

Изтегляне на CitadelaWP WordPress тема и плъгини

Еднократно плащане. 90-дневна гаранция за връщане на парите.

Настройки на цвета на заглавието и разделителя

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

От версия 5.3 на WP можете да променяте цвета на заглавието си чрез блока Heading. Това е много полезна функция - особено ако имате тъмно оформление и цветова схема, е по-добре да промените цвета на текста по подразбиране (който е черен) с по-светъл цвят.

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

Нов цвят за разделителя, използван във вашия уебсайт

Когато добавяте в WP фоново изображение или друг вид съдържание, понякога може да се наложи да го отделите от останалата част на уебсайта. За тази цел можете да използвате специален блок, наречен Separator. Чрез поставянето на разделител можете да:

  • Отделяне на конкретни блокове
  • Разделяне на целия текст на по-малки части
  • Подчертайте важните части
  • Осигуряване на по-добра четливост на съдържанието
  • Опростяване на навигацията във вашия уебсайт

Освен това вече можете да променяте цвета на разделителната линия с актуализираната версия на WordPress. Цветният разделител е идеален за допълване на цветовата схема на вашия уебсайт.

Как да добавите фоново изображение под групирани блокове

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

  1. Щракнете върху Background image (Фоново изображение) и активирайте функцията "Show background image" (Показване на фоново изображение).
  2. Кликнете върху "Изберете изображение". Ще се отвори медийна библиотека. Можете да изберете съществуващо изображение или да качите ново изображение в библиотеката си.
  3. Фоновото изображение може да бъде зададено и като фиксирано. Това означава, че ако превъртате страницата, фонът няма да се движи заедно със съдържанието, а позицията му ще бъде фиксирана.
  4. Можете също така да изберете коя част от фоновото изображение да бъде показана с помощта на "Focal Point Picker". Възможно е също така да изберете част от изображението, като използвате проценти.
Как да добавите фоново изображение под групирани блокове
Ръководство стъпка по стъпка как да добавите фоново изображение

Започнете сега

Еднократно плащане. 90-дневна гаранция за връщане на парите.

Налагане на фона

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

Налагане на фоновото изображение на WordPress
Задайте фоново покритие и променете непрозрачността му, за да създадете привличащ вниманието дизайн

Нов блок за групи е наличен в ядрото

Каква е разликата между блок Група и блок Клъстер на AitThemes?

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

Редактирането на фонови изображения е лесна задача в нашия блок Cluster.

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

4 мисъл за „How to set image background in WordPress

  1. Благодаря на айт тема за помощ на всички уеб майстори
    Вашият уеб е gooood

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

    1. Здравейте, Джон,

      Благодарим ви, че се интересувате от продуктите на Citadela. Да, за да настроите фона, можете да избирате от различни опции. Подробна информация можете да намерите на следния адрес: https://www.ait-themes.club/citadela-doc/cluster-block/

      С уважение!
      Златко
      Екип на AIT

Коментарите са затворени.