Работа с DIV блоками, отступы, позиционирование и стилизация элементов на webflow, урок №3

#webflow #вебфлоу
Сегодня я покажу как правильно работать с блоками на вебфлоу, все про отступы внешние и внутренние, а так же про все типы позиционирования (static, relative, absolute, fixed и sticky) научимся правильно их использовать и получать чистый и правильный код, без глюков и проблем на адаптиве или дальнейшем редактировании сайта в будущем, как на вебфлоу так и вручную.
Все информация подана наглядно, при этом дополнительно я покажу как задавать стили для элементов на примере обычных див блоков, которые являются основой любого сайта.
•••••••••••••••••••••••••••••••
- Полезные штуки для webflow freelance-blog...
- Индивидуальное обучение freelance-blog...
•••••••••••••••••••••••••••••••
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый (для новичка) • Трелло для фрилансера,...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портф...
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по раз...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, беспла...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас - тогда я способен вам помочь! freelance-blog...
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта - [e-mail]
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио - freelance-blog...
👉 • Инстаграм - / artstranger.ru
👉 • Бесплатные плюшки - freelance-blog...
👉 • Материалы для уроков - freelance-blog...
👉 • Индивидуальное обучение - freelance-blog...
•••••••••••••••••••••••••••••••
Таймкоды:
00:00 Готовим основу для изучения позиционирования DIV блоков
01:00 Формируем див блок и смотрим на его параметры
01:45 Добавляем второй DIV блок и изучаем их позиционирование относительно друг друга, отступы и т.д.
09:23 Добавляем еще одну переменную в виде кнопки
17:34 Добавляем второй див блок внутрь дочернего блока и изучаем способы их стилизации
35:37 Основы абсолютного позиционирования
50:24 Изучаем фиксированное позиционирование и фон для блока
58:33 Позиционирование sticky

[@miroed]

Наиболее понятные уроки для новичка по webflow, которые удалось найти. Спасибо.

[@freelance-pro]

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

[@ivol2898]

Уже изменилась логика некоторых моментов, но спасибо!

[@freelance-pro]

Да времена меняются но есть новый курс на канале в новом интерфейсе загляните во вкладку плейлисты и найдите 😉

[@user-ki7db3rv5i]

Дмитрий, спасибо вам огромное! За колоссальный труд и ваш талант все доходчиво объяснять 👍

[@freelance-pro]

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

[@sitebuy]

Спасибо Дмитрий, про позиционирование хорошо рассказали, особенно про параметр Sticky все понятно.)

[@freelance-pro]

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

[@jewgenijbeifus5181]

Благодарю за такой классный разбор!👍 Когда проработал это видео во второй раз, вместе с тобой, то по тихоньку стало доходить и получаться. Доносишь материал просто отлично. Очень рад, что нашёл твой канал. 👌

[@freelance-pro]

Пожалуйста ☺️ рад что смог донести информацию в доступном видео

[@insight6642]

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

[@freelance-pro]

Пожалуйста ☺️ сразу если б примеры то видео было бы на 5 часов хронометража))) примеры будут дальше плей-лист большой и все показываю своим чередом, а не наваливаю за раз 😉

[@darya_sit]

Боже!Наконец-то нашла годный канал, где доступно все объясняется, я замучилась с позиционированием. А вы обучение проводите по вебфлоу?

[@freelance-pro]

Рад что канал нравится ))) да у меня есть индивидуальное обучение freelance-blog.com/study/

[@Cobbe-oh8ey]

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

[@freelance-pro]

Спасибо ☺️ это вы еще у меня на обучении не были 😁

[@jevgenisuija]

Спасибо автору за подробное объяснение, порой даже излишне подробное 😊👍

[@freelance-pro]

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

[@born8008]

Отличный урок! Дмитрий, спасибо. Все так логично объясняете

[@freelance-pro]

Пожалуйста 😉

[@Svetlana-hk3mm]

Спасибо большое! Все очень понятно.

[@freelance-pro]

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

[@Prima-Streichquartett]

просто класс! Все четко и понятно объяснили!!! Спасибо огромное!!

[@freelance-pro]

Пожалуйста 😊

[@Sergey_878_]

Дмитрий спасибо за урок! Отлично! Чётко - Подробно - Информативно!!!👍

