Как сделать хедер на webflow. Верхняя часть сайта, с логотипом и контактами, а так же меню. Урок №7

#webflow #вебфлоу
Header - это самая верхняя часть любого сайта, в нем прячется навигация по сайту в виде пунктов меню, а так же логотип сайта, дескрипшн, контактная информация в виде адреса, почты, номера телефона и кнопка заказа обратного звонка.
Именно такой двухэтажный хедер мы сегодня сделаем в рамках курса по вебфлоу для новичка. Без хедера сайт нормально работать не будет в большинстве случаев, так что он почти обязательный элемент на сайте. Вебфлоу позволяет делать клевые хедеры, так же у меня на канале есть еще одно видео, касательно меню на сайте, где я показывал как делать их фиксированными и менять при скролле • Два разных меню на web... так что советую и этот ролик глянуть))
•••••••••••••••••••••••••••••••
- Материалы с данного видео freelance-blog...
- Полезные штуки для webflow freelance-blog...
- Индивидуальное обучение freelance-blog...
•••••••••••••••••••••••••••••••
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый (для новичка) • Трелло для фрилансера,...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портф...
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по раз...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, беспла...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас - тогда я способен вам помочь! freelance-blog...
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта - [e-mail]
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио - freelance-blog...
👉 • Инстаграм - / artstranger.ru
👉 • Бесплатные плюшки - freelance-blog...
👉 • Материалы для уроков - freelance-blog...
👉 • Индивидуальное обучение - freelance-blog...
•••••••••••••••••••••••••••••••
Таймкоды:
00:00 Убираем отступ символизирующий хедер и делаем полноценный блок
00:33 Добавляем нав меню и придаем ему желаемого внешнего вида
02:50 Создаем анимированные пункты меню
09:38 Выпадающий пункт меню + анимация его элементов и стилизация
22:32 Добавляем самый верх сайта над меню, с лого контактами телефоном и кнопкой
24:22 Правильный логотип для сайта + дискрипшн
28:42 Второй блок с адресом и почтой
32:56 Третий блок с номером телефона и кнопкой обратного звонка
37:12 Где брать всю информацию)))
38:57 Анимируем кружок на первом экране (разные варианты)
44:55 Подводим итоги

[@user-oq8kj6ed6n]

Дмитрий все круто и понятно. Главное практика для закрепления. Большое спасибо🙃

[@freelance-pro]

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

[@jewgenijbeifus5181]

Дмитрий, огромная благодарность за эти уроки! Учусь, повторяя на практике урок за уроком. Не скажу, что всё на ура получается, бывают загвоздки, но в общем шаг за шагом двигаюсь. Объяснения классные, хорошо, что темп в основном не слишком быстрый, мне как абсолютному новичку в этом деле очень нравится, хотя некоторые места прохожу по несколько раз, чтобы осуществить самому, то что ты показываешь. Спасибо!!!!!! 👍

[@freelance-pro]

Пожалуйста ☺️ и вам спасибо за развернутый комментарий

[@katzlan4059]

Кроме шуток, но вы самый лучший преподаватель по веб разработке.

[@freelance-pro]

Спасибо ☺️ оооочень приятно слышать 😊

[@dianagalindoraya1931]

Да, мы хотим, чтобы Ты и дальше радовал нас новыми видео! Чего мы хотим? Мы хотим делать классные сайты! С П А С И Б О !

[@freelance-pro]

Рад слышать! Значит буду продолжать, в таком же духе)) А что бы делать классные сайты, ищи того, кто даст вам обратную связь по вашей работе, укажет на ваши ошибки, это верный путь если хотите серьезных результатов.

[@born8008]

Не успеваю все смотреть, Дмитрий-спасибо!

[@freelance-pro]

Пожалуйста 😉 да счас наплыв информации пошёл серьёзный))

[@virtuozfilm793]

Дмитрий, Спасибо!!! В каждом уроке, что-то новое узнаю!👍

[@freelance-pro]

Пожалуйста ☺️ рад слышать

[@user-zt8dr8sv8u]

