АХ дизайн

АХ дизайн

@khudovadesign
Изображение канала: АХ дизайн
694 подписчика
7 постов
Посты
🏆 ➕ МОТ на менторстве
Юля Кучева получила награду #MadeOnTilda за сайт, который делала под моим присмотром на менторстве ✨ Поддержать проект лайком можно https://eco-arq.com">по ссылке 💕 Посмотреть сайт вживую: https://eco-arq.com/">eco-arq.com 🪄 Не смотря на «простой» дизайн, работа над проектом проходила совсем не просто, т.к. самой большой сложностью было попасть в ожидания заказчика. Но мы справились! Благодарю Юлю за трудолюбие, за внимание к мельчайшим деталям, за то, что не сдавалась в отчаянные моменты и за непревзойденную реализацию макета на Тильде 💎
Изображение поста
✨ Хлебные крошки в потоках
Недавно у меня возникла потребность сделать автоматически генерируемые хлебные крошки для статей в потоках, и для этого я слегка переписала свой код крошек для карточек товаров. Отличия незначительные, изменилось всего пара строк, но если вам не хочется самим копаться в модификации, то вот готовое решение: Правила по использованию кода те же, что и для товаров: ⭐️ Статья обязательно должна открываться как отдельная страница с назначением шапки и подвала. Код соответственно вставляется в блок Т123 либо в шапке, либо в подвале потока. ⭐️ В коде обязательно заполните словарь хлебных крошек, из которого скрипт составит соответствующий путь (выделен в коде комментарием). Словарь состоит из пар ссылок и названий. ⭐️ При желании в настройках Тильды вы можете задать свой путь потока (вместо стандартного tpost) и свою каноничную ссылку на статью в виде ЧПУ (это полезно для SEO). ❗️ Подключение библиотеки jQuery не требуется. ❗️ Также не забудьте поменять в коде стили ссылок так, чтобы внешний вид хлебных крошек соответствовал вашему дизайну. ⭐️ Пример поста с крошками по ссылке. 💜 Если у вас есть вопросы или пожелания к данной модификации, дайте знать в комментариях ☺️ #модификации #тильда #потоки
Изображение поста
🪄 Стилизация активного пункта меню в zero-блоке
Делюсь с вами модификацией, которую я писала по просьбе коллег 🐱 Если вы используете на всем многостраничном сайте меню из zero-блока, то для вас этот код, который меняет внешний вид активного пункта меню: Несколько правил по использованию кода: ⭐️ Присвойте блоку(ам) с меню класс .uc-header ⭐️ Все пункты меню сделаны с помощью элемента кнопки (Button) ⭐️ В самом начале кода скорректируйте css-свойства под ваш дизайн активного пункта ⭐️ Если вы хотите, чтобы с активным пунктом можно было взаимодействовать, сотрите свойство pointer-events: none; ⭐️ Подключение библиотеки jQuery не требуется Для случая, когда вам может понадобиться задать разные стили для кнопок первого и второго уровня меню, я оставлю код в комментариях. Правила его использования те же, только поправить нужно будет два комплекта свойств. 💭 По всем вопросам модификации пишите в комментарии к посту. #тильда #модификации #меню
Изображение поста
✨💎 Тренды веб-дизайна в 2026 году 💎✨
🪄 Представляю вашему вниманию мой ежегодный авторский прогноз популярных трендов веб-дизайна в новом году, основанный на личных наблюдениях и анализе современных сайтов. 🔵 Ссылка на статью Данный обзор было не просто составить, т.к. 2025 год был во многом неопределенным и заставил сильно задуматься, а каким же будет веб-дизайн в ближайшее время. 💭 Буду рада услышать и ваши прогнозы будущих трендов, делитесь ими смело в комментариях 😊 #дизайн #статьи #тренды
Изображение поста
🔵 Большое обновление подборки сайтов для вдохновения
Вышло финальное в этом году обновление моей авторской подборки вдохновения SwiftDesign, следующее ожидается примерно через месяц 💕 Вот небольшая статистика галереи: ⭐️ 952 всего сайтов в подборке на данный момент ⭐️ ~ 1500 посещений в месяц ⭐️ ~ 20 предложений в месяц добавить сайт в подборку ⭐️ 90% всех посетителей заходят с десктопа В следующем году 7 мая подборке исполнится уже 4 года 🥹💕 Спасибо всем, кто помогает ее развивать, рекомендует ее и пользуется ею. Я создала этот продукт исключительно с благородной целью для веб-дизайнеров для нашего с вами удобного вдохновения, и я рада каждому посетителю 🥰 💡💡 С наступающими всех праздниками! 💡💡
Изображение поста
💎 Итоги 2025 года моего канала
До конца уходящего года ожидается только еще один пост — традиционная статья о трендах веб-дизайна. А пока хочу подвести итоги канала ✨ Спасибо всем участникам канала, спасибо за вашу поддержку и отклики 😊 Для вас я делаю то, что я делаю — выпускаю тонну полезного и бесплатного контента (выпускала бы две тонны, если б не эта дурацкая работа 😁) Если кто-то хочет узнать статистику своего канала — здесь инструкция как это сделать. 💭 Ну и кто хочет — напишите в комментариях о своих итогах года, что запомнилось больше всего? 💕
Изображение поста
🔄 Обновление модификации эффекта наведения в виде «шторки» на кнопку в zero-блоке
В связи с недавним обновлением Тильды по верстке кнопок в zero-блоке моя старая модификация шторки перестала работать на сайтах, которые были опубликованы уже после выхода обновления. Если вы не трогали старые сайты с данным эффектом, то все в порядке, код можно не обновлять. Если вы переопубликовали старые сайты или верстаете новый, используйте новую версию стилей: Код для стандартных блоков по моим наблюдениям не нуждается в обновлении, только для zero-кнопок. Но если вы столкнулись с проблемами и в стандартных блоках, то попробуйте и для них новые стили. 💭 По всем вопросам модификации пишите в комментарии к посту. P.S. Спасибо подписчикам, которые обратили внимание на поломку кода и сообщили мне 🤗 Некоторые мои старые модификации также нуждаются в обновлении, и я их перепишу, но чуть позже. Хочу выждать какое-то время, пока Тильда закончит выпускать глобальные обновления верстки. Поэтому следите за обновлениями! 💕 #тильда #модификации
Изображение поста
✏️ О важности этапа прототипа
Не все дизайнеры включают в свою работу по разработке сайтов этап прототипирования, но иногда без него никак не обойтись. Ранее я уже писала про этап проектирования, но хочу ещё добавить пару слов о его важности. На скриншоте вы видите интерактивный прототип довольно большого сайта, который мы вместе с заказчиками делали несколько месяцев, он претерпел немало изменений с его первой версии, и вот наконец мы его почти согласовали. Написаны все тексты, продуманы все блоки и страницы, отрисованы все переходы и UX составляющие. Осталось только упаковать эти варфреймы в красивый дизайн, а функционал уже полностью готов. Если б не было прототипа, все это пришлось бы продумывать на этапе дизайна. И вместо того, чтобы мозг полностью погрузился в процесс рисования, ему пришлось бы делать сразу две противоположные по своей сути задачи — на логику и творчество. Согласитесь, это очень трудоёмко и, как правило, приводит к не очень хорошему результату. Поэтому я разделяю процессы прототипирования и дизайна на два разных этапа — это помогает качественнее решить данные задачи: сначала включаем логику, а потом творчество (в идеале, если эти этапы делают два разных человека). 💭 Поделитесь в комментариях, делаете ли вы прототипы? Для всех проектов или только для части? Есть ли трудности в создании прототипов? Может вам не достает теории по этому этапу? Буду рада любой вашей обратной связи 🤗 #прототип
Изображение поста
🌸 Хлебные крошки в карточке товаров
Модификация для вставки в карточку товара хлебных крошек, которые формируются автоматически исходя из пути в ссылке. Вам нужно только следовать двум правилам: ⭐️ Карточка товара обязательно должна открываться как отдельная страница. Код соответственно вставляется в блок Т123 либо в шапке, либо в подвале товара. ⭐️ В коде обязательно заполните словарь хлебных крошек, из которого скрипт составит соответствующий путь (выделен в коде комментарием). Словарь состоит из пар ссылок и названий. Впишите туда все страницы, которые могут встретиться в ваших хлебных крошках за исключением главной страницы. Код модификации: ⭐️ Подключение библиотеки jQuery не требуется. ❗️ Также не забудьте поменять в коде стили ссылок так, чтобы внешний вид хлебных крошек соответствовал вашему дизайну. ⭐️ Пример работы модификации по ссылке. 💜 Если у вас есть вопросы или пожелания к данной модификации, дайте знать в комментариях ☺️ #модификации #тильда
Изображение поста
⌛ Автоматическая подгрузка товаров в каталоге Тильды
Вместо постоянного клика на кнопку «Загрузить еще» можно использовать код, который будет это делать за вас, создавая эффект плавной подгрузки товаров по мере скролла страницы. Вставьте код в блок Т123 на страницу с каталогом: Подключение библиотеки jQuery не требуется. 💛 Если у вас есть вопросы или пожелания к данной модификации, дайте знать в комментариях ☺️ ❗️ А также, если вам нужна какая-то модификация под ваш личный запрос — не стесняйтесь мне писать! Возможно, я смогу вам помочь найти решение и за одно поделюсь им в канале на случай, если кто-то тоже столкнулся с похожей потребностью 💕 #модификации #тильда
Изображение поста
💎 Шаблон КП на Тильде
Сегодня дарю вам шаблон коммерческого предложения для дизайнера-разработчика сайтов на Тильде (подойдёт как для фрилансера так и для команды) ✨ ❤️ ID шаблона: 87847526 Шаблон выполнен в виде странички на Тильде, сверстан он на стандартных блоках (с щепоткой CSS кода). Я отдала предпочтение именно стандартным блокам, чтобы их было легко редактировать и кастомизировать под свой фирменный стиль, и не надо было заморачиваться над адаптацией. Уникальный дизайн это, конечно, хорошо, но в переговорах и продажах важнее все таки скорость и мобильность, нежели красивая обёртка. Поэтому, когда вас попросят срочно отправить КП, вы сможете сделать это незамедлительно 🔥 ⭐️ В шаблоне некоторые блоки представлены в двух вариантах для различных схем работы. ⭐️ Также я добавила навигацию по странице КП, т.к. оно получилось довольно объемным. ⭐️ Все шрифты установлены «по умолчанию», поэтому когда вы добавите шаблон себе в проект — подключатся ваши установленные шрифты. Не призываю всех и каждого делать свое КП только по этой схеме, однако мой шаблон сможет послужить вам отличной основой для формирования своего собственного КП со своими уникальными текстами и предложениями. Инструкция по добавлению шаблона в проект на Тильде: ⭐️ Зайдите в ваш проект, где вы хотите разместить КП и нажмите «+ Создать новую страницу» ⭐️ Пролистайте страницу с шаблонами до самого низа, где будет располагаться кнопка «Указать ID шаблона» ⭐️ Нажмите на нее и в появившемся поле введите идентификатор моего шаблона КП: 87847526. И страница с КП у вас в проекте! Вы великолепны! 🌸 По всем вопросам или замечаниям по шаблону добро пожаловать в комментарии 😊 P.S. Не забудьте скрывать ваши КПшки заказчикам от индексации #документы #freebie
Изображение поста
📱 Как писать скрипты для Тильды с помощью ChatGTP
Зачастую мне приходится прибегать к помощи нейросети для написания скриптов (сама я знаю JS не на столько хорошо, чтобы писать скрипты с нуля самостоятельно). Недавно я писала модификацию для калькулятора на Тильде с помощью чата GTP. Когда я ставила ему задачу, я набила несколько шишек, из-за которых код получался не совсем подходящим. В этом посте я собрала для вас несколько советов по составлению более корректного запроса к ChatGTP на написание скриптов для Тильды: ⭐️ Обязательно начинайте запрос с фразы "Напиши скрипт на чистом JS", чтобы в коде не использовалась библиотека jQuery, это слегка ускорит загрузку вашего сайта ⭐️ Для того, чтобы код применялся к конкретному элементу, заранее найдите его уникальный класс в разметке Тильды и добавьте к запросу фразу "элемент с селектором .calc_form .t-input" (даже для запроса все равно придется немного разобраться с html 🥲) ⭐️ Тщательно и по шагам опишите логику работы кода (не забываем про классы и селекторы). Например: "Элемент с классом .название_класса должен появляться из полной прозрачности за 0,5 секунд при клике на кнопку с селектором .ID_блока .класс_кнопки" ⭐️ Если вы пишите скрипт к элементу зеро блока, магазина или любого другого объекта, загружающегося на Тильде с задержкой, то в конце запроса добавьте фразу: "Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver." Дополнительные рекомендации: ⭐️ Можно сделать приписку в запросе, что сайт собран на Тильде, это поможет ChatGTP учесть ее некоторые особенности и, возможно, предложить какие-то улучшения кода ⭐️ Если вы пишите несколько скриптов для одной страницы и составляете запросы в разных диалогах ChatGTP, то надо учесть имена глобальных переменных в коде. Они ни в коем случае не должны повторяться! Глобальные переменные обозначаются с помощью слов var, let или const перед ними. Например: let value = this.value.replace(/[^\d ]/g, '').slice(0, MAX_LENGTH); здесь value — это имя глобальной переменной, и такое имя ChatGTP может использовать в своих кодах очень часто. Поэтому не допускайте повторов в именах переменных при нескольких запросах к чату GTP: "Не используй в качестве имени глобальной переменной value, оно уже занято". ⭐️ Если вам нужно, чтобы код работал только на определенном разрешении экрана, то также напишите об этом в запросе, чат GTP добавит в код медиа-запрос (отключение видимости блока с кодом в настройках Тильды не сработает). Например: "Код должен работать только на экранах размером от 960px и более" ⭐️ Если хотите отладить код и посмотреть в консоле его работу «на лету», добавьте в запрос фразу: "Добавь к коду консольное логирование". Пример полного запроса к ChatGTP: Напиши скрипт на чистом JS для сайта на Тильде, который будет выполнять следующее: - код должен запрещать вводить в инпут с селектором .calc_form .t-input любые знаки кроме цифр и пробела - также код должен ограничить максимальную длину вводимого текста в этот инпут до 7 знаков - скрипт должен предусматривать случай, если таких полей несколько на странице Не используй в качестве имени глобальной переменной input, оно уже занято. Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver. 🌸 Поделитесь и вы своим опытом в составлении запросов чату GTP в комментариях. Есть ли у вас свои фишки и приемы в общении с ним? Также можете прислать примеры своих сработавших некорректно запросов, я попробую их улучшить для вас 😊 #тильда #нейросети #модификации
Изображение поста
▶️ Уроки «Базовая теория по верстке в zero-блоке»
Представляю вашему внимаю серию из пяти мини-уроков по базовой теории верстки в zero-блоке на Тильде. В них я рассказала все основные моменты, которые пригодятся вам, чтобы освоить zero-блок и верстать в нем без неожиданных сюрпризов. Уроки идеально подойдут тем, кто только начинает работать с zero-блоком, кто ни разу не слушал мои лекции по верстке или кто хотел бы освежить свои знания по zero-блоку. Смотрите плейлист там, где вам удобно: 💻 : YouTube 💻 : ВКонтакте 💻 : RuTube Впереди еще вас ждут мастер-классы, они будут чуть позже. А пока, чтобы не задерживать ваше ожидание, публикую теоретическую часть из обещанного мной подарка. Буду очень признательна вам за любую обратную связь об уроках 🙏 #верстка #тильда #видео
Изображение поста
⏱ Открыла для себя новый таск-менеджер — TickTick
Долгое время сидела на Weeek, но меня порядком заколебали местные баги и то, как сильно усложнился UI веб-приложения за последние годы. Все еще рекомендую этот сервис, но решила пересесть на TickTick, потестирую его и скорее всего на нем и останусь — уж очень он мне понравился уже с первых минут пользования. Что мне в нем понравилось: 💛 Поддержка русского языка 🩷 Бесплатного тарифа хватает для тасков простого фрилансера 💜 Удобный, понятный и простой в обращении UI, но при этом с кучей полезных настроек При желании можно купить Премиум аккаунт, который добавляет еще больше функционала, его пока не пробовала, но может позже возьму ) Ребят, а вы пользуетесь каким-либо трекером задач? Если да — поделитесь в комментариях 😊 #сервисы #планирование
Изображение поста
🟠 Сервисы для Тильды, расширяющие ее возможности
Я собрала для вас в этой статье пять сервисов, которые добавляют Тильде новые возможности, так часто требуемые в ее стандартном функционале. Речь идет не о модификациях, а о полноценных веб-сервисах или расширениях, предназначенные для определенных задач. Отдельно хочу отметить новый сервис Arvess по импорту дизайна из Фигмы в zero-блок Тильды, который гораздо мощнее стандартного импорта. В чем его главные отличия: ⭐️ импорт фрейма любой ширины; ⭐️ импорт сразу нескольких фреймов для одного блока, под которые создаются брейкпоинты соответствующей ширины (т.е. вы переносите дизайн сразу со всеми адаптивами!); ⭐️ простые и не слишком требовательные настройки макета в Фигме; ⭐️ импорт иконок и картинок без дополнительных выгрузок в zero-блоке; ⭐️ импорт элементов со всеми эффектами наложения, тенями, обводками, прозрачностью и т.д. Сервис еще достаточно новый, но он быстро развивается. В случае обнаружения ошибок или возникновения пожеланий к сервису обязательно напишите об этом команде разработки. Все последние новости и обновления вы можете почитать на канале Arvess — подпишитесь, если вам интересно, и поддержите развитие этого полезного продукта 💜. #сервисы #статьи #тильда
Изображение поста
Flomoji - MOT🏆
🫶У меня радостная новость! Мой проект с купальниками Flomoji получил награду на МОТ 🏆 Я невероятно рада и горжусь результатом. Отдельное спасибо Саше за менторство — именно на нём я создавала этот проект, прокачивала навыки и довела идею до настоящего уровня. В итоге сайт получился понятным, стильным и сделан по всем правилам — таким, каким и должен быть современный проект.💗
Изображение поста
💎 Вызов стандартного меню ME403 своей кнопкой в zero-блоке
Делюсь с вами кодом, с помощью которого можно скомбинировать стандартное меню ME403 со своей кнопкой из zero-блока. Отличие данной модификации от стандартного вызова меню заключается в том, что ваша кастомная кнопка останется поверх вызванного меню. Благодаря этому кнопку можно сопроводить сбс-анимацией крестика, например. Демонстрацию работы модификации можно посмотреть по ссылке. Инструкция к модификации: 🔸 Создайте zero-блок, в нем разместите кнопку для вызова меню. У кнопки не нужно прописывать ссылку, но надо задать ей класс .menu_open_btn Также можно настроить сбс-анимацию для линий гамбургер-меню по превращению в крестик, как в моем примере. Зафиксируйте положение zero-блока и присвойте ему z-index равный 9999990, чтобы кнопка всегда находилась поверх меню, но ниже любого из модальных окон. 🔸 Добавьте на страницу блок ME403, настройте его как вам захочется. Но главное — обязательно поставьте галочку в настройках блока ✅ Показывать «гамбургер». В модификации можно использовать и другое стандартное меню, у которого есть возможность вызова через иконку гамбургера, но я остановилась на МЕ403, как самом универсальном. В случае использования другого меню, в коде надо заменить соответствующие стандартные классы. 🔸 Добавьте в блок Т123 код для работы кнопки по вызову меню: Подключение библиотеки jQuery не требуется. Если у вас есть вопросы или пожелания к данной модификации, дайте знать в комментариях ☺️ #модификации #тильда
Изображение поста
🌎 Текущее время на сайте
Код для вставки в зеро-блок текущего времени любой часовой зоны, которое обновляется в режиме онлайн (каждые 5 секунд): 🔸 Добавьте код в блок Т123 на ту страницу, где нужна эта модификация 🔸 Создайте в зеро-блоке текстовый элемент, задайте ему все нужные стили и поставьте его там, где вы хотите показывать время. Присвойте элементу определенный класс, например current_time_moscow. Содержание этого текстового элемента вообще не важно. 🔸 В коде уберите или добавьте столько временных зон, сколько у вас таймеров на сайте. Каждому таймеру в зеро-блоке обязательно присвойте свой класс. В моем примере три зоны: Москва, Красноярск и Владивосток. Каждому таймеру я присвоила соответствующие классы: current_time_moscow, current_time_kras и current_time_vlad. 🔸 Внутри кода у каждой зоны также свои переменные time_str_m и current_time_m для Москвы, и похожие для других городов. Будьте внимательны при добавлении новых зон — везде переименуйте эти переменные внутри блока кода отдельной временной зоны. 🔸 В коде для каждой временной зоны укажите нужный параметр в значении timeZone. Для Москвы это будет "Europe/Moscow", а для Красноярска — "Asia/Krasnoyarsk". Полный список всех параметров временных зон вы можете посмотреть здесь (второй столбец — TZ identifier). Пример работы кода можете посмотреть на этой странице. Вы также можете дополнить таймер сбс-анимацией мигания точек, как в моем примере. Если у вас есть вопросы или пожелания к данной модификации, дайте знать в комментариях ☺️ #модификации #тильда
Изображение поста
↔️ 10 анимаций для свайпа в сторону
Собрала для вас небольшую подборку анимаций для демонстрации возможности пролистать блок в сторону (особенно актуально для дизайна мобильных версий сайта). Скачать можно по этой ссылке. Откройте страницу, наведите курсор на любую анимацию, нажмите правой кнопкой и выберите «Сохранить картинку как...». 2 первых файла в формате SVG (взяты у Тильды) и имеют отличное качество в любом размере. Остальные 8 — GIF картинки размером 150х150рх, подойдут, если вам уже приелся дизайн стандартных иконок Тильды. #дизайн #freebie
Изображение поста
✅ Стили для окошка об успешной отправке сообщения
Тильда не так давно обновила дизайн сообщения об успешной отправке. И вам, возможно, захочется немного стилизовать его под дизайн вашего сайта. Я подготовила для вас несколько CSS свойств для преображения окошка об успехе: 🔸 Добавьте код в блок Т123 в шапку сайта, или в пользовательские стили (без тега style) Если у вас есть запрос на стили для других элементов окошка, дайте знать в комментариях ☺️ #модификации #тильда
Изображение поста