Обзор интерфейса webflow, объясняю функционал и панель инструментов, на примерах, начало обучения

Обзор интерфейса и функционала webflow, рассмотрим полностью панель инструментов, все на примерах, начало обучения созданию сайтов на вебфлоу. Видео длинное но максимально информативное, в нем я максимально просто и подробно описал каждую из функций сервиса, наглядно их продемонстрировав на примерах.
Это третий видеоролик, с плейлиста по курсу разработки сайта под ключ. Если вы планируете заниматься фрилансом, или вы уже веб дизайнер и хотите зарабатывать больше, тогда вам это будет полезно, вот данный плейлист • Трелло для фрилансера,...
•••••••••••••••••••••••••••••••
- Полезные штуки для webflow freelance-blog.com/webflow/
- Индивидуальное обучение freelance-blog.com/study/
•••••••••••••••••••••••••••••••
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый (для новичка) • Трелло для фрилансера,...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портф...
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по раз...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, беспла...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас - тогда я способен вам помочь! freelance-blog.com/study/
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта - artstrangers@gmail.com
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио - freelance-blog.com/
👉 • Инстаграм - / artstranger.ru
👉 • Бесплатные плюшки - freelance-blog.com/webflow/
👉 • Материалы для уроков - freelance-blog.webflow.io/
👉 • Индивидуальное обучение - freelance-blog.com/study/
•••••••••••••••••••••••••••••••
Таймкоды:
00:00 | Настройки сайта
01:50 | Панель добавления элементов сайта
07:07 | Grid (сетка/колонки вебфлоу)
28:35 | Вкладка с готовыми шаблонами
28:42 | Символи
30:00 | Страницы
31:20 | Изображения
31:30 | Настройки вебфлоу
31:40 | Поиск
32:17 | Клавиатурные сокращения (горячие клавиши)
32:33 | Вкладка стилизации блоков
33:47 | Адаптив
35:24 | Публикация сайта
36:15 | Обзор элементов
51:43 | Позиционирование блоков
56:00 | Работа с текстом
01:03:25 | Тени
01:07:26 | Вкладка настройки элемента
01:14:27 | Вкладка названий стилей
01:14:51 | Анимации
01:17:07 | Заключение

Пікірлер: 81

  • @Shavkat78
    @Shavkat782 жыл бұрын

    Приветствую Дмитрий! Спасибо за ценный контент! Вопрос по заготовкам(шаблонам) Реально получить? Благодарю за неоценимый вклад и труд!

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Здравствуйте, рад что полезен!)) Вся информация по доп. материалам есть тут artstranger.ru/webflow/ если кратко, то да, все реально))

  • @user-vl6vl7cr8d

    @user-vl6vl7cr8d

    2 жыл бұрын

    да реально, я купил

  • @freelance-pro

    @freelance-pro

    10 ай бұрын

    🙂 супер

  • @user-yp3ms2dr2o
    @user-yp3ms2dr2o2 жыл бұрын

    Дмитрий, редко пишу комментарии. Но информация, которую Вы даете бесценна!!!! Все рассказано быстро и подробно. Без лишней воды. Огромное спасибо!

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Пожалуйста 😉

  • @buenosaires3165
    @buenosaires31652 жыл бұрын

    круто, это самый ценное видео по вебфлоу которое я встречал в рунете

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Рад что полезное))

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    На канале есть ещё видео не менее крутые😎

  • @maxish6198
    @maxish61982 жыл бұрын

    Это убер-полезное видео! Спасибо огроменное!

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Рад что полезен))

  • @user-io5.56
    @user-io5.562 жыл бұрын

    Благодарю за понятный разбор. Добра вам ;)

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @user-zp4it9qx8b
    @user-zp4it9qx8b2 жыл бұрын

    Спасибо за ваш труд

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @UhaMap
    @UhaMap9 ай бұрын

    Спасибо, все понятно и подробно!

  • @freelance-pro

    @freelance-pro

    9 ай бұрын

    Пожалуйста 🤗

  • @Slava_144
    @Slava_1442 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Пожалуйста 😉

  • @user-xg9lz2qr5t
    @user-xg9lz2qr5t3 жыл бұрын

    все четко, одна проблема звук тихий

  • @freelance-pro

    @freelance-pro

    3 жыл бұрын

    Старое видео, в новых звук лучше))

  • @evgenijivanovych9911
    @evgenijivanovych99112 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @olyaraevskaya1047
    @olyaraevskaya10472 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @stanislavosipov2838
    @stanislavosipov28382 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Это ещё не все функции, а только важные. Не обязательно все за раз смотреть, а так же можно повторно глянуть и тогда все усвоится)) а ещё лучше смотреть как я сайты делаю от а до я там интерфейс выучите ещё и мыслить правильно в процессе создания сайта научитесь 😉

  • @alexandermikolyk7987
    @alexandermikolyk79872 жыл бұрын

    Спасибо за видео! Сколько шрифтов можно добавить в проект на бесплатном тарифе?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Пожалуйста 😉 сколько угодно ограничений нет

  • @user-bu6bz2yt7d
    @user-bu6bz2yt7d2 жыл бұрын

    Привет) Спасибо за хороший контент. Вопрос по контейнеру, почему не желательно использовать стандартный? верстать на max-width (container) 1200px не верно?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @user-bu6bz2yt7d

    @user-bu6bz2yt7d

    2 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Пожалуйста 😉

  • @evgenijivanovych9911
    @evgenijivanovych99112 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @born8008
    @born80082 жыл бұрын

    Дмитрий, не могу понять, почему у меня первая секция те так как у вас в видео 3:35 мин в самом верху, а под блоком body следующей располагается. Делаю все как на видео

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Вы сами перед этим наверно создали секцию и назвали её body удалите её 😉 боди дочерний элемент все находится в нем, а не под ним, невозможно поместить что-то за его пределы в вебфлоу. Если не разберётесь то пишите мне в телеграм помогу, что бы мне написать вот ссылка там нажмёте по телеграм artstranger.ru/study/

  • @born8008

    @born8008

    2 жыл бұрын

    @@freelance-pro спасибо большое, разобрался, где ошибкабыла

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Пожалуйста очень рад 🤗

  • @user-ol8zg6jx6x
    @user-ol8zg6jx6x Жыл бұрын

    Добрый день. Не могли бы Вы рассказать про меню "Поиск по сайту" и как можно редактировать эту форму. Например поставить вместо кнопки "Поиск" svg иконку типа Лупа. Спасибо

  • @user-ol8zg6jx6x

    @user-ol8zg6jx6x

    Жыл бұрын

    Вопрос не актуален. Разобрался. Извините

  • @freelance-pro

    @freelance-pro

    Жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    Жыл бұрын

    Задать фоновой картинкой свг-шку

  • @freelance-pro
    @freelance-pro3 жыл бұрын

    Подробно все рассказал?

  • @slavazaitcev5007

    @slavazaitcev5007

    3 жыл бұрын

    Да, видео очень полезное! И правда, через основы становится понятно, как реализовать те или иные вещи :)

  • @freelance-pro

    @freelance-pro

    3 жыл бұрын

    @@slavazaitcev5007 Спасибо! Рад что полезен!

  • @nikb9659
    @nikb96592 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Да там и без грида можно, флексбоксами, а нахлест за счёт позишн рилейтив и смешаем в нужную сторону, что будет выше или ниже задаём за счёт z-index я это покажу наглядно на одном из предстоящем видео, следующие видео будет разговорным, а потом про это))

  • @nikb9659

    @nikb9659

    2 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Записал видеоответ на ваш вопрос: kzread.info/dash/bejne/qIuml7iwnJevmto.html 😉

  • @mems_browser
    @mems_browser2 жыл бұрын

    Можно ли привязать к сайту на webflow свой личный домен?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @mems_browser

    @mems_browser

    2 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    8 ай бұрын

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

  • @mems_browser
    @mems_browser2 жыл бұрын

    Здравствуйте! Могу ли я передать сайт с моего аккаунта webflow на аккаунт webflow клиента? И хватит ли клиенту бесплатной версии webflow, чтобы содержать 1 сайт рабочий на своем аккаунте?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Здравствуйте 👋 передать сайт можно, если у вас платный тариф то сделать его длступным для клонирования, клиент его склонирует и потом вы отключите возможность клонировать свой сайт. Если тариф бесплатный, то помещаете все секции на каждой странице в один див блок (что бы за раз все можно было скопировать) и копируете просто нажав ctrl c и в аккаунте клиента нажимаете ctrl v и так с каждой страницей. Так же можно просто дать логин и пароль от вашего пользователя где сделан этот сайт и зарегистрировать себе новый аккаунт))) А старый уже будет клиента. Но я бы рекомендовал не держать сайты на вебфлоу, а использовать хостинг)) а так то да, бесплатной версии хватит, что бы содержать сайт, но булет всего 2 страницы доступно, если нужно иметь до 100 страниц на бесплатном аккаунте, то есть способ, стоит 12 долларов навсегда, там ещё возможность скачивать сайты с вебфлоу есть, вставлять код и прочие возможности платного тарифа на бесплатном аккаунте.

  • @mems_browser

    @mems_browser

    2 жыл бұрын

    @@freelance-pro Спасибо за ответ =) Я думал держать все сайты на webflow, так как бывает, что нужно какой-нибудь новый блок добавить и с помощью webflow сделаю новый блок, а если я экспортнул код сайта и буду держать на хостинге, то понимайте, что придется уже все кодом писать и делать этот новый блок... А почему вы не рекомендуйте держать сайт на webflow?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Просто если клиент знает что сайт на вебфлоу то можно и оставить его там, но вот мои заказчики про вебфлоу не знают, им оно и не нужно по сути. Поэтому я просто передаю архив с готовым сайтом или выгружать на хостинг, как они этого ожидают. Если говорить, что о будите делать сайт на каком-то там вебфлоу... то часть клиентов сольется. А это на фрилансе не допустимо ))))

  • @mems_browser

    @mems_browser

    2 жыл бұрын

    @@freelance-pro Спасибо за совет)

  • @user-jo8sb7zx5d
    @user-jo8sb7zx5d2 жыл бұрын

    Спасибо за ролик, полезный. Но ХОСПАДЕ нельзя же с таким голосом записывать видео, реально сложно слушать. Почему на других роликах всё хорошо, а тут ОЧЕНЬ сложно слушать?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Старый микрофон там, смотрите свежие ролики

  • @user-jo8sb7zx5d

    @user-jo8sb7zx5d

    2 жыл бұрын

    @@freelance-pro спасибо, но мне нужен именно этот ролик))) дослушаю и пойду по следующим)))

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

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

  • @user-vl6vl7cr8d
    @user-vl6vl7cr8d2 жыл бұрын

    Ураган

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    👍

  • @bdnn1623
    @bdnn16232 жыл бұрын

    это вам не нужно и это вам не нужно)

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    А что нужно?

  • @bdnn1623

    @bdnn1623

    2 жыл бұрын

    @@freelance-pro я о том как вы рассказываете "обзор интерфейса", но половину просто опустили, если они по вашему не нужны то зачем эти "пункты" показывать и акцентировать на них внимание)

  • @evgenijivanovych9911

    @evgenijivanovych9911

    2 жыл бұрын

    Специалисту виднее)))

  • @evgenijivanovych9911

    @evgenijivanovych9911

    2 жыл бұрын

    @@bdnn1623 скорее всего потому, что если не акцентировать внимания, то могут посыпаться комментарии "А почему Вы пропустили тот или иной пункт?". А так специалист с многолетним опытом знает, что используется в 95% случаев, а что лишь в 5% :)

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Все я пассказал как нужно было))) не вижу проблемы

  • @Ksuhaaaa1222
    @Ksuhaaaa1222 Жыл бұрын

    все ок. но работайте над дикцией, тяжело слушать.

  • @freelance-pro

    @freelance-pro

    Жыл бұрын

    Этому уроку уже сто лет, 😁 на канале есть новый курс намного лучше и записанные на новый микрофон и с медленной речью 😉

Келесі