Благодарю за урок, все очень круто!)

[@freelance-pro]

Пожалуйста ☺️ это хорошо, что круто 😎👍

[@VictoriaSuslova]

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

[@freelance-pro]

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

[@leolim146]

Спасибо, все ролики очень полезны👍

[@freelance-pro]

Пожалуйста ☺️ рад слышать

[@nio4em-iv8hv]

молодец, отличная подача материала все понятно

[@freelance-pro]

Спасибо 😊 рад что вам нравится

[@pein2448]

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

[@freelance-pro]

Пожалуйста 😉 раз вопросов нету, значит объяснил понятно, это радует )))

[@sergeyshmelev8350]

СПАСИБО Дмитрий !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@freelance-pro]

Пожалуйста! 😊 Сергей!

[@anastasiyasoboleva1595]

Благодарю за урок!

[@freelance-pro]

Пожалуйста 😊

[@onandwon]

Благодарю! Прекрасное обучающее видео!

[@freelance-pro]

Пожалуйста! Рад, что понравилось!

[@utilisateur_magnifique]

все я нашел причину...удалять не буду пусть комментарии остаются. Автор - тьІ лучший!

[@freelance-pro]

Это отлично 👍 и спасибо ☺️

[@user-lg1bh3cm6p]

Отличные уроки. Спасибо за работу

[@freelance-pro]

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

[@Sergey_878_]

Большое спасибо💥 Отлично👍

[@freelance-pro]

Больше пожалуйста 😊

[@jevgenisuija]

Хорошее видео, спасибо!❤

[@freelance-pro]

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

[@user-vr3hw2cn3m]

Спасибо, бро. Ты крут!

[@freelance-pro]

Пожалуйста ☺️ рад слышать

[@MrReactor11]

Спасибо, отличный материал

[@freelance-pro]

Пожалуйста! 😊

[@CLABA_CC]

Дуже цікаво погрався з Sirkl, анімація дуже цікава річ.)

[@freelance-pro]

Будь ласка, так анімації в вебфлоу топові

[@user-ho5xh9cm3c]

Дякую, зрозуміло та цікаво

[@freelance-pro]

Будь ласка, радий що зрозумiло та корисно))

[@Olegpol587]

Спасибо все подробно и доходчиво. Хороший контент.

[@freelance-pro]

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

[@xR41derx]

Спасибо! p.s. если у кого-то, как у меня, дропдаун меню не уходило плавно при клике, поставьте в настройках Dropdown "close delay: 500ms"

[@freelance-pro]

Пожалуйста

[@user-rb2in4jc5y]

Интересный функционал с анимациями, очень интересно

[@freelance-pro]

Да функционал тут топовый

[@user-gb5ys9oc8t]

Доброго времени суток! Огромная благодарность за эти видео. Бесконечно рад, что есть люди, способные бескорыстно проделывать такую огромную работу! Повторяю за Вами, возник вопрос, вы показали как менять цвет текста при наведении. Я всё сделал, цвет не меняется, в чём может быть причина? Проверил несколько раз, не нашёл отличий от вашего примера. За ранее благодарен.

[@freelance-pro]

Пожалуйста! 😊 причина в неправильной анимации, Нужно смотреть именно ваш проект, что бы найти причину, по другому это сделать не получится, в данном случае, если что приходите буду рад помочь freelance-blog.com/study/

[@Aumrita_life]

Спасибо, много полезной информации 👍🏻

[@freelance-pro]

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

[@user-nl1ez6rl2b]

Спасибо! Круто;)

[@freelance-pro]

Пожалуйста! 😊

[@Svetlana-hk3mm]

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

[@freelance-pro]

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

[@user-wn1jm4hp5k]

Спасибо за урок!

[@freelance-pro]

Пожалуйста 😊

[@ASomow]

контент топ!

[@freelance-pro]

Рад слышать 😊

[@user-ld4jq2he6x]

СПАСИБО чувак ті супер!!!)

[@freelance-pro]

Пожалуйста! 😊 а у вас супер коммент))

