Верстаем сложный макет в Webflow с помощью нового инструмента Grid

Поделиться
HTML-код
  • Опубликовано: 19 сен 2024
  • В этом видео я показываю и комментирую процесс вёрстки макета с нестандартной сеткой. Также показываю как работает новый инструмент Grid.
    Ссылка на проект в Webflow - webflow.com/we...
    Сервис для сжатия изображений - tinypng.com/
    Ссылка на регистрацию аккаунта Webflow - bit.ly/2lvPpOl
    Добавляйтесь в друзья - ivanmayorov
    Обучающий курс по Webflow - webflow.pro/
    Группа курса - intensi...

Комментарии • 37

  • @4designlab
    @4designlab 7 месяцев назад

    Очень круто, спасибо, все понятно, быстро и без воды

  • @edwinsteel2364
    @edwinsteel2364 5 лет назад +6

    Благодарю! Все доступно и по существу.

  • @Bor3887
    @Bor3887 5 лет назад +4

    Спасибо тебе ,добрый человек!

  • @olegyakunchenkov4029
    @olegyakunchenkov4029 3 года назад

    Пока не поссмотрел,но обязательно поссмотрю. Можно многому научится и у других )

  • @prosto7586
    @prosto7586 6 лет назад +1

    Просто магия какая то!

  • @enslit
    @enslit 5 лет назад +2

    Очень круто! Спасибо

  • @bratzpua
    @bratzpua 6 лет назад +4

    за grid спасибо!

  • @alagallyamova2437
    @alagallyamova2437 3 года назад

    Спасибо. Всё понятно и ясно.

  • @firestarter13.
    @firestarter13. Год назад

    Спасибо 👍🏻

  • @andreikan7406
    @andreikan7406 4 года назад

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

    • @Salovrusso
      @Salovrusso Год назад

      внутри сетки воткнуть div и у него выставлять бордюры) но лучше делать тенями, чтобы контент не сдвигался)

  • @samirverdi-design786
    @samirverdi-design786 4 года назад +1

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

  • @nMnFunny
    @nMnFunny 4 года назад +2

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

    • @Fenixtremo
      @Fenixtremo 2 года назад +1

      Надо для выделенного блока прожать Position -> Manual

    • @Unclemakar
      @Unclemakar Год назад +1

      @@Fenixtremo спасибище!!

  • @badted9942
    @badted9942 6 лет назад +2

    спасибо!!

  • @ellenlomb
    @ellenlomb 5 лет назад +1

    как добавили символы на 25 минуте?

  • @AzamatIvanov
    @AzamatIvanov 3 года назад

    Спасибо за отличный видос. Вопрос: при адаптации под планшеты/моб и тп у некоторых картинок и текстов изменения в размерах применяются и в десктопной версии. Как избежать? Каждый раз создавать подклассы?

  • @tururumru8895
    @tururumru8895 2 года назад

    Не знаю как это было 3 года назад, но я намучилась с этим уроком, Грид работает криво. В начале, после добавления 3 дива, начинает перестраиваться и расползаться на больше кол-во столбцов и просто не даёт добавить остальные дивы. С адаптивом вообще беда, так просто взял и перетащил, как в видео из одной клетки в другую не работает- весь Грид скроллится на бешеной скорости и див попадает совсем не туда куда хотелось бы и снова перестраивается вся структура грида. Вобщем сделала все с трудом, можно сказать на соплях и даже притрагиваться к этому гриду страшно, чтобы не сломалось все. Так что в теории и на видео это «магия», а на деле адище!

    • @webflowpro
      @webflowpro  2 года назад +2

      Понимаю ваши трудности. Грид сильно поменялся после записи урока. Надеюсь скоро найду время и запишу новый урок)

  • @stanislavosipov2838
    @stanislavosipov2838 Год назад

    Здравствуйте, подскажите пожалуйста делали ли вы верстку сайта на вебфлоу по гриду (весь сайт верстается с помощью гридов? Может посоветуете уроки какие нибудь по этой теме?

    • @webflowpro
      @webflowpro  Год назад +1

      Здравствуйте. Грид просто инструмент, его нужно использовать для подходящих задач. Весь сайт нет смысла делать исключительно на гриде. Многие задачи можно делать флексом или гридом, выбор остаётся за вами. Сейчас я готовлю новое видео про грид, где расскажу для каких задач его удобно использовать

    • @stanislavosipov2838
      @stanislavosipov2838 Год назад

      @@webflowpro Спасибо, а подскажите будут ли видео по обновлениям, сегодня хотел подключить коллекцию к тексту, так не нашло как это сделать, раньше в тексте шестиренки можно было добавлять , а сейчас нет там этих настроек

    • @webflowpro
      @webflowpro  Год назад

      ​@@stanislavosipov2838 В CMS ничего не изменилось www.loom.com/i/300d0ab194b04acf83fb39d740d9efe6

  • @egoryabov
    @egoryabov 5 лет назад

    Как ты быстро переключаешься между рабочими столами?) Видно что не трэкпад и не кнопки на клавиатуре. Magic Mouse?)

    • @webflowpro
      @webflowpro  5 лет назад +1

      Трэкпад на ноуте и cmd + tab для переключения между приложениями)

  • @aleksandrpopov6580
    @aleksandrpopov6580 5 лет назад

    Магия...

  • @aksenferhat2143
    @aksenferhat2143 5 лет назад

    Здравствуйте.А где вы создали макет?

  • @denispnf4195
    @denispnf4195 4 года назад

    100% GUI =)

  • @rdesign4990
    @rdesign4990 6 лет назад

    С какого сервиса брались png картинки для макета?

    • @webflowpro
      @webflowpro  6 лет назад +4

      Держи макет в фигме www.figma.com/file/DIAokio5rD2j6H0lH08vsOhQ/Grid?node-id=0%3A1

  • @hanzohasashi5014
    @hanzohasashi5014 5 лет назад

    конвертация кода платная?

    • @webflowpro
      @webflowpro  5 лет назад

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

    • @hanzohasashi5014
      @hanzohasashi5014 5 лет назад

      слышал что можно как то делать выгрузку из бесплатным аком

    • @medokuk8644
      @medokuk8644 5 лет назад

      @@hanzohasashi5014 Если что обращайся я тебе с бесплатного выгружу код, разумеется не бесплатно )