Делаем универсальный первый (главный) экран сайта на webflow. Лучший вариант hero section. Урок №6
#webflow #вебфлоу 1-й экран сайта — самый важный блок, поскольку именно он решает, будет скролить человек дальше страницу или пойдет в соседнюю вкладку к конкурентам. Как сделать самый популярный и практичный вариант главного экрана? Именно на этот вопрос, я дам ответ в сегодняшнем видео! Мы распространенный способ создания первой секции на webflow, при этом я расскажу все нюансы и покажу варианты наглядно. Именно с первого экрана удобнее всего начинать сайт если вы новичок или еще не очень опытный пользователь. На основе данного урока вы сможете сделать множество сайтов, особенно хорошо данный вариант подойдет для реализации лендингов, промо и корпоративных сайтов, да и для интернет магазина тоже вполне может подойти. Так что этим первым экраном мы покроем большинство задач, которые будут вас ждать на пути фрилансера и веб-дизайнера, хотя чего уж тут прибеднятся, мы же с вами полноценные веб разработчики, не просто картинки делаем, а готовые сайты))) ••••••••••••••••••••••••••••••• ✅ 📌 СЕКРЕТНЫЕ МАТЕРИАЛЫ ➡️ https://t.me/webflow_free
(да, это самая полезная ссылка 😉 там есть ВСЕ, что вам нужно, если хотите зарабатывать хорошие деньги и да там есть БЕСПЛАТНОЕ обучение 😎) ••••••••••••••••••••••••••••••• Моя почта — artstrangers@gmail.com Телеграм https://t.me/artstranger
••••••••••••••••••••••••••••••• Таймкоды: 00:00 Вступление и подготовка body 01:59 Добавляем и настраиваем hero section (секцию для первого экрана) 03:37 Добавляем контейнер (ограничитель контента по ширине) 04:50 Делим контейнер на две части (левую и правую) с помощью грида (Grid) 05:50 Добавляем див блоки внутрь ячеек грида, для размещения контента внутри них 06:19 Загружаем главную картинку 08:37 Добавляем "дизайна" для картинки (много разных популярных вариантов) 21:30 Делаем градиент для первого экрана (рассматриваем разные варианты) 29:24 Меняем главную иллюстрацию на альтернативную 30:53 Как в фотошоп вырезать картинку и сделать ее на прозрачном фоне 42:55 Загружаем картинку на прозрачном фоне (png) и пробуем разные варианты с ней 49:03 Темная версия главного экрана 51:17 Еще светлые варианты с png-шкой 59:32 Добавляем контент слева (заголовок H1) и стилизуем его 01:03:04 А теперь дополнительный параграф текста пойдет в ход)) 01:04:04 И пришло время кнопки 01:10:48 Центрируем контент в левой части hero section 01:15:36 Где искать больше информации? И как научится максимально быстро? 01:16:35 Подводим итоги проделанной работы
