Делаем универсальный первый (главный) экран сайта на webflow. Лучший вариант hero section. Урок №6

[@user-rb2in4jc5y]

Подробно и познавательно, подзабыл как делать чтобы на всех устройствах отображалось сразу нормально, пошел искать в прошлые уроки :)

[@freelance-pro]

рад что познавательно))

[@user-lg1bh3cm6p]

Спасибо за возможность учится.

[@freelance-pro]

Пожалуйста ☺️

[@freelance-pro]

- Материалы с данного видео freelance-blog.webflow.io/course - Полезные штуки для webflow freelance-blog.com/webflow/ - Индивидуальное обучение freelance-blog.com/study/ Таймкоды: 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 Подводим итоги проделанной работы

[@AndreiKozlov-ph8wo]

Закрепите коммент, пожалуйста.

[@sergeyshmelev8350]

СПАСИБО БОЛЬШОЕ !! Всё понятно , всё "разжовано " до мелочей !! Супер !!!

[@freelance-pro]

Пожалуйста ☺️ рад что супер

[@ty_ebanulsa]

Крутой видос, спасибо! Все четко и по делу.

[@freelance-pro]

Пожалуйста 😉 рад что понравилось 😊

[@Sergey_878_]

Огромная благодарность вам Дмитрий!🙏 Отличный урок!👍

[@freelance-pro]

Пожалуйста 😊 рад что нравится

[@pein2448]

Очень крутой ролик!Снято отлично, про контент даже говорить ничего не надо, он очень полезный.Огромное спасибо что делаете такие хорошие и полезные ролики!

[@freelance-pro]

И вам спасибо огромное за поддержку! Рад что нравится, буду и дальше вас радовать!

[@user-px5fe7lb9u]

Спасибо большое за урок!

[@freelance-pro]

Пожалуйста ☺️

[@elisabetromerosaavedra757]

Як завжди якicть 100%! Дякую!

[@freelance-pro]

Будь-ласка 😉

[@utilisateur_magnifique]

НЕ розумію чому так мало переглядів? відео топ

[@freelance-pro]

Мало хто хоче заробляти гроші складним шляхом 😁 от і перегляди будуть високі завжди на розважальних відео

[@antonfedotov6125]

Спасибо большое, очень круто! Хотелось бы ещё отдельный урок по типовым ситуациям когда нужно использовать margin, а когда - padding.

[@freelance-pro]

Так в прошлых роликах я эту тему раскрыл (прямо в этом курсе)

[@victoriasssuslova3642]

Большое спасибо за урок!) Спасибо что делитесь своим опытом, для новичка в этой сфере это очень полезная инфо!

[@freelance-pro]

Пожалуйста ☺️ рад что инфо полезная

[@miroed]

@@freelance-pro Второй урок мучаюсь, не могу понять, где вы берёте ПИПЕТОЧКУ? Это расширение нужно ставить?

[@freelance-pro]

Да

[@gooakk1784]

Комментарий благодарности для поднятия настроения и мотивации автора ❤️

[@freelance-pro]

Спасибо 😊

[@serpmyf]

Спасибо большое за видео!

[@freelance-pro]

Пожалуйста ☺️

[@user-ce9mh7ij6o]

Спасибо большое за ролики и что объясняете очень доступно. :) Уже хочеться быстрее изучить все видео и приступить к использованию данного инструмента в разработке. :)

[@freelance-pro]

Пожалуйста! 😊 ну что как у вас успехи? Изучили? Работаете?

[@НикитаТигров-к8и]

Благодарю, очень информативный урок!

[@freelance-pro]

Пожалуйста ☺️ рад что информативно

[@anddrew5841]

как всегда супер подробно! спасибо!

[@freelance-pro]

Пожалуйста

[@kalyabka_]

Спасибо! 🤍 мне очень помогают твои уроки

[@freelance-pro]

Пожалуйста! 😊 рад слышать

[@pungushe]

Класс спасибо

[@freelance-pro]

Пожалуйста 😉

[@ВикторКузнецов-о1ь]

Дмитрий, этому уроку больше подходит название "Варианты стилевого оформления Главного экрана сайта."..

[@freelance-pro]

Думаете такое название многие ищут в поиске? Я же пытаюсь подстраивать названия видео под поисковые запросы

[@user-wn1jm4hp5k]

Отличный урок!

[@freelance-pro]

Спасибо ☺️

[@slimelanguage9879]

Спасибо за полезный контент! Можете пожалуйста рассказать про cms в webflow? А то я не совсем понимаю когда есть смысл этим пользоваться)

[@freelance-pro]

Если коротко то никогда, используйте вебфлоу как инструмент для дизайна где ещё и вёрстка в подарок, а дальше если нужна cms то узкоспециализированная и сделает это программист а не вы

