Як налаштувати зовнішній вигляд тексту

Правильне оформлення тексту на сайті допомагає зробити контент читабельним, стильним і привабливим для користувачів. У конструкторах сайтів можна легко змінювати шрифти, кольори, анімацію та додавати градієнти.

У статті розглянемо можливості налаштування зовнішнього вигляду тексту.

Загальні налаштування тексту на сайті

Ви можете вибрати пари шрифтів та налаштувати їх окремо для абзаців, заголовків, кнопок — це буде застосовуватись до всіх текстових елементів на сайті та підтримувати цілісність дизайну.

Перейдіть в конструктор сайту й натисніть на іконку олівця в правому верхньому куті. Навпроти секції Стиль тексту (Text style) натисніть Налаштувати (Customize).

Читайте також: Рекомендації щодо створення дизайну сайту та Як налаштувати стиль сторінки: Стилі тексту.

Також можна додавати кастомні шрифти.

Налаштування текстового елемента

Додайте віджет Текст та введіть потрібний текст. Зверху ви побачите панель інструментів, де можна задати візуальні налаштування для цього елементу.

Якщо ви копіюєте текст з іншого джерела, він може містити попереднє форматування. Рекомендуємо використовувати Вставка тексту (Paste text) на панелі інструментів або комбінацію клавіш Ctrl + Shift + V, а потім налаштовувати візуальні ефекти.

Колір тексту та фону

Для створення акцентів у контенті сайту ви можете вибрати окремий колір для тексту, а також фон для нього.

Кольорові акценти варто використовувати для важливих елементів, таких як заголовки та кнопки, але не перевантажувати сторінку. Також рекомендовано кольоровий текст додавати на нейтральному фоні, і навпаки — для яскравого фону використовувати нейтральні кольори тексту.

Щоб вибрати колір тексту, виділіть курсором потрібний текст і в панелі інструментів натисніть на стрілку вниз біля іконки з літерою. У випадному списку перший рядок містить кольори з налаштувань стилю сайту. Нижче для вибору доступні стандартні кольори.

Щоб додати свій колір за системою RGB або HEX, натисніть на іконку палітри внизу випадного списку та введіть значення у вікні, що відкриється.

Для вибору кольору фона виділіть текст та натисніть на іконку олівця у панелі інструментів. Виберіть стандартний колір або задайте свій за допомогою палітри за аналогією.

Градієнт

Для тексту можна налаштувати градієнт — плавний перехід з одного кольору в інший для створення динаміки в дизайні сайту.

Виділіть текст та натисніть на іконку градієнту в панелі інструментів та виберіть два кольори між якими буде перехід. Для цього на лінійці натисніть спочатку на лівий бігунок та виберіть колір з палітри або введіть HEX-номер. Внизу палітри можна відрегулювати прозорість. Натисніть на правий бігунок на лінійці й зробіть те саме для іншого кольору.

Налаштуйте кут нахилу градієнта (deg°), де 0° — зверху вниз, 90° — зліва направо.

Анімація тексту

Ви можете налаштувати додаткову анімацію появи тексту під час прокручування сторінки, щоб додати динаміку та наголосити на певній інформації.

Натисніть Налаштування (settings) на панелі інструментів та перейдіть у праву панель налаштування елемента. Активуйте опцію Анімація (Animation) та виберіть умови.

Щоб внесені зміни показувались на сайті, натисніть Опублікувати (Publish).

Оновлено: 31.01.2025