[@ivol2898]

Спасибо!

[@freelance-pro]

Рад стараться

[@nick.ohoronik]

💛Спасибо💛

[@freelance-pro]

Пожалуйста 😊

[@pismann]

Спасибо за прекрасно разжёванные уроки! :)

[@freelance-pro]

И вам спасибо за комментарий)) рад что полезен))

[@xmarishas]

Здравствуйте! Подскажите, пожалуйста, как сделать, чтобы в хедере были два города и по клику на каждый менялась информацию в хедере по типу номера, адреса и т.д? У компании 2 филиала в разных городах.

[@freelance-pro]

Здравствуйте, анимациями, посмотрите видео про анимации (поиск на канале поможет)

[@SvetlanaTonkich]

Спасибо тебе большое и огромное!

[@freelance-pro]

Пожалуйста! 😊 и вам спасибо за поддержку в комментариях)))

[@zorg520]

спасибо бро))

[@freelance-pro]

Пожалуйста Зорг! 😊

[@1eremeev447]

Spasibos

[@freelance-pro]

Пожалуйстос

[@sergiigunko5067]

спасибо.

[@freelance-pro]

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

[@user-jq1wg9yk7m]

спасибо

[@freelance-pro]

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

[@user-hl7vy3cn8b]

Спасибо огромное!!!!!!!🙂

[@freelance-pro]

Пожалуйста 😊

[@anddrew5841]

спасибо за подробный разбор! можно больше уроков по анимации?❤

[@freelance-pro]

пожалуйста, на канале есть много видео про анимацию, смотрите и изучайте))

[@IvannaIv-cy6sj]

Спасибо большое : )

[@freelance-pro]

Пожалуйста 😊

[@ELFMEDIA]

Спасибо! )

[@freelance-pro]

Пожалуйста 😊

[@serpmyf]

Отличное видео! А как сделать хедер закреплённым в верхней части?

[@freelance-pro]

Позишн фиксед

[@artemkhmelik605]

[@freelance-pro]

👍

[@ansi941]

👍😀

[@freelance-pro]

🥳👍

[@Bor3887]

👍

[@freelance-pro]

😉

[@user-ce9mh7ij6o]

Так, у меня созрел вопрос: почему классы не по BEM? Это никто не проверяет обычно, когда создаешь сайты / лендинги / банеры на webflow?.. Заранее благодарю за ответ. :)

[@freelance-pro]

Что бы не было лишнего кода и в них нет необходимости как таковой, если даже кто-то проверит то проблемы не обнаружит в виду ее отсутствия

[@2turistaural]

Дмитрий, HELP не могу настроить чтобы менялся цвет Nav Link (раскрывающийся {dropdawn} если находишься на одной из раскрывающихся позиций. Другими словами не получается сделать их в позицию current и настроить как обычный Nav link если взять ваше видео - т.е. нужно чтобы "Выпадающий список" загорелся другим цветом, когда находишься на одном из link -ов

[@freelance-pro]

Выпадающий список это просто заголовок внутри ссылки заголовок не является ссылкой и положение курент ему не предусмотрено поскольку не логично если речь о пунктах внутри то там курент работает если у вас чтото не так то надо смотреть именно ваш сайт что бы определить причину по умолчанию все должно быть норм

[@mems_browser]

Столкнулся с такой проблемой, у меня breakpoint стоит по умолчанию у 1068 px (еще звездочка у этого размера стоит) и я добавил другой breakpoint 1440 px, так как у меня по дизайну контент на 1200 px соответственно 1068 px не подходит мне, а 1440 px самое то. И теперь, когда верстаю на разрешении 1440 px, то стили не отображаются на низких breakpoint'ах, как мне быть? Что нужно сделать, чтобы применялись стили на всех устройствах? У вас вижу разрешение на 1603 px, еще и звездочка стоит

[@freelance-pro]

Вот видео про брейкпоинты там я все рассказал про них kzbin.info/www/bejne/o4WmYquwi5uZgMU

[@mems_browser]

@@freelance-pro Спасибо большое :)