[@freelance-pro]

👍 Пожалуйста

[@user-ju1fm5dj7x]

Все очень понятно) Спасибо!

[@freelance-pro]

Пожалуйста! Рад что все понятно)))

[@ari.kalinina]

Дуже дякую, максимально інформативно, відчуваю, що крок за кроком все складається у потрібний пазл!)

[@freelance-pro]

Будь-ласка)) радий що корисно))))

[@sergeyshmelev8350]

Всё чётко !!! Теперь я всё для себя разъяснил по позиционированию !! Спасибо Дима !!!!!!

[@freelance-pro]

Пожалуйста 😊

[@onandwon]

Дмитрий, жму вашу руку! Видео очень полезное! Я тут недавно делал в webflow для себя сайт, а сейчас понимаю, что он сделан криво-косо, и будет весить раза в три больше чем должен! Буду исправлять на основе Ваших видео! )))

[@freelance-pro]

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

[@user-zt8dr8sv8u]

Благодарю, очень хорошая подача!

[@freelance-pro]

Пожалуйста ☺️ рад слышать и спасибо вам за комментарии это меня мотивирует 🥳

[@jevgenisuija]

Хорошее видео, много информации дается за раз, не легко все за раз переварить, но оно того стоит 👍

[@freelance-pro]

Рад что вам нравится 👍

[@ty_ebanulsa]

Спасибо за видео. Это первое видео, где так доходчиво разобрали тему. У других видел много лишнего, у вас топ-объяснения!

[@freelance-pro]

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

[@ivansokol7827]

Спасибо)))) Очень доходчиво и позитивно)))))

[@freelance-pro]

Пожалуйста 😊 позитив это хорошо 👍

[@user-il8wr4bg5x]

Жаль конечно мало лайков. Видео классные!

[@freelance-pro]

Спасибо ☺️ мало лайков но зато они качественные 😁

[@user-rl5tj3sr9j]

Спасибо за ваш труд! Очень понравилось в конце саммари что изучили) Проговаривать и прописывать структуру в целом очень полезно имхо

[@freelance-pro]

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

[@danielsgoat10]

Очень крутой и понятный урок! Спасибо за труд!

[@freelance-pro]

Пожалуйста

[@ivananisimov3896]

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

[@freelance-pro]

Пожалуйста, да буду снимать побольше таких штук!

[@user-jm6km5lx4l]

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

[@freelance-pro]

Рад что понравилось 🥳

[@user-jm6km5lx4l]

@@freelance-pro, у тебя помимо прочих талантов есть талант преподавателя) Я сейчас форму делаю в вебфлоу И там есть радио кнопки и чекбоксы Суть в том что там что-то наподобие карточки выбора двух товаров и дополнительных опций к нему, и я хотел сделать чтобы при нажатии на любую точку карточки срабатывал чекбокс. Но как ни кручу, ничего лучше чем расширить все поле с чекбоксом на всю карту не придумал. При этом лейбл чекбокса опасити выставил 0% А оно выходит очень криво все, карточка из грида сделал. даже если откалибровать положение самого "индикатора", боюсь что в адаптациях беда будет. Суть ещё в том что к чекбоксам простенький калькулятор прикручен, и при подтверждении формы данные передаются дальше в сценарий мейка... То есть отказаться именно от чекбоксов и радио нельзя. Может есть где-то похожее у тебя в видео, подскажи? Нельзя превратить дивблок в чекбокс? Или какую-то связь придумать что при нажатии на один элемент срабатывает спрятанный где-то чекбокс? Вроде не принципиально, но перфекционизм внутри плачет 😂

[@freelance-pro]

kzbin.info/www/bejne/aIXFgnSXfLqbZ6s тут показан такой функционал 😉

[@user-jm6km5lx4l]

@@freelance-pro , спасибо, посмотрел все вышло! Копнув глубже с заказчиком пришли к решению что надо походу делать форму динамической. Одним из первых вопросов будет юридическое он или физ лицо, и если он компания то добавляются дополнительные и обязательные поля ввода. Такие как название компании и ИНН. Реально ли это осуществить, если на эту тему подобные видео? Переживаю что если поля обязательные то это будет конфликтовать с обычными людьми которые эти поля даже не увидят С меня 20 лайков 😂