[@IvannaIv-cy6sj]

thank you : )

[@freelance-pro]

🥳

[@designckinet]

Nice lesson like before!

[@freelance-pro]

👍👍👍

[@vovastetsiuk9107]

Как всегда хорошо, но не понял почему 5 и 6 урок об одном и том же))

[@freelance-pro]

Что бы научить людей мыслить, а не слепо повторять за мной 😉

[@ElenaMatesha]

Заголовок-ударение на второе о, вы так много раз произнесли слово заголовок, я подсчитала, -это не главное. Вы молодец, спасибо за уроки! Совершенству нет предела🙂

[@freelance-pro]

У меня в стране ударение по другому 😜

[@diplomatpro]

​@@freelance-proЯ тоже заметила, но скромно промолчала. Спасибо, что могу вообще слушать и понимать ваши уроки.

[@freelance-pro]

Пожалуйста 😊 я вот тоже считаю, что главное содержимое речи, а не произношение))

[@UhaMap]

Отлично!

[@freelance-pro]

Это хорошо))

[@hot-short82]

как в Webflow сделать строку поиска, чтобы левая сторона была в виде дропбокса, а правая в виде обычной строки поиска?

[@freelance-pro]

Добавить див блок, внутрь него дропбокс и обычный инпут (это все внутри формы) и для див блока задаём флексбокс и горизонтальное позиционирование - готово!

[@hot-short82]

@@freelance-pro спасибо

[@freelance-pro]

Пожалуйста 😉 обращайтесь

[@tripgames4520]

Здравствуйте, очень нужна помощь, что делать если нa 7:54 не работает центрирование, я делал все точь-в-точь как у вас, однако этот Grid Child вообще не работает на моё изображение(разрешение исходной фотографии 920х716) P.s разобрался сам, оказывается всё дело в заданной ширине, в моем случае надо было вместе min Height поставить min Width) P.s.s вновь благодарю вас за такое прекрасное обучение, когда я начинал, я ничего не понимал, сейчас методом рассуждений могу распознать свою ошибку, поскольку в голове уже началось формирование правил и баз по webflow, так сказать понимание технической операции, без вас я бы ни за что так быстро не смог освоить webflow!

[@freelance-pro]

Пожалуйста ☺️ рад что все получилось

[@-sanoletto-7395]

Привет, а як ти міряєш лінійкою? є якісь гарячі клавіші?

[@freelance-pro]

На мак команд шифт n на Винде джокси

[@MrReactor11]

Странно, почему-то не работает анимация нажатой кнопки, при наведении работает, при нажатии нет, просто желтый цвет. Разобрался в следующем уроке это есть, тени должны быть либо inside либо outside.

[@freelance-pro]

Рад что разобрались!

[@1eremeev447]

и снова круто, спасибо!)

[@freelance-pro]

Пожалуйста 😊

[@user-rq9vb8xc1i]

Спасибі

[@freelance-pro]

Будь-ласка))

[@SvetlanaTonkich]

Дмитрий, подскажите как лучше вписывать текст в картинку. У меня Картинка "мысли" png и я хочу туда вписать текст. Как сделать, что бы текст был в пределах этого овала картинки. Или как это можно сделать. Я Просмотрела пока 6 ваших уроков. Может это в следующих уроках есть?

[@freelance-pro]

Да есть, нужен див блок с позишин ридейтив внутрь ложим картинку и текст с позишин абсолют

[@jevgenisuija]

Спасибо автору за проделанную большую работу. Немного обратной связи, просмотрел уже около 8 часов материала, информация могла бы быть более структурированной. Часто отходишь от выбранной темы, начинаешь рассказывать о каких то других вариантах и потом снова меняешь тему / подход. Получается оч много информации за раз, перегрузка мозга. Это не критика, а просто предложение что могло бы быть лучше, ещё раз Спасибо!❤

[@freelance-pro]

Всегда может быть лучше, например на индивидуальном обучении 😉 ученикам другой подход

[@user-ex8qj8bw2l]

Привет, подскажите как запустить линейку которой автор измеряет расстояние между блоками?

[@freelance-pro]

Привет, комманд шифт 4 (одновременно нажать) если у вас не мак ос тогда сочувствую надо искать софт сторонний например Джокси скриншотилка как вариант

[@alexsandrkhaladzhy6386]

Лайк за классное видео! Скажите, плиз, не помню на каком видео, пользовались "пиксельной рулеткой".. где ее можно скачать?

[@freelance-pro]

Джокси (скачать в Гугле) на Винде и команд шифт 4 на мак

[@user-ce9mh7ij6o]

Добрый день. А какую мышку вы используете к маку? Или у вас отдельный тачпад?..