[@freelance-pro]

Пожалуйста 😉

[@nutakul453]

Здравствуйте) Спасибо за видео! Подскажите пожалуйста, есть ли способ сделать, чтобы из выпадающего меню можно было переходить не на секции, а на табы? У меня секция с 4 табами и я хочу, чтоб с каждого пункта меню можно было перейти на соответствующий таб, но обычным способом через id это не работает, а переходит только на активный таб(

[@freelance-pro]

Здравствуйте, пожалуйста 😊 да можно но нужно делать костомные табы, самому создавать структуру

[@nutakul453]

@@freelance-pro Поняла, спасибо)

[@freelance-pro]

Пожалуйста 😊

[@tripgames4520]

а как сделать чтобы mouse hover распространялась только на текст в DropDown? очень некрасиво выглядит линия, подчеркивающая и тот значок

[@freelance-pro]

Задать нужные значение для стилей в положении hover

[@elisabetromerosaavedra757]

банальное СПАСИБО!

[@freelance-pro]

Пожалуйста 😉

[@miroed]

Когда делаете подчёркивания "Контейнер" через Borders, подчёркиваются и два других контейнера?

[@freelance-pro]

Если у них общий стиль (класс / название) то да

[@designckinet]

Здравствуйте 😊. Смотрю ваш у рок и всё повторяю. У меня Dropdown на Desktop не хочет работать(при нажатии не появляться список с Link 1 и тд). Хотя на других расширениях работает. В чём может быть проблем? Может глюк Webflow? Хотя всё переделывал и страницу обновлял.

[@designckinet]

Передел всё с самого начала. Всё получилось 😊

[@freelance-pro]

Может глюк

[@freelance-pro]

Это хорошо 👍

[@procrastinator3219]

в конце когда делал анимацию круг уезжал дальше чем был изначально, хотя значение по иксу было 0 Отправить результаты? Но еще же нет адаптации до остальных гаджетов((

[@freelance-pro]

Да можете отправить мне результаты в рамках обратной связи (консультации или обучения) подробнее про оба варианта тут 👉 freelance-blog.com/webflow/

[@bystryypovar]

У меня вот какой вопрос. Когда делаю меню (6 пунктов 2 из которых выпадающие), то не хочет быть от края от края. К левому краю липнет,а справа остаётся ещё много места и в глаза бросается это. Как можно исправить? Где мог накасячить?

[@freelance-pro]

Надо смотреть ваш проект так не ясно

[@91Design]

Дмитрий, а подскажите пожалуйста, как быть с Lottie анимацией. Столкнулся с проблемой, что у меня на сделанном сайте на вебфлоу стоит много анимации json по клику, по прокрутке и тп. Так вот как после выгрузки заставить её работать ? Все ссылаются на плееры в которых уже задаются параметры её воспроизведение, что как я понимаю будет мешать её работе так, как задумывалось, что к примеру проиграется по клику на 50% и потом по дабл клику вернётся до 0.

[@freelance-pro]

Здравствуйте, после выгрузки моим методом freelance-blog.com/webflow/ все прекрасно работает, 1 в 1 как на сайте с вебфлоу. Единственный момент, который вы возможно упустили --- json работает только на сайте, который выгружен на хостинге (или если смотреть локально на виртуальном сервере, типа денвера на виндовс или мампл на маке).

[@91Design]

@@freelance-pro все понял, спасибо огромное )

[@freelance-pro]

Пожалуйста 😉

[@hot-short82]

Дмитрий, а как правильно сделать меню, чтобы отступ от лого до пунктов меню было 100px, между пунктами меню отступы по 30-40px и отступ от пунктов меню до телефона тоже 100px был. Это с помощью greeed делать или через флексбокс и какое позиционирование задавать?

[@freelance-pro]

Через флекс боксы, горизонтальное центрированное повертикали и от края до кря по горизонтали, ну и отступы задавать с теми размерами которые вы выше озвучили

[@hot-short82]

@@freelance-pro это все в одном контейнере делать? т.е. из готового навбара удалить место под логотип, сам контейнер сделать на 100% и во внутрь него добавить лого, пункты меню и контакты, затем сделать через флекс боксы выравнивание, правильно? А чтобы сделать отступы между пунктами меню, нужно ли им задавать положение абсолют или лучше будет сделать через обычные внешние отступы?

[@freelance-pro]

Никаких абсолютно, вы што))) смотрите на видео я там показывал же это, или приходите на обучение freelance-blog.com/study/ и тогда всему научу, а то разига словах не поняли надо наглядно показывать вам все это, а в рамках комментариев на ютубе это не сделать к сожалению. А прийдете на обучение научу зарабатывать деньги 💰