[@freelance-pro]

Да все реально, видео у вас уже есть выше, ну или freelance-blog.com/study/

[@user-nz3ze7hd1n]

Смотрю, на одном дыхании, спасибо.

[@freelance-pro]

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

[@ProDom_com]

Огромное спасибо за урок!!!!

[@freelance-pro]

И вам спасибо большое за комментарий ☺️

[@katyaberehova]

Супер!👍

[@freelance-pro]

Дякую))

[@nefedorbondarchuk7662]

Спасибо за видосы! Очень правильно, что всё повторяете по несколько раз)

[@freelance-pro]

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

[@nikolaikandratsionak3587]

Идем дальше, всё чудесатей и чудесатей -:) Спасибо, спасибо.

[@freelance-pro]

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

[@user-qt7jm6oz9u]

Хорошее разъяснение, как что устроено. Спасибо!

[@freelance-pro]

Пожалуйста! Рад что полезно))

[@user-hj5id7xp7b]

Чётко! Спасибо!

[@freelance-pro]

Пожалуйста! 😊 четко это хорошо))

[@user-hz3nq3mz5d]

Дмитрий,спасибо Вам большое!У Вас чудесный канал,все очень понятно и поэтапно)как раз для новчиков.Я закончила курсы по фигме,теперь надеюсь овладеть навыками работы с вебфлоу.Видео супер!:)

[@freelance-pro]

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

[@MrNikolaevv]

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

[@freelance-pro]

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

[@deniskazantcev]

Благодарю за видео, Дмитрий

[@freelance-pro]

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

[@kyryldrozdov5904]

This lessons are best!! so easy to achieve!Big thanks to author

[@freelance-pro]

Nice!

[@user-ef1ph1rh1r]

Дмитрий, спасибо Вам за обзоры! Но я засыпаю) Реально! Это ASMR. Интересно-но хочется спать. Понятно, что хотите рабочий процесс показать, но это же всё-таки обучалка! Просьба или уже рекомендация, т.к. курс Вы уже записали, а я комментирую для поддержки. Делайте акцент при повторении пройденного материала, хотя бы пару раз в новом уроке.

[@freelance-pro]

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

[@user-pw5rb5wz7g]

Спасибо!

[@freelance-pro]

Рад что вам нравится 😊 и спасибо вам за комментарии это приятно

[@zhenikosha]

Функция relative сделала мой день!!!

[@freelance-pro]

Круть

[@pein2448]

Очень позновательное видео👍продолжаете в том же духе!

[@freelance-pro]

Спасибо 😉 дальше будет ещё полезнее))

[@user-hq2mm7ee9c]

как не новичку в подобных прогах, но новичку в веб флоу, иногда сложно слушать даже на x2 - много воды о элементарных моментах. Но, если набраться терпения, доберетесь до ценной инфы. Автору спасибо за бесплатный материал

[@freelance-pro]

Видео рассчитано на полных новичков и должно быть таким )) есть плей-листы для среднего уровня и даже профи на канале если что ))

[@mellonkhv]

Спасибо

[@freelance-pro]

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

[@elisabetromerosaavedra757]

Просто чудо!!

[@freelance-pro]

Спасибо 😊

[@partenph3660]

Так держать, очень полезно!

[@freelance-pro]

Спасибо 😊 очень приятно))) конечно же буду так держать 😉

[@zhenikosha]

Класно рассказано, спасибо

[@freelance-pro]

Пожалуйста 😊

[@1eremeev447]

Снова круто!

[@freelance-pro]

Это хорошо 😁

[@dddddddimon]

дякую.

[@freelance-pro]

Будь ласка

[@Dima-zr7go]

отличный разбор !!

[@freelance-pro]

Это хорошо))

[@vovastetsiuk9107]

Прекрасно и замечательно))

[@freelance-pro]

О рад слышать))))

[@zubiczubik4606]

Great!!! Keep going!!

[@freelance-pro]

Yes

[@ArtfulUI]

Це мега корисно, ще дивлюся 10 хвилин і мені дуже подобається відео! Я б сказав що серія відео на твоєму каналі могла б називатися Webflow for dummies на русском)

[@freelance-pro]

Дякую))) так намагався все розказати максимально простою мовою)))) радий що вийшло))

