У цій статті ми покажемо, як міняти зовнішній вигляд сайту в конструкторі.
- Змінити фон
- Змінити висоту шапки й підвалу
- Оформити написи
- Додати favicon
- Змінити шаблон сайту
- Розташувати елементи у декілька шарів
- Додати таблиці
- Оформити готовими блоками
Змінити фон
1. Відкрийте розділ «Фон»:
![Розділ для зміни фону](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_1_1.png)
2. Оберіть колір фону або завантажте картинку:
![Властивості розділу «Фон»](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_1_2.png)
3. Якщо потрібно, увімкніть для фонової картинки режими:
- Повторити — невеликі зображення повторюються, заповнюючи весь фон сайту.
- Не прокручувати фон — фонове зображення закріпиться і не буде рухатися навіть при прокручуванні сайту вниз.
- Розмір:
- Авто — фонове зображення додається в оригінальному розмірі, але можна налаштувати його положення на сторінці.
- Містять — фонове зображення розтягується на весь екран.
- Обкладинка — зображення заповнює екран по ширині чи висоті (залежить від орієнтації зображення).
Якщо переключити режим фону на 2 вертикальні смуги з боків, у сайту буде єдиний фон без поділів на шапку і підвал:
![Фон без поділів на шапку і підвал](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_1_3.png)
Зробити окремий фон для сторінки
Для цього додайте елементи «Картинка» або «Фігура»:
![Окремий фон для сторінки](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_1_4.png)
Для елемента «Картинка» можна налаштувати тільки зображення і його розмір.
Для елемента «Фігура» можна налаштувати зображення, розмір, колір, прозорість, заокругленість і підігнати зображення під розміри Фігури.
Змінити висоту шапки і підвалу
Відкрийте розділ «Фон»:
![Зміна висоти шапки і підвалу](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_2_1.png)
Оформити написи
Відкрийте розділ «Стилі»:
![Розділ «Стилі»](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_3_1.png)
Налаштуйте до 12 різних стилів для звичайного тексту і заголовків:
![Налаштування стилів для звичайного тексту і заголовків](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_3_2.png)
Застосуйте ваші стилі до написів за допомогою елемента «Текст» та опції «Редагувати текст»:
![Редагування тексту](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_3_3.png)
![Стилі тексту](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_3_4.png)
Поставити окремий колір напису для кожної сторінки
Додайте текст:
![Розміщення тексту](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_3_5.png)
Відкрийте властивості елемента й оберіть:
![Властивості об'єкта](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_3_6.png)
Відкрийте іншу сторінку і додайте той самий текст на те ж місце. Оберіть потрібний колір:
![Вибір кольору тексту](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_3_7.png)
Додати favicon
- Favicon — маленька картинка-логотип поруч з назвою сторінки в браузері:
![Фавікон у браузері](https://hostiq.ua/wiki/wp-content/uploads/2018/07/design_4_1.png)
Щоб додати фавікон, відкрийте розділ «Favicon» і завантажте картинку:
![Розділ «Favicon»](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_4_2.png)
![Встановлення Favicon](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_4_3.png)
Змінити шаблон сайту
Натисніть кнопку «Новий/Скидання» у верхньому меню:
![Зміна шаблону сайту](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_5_1.png)
Оберіть потрібну дію:
- Змінити шаблон — відкрити меню вибору шаблонів.
- Скинути — завантажити початковий вигляд шаблону без ваших правок.
- Імпорт — завантажити в конструктор дизайн сайту. Можна імпортувати тільки сайт, на який вже можна зайти у браузері.
![Зміна шаблону](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_5_2.png)
Розташувати елементи декількома шарами
Розмістіть на сайті елементи, які хочете скомбінувати:
![Розташування елементів декількома шарами](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_6_1.png)
2. У властивостях елементу виберіть пункт «Порядок»:
![Пункт «Порядок» у властивостях](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_6_2.png)
3. Призначте «Передній план» або «Задній план» розташування. Перетягніть елементи один на інший:
![Призначення Переднього або Заднього плану розташування](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_6_4.png)
Для переднього плану використовуйте .png-картинки з прозорим фоном.
Збільшити або зменшити елемент
Щоб змінити розмір елемента, оберіть його. Наведіть курсор на позначку в правому нижньому кутку. Затисніть ліву кнопку миші та рухайте курсор по діагоналі:
![Збільшення або зменшення елемента](https://hostiq.ua/wiki/wp-content/uploads/2018/07/design_6_4.png)
Додати таблиці
Відкрийте розділ «Додатково»:
![Додавання таблиці](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_7_1.png)
Додайте на сайт елемент «Таблиця»
![Встановлення кількості стовпців і рядків таблиці](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_7_2.png)
Налаштуйте кількість стовпців і рядків, колір осередків і рамки таблиці:
![Налаштування таблиці](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_7_3.png)
Оформити готовими блоками
Щоб додати на сторінку одразу кілька елементів, перетягніть елемент «Блоки» на область сайту:
![Оформлення готовими блоками](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_8_1.png)
Оберіть блок з варіантів:
![Готові блоки](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_8_2.png)
У результаті елементи блоку рівномірно розподіляться по сайту:
![Елементи блоку](https://hostiq.ua/wiki/wp-content/uploads/2021/07/design_8_3.png)
Відкрийте властивості елементів і замініть стандартні картинки і тексти на свої.
Також вам стануть у пригоді статті:
Як зробити сайту мобільну версію
Як налаштувати сайт для SEO через панель конструктора