[@freelance-pro]

Добрый день, использую стандартную маковскую мышку 3го поколения (самую новую) отдельный трекпад не так удобен мышка точнее трекпад хорош для монтажа видео разве что

[@ОчирБембетов]

подскажите пожалуйста!) в grid добавил div block , left и rights в rights добавил картинку , начинаю выравнивать по див блоку правому, а она ровняет по body

[@freelance-pro]

Она в абсолют а див блок в котором она находится не рилейтив, а должен быть 😉

[@Aleshatyan]

44:44 При изменении максимальной высоты нижняя часть картинки продолжает выступать за пределы hero section. У картинки абсолютное позиционирование по нижнему краю. На 44:44 нижняя часть картинки "обрезается" и не выступает за пределы. Дело в обновлении webflow или дело в размерах картинки? У меня её размеры 2761 на 3600 px. С чем это может быть связано?

[@freelance-pro]

Что бы картинка обращалась нужно задавать overflow hidden для элемента внутри которого она находится

[@showreel2024]

COOL :)

[@freelance-pro]

Nice

[@onandwon]

Благодарю, за видео! Подскажите, а Вы пипетку в Вебфлоу берете или какую то свою используете?

[@freelance-pro]

Пожалуйста, гугловцы удалили пипетку от вебфлоу с магазина хрома, так что пока приходится пользоваться альтернативными вариантами, по запросу color picker можно найти много вариантов, я на маке пользуюсь софтиной color note к примеру.

[@onandwon]

@@freelance-pro Я в самом Вебфлоу нашёл пипетку...

[@freelance-pro]

Это отлично 👍 ее в новых аккаунтах просто нет, ну или может уже вернули это расширение))

[@CLABA_CC]

Питання, я додаю це коло, але воно у мене вилітає за фото, тобто зникає, що це може бути?

[@freelance-pro]

Позишн релейтив задайте для див блока в котором находится круг

[@terekhova__l]

Присоединяюсь ко всем комментариям - огромное спасибо за такой качественный бесплатный контент! Не на всех платных курсах так доходчиво объясняют материал, как здесь)) Буду очень благодарна если ответите на вопрос: есть ли возможность в вебфлоу какой-то нестандартной верстки (как можно сделать в фигме)? Типа дизайна с сайтов эвордс, где заголовки необычно большие к примеру и как-то креативно расположены, или все же есть определенные ограничения по верстке? Заранее спасибо))

[@freelance-pro]

Пожалуйста! 😊 рад что вам нравится! И да в вебфлоу можно делать любую нестандартную верстку, все как на эвардс можно сделать

[@1974mura]

Не зАголовок, а заголОвок.

[@freelance-pro]

Русский не мой родной язык 😛 говорю как мне удобно и не парюсь, не уроки грамматики))) это я к тому, что не на то внимание тратите

[@virtuozfilm793]

Спасибо, Дмитрий !!! Вопрос? где полное фото танцующий девушки, не обрезанное изображение. В приложенных секретных материалах не нашел.

[@freelance-pro]

Оно вам не нужно, делайте все на основе своих фото, что бы получился ваш сайт а не копия 1в1

[@virtuozfilm793]

Понял. Спасибо!

[@freelance-pro]

Пожалуйста ☺️

[@procrastinator3219]

а где линеечку брать?)))

[@freelance-pro]

Command shift 4 одновременно нажать (это на маке) если виндовс то скачать скриншотилку джокси

[@hot-short82]

можешь рассказать, какие часто используются внутренние отступы между элементами? Например во внешних отступах ты используешь значения 80-100px. Есть ли что-то подобное и для внутренних отступов или это в основном на глаз делается?

[@freelance-pro]

Внутренние да обычно все на глаз, что бы красиво было))) зависит от блока сайта и ситуации

[@hot-short82]

@@freelance-pro спасибо

[@freelance-pro]

Пожалуйста 😉

[@artimity]

Кто-нибудь понимает, зачем нам секция если можно сделать див на боди? Или если переформулировать, можно ли вместо секции использовать див?

[@freelance-pro]

Да можно

[@CLABA_CC]

У мене іде тема Аніме😅

[@freelance-pro]

Теж круто))

[@izhiend]

Спасибо за видео, но как же режет ухо слово "зАголовок", это прям пытка какая-то😅

[@freelance-pro]

А как правильно?

[@izhiend]

@@freelance-pro заголо́вок, с ударением на вторую букву "о", как же ещё) Никогда в жизни не слышал, чтобы кто-то говорил за́головок😅

[@freelance-pro]

Я не Русский, мне проще я слышал)))

[@AndreiKozlov-ph8wo]

@@freelance-pro а откуда вы, если не секрет?

[@freelance-pro]

С другой страны