[@user-wn1jm4hp5k]

Лайк!)

[@freelance-pro]

👍👍👍

[@NESMIYANOVUA]

дякую, дякую, дякую)))

[@freelance-pro]

Будь-ласка 😉

[@user-ce9mh7ij6o]

🤗

[@freelance-pro]

☺️

[@katarzynakowczuga5574]

Долго искала объяснения на русском. Просто, понятно, доступно! Лучше чем на самом webflow. У меня есть вопрос: "Как делать выравнивания отдельных элементов?" Например текст и блок надо четко выровнять по левому краю. Добавлять картинку линии, либо есть ещё какой вариант?

[@freelance-pro]

Так оно по умолчанию по левому краю выравнивается

[@user-vx8ru8nl1h]

Спасибо за уроки, все просто и понятно, подскажите пожалуйста по чему у меня не работает Alt+левая мышь в Specing когда хочешь поменять два значения в pading? меняеться только одно значение(( не появлеяться стрелочка в круглешке ))

[@freelance-pro]

Пожалуйста! 😊 может у вас не мак или глюк какой-то, а сейчас как?

[@lisavetakurilenko7936]

Підскажи будь ласка, як додати колір у обрані? Зараз дивлсь відео на 22:41, де ти показуєш як його додати, але у мене чомусь немає плюса знизу від кольорої палітри, можливо, його треба додати через налаштування? бо я вже все перепробувала, буду дуже вдячна, якщо підкажеш, дякую!

[@freelance-pro]

Тепер все по іншому, ось відео відповідь на ваше питання kzbin.info/www/bejne/iX6qkoynatunoZY

[@lexikoshkina5077]

добрый день! спасибо за Ваши уроки, очень понятно и доступно! а вот только куда в новой версии вебфлоу делась палитра цветов свотч, чтобы их забиндить как-то?

[@freelance-pro]

Добрый день, рекомендую глянуть это видео kzbin.info/www/bejne/d3qcdHytnbqKebs

[@Marthabelieveg]

Кайфарики, лишь вопрос актуально ли это ещё? Можно ли найти заказы переноса сайта или просто потом экспортировать в виде кода? Можно ли на этом заработать? Хотя в любом случае как дизайнеру мне будет полезно знать процесс создания что бы не мучать бедного верстальщика своими инновационными идеями :)

[@freelance-pro]

Конечно же актуально а что может поменяться то?

[@SvetlanaTonkich]

Подскажите пожалуйста, как у вас на минуте 17.33, когда вы добавили второй Див получился , что он сразу на расстоянии. У меня они сразу стали один под одним. При этом я смотрю, что GAP на ROW у вас равен 0

[@freelance-pro]

Вебфлоу обновился

[@zhenikosha]

А можно в webflow задавать страницы для сайта или только лендинг

[@freelance-pro]

Можно все

[@aleksandrzanachkin2601]

А в чем противоречие, когда паддинг+маржин?

[@freelance-pro]

Ну я на видно рассказал это, все зависит от ситуации, не будь разницы был бы только один параметр)))

[@trickarchiveableton]

+

[@freelance-pro]

👍

[@IGUXdesign]

Только у меня момент с лайфхаком не работает,я разными способами пробую меняется только зеленый

[@freelance-pro]

Вебфлоу мог поменяться

[@freelance-pro]

- Полезные штуки для webflow freelance-blog.com/webflow/ - Индивидуальное обучение freelance-blog.com/study/ ••••••••••••••••••••••••••••••• Таймкоды: 00:00 Готовим основу для изучения позиционирования DIV блоков 01:00 Формируем див блок и смотрим на его параметры 01:45 Добавляем второй DIV блок и изучаем их позиционирование относительно друг друга, отступы и т.д. 09:23 Добавляем еще одну переменную в виде кнопки 17:34 Добавляем второй див блок внутрь дочернего блока и изучаем способы их стилизации 35:37 Основы абсолютного позиционирования 50:24 Изучаем фиксированное позиционирование и фон для блока 58:33 Позиционирование sticky

[@libertarian3402]

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

[@freelance-pro]

Сначала удалить все классы с кода а потом стереть его с базы классов (смотрите обзор нового интерфейса вебфлоу видео было недавно на канале) ,😉