[@hot-short82]

@@freelance-pro кек, я не против пройти обучение у вас, да только из-за того, что курс рубля укрепился в последние месяцы, у меня довольно сильно просел доход, поэтому в данный момент могу только в бесплатном доступе проходить обучение( Спасибо за ответ, просмотрю тогда еще раз этот момент на видео

[@freelance-pro]

Ну тогда собирайте деньги а тем временем смотрите видео, просто без обратной связи ошибки никуда не денутся))

[@virtuozfilm793]

Спасибо за урок, Дмитрии. Такой вопрос ? Почему, при переходе мышки с кнопки текста "Выпадающий список", кнопки пункты меню пропадают? Срабатывает через раз !

[@freelance-pro]

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

[@virtuozfilm793]

Спасибо

[@freelance-pro]

Пожалуйста 😊 и как помогло?

[@virtuozfilm793]

Не успел проверить. Совсем сломался хейдер. Я взял Ваш шаблон и добавил в хедер дробдаун, сделал анимацию. Анимация работала, но перейти на пункты у меню не получалось, они скрывались. Долнешее редактирование привело к тому что хеидер сместился в стороны, потерял центровку и боковые линии графики пропали. Сейчас повторяю заново урок за вами. Не получавшийся хейдер, я не стал удалять, сохранил для поиска, где я сделал ошибку.

[@virtuozfilm793]

Дмитрий, спасибо за обратную связь. Прошел снова ваш урок и выяснил что приближая выпадающую секцию ближе к заглавию дроп даун (dropdown ), выпадающая меню перестало пропадать при переходе с заглавия. Мне хотелось сделать, что бы при подведении курсора мышки к заглавию " Наши" услуги появлялось подчёркивание и всплывала дополнительная секция с перечисленными услугами, при этом подчеркивание не закрывалось появляющимся меню dropdown.

[@freelance-pro]

- Материалы с данного видео freelance-blog.webflow.io/course - Полезные штуки для webflow freelance-blog.com/webflow/ - Индивидуальное обучение freelance-blog.com/study/ Таймкоды: 00:00 Убираем отступ символизирующий хедер и делаем полноценный блок 00:33 Добавляем нав меню и придаем ему желаемого внешнего вида 02:50 Создаем анимированные пункты меню 09:38 Выпадающий пункт меню + анимация его элементов и стилизация 22:32 Добавляем самый верх сайта над меню, с лого контактами телефоном и кнопкой 24:22 Правильный логотип для сайта + дискрипшн 28:42 Второй блок с адресом и почтой 32:56 Третий блок с номером телефона и кнопкой обратного звонка 37:12 Где брать всю информацию))) 38:57 Анимируем кружок на первом экране (разные варианты) 44:55 Подводим итоги

[@utilisateur_magnifique]

я тупо шаг за шагом делаю анимацию, но при просмотре сайта ее почему то нет...

[@freelance-pro]

Где-то допустили ошибку, приходите на консультацию или обучение и все исправим freelance-blog.com/webflow/ а то не глядя причину найти невозможно

[@MrNikolaevv]

😁

[@freelance-pro]

?

[@joanlen4075]

😏

[@freelance-pro]

))

[@user-qt7jm6oz9u]

Спасибо!

[@freelance-pro]

Пожалуйста 😊

[@kreyn7436]

👍

[@freelance-pro]

))))👍