Обновления.
ME601B (1 фото) — двухуровневое всплывающее меню. Отлично подходит для многостраничных сайтов, при этом, лично мне хотелось бы видеть выравнивание меню по макетной сетке, а не со смещение слево. Я на один проект уже установил это меню и сразу же нашёл баг в мобильной версии — иногда отсутствует вертикальный скролл подменю.
GL25 (2 фото) — на мой взгляд, это немного видеоизменённое меню GL23. Я увидел единственную разницу — обрезка изображений по нижнему краю. Буду использовать теперь его, вместо GL23.
ТЕ610 (3 фото) — плитка с ссылкой, при наведении появляется дополнительные текст и кнопка.
FT306 (4 фото) — минималистичный футер, хорошо подойдёт для небольших сайтов до 20 страниц.
ТМ302 (5 фото) — блок с командой, интересная свежая реализация.
ME601B (1 фото) — двухуровневое всплывающее меню. Отлично подходит для многостраничных сайтов, при этом, лично мне хотелось бы видеть выравнивание меню по макетной сетке, а не со смещение слево. Я на один проект уже установил это меню и сразу же нашёл баг в мобильной версии — иногда отсутствует вертикальный скролл подменю.
GL25 (2 фото) — на мой взгляд, это немного видеоизменённое меню GL23. Я увидел единственную разницу — обрезка изображений по нижнему краю. Буду использовать теперь его, вместо GL23.
ТЕ610 (3 фото) — плитка с ссылкой, при наведении появляется дополнительные текст и кнопка.
FT306 (4 фото) — минималистичный футер, хорошо подойдёт для небольших сайтов до 20 страниц.
ТМ302 (5 фото) — блок с командой, интересная свежая реализация.
This media is not supported in your browser
VIEW IN TELEGRAM
Привет!
Я недавно создал «Идейную страницу» в которую время от времени будут добавлять различные нестандартные реализации блоков, элементов и анимации с объяснением, чтобы вы могли находить для своих работ новые идеи.
Сегодня добавил 4 варианта отображения форм в Зеро Блоке. Выглядят аккуратно и не совсем стандартно.
Ссылка на страницу: https://dmitryrybalka.ru/other/ideas-page
И кстати, теперь в товарах через модификации можно добавлять цвета и табы вариантов товаров. Посмотрите, уже работает👍
Я недавно создал «Идейную страницу» в которую время от времени будут добавлять различные нестандартные реализации блоков, элементов и анимации с объяснением, чтобы вы могли находить для своих работ новые идеи.
Сегодня добавил 4 варианта отображения форм в Зеро Блоке. Выглядят аккуратно и не совсем стандартно.
Ссылка на страницу: https://dmitryrybalka.ru/other/ideas-page
И кстати, теперь в товарах через модификации можно добавлять цвета и табы вариантов товаров. Посмотрите, уже работает👍
Спустя несколько лет я узнал кое-что о выпадающем меню😑...
Если вместо хештега поставить косую черту, то будет работать ссылка в пункте с выпадающем меню.
А для того, чтобы всплывающее меню не показывалось у всех элементов, где стоит ссылка /catalog, на всплывающее меню поставьте ссылку с хэштегом /catalog#menu.
Такие дела😑...
Если вместо хештега поставить косую черту, то будет работать ссылка в пункте с выпадающем меню.
А для того, чтобы всплывающее меню не показывалось у всех элементов, где стоит ссылка /catalog, на всплывающее меню поставьте ссылку с хэштегом /catalog#menu.
Такие дела😑...
This media is not supported in your browser
VIEW IN TELEGRAM
Новый блок: Галерея GL27.
На мой взгляд, если взять в сравнение все добавленные блоки за последние 6 месяцев, именно блок GL27 кажется наиболее свежим и современным.
В блоке настраивается: фото, заголовок, описание, расположение текста и галерея.
Где можно использовать этот блок? Например для быстрых новостей компании, последних работ, лучших товаров. Идей много, пробуйте!
На мой взгляд, если взять в сравнение все добавленные блоки за последние 6 месяцев, именно блок GL27 кажется наиболее свежим и современным.
В блоке настраивается: фото, заголовок, описание, расположение текста и галерея.
Где можно использовать этот блок? Например для быстрых новостей компании, последних работ, лучших товаров. Идей много, пробуйте!
This media is not supported in your browser
VIEW IN TELEGRAM
Идея минималистичной формы в Zero Block.
Форма состоит из 3-х элементов:
▪Форма с белыми полями
▪Разделительная вертикальная линия (pointer events: none)
▪Подложка-шейк со скруглёнными краями, обводкой и непрозрачностью 50% при наведении на форму
Кто ещё не видел, я время от времени собираю различные идеи с их описанием на одной странице: https://dmitryrybalka.ru/other/ideas-page
Форма состоит из 3-х элементов:
▪Форма с белыми полями
▪Разделительная вертикальная линия (pointer events: none)
▪Подложка-шейк со скруглёнными краями, обводкой и непрозрачностью 50% при наведении на форму
Кто ещё не видел, я время от времени собираю различные идеи с их описанием на одной странице: https://dmitryrybalka.ru/other/ideas-page
Обновление загрузки шрифтов.
Теперь можно расширить количество начертаний шрифтов до 9.
Доступен к загрузке вариативный шрифт — это один файл шрифта, который включает в себя большое количество различных начертаний и свойств этого шрифта.
Так же вы можете загрузить шрифты более современного формата .woff2 (формат, который использует Google). Различия между .woff и .woff2 можете посмотреть здесь:
▪ https://caniuse.com/woff
▪ https://caniuse.com/woff2
Теперь можно расширить количество начертаний шрифтов до 9.
Доступен к загрузке вариативный шрифт — это один файл шрифта, который включает в себя большое количество различных начертаний и свойств этого шрифта.
Так же вы можете загрузить шрифты более современного формата .woff2 (формат, который использует Google). Различия между .woff и .woff2 можете посмотреть здесь:
▪ https://caniuse.com/woff
▪ https://caniuse.com/woff2
This media is not supported in your browser
VIEW IN TELEGRAM
Презентация товара с помощью слайдера в Zero Block.
1. Загрузите в слайдер Zero Block фотографии высокого качества
2. Включите автоплей, уберите точки и стрелки
3. Поверните слайдер на 90 градусов
4. Увеличьте размер слайдера
5. Нестандартная презентация товара готова
Идея очень простая в реализации, но смотрится эффектно.
1. Загрузите в слайдер Zero Block фотографии высокого качества
2. Включите автоплей, уберите точки и стрелки
3. Поверните слайдер на 90 градусов
4. Увеличьте размер слайдера
5. Нестандартная презентация товара готова
Идея очень простая в реализации, но смотрится эффектно.
This media is not supported in your browser
VIEW IN TELEGRAM
Как убрать нижнюю полосу прокрутки при горизонтальной прокрутке блока в мобильных устройствах без использования кода?
Вы должны знать, что в настройках блоках при выставлении значения overflow:auto и выезжающих за границы элементов появляется прокрутка блока. При этом прокрутка сопровождается полосами браузера, которая часто мешает и выбивается из общего оформления сайта. Вот именно эти полосы можно убрать в мобильной версии простым способом.
В мобильной версии полоса прокрутки занимает примерно 5 px (точно не замерял). Как оказалось, эта полоса располагается всегда сверху всех элементов, кроме кнопок.
И если разместить широкую кнопку в 1000 +- px и высокой 5-10 px в самом низу блока, то эта кнопка перекроет горизонтальную полосу прокрутки.
Вот такой лёгкий лайфхак без доработки кодом вы можете использовать в своих проектах😉
Вы должны знать, что в настройках блоках при выставлении значения overflow:auto и выезжающих за границы элементов появляется прокрутка блока. При этом прокрутка сопровождается полосами браузера, которая часто мешает и выбивается из общего оформления сайта. Вот именно эти полосы можно убрать в мобильной версии простым способом.
В мобильной версии полоса прокрутки занимает примерно 5 px (точно не замерял). Как оказалось, эта полоса располагается всегда сверху всех элементов, кроме кнопок.
И если разместить широкую кнопку в 1000 +- px и высокой 5-10 px в самом низу блока, то эта кнопка перекроет горизонтальную полосу прокрутки.
Вот такой лёгкий лайфхак без доработки кодом вы можете использовать в своих проектах😉
Всем привет!
Как вы уже должны были заметить, если в Zero Block элементы располагать относительно Grid-Container, то на больших экранах в мобильных устройствах весь контент ложится ровно по центру экрана и появляются большие пустые пространства по бокам экрана.
Особенно этот момент я начал замечать с начала 2021 года, когда перешёл с iPhone X на большой экран iPhone 12 Pro Max. Контент на всех сайтах располагался ровно по центру экрана с белыми полями (см. скрин 2) и приходилось переходить на стандартные блоки или использовать Window-Container.
На днях Тильда выпустила доработку для Zero Block с помощью которой блоки, собранные относительно макетной сетки (Grid- Container) могут растягиваться относительно экрана.
Это напоминает резиновую вёрстку сайта, но в нашем случае элементы не растягиваются по экрану, а увеличиваются. На мой взгляд, простое и отличное решение👍
Будем тестировать.
Как вы уже должны были заметить, если в Zero Block элементы располагать относительно Grid-Container, то на больших экранах в мобильных устройствах весь контент ложится ровно по центру экрана и появляются большие пустые пространства по бокам экрана.
Особенно этот момент я начал замечать с начала 2021 года, когда перешёл с iPhone X на большой экран iPhone 12 Pro Max. Контент на всех сайтах располагался ровно по центру экрана с белыми полями (см. скрин 2) и приходилось переходить на стандартные блоки или использовать Window-Container.
На днях Тильда выпустила доработку для Zero Block с помощью которой блоки, собранные относительно макетной сетки (Grid- Container) могут растягиваться относительно экрана.
Это напоминает резиновую вёрстку сайта, но в нашем случае элементы не растягиваются по экрану, а увеличиваются. На мой взгляд, простое и отличное решение👍
Будем тестировать.
Совмещаем Zero Block и блок с товарами.
Описание:
Идея совмещения двух блоков заключается в наложении элементов верхнего блока на нижний. Для этого в Zero Block выставляется настройка Overflow:Visible и элементы располагаются за нижней границей блока.
Пошаговая инструкция:
1. Подготавливаем блок с 4 товарами
2. Над ним создаём Zero Block
3. В общих настройках устанавливаем Overflow:Visible
4. Добавляем шейп таким образом, чтобы он выходил за нижнюю границу видимой области Zero Block
5. В рамках 3-х колонок макетной сетки размещаем любые элементы
6. Адаптируем блок под мобильные устройства, чтобы контент не наезжал на нижний блок
7. Сохраняем. Опубликовываем. Готово👍!
Описание:
Идея совмещения двух блоков заключается в наложении элементов верхнего блока на нижний. Для этого в Zero Block выставляется настройка Overflow:Visible и элементы располагаются за нижней границей блока.
Пошаговая инструкция:
1. Подготавливаем блок с 4 товарами
2. Над ним создаём Zero Block
3. В общих настройках устанавливаем Overflow:Visible
4. Добавляем шейп таким образом, чтобы он выходил за нижнюю границу видимой области Zero Block
5. В рамках 3-х колонок макетной сетки размещаем любые элементы
6. Адаптируем блок под мобильные устройства, чтобы контент не наезжал на нижний блок
7. Сохраняем. Опубликовываем. Готово👍!
Здравствуйте дизайнеры сайтов на Тильде!
В декабре этому блогу будет 4 года. И как вы видите, за все 4 года я помогаю улучшать ваши (и свои) навыки в Тильде. Теперь, я хочу дать вам ещё больше пользы!
Я начал замечать от веб-дизайнеров потребность в новых заказах, а от заказчиков часто слышу, что трудно найти хорошего дизайнера на Тильде.
Поэтому я хочу запустить полезный проект как для вас, так и для заказчиков, но для начала нужно протестировать идею. Я составил основную цель проекта: «Помогать дизайнерам сайтов на Тильде получать новые заказы, а заказчикам быстро искать подходящего дизайнера».
Если наберу необходимо количество заявок и положительных откликов, то запущу проект в октябре-ноябре 2021 года вместе с вашей карточкой дизайнера/компании!
Что думаете на счёт этой идеи? Нужны ли вам дополнительные заказы?
А самое главное, заполни заявку на добавление в каталог!
Ссылка: https://rtng.ru
В декабре этому блогу будет 4 года. И как вы видите, за все 4 года я помогаю улучшать ваши (и свои) навыки в Тильде. Теперь, я хочу дать вам ещё больше пользы!
Я начал замечать от веб-дизайнеров потребность в новых заказах, а от заказчиков часто слышу, что трудно найти хорошего дизайнера на Тильде.
Поэтому я хочу запустить полезный проект как для вас, так и для заказчиков, но для начала нужно протестировать идею. Я составил основную цель проекта: «Помогать дизайнерам сайтов на Тильде получать новые заказы, а заказчикам быстро искать подходящего дизайнера».
Если наберу необходимо количество заявок и положительных откликов, то запущу проект в октябре-ноябре 2021 года вместе с вашей карточкой дизайнера/компании!
Что думаете на счёт этой идеи? Нужны ли вам дополнительные заказы?
А самое главное, заполни заявку на добавление в каталог!
Ссылка: https://rtng.ru