АХ дизайн

АХ дизайн

@khudovadesign
Изображение канала: АХ дизайн
694 подписчика
27 постов
Посты
🖥 Вставка стандартного блока в поп-ап 🟠
Модификация для вставки практически любого стандартного блока в поп-ап на сайтах на Тильде. Данный код позволяет легко и быстро вставить стандартные блоки внутрь поп-апа в любых количествах. Вы можете собрать даже целый лендинг в модальном окне, если хотите. Также нет ограничений и на количество поп-апов на одной странице. Модифицированные поп-апы прекрасно адаптируются под все устройства, а все их стандартные настройки задаются как обычно. Инструкция к коду и примеры его использования вы найдете в статье моего блога 💙🔵 #модификации #тильда
Изображение поста
📱 Вставка ссылки текущей страницы в сообщение в WhatsApp
Данная модификация находит кнопки с ссылками на WhatsApp и вставляет внутрь заранее набранного приветственного сообщения ссылку той страницы, на которой вы находитесь. Это актуально для товаров в поп-апах на Тильде, чья ссылка заранее неизвестна и нет возможности вставить ее сразу в сообщение. А с помощью кода вы можете написать с любой страницы товара сообщение в WA сразу со ссылкой на товар, с которого вы нажали кнопку. Это очень удобное и эффективное решение, которое положительно скажется на конверсии магазина ⭐️ Несколько вариантов кода и подробная инструкция оформлены в статье моего блога 💙🔵 #модификации #тильда
Изображение поста
🔵 Обновление сборника бесплатных модификаций для Тильды
Постепенно копирую мини коды из канала в свой блог, чтобы все моды были под рукой в одном месте 🔥 И чуть позже добавлю фильтр по категориям для более удобного поиска. Миниатюрные модификации открываются в поп-апе и снабжены кнопкой для копирования кода для вашего удобства. Небольшая инструкция к каждому из них также прилагается 💖 Модификации находятся по этой ссылке. Все новые моды продолжат выходить также на канале в первую очередь, а затем и на сайте с небольшой задержкой. #модификации #тильда
Изображение поста
🌷 С международным женским днем, мои драгоценные 💎🤗
Поздравляю прекрасную половину человечества с этим чудесным весенним праздником 🥰 Вы не только украшение нашего сообщества, но и его вдохновение и душа ✨ Сегодня я приготовила небольшой подарок (и не только девушкам) — обновление набора варфреймов 📱 В этом обновлении 32 новых блока: +9 форм (new) +3 видео (new) +4 команда (new) +6 расписание (new) +5 тарифы (new) +2 шапки +1 подвал +1 каталог +1 карточка товара Файл ожидает еще одно заключительное обновление, и на этом он будет полностью завершен. Если у вас есть пожелания, шаблоны каких блоков вы бы хотели видеть в наборе — напишите в комментариях. 💕 Также можно поделиться и своими поздравлениями с 8 марта 🌸 #прототип #freebie
Изображение поста
✨ Подборка ilovecreatives
Сегодня узнала, что недавно мой концепт для красноярского кафе Smith взяли в авторскую подборку креативных сайтов от школы ilovecreatives. Очень приятно, особенно учитывая то, что это мой один из немногих креативных проектов ☺️ (про креатив в вебе у меня, кстати, свое не очень популярное мнение, поэтому этот сайт называю креативным). Рада быть в этой подборке наряду с другими Тильда-дизайнерами, такими как Таня Дё, Поля и Маша (мои кумиры 😍), студия Naau и другие. #награды #дизайн
Изображение поста
🛍 Смена цвета лейбла в каталоге на Тильде
Если вы хотите задать разным лейблам в каталоге свой цвет в зависимости от надписи, то воспользуйтесь этим кодом: 🔸 Для работы кода убедитесь, что у вас подключена библиотека jQuery (Настройки сайта → Еще → Галочка «Подключить jQuery на страницах сайта») 🔸 В коде в строчках if (text == 'NEW') { $(this).css('background-color', '#9CB18C'); } Замените слово в кавычках на свое наименование лейбла, а HEX-код на ваш цвет. Продублируйте эти строчки друг за другом столько раз, скольким лейблам вы хотите сменить цвет. 🔸 Обратите внимание, что слово в кавычках регистрозависимо, т.е. слова 'NEW' и 'New' — это разные слова. И если в коде наименование лейбла будет указано не так, как в каталоге, то фон не поменяется. Код работает при фильтрации, пагинации и других манипуляциях с каталогом. #модификации #тильда
Изображение поста
⏺ Бесплатный мастер-класс #6
💻 Тема: Любой слайдер в зеро-блоке (пример стилизации) пример – это самая база что можно сделать, на мастер-классе я вам покажу гораздо больше интересного 📆 Когда: во вторник, 25 февраля в 18:00 по мск На мастер-классе мы с вами рассмотрим новые автолейауты в зеро-блоке на тильде и с помощью них и немножечко кода мы сделаем слайдер. Я вам покажу самые разные варианты использования и создания слайдеров, о которых вы и не догадывались, а с вас – присутствие на мастер-классе и много активности) Бонусы и запись мастер-класса можно будет получить только в чат-боте, поэтому, если не хотите ничего пропустить – подписывайтесь 🎁 Бонусы: Каждый участник, кто досмотрит мастер-класс до конца и верно напишет кодовое слово в боте – получит его запись и готовый код с подробнейшими комментариями Не забудь поставить реакцию на этот пост и конечно же поделиться со своими коллегами, если вдруг они не подписаны, потому что этот мастер-класс точно перевернёт ваше представление о зеро-блоках и их новых возможностях🔥
Изображение поста
⚡ Новый тренд веб-дизайна 2025: «Mobile only»
Одним из трендов прошлых лет был так называемый «Mobile first» — это значит что при разработке сайта первой создавалась мобильная версия, а потом от меньшего к большему все остальные разрешения. На сегодняшний день, когда мобильных пользователей в вебе стало больше половины (62% согласно #monthly-202403-202502">statcounter.com), некоторые разработчики сайтов стали руководствоваться принципом, эволюционировавшим из «Mobile first», и называется он «Mobile only». Суть этого нового направления заключается в разработке сайта только под мобильную версию (ну и легкая адаптация под декстоп, которая почти неотличима от мобилки). Привет всем разработчикам страничек на таплинке, которые уже давно были в этом тренде 😁 А если серьезно, то посмотрите примеры сайтов «Mobile only» и вы поймете их отличительные особенности, и что разрабатывать такие сайты может только очень смелый дизайнер 🔥 Примеры: 🔸 https://www.character.studio/ 🔸 https://setki-gurov.ru/ (Сергей Гуров) 🔸 https://www.danhighbrown.com/ 🔸 https://telidchenko.ru/ (Сергей Телидченко) 🔸 https://kidzfrmnowhere.com/ #дизайн #тренды
Изображение поста
🖥 Вкладки (ME602 и ME603) на всю ширину экрана
Микро модификация для того, чтобы растянуть стандартные вкладки Тильды на всю ширину экрана: 🔸 Код работает от разрешения 961рх и более, а на брейкпоинтах меньше 960рх вы устанавливаете внешний вид вкладок в настройках блока. 🔸 Код растягивает вкладки с отступами по 40рх по бокам. Если вам нужны другие отступы — поменяйте соответствующие значения в коде. #модификации #тильда
Изображение поста
⚡️ Как ускорить адаптацию дизайна в zero-блоках
Поделюсь парочкой своих лайфхаков, как оптимизировать процесс верстки адаптивов в zero-блоке Тильды: 🔸 Прежде всего я адаптирую сайт поблочно. Сверстала десктоп одного блока — и тут же все его мобильные версии. Таким образом, переходя к верстке следующего блока, я могу скопировать повторяющиеся элементы дизайна уже вместе с готовым адаптивом и сэкономить на этом время. Особенно актуально для заголовков или однотипных карточек. 🔸С появлением автолейаутов адаптация сложных массивов элементов стала гораздо легче. Достаточно правильно выставить настройки внутри АЛ, и можно их адаптировать только лишь изменением ширины группы. 🔸В ситуации, когда копии элементов смещаются относительно оригинала на 10рх вправо и вниз на адаптивах, я делаю следующее: растаскиваю элементы как получится, соблюдая только правильный порядок. Затем либо использую шорткаты от аннекса по выравниванию по одной стороне, либо кнопки на панели настроек справа (как на видео). И вторым шагом ставлю расстояние между объектами для упорядочивания. Здесь еще можно сбросить адаптив у элементов, но мне привычнее делать именно так 🙂 🔸Еще я использую всегда различные привязки, не только стандартный left / top. Например, привязав элемент к right / bottom, мне не нужно на каждом новом брейкпоинте его двигать в правый нижний угол — он всегда будет там стоять на своих координатах. Надеюсь, мои советы были вам полезны ☺️ Если у вас есть свои фишки по верстке адаптивов в zero-блоке — поделитесь ими в комментариях 💖 #верстка #тильда
Консультация «Фокус на себя»
Одина из глобальных проблем человечества — отсутствия фокуса на себе и своих целях. 📞Особенно у тех людей, которые публикуют рилсы про личной продуктивности. Там написали пост про очередной успех. Тут похвастались очередным обучением. Здесь опять в отпуске, отдыхает, медитирует. А этот дисциплинированно ходит в фитнес-зал. Да, все они стараются ради лайков, а не ради себя. И возможно половина — одноразка. 👿Из-за того, что контентом наполнены социальные сети, а не жизнь людей, складывается неправильное представление о собственных желаниях и личном счастье. Как будто нам говорят чего мы хотим и как нужно делать, к чему стремиться. На этом фоне появляется отсутствие фокуса, постоянные косяки, плохой сон (или вообще его отсутствие), стресс и в конечном счете непонимание всего, что происходит. Если вам: ➖Сложно переключиться на себя ➖Не удается расставить приоритеты и составить план на ближайшую перспективу (1-6 месяцев) ➖Не понять, какие у вас сильные и слабые стороны ➖Не ясно, с чего начать и что делать ➖Нужно сверить грандиозный план от инфоциган с реальностью и составить новый, свой личный новый план ⚡️То моя консультация «фокус на себе» для вас⚡️ На ней мы вместе с вами: ➕Распутаем этот клубок непонимания и составим четкий план действий по ближайшим целям с дедлайнами ➕Запишем важные детали о ваших сильных и слабых сторонах ➕Обсудим долгосрочные цели и желания и при желании, нарисовать дерево целей Работа серьезная и подходит только взрослым людям, которые осознают вклад этого времени в себя и готовы работать.👁 Время консультации: От 1,5 до 3 часов Стоимость: 5990₽ Чтобы записаться, пишите мне в личные сообщения: @Annvoin ⚡️
Изображение поста
➡️ Свои кнопки-стрелки для галереи zero-блока
Данный код дает возможность листать галерею zero-блока с помощью кнопок с собственным дизайном: 🔸 Для работы кода убедитесь, что у вас подключена библиотека jQuery (Настройки сайта → Еще → Галочка «Подключить jQuery на страницах сайта») 🔸 Кнопке для листания влево присвойте класс zero_gal_prev, для листания вправо — zero_gal_next, а галерее — zero_gal. 🔸 Если у вас на странице несколько блоков с галереями и для каждой своя пара кнопок, продублируйте код, а классы назовите соответственно по группам 🔸 Если нескольким галереям присвоить один и тот же класс, то они все будут листаться при нажатии одних и тех же кнопок. Пример необычного применения такого простого кода вы можете увидеть на странице демонстрации в моей статье. #модификации #тильда
Изображение поста
📱 Обновление Instagram
На днях Инстаграм у многих обновился, и одно из его обновлений затронуло то, как в профиле отображается лента постов. Теперь превью постов имеют не квадратное соотношение сторон, а прямоугольное вытянутое по вертикали. Если вы, также как и я, заморачиваетесь над дизайном раскладки постов, то для вас это важная новость. Примечательно то, что сами посты пока остаются тех же размеров: квадрат (условно 1080х1080 рх) и прямоугольник (1080х1280 рх). Превью же теперь с соотношением сторон 3:4 (1080х1440 рх), что очень странно на мой взгляд — не соответствует соотношению даже прямоугольных постов 🤔 «Пострадавшие» от этого обновления негодуют в сторис, и я немного в том числе 😅 Я думаю, нас ждет еще какое-то обновление — либо самих постов, либо превьюшек, но то, что мы имеем сейчас — это ад перфекциониста 🫣 Что думаете? )
Изображение поста
☑️ Инверсия меню в Тильде
Для того, чтобы все элементы шапки инвертировались на фоне вашего сайта, а сама шапка фиксировалась при прокрутке, используйте этот код: Блоку шапки присвойте свой класс, например, uc-diff-header. Если шапку не нужно фиксировать, а просто наложить на первый блок, то замените строку position: fixed; на position: absolute; Обязательные условия, чтобы эффект сработал: ⚡️ Все элементы меню должны быть белого цвета; ⚡️ У шапки не должно быть фона; ⚡️ У каждого блока сайта должен быть задан фон, либо фон всего сайта. Примечание: т.к. свойство инверсии указывается для всего блока, то и фиксировать его над сайтом нужно именно на этом уровне, поэтому внутренние настройки зеро-блока или стандартного для фиксации могут не сработать, их можно не проставлять. P.S. Если у вас есть запросы на какие-либо модификации для Тильды — пишите мне, я постараюсь их реализовать и выложу в открытый доступ 😊 #модификации #тильда
Изображение поста
🔥 Планы на 2025 год 🔥
Вместо поста про итоги уходящего года я поделюсь с вами своими планами на следующий (итоги у меня так себе и я подвела их сама для себя). Как многие уже знают, я ушла из школы ВВП, и соответственно там закрылись курсы по верстке и коду, для которых я писала лекции. Теперь я собираюсь самостоятельно запустить несколько образовательных продуктов в 2025 году: 1️⃣ Интенсив по дизайну — весна 2025. Давно его планировала, для него уже многое готово, осталось только записать и подготовиться к запуску. В этом недельном интенсиве я расскажу о своем методе работы над дизайном сайтов, а вы сделаете одну домашнюю работу, которую я проверю у всех участников интенсива. Запуски будут регулярными и небольшими группами. Программа интенсива рассчитана больше на начинающих дизайнеров, но подойдет и тем, кому интересно изучить мой подход. 2️⃣ Уроки по HTML и CSS для Тильды — лето 2025. Перезапуск модуля по коду курса по верстке, но с более подробной и интенсивной программой, готовыми конспектами, домашними заданиями и тестами для самопроверки. Это будет сборник лекций для самостоятельного изучения, продажи открытые (т.е. для всех), а студентам, купившим ранее модуль по коду в школе ВВП, предоставляется индивидуальная скидка. 3️⃣ Руководство по верстке на Тильде — дата выхода неизвестна. Пожалуй про этот продукт было больше всего вопросов 😅 Расскажу все подробно ) 💻 Прежде всего про формат: это будет не курс, а сборник лекций для самостоятельного изучения. Как показала практика — учить верстку в формате курса не совсем правильно, ведь верстка только часть процесса разработки, она не существует сама по себе, она идет рука об руку с дизайном. Нельзя просто так прийти на верстку и начать верстать, сначала нужен макет, а это рождает множество проблем: где взять макет для курса по верстке, а если макет не достаточно сложный, а что если он не подходит под конкретный тип верстки и т.д. В итоге я решила сделать не курс, а руководство, которое вы смотрите и практикуете тогда, когда вам надо, когда у вас уже есть реальный макет на верстку. Смотрите уроки по тому типу верстки, который вам нужен и который вам нравится, и не заставляете себя рисовать и учить тот тип, который вам не по душе. Но для вашей практики я подготовлю макеты специально для каждого типа верстки, поэтому для желающих отработать все возможные навыки верстки не будет проблем с поиском подходящего макета. 💡 Теперь о содержании: руководство будет максимально полным. Оно будет включать уроки по Тильде, начиная от знакомства с интерфейсом Тильды и заканчивая самыми сложными способами верстки в зеро-блоке. Будут уроки и по анимации, личным кабинетам, магазину и потокам. Также я запишу лекции и по новому способу верстки — Автолейауты, включая АЛ по Window контейнеру и всему артборду zero-блока, выход которых запланирован на 2025 год. Это будет принципиально новый метод верстки, пятый по счету можно сказать, и на мой взгляд единственно правильный, поэтому буду уделять ему больше всего внимания. Дата выхода данного руководства мне пока неизвестна, т.к. я буду ждать полноценного релиза Автолейаутов. Продажи руководства также будут открытые, а студентам, купившим ранее курс по верстке в школе ВВП, предоставляется индивидуальная скидка. 💖 На этом анонс окончен, если у вас есть вопросы или предложения — пишите в комментариях 😊 #обучение
Изображение поста
Как в горизонтальной zero форме переместить поле с галочкой вниз
По умолчанию горизонтальная форма в zero блоке с галочкой выглядит как на примере сверху. Но мы с вами привыкли рисовать поля формы как на примере снизу. Чтобы переместить галочку вниз, а остальные поля растянуть на оставшееся пространство, используйте этот код: 🔸 Чтобы код заработал, вставьте его в блок Т123 (или в хедер сайта без тегов