29 января буду проводить вебинар «Дизайн и вёрстка в прямом эфире: разбор шаблона Bloomly» на канале Tilda Publishing 🖤
Хотелось бы не просто рассказать как создавался шаблон, а дать практическую пользу, применимую в других проектах.
• Пройдемся по всем этапам разработки (задача, рефы, дизайн),
• Затем разберем вёрстку нескольких блоков, с анимацией и автолейаутами,
• Отдельно уделим время мобильной адаптации,
• В конце покажу пример, как легко видоизменять шаблон под другую нишу. (Ведь главной задачей было создать именно шаблон-конструктор, где можно менять блоки местами, удалять ненужные или наоборот расширять существующие)
Надеюсь на вашу поддержку 🫶🏻
Запись на эфир: https://webinars.tilda.ru/design-live-bloomly
Хотелось бы не просто рассказать как создавался шаблон, а дать практическую пользу, применимую в других проектах.
• Пройдемся по всем этапам разработки (задача, рефы, дизайн),
• Затем разберем вёрстку нескольких блоков, с анимацией и автолейаутами,
• Отдельно уделим время мобильной адаптации,
• В конце покажу пример, как легко видоизменять шаблон под другую нишу. (Ведь главной задачей было создать именно шаблон-конструктор, где можно менять блоки местами, удалять ненужные или наоборот расширять существующие)
Надеюсь на вашу поддержку 🫶🏻
Запись на эфир: https://webinars.tilda.ru/design-live-bloomly
Please open Telegram to view this post
VIEW IN TELEGRAM
Насыщенный 2025 🍷
По прожитым эмоциям как будто не год прошел, а пять. Оставлю здесь лишь несколько моментов (кажется, никогда так много не фотографировала, как за последние месяцы).
Итогов как обычно не будет, и планов тоже. Есть понимание куда двигаться, и этого достаточно.
Хочется поздравить всех с Наступающим и пожелать не забывать просто жить. 😌 И копить те самые счастливые мгновения, которые потом вспоминаешь с улыбкой)
По прожитым эмоциям как будто не год прошел, а пять. Оставлю здесь лишь несколько моментов (кажется, никогда так много не фотографировала, как за последние месяцы).
Итогов как обычно не будет, и планов тоже. Есть понимание куда двигаться, и этого достаточно.
Хочется поздравить всех с Наступающим и пожелать не забывать просто жить. 😌 И копить те самые счастливые мгновения, которые потом вспоминаешь с улыбкой)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
5❤🔥31
Media is too big
VIEW IN TELEGRAM
Как сократить время верстки?
• Подготовить все материалы заранее
• Использовать глобальные стили для текстов
• Для кнопок тоже + адаптивная ширина
• Применять автолейауты
• Постараться запоминать основные горячие клавиши
На вебинаре сверстаем такой же и еще парочку блоков вместе.
На видео пример использования шаблона, но под другую нишу. Хочу показать насколько просто адаптировать его под свои задачи.
• Подготовить все материалы заранее
• Использовать глобальные стили для текстов
• Для кнопок тоже + адаптивная ширина
• Применять автолейауты
• Постараться запоминать основные горячие клавиши
На вебинаре сверстаем такой же и еще парочку блоков вместе.
На видео пример использования шаблона, но под другую нишу. Хочу показать насколько просто адаптировать его под свои задачи.
❤30
Forwarded from DUB DIGITAL
Чувствую еще больший азарт выложиться на следующих проектах и забрать рыжую
Ну а пока немного радости и гордости за себя и Алёну, она внесла большой вклад в реализацию проекта)) @alen_spirina, спасибо и поздравляю!
Глянуть проект можно тут, а сайт вот здесь)
Please open Telegram to view this post
VIEW IN TELEGRAM
11❤🔥43🔥26
Media is too big
VIEW IN TELEGRAM
В последнее время много проектов именно на вёрстку (чуть позже, если получится, расскажу подробнее про них).
Но что интересно, постоянно это какая-то проверка возможностей, всё новые решения, которые еще не применяла (ChatGPT в этом плане просто спасение).
Собрала некоторые фрагменты в видео, поделюсь хотя бы так)
Но что интересно, постоянно это какая-то проверка возможностей, всё новые решения, которые еще не применяла (ChatGPT в этом плане просто спасение).
Собрала некоторые фрагменты в видео, поделюсь хотя бы так)
10
Ребят, спасибо за вашу поддержку! ❤️
Запись вебинара уже доступна:
📱 в ВК Видео → https://vk.com/video-89546664_456240457
📺 на YouTube → https://www.youtube.com/live/88ToHs1auDw
Все ссылочки с эфира:
Альтернативная версия шаблона (ID 108707946)
⛓ https://formestudio.tilda.ws/
Фигма с Bloomly и дизайн-китом:
⛓ https://clck.ru/3RWzkx
Конспект по вёрстке:
⛓ https://alenaspirina.ru/blog/bloomly
Ресурсы для поиска референсов:
⛓ https://alenaspirina.ru/refs
Поздно увидела уже все вопросы, если на что-то не ответила — дублируйте в комментариях к этому посту, постараюсь ответить)
Запись вебинара уже доступна:
Все ссылочки с эфира:
Альтернативная версия шаблона (ID 108707946)
Фигма с Bloomly и дизайн-китом:
Конспект по вёрстке:
Ресурсы для поиска референсов:
Поздно увидела уже все вопросы, если на что-то не ответила — дублируйте в комментариях к этому посту, постараюсь ответить)
Please open Telegram to view this post
VIEW IN TELEGRAM
30❤61🔥37
ЖК Кварталы Чехова (Владивосток) / Кейс по вёрстке
Объёмный и интересный проект, который нужно было закрыть в сжатые сроки.
Из особенностей:
• Сложные анимации на Главной
• Карточки статей потоков в Zero
• Доработка каталога под дизайн-макет
• Кастомизация страницы товара
Так как страниц квартир и коммерческих помещений много, необходимо было реализовать всё через каталог Тильды, используя лишь CSS и JS через header и footer каждой карточки.
В итоге:
• Доработка CSS под макет
• Динамические заголовки в карточках
• Кнопка «Скачать презентацию» с разной логикой для квартир и коммерции
• Уникальные SEO-параметры для каждого помещения через JS
⛓ https://kv-chekhova.ru
Проект реализован совместно с @itcultura и @DubDigitalPro
#кейс_вёрстка@spirina_design
UPD: +1 #madeontilda
Объёмный и интересный проект, который нужно было закрыть в сжатые сроки.
Из особенностей:
• Сложные анимации на Главной
• Карточки статей потоков в Zero
• Доработка каталога под дизайн-макет
• Кастомизация страницы товара
Так как страниц квартир и коммерческих помещений много, необходимо было реализовать всё через каталог Тильды, используя лишь CSS и JS через header и footer каждой карточки.
В итоге:
• Доработка CSS под макет
• Динамические заголовки в карточках
• Кнопка «Скачать презентацию» с разной логикой для квартир и коммерции
• Уникальные SEO-параметры для каждого помещения через JS
Проект реализован совместно с @itcultura и @DubDigitalPro
#кейс_вёрстка@spirina_design
UPD: +1 #madeontilda
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥41🔥27
This media is not supported in your browser
VIEW IN TELEGRAM
Нас 1000 🖤 (просто шок 😅)
Ребят, огромное спасибо, что подписаны и читаете 🫶
Хочу поделиться полезной модификацией из последнего проекта. (Так как главная страница достаточно объемная, многие коды пришлось либо писать с нуля, либо облегчать)
➕ Тултипы в Zero-блоке, но с определенной задачей:
• Десктоп — открытие по ховеру, изначально все скрыты;
• Мобилка — открытие по клику, 1 группа элементов изначально видна;
• Количество триггеров — не ограничено, количество появляющихся элементов — тоже;
• Можно применять как к группам Object, так и к отдельным элементам;
• Легко адаптировать под свой проект (пару примеров добавила в статью).
Ссылка на код и инструкцию:
⛓ https://alenaspirina.ru/blog/tooltips
Если возникнут вопросы, или хотите, чтобы разобрала другой блок — пишите в комментарии 👌
Ребят, огромное спасибо, что подписаны и читаете 🫶
Хочу поделиться полезной модификацией из последнего проекта. (Так как главная страница достаточно объемная, многие коды пришлось либо писать с нуля, либо облегчать)
• Десктоп — открытие по ховеру, изначально все скрыты;
• Мобилка — открытие по клику, 1 группа элементов изначально видна;
• Количество триггеров — не ограничено, количество появляющихся элементов — тоже;
• Можно применять как к группам Object, так и к отдельным элементам;
• Легко адаптировать под свой проект (пару примеров добавила в статью).
Ссылка на код и инструкцию:
Если возникнут вопросы, или хотите, чтобы разобрала другой блок — пишите в комментарии 👌
Please open Telegram to view this post
VIEW IN TELEGRAM
10❤60
Отзыв о консультации 🖤
Перед созвоном мы заранее определимся с вашим запросом: это может быть разбор работы, фриланс и продвижение, вопросы по ведению проекта, вёрстке и тд.
Стоимость — 7500 ₽/час.
#консультации@spirina_design
Перед созвоном мы заранее определимся с вашим запросом: это может быть разбор работы, фриланс и продвижение, вопросы по ведению проекта, вёрстке и тд.
Стоимость — 7500 ₽/час.
#консультации@spirina_design
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥26