Привет! В этом видео я расскажу, как правильно настроить рабочее пространство для верстки сайта с помощью Oxygen Builder. Мы подробно разберем основные настройки макета, шрифтов и цветовой схемы, а также научимся работать с макетами из Figma.
Что вас ждет в видео?
🔹 Подготовка рабочего пространства
Установка и настройка Oxygen Builder
Выбор и использование макета из Figma
Где скачать бесплатные шаблоны для Figma
🔹 Настройка макета и контейнера
Определение ширины контейнера
Как правильно выбрать ширину для адаптивной верстки
Настройка внутренних и внешних отступов
🔹 Работа со шрифтами в Oxygen Builder
Как определить шрифты в Figma
Какие шрифты поддерживает Oxygen Builder
Подключение кастомных шрифтов (Gilroy и другие)
Использование плагина Use Any Font
Как подключить шрифт вручную через код (Snippet)
🔹 Практическая часть: настройка в Oxygen Builder
Работа с редактором Oxygen Builder
Как настроить глобальные стили
Установка ширины контейнера и секций
Подключение и настройка шрифтов
Установка глобальных цветов
Глобальные стили для заголовков H1-H6
Настройка шрифта и отступов для текста по умолчанию
Настройка цвета ссылок
Настройка Breakpoints
Что будет в следующих видеоуроках, планы на будущее
Если это видео было полезным, не забудьте поставить лайк 👍, подписаться 🔔 и написать комментарий!
💬 Какие еще темы по Oxygen Builder вам интересны? Напишите в комментариях!
❗️ Скачать материалы из этого видео – https://t.me/vksaas/114
📌 Полезные ссылки:
🔗 Бесплатные шаблоны для Figma – https://t.me/makety_saitov_figma ]
🔗 Плагин Use Any Font – https://en-gb.wordpress.org/plugins/use-any-font/
🔗 Сниппет – https://www.altmann.de/en/blog-en/code-snippet-custom-fonts/
🔗 Инструкция по подключению шрифтов – https://oxygenbuilder.com/documentation/other/using-custom-fonts/
👉 Мои контакты:
Telegram Канал – https://t.me/vksaas
Мой VK – https://vk.com/pavel_ogorodnikov
🔗 Моя страница – https://vksaas.ru/team/pavel-ogorodnikov/
Тайм код
00:00 В этом видео мы настроим Oxygen Builder
00:09 Моё имя Павел Огородников
00:24 Что включает в себя настройка Oxygen Builder
00:40 Где скачать шаблоны Figma
01:15 Загрузка редактора Figma на своё устройство
01:45 Открываем макет сайта в Figma
02:09 Как скачать плагин Oxygen Builder
02:25 Начинаем настройку рабочего пространства Oxygen Builder
02:43 Определяем ширину контейнера макета в Figma
04:39 Указываем ширину контейнера в редакторе OB
05:28 Задаем внутренние отступы контейнера
07:20 Настройка шрифтов
09:33 Два способа загрузки кастомных шрифтов
10:40 Загрузка кастомного шрифта плагином Use Any Font
15:40 Загрузка кастомного шрифта сниппетом
19:02 Лицензионное соглашение на использование шрифтов
19:39 Подключение глобального шрифта
20:27 Подключение дополнительных глобальных шрифтов
22:02 Определение глобальных цветов в Figma
24:15 Добавление глобальных цветов в Oxygen Builder
26:59 Глобальные стили для заголовков H1-H6
31:02 Глобальные стили для текста по умолчанию Body Text
32:57 Настройка цвета ссылок
39:29 Breakpoints
41:21 Что будет в следующих видеоуроках
#OxygenBuilder #ВебРазработка #WordPress #СозданиеСайтов #FigmaToWordPres #VkSaasOxygenBuilder #VkSaasMetaBox