Галерея изображений (фотографий или любых картинок) разные способы оформления на webflow. Урок №12

Поділитися
Вставка
  • Опубліковано 13 гру 2024

КОМЕНТАРІ • 46

  • @freelance-pro
    @freelance-pro  2 роки тому +3

    - Материалы с данного видео freelance-blog.webflow.io/course
    - Полезные штуки для webflow freelance-blog.com/webflow/
    - Индивидуальное обучение freelance-blog.com/study/
    Таймкоды:
    00:00 Старт
    00:51 Рассматриваем инструменты вебфлоу, которые еще не изучены
    12:35 Делаем основу для простой галереи
    18:06 Галерея с вертикальными колонками
    21:37 Нестандартные способы оформления
    38:26 Добавляем элементы поверх изображений (описание и т.д.)
    41:31 Анимируем элементы которые поверх картинок
    45:15 Делаем галерею которая увеличивает картинки при клике
    51:25 Делаем эффект при наведении мышки на фото (анимация иконки зума)
    58:11 Создаем эффект заливки цветом при ховере
    01:03:51 Проектируем полноценную анимацию наведения курсора
    01:06:34 Выводы

  • @Жизньиразвитие-н2ь

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

    • @freelance-pro
      @freelance-pro  Рік тому

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

  • @nefedorbondarchuk7662
    @nefedorbondarchuk7662 Рік тому

    Смотрю все ролики подряд. Автору контента большая благодарность за труд!

    • @freelance-pro
      @freelance-pro  Рік тому

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

  • @alma4ka2
    @alma4ka2 Рік тому +1

    Большое спасибо за полезные и подробные уроки! Только у вас нахожу всю информацию)

    • @freelance-pro
      @freelance-pro  Рік тому

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

  • @miroed
    @miroed Рік тому +1

    Шикарный урок. Некоторые эффекты даже никогда не видел на других сайтах!

    • @freelance-pro
      @freelance-pro  Рік тому

      О это значит надо их использовать и виделяться))

  • @fmdevelop
    @fmdevelop 2 роки тому +1

    Как всегда суперский урок! Смотрю по-очереди один за другим и, наконец-то, добрались до очень важной темы. Без фотогалереи у меня не было в работе ни одного сайта. Обязательный элемент. Спасибо!

  • @Andyuiux
    @Andyuiux Рік тому +1

    Спасибо вам за уроки. Схватываю на лету!)

  • @1eremeev447
    @1eremeev447 Рік тому +2

    Тяжело себя заставить сесть учиться, но я стараюсь)
    Спасибо тебе за труд!

    • @freelance-pro
      @freelance-pro  Рік тому

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

    • @ЮрийИванов-д5д4е
      @ЮрийИванов-д5д4е Рік тому +3

      @@freelance-pro , у меня наоборот мотивация появилась раньше проснутся и сесть за компьютер, потому что интересно смотреть и учиться;)

    • @freelance-pro
      @freelance-pro  Рік тому

      О это отлично, и как ваши успехи сейчас?

  • @ramza1872
    @ramza1872 2 роки тому +1

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

  • @IvannaIv-cy6sj
    @IvannaIv-cy6sj 2 роки тому +1

    Благодарю : )

  • @pein2448
    @pein2448 2 роки тому +1

    Спасибо большое.Моё мнение это то что выпуск был, не настолько нужным вы нам и так всё объясняли про картинки😅.В любом случае спасибо что выкладываете новые видео

  • @ЕленаПономаренко-у9е

    Спасибо

  • @SvetlanaTonkich
    @SvetlanaTonkich Рік тому +1

    Много информации, голова пухнет, но очень интересно. Я понимаю, что для профи это не сложно.

    • @freelance-pro
      @freelance-pro  Рік тому

      Как сейчас ваши дела? Освоили вебфлоу? Работаете на нем?

  • @procrastinator3219
    @procrastinator3219 11 місяців тому +1

    1:03:04 когда на центр наводишь (на плюсик-крестик) прозрачность фотографии исчезает - так должно быть?

    • @procrastinator3219
      @procrastinator3219 11 місяців тому +1

      нашел ответ в конце ролика)))

    • @freelance-pro
      @freelance-pro  11 місяців тому

      Рад что все решилось ))

  • @terekhova__l
    @terekhova__l Рік тому +1

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

    • @freelance-pro
      @freelance-pro  Рік тому

      Все всегда делаем через Ховер если сделать через обычный Ховер нельзя тогда прибегаем к интеракциям вот вся разница

  • @cshshells935
    @cshshells935 11 місяців тому

    Отличная идея! ... а можно ли экспортировать созданный код галереи из webflow и перенести эту красоту например на страницу материала в другую цмс джумлу или WP, конечно же внедривив все созданные стили в стили шаблона, с тем чтобы где нужно например вставлять хтмл код с этой сеткой заменяя ссылки на картинки? Цель - отказаться от плагинов и расширений которые как правило имеют СЕО-недостатки в данных ЦМС или обновляются крайне вяло или очень громоздки и раздувают код страницы...?
    - Ну и имеет ли смысл, по времени и трудозатратам? Ведь создать в webflow галерейку с чистым кодом проще чем например снуля писать тоже самое програмисту...? Как вы считаете?

    • @freelance-pro
      @freelance-pro  11 місяців тому

      Да это возможно и не сложно в целом

  • @dianagalindoraya1931
    @dianagalindoraya1931 2 роки тому +2

    А с помощью знаний которые Вы даёте, можно устроиться работать UX/UI дизайнером в агенство или фирму в сфере IT? Или их недостаточно и они только фрилансерам подойдут? Спасибо

    • @freelance-pro
      @freelance-pro  2 роки тому +2

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

  • @antonfedotov6125
    @antonfedotov6125 Рік тому

    То что было показано на 48:10 (по добавлению 2й фотки во флекс бокс) почему то не сработало - 2я добавляемая фотка не имеет свойств как было показано для 1й фотки. Жаль что иногда скрыт левый столбец навигатора.

    • @antonfedotov6125
      @antonfedotov6125 Рік тому

      Чтобы это работало - нужно для каждой фотки создавать флекс-бокс, а не пихать 2ю фото во флекс-бокс 1й?

    • @freelance-pro
      @freelance-pro  Рік тому

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

    • @freelance-pro
      @freelance-pro  Рік тому

      Да надо будет его всегда оставлять в зоне видимости

  • @andrei-kozlov-developer
    @andrei-kozlov-developer 10 місяців тому

    А почему не стоит использовать стандартное подчеркивание, а лучше тенью? Что плохого в стандартном?

    • @freelance-pro
      @freelance-pro  10 місяців тому

      Оно режет буквы и не настраиваемое

  • @ArtemRaevskij
    @ArtemRaevskij 7 місяців тому

    а нет ссылки на проект? Что бы можно было посмотреть

    • @freelance-pro
      @freelance-pro  7 місяців тому

      Есть ссылка доступная ученикам про это и еще много полезного тут 👉 freelance-blog.com/webflow/

  • @procrastinator3219
    @procrastinator3219 11 місяців тому

    как удалять классы в современном веблоу?

    • @freelance-pro
      @freelance-pro  11 місяців тому

      Ответ тут 👉 Обзор вчерашних обновлений webflow! Новый интерфейс, новый функционал новые возможности!
      ua-cam.com/video/AI9CIwhUWCY/v-deo.html