Иконки на Тильде
Друзья, в этой статье мы расскажем вам что из себя представляют иконки, зачем они нужны, расскажем про библиотеку иконок от Тильда, а также поделимся практическими рекомендациями, как правильно их использовать на сайте.
Содержание
- Что такое иконки?
- Где взять иконки для сайта?
- 10 сайтов где вы можете бесплатно скачать иконки
- Лицензии иконок
- Как выбрать иконки для сайта?
- Как добавить иконку в Тильде?
- Как добавить фавикон?
- Как изменить иконки в стандартных блоках?
- Модификации для блоков с иконками в Тильде от Нолим
- А как сделать на Тильде?
- Как поменять цвет иконки?
- Заключение
Что такое иконки?
Иконки — это небольшие графические изображения объектов или действий, которые используются для обозначения различных элементов и функций сайта. Значение иконок в веб-дизайне заключается в том, что они помогают пользователям быстрее ориентироваться на сайте, облегчают навигацию и поиск информации, и в целом делают сайт более понятным и доступным для пользователей. Кроме того, иконки могут использоваться для создания уникального и запоминающегося стиля сайта, а также для улучшения его внешнего вида и эстетического впечатления.
Они могут быть выполнены в различных стилях и форматах, и часто включают в себя узнаваемые символы или образы, связанные с конкретной тематикой или деятельностью сайта. Качественные иконки могут помочь привлечь внимание посетителей и повысить удобство пользования сайтом, что в свою очередь может привести к увеличению трафика и конверсии.
Важно также помнить, что иконки являются эффективным средством визуальной коммуникации, которое позволяет передавать информацию без использования слов и языковых барьеров. Иллюстрации легко понимаются всеми пользователями, поэтому иконки широко используются на сайтах, в интерфейсах, в операционных системах, в презентациях и в рекламе.
Поэтому выбор и дизайн иконок является важным аспектом веб-дизайна, и должно уделяться достаточное внимание при разработке сайта.
Виды иконок
Существует множество видов иконок, которые могут использоваться на веб-сайте, чтобы помочь пользователям быстро и легко находить информацию и осуществлять действия. Вот некоторые из наиболее распространенных видов иконок на сайте:
- Навигационные иконки — это иконки, которые используются для навигации по сайту. Они могут включать иконки меню, стрелки, знаки табуляции и т.д.
- Функциональные иконки — это иконки, которые обозначают определенную функцию или действие на сайте. Например, иконка «Корзина» для добавления товаров в корзину или иконка «Поиск» для поиска информации на сайте.
- Иконки контента — это иконки, которые используются для упрощения восприятия информации, например для описания преимуществ
- Иконки социальных сетей — это иконки, которые используются для связи с профилями в социальных сетях. Они могут включать иконки VK, WhatsApp, Telegram и т.д.
Навигационные иконки
Функциональные иконки
Иконки контента
Иконки социальных сетей
Преимущества иконок
Использование иконок на сайте или в приложении имеет несколько преимуществ:
- Могут заменять текст. Когда место для букв ограничено или когда необходимо сэкономить время пользователей, которые не будут читать текст. Также иконки особенно полезны в приложениях с низким разрешением экрана, где необходимо использовать понятные и ясные иконки, чтобы передать смысл.
- Ориентиры в тексте. Иконки могут сделать текст более понятным и привлекательным для читателя. Независимо от того, насколько хорошо организован текст, размещение тематических иконок на ключевых местах дополнительно привлечет внимание читателя и подчеркнет смысл текста.
- Улучшает восприятие информации. Использование иконок может значительно улучшить восприятие информации и помочь запомнить ее, особенно в ситуациях, когда нужно быстро обучить пользователя или вызвать определенные ассоциации. Например, использование знакомых и узнаваемых иконок для пользователя может значительно облегчить понимание структуры работы вашего нового сервиса, а также помочь лучше запомнить его функционал.
Как и где используют иконки
Иконки могут быть полезны в различных ситуациях, в зависимости от цели, которую нужно достичь. Например
- Для улучшения навигации по сайту, иконки могут использоваться в шапке и подвале сайта
- Для перечисления преимуществ или возможностей продукта или услуги
- Для демонстрации схемы и этапов работы процесса
- Чтобы выделить ключевые моменты или услуги
- Для демонстрации различий в тарифных планах или комплектациях
Пример использования иконок
Использование иконок ускоряет восприятие информации и помогает ее более эффективно передать. Давайте на примере блока с преимуществами компании, рассмотрим как иконки помогают пользователю:
На скриншоте показан блок FR201 “Колонки с большими иконками”
Дизайнер использовал привычные и знакомые иконки для передачи информации. Например, звездочка используется для отзывов, щит — для безопасности, а деньги — для цен, и т.д. Каждая иконка на этом примере помогает быстрее и легче воспринимать информацию. И что будет, если мы уберем их?
На скриншоте показан блок FR201 “Колонки с большими иконками”
В первом примере иконки помогают быстрее воспринимать преимущества компании. Однако, когда мы убрали иконки, скорость восприятия снизилась, потому что люди обычно лучше понимают информацию, представленную в виде образов.
А вот как лучше не делать
Важно, чтобы образы были понятны и знакомы пользователю, в противном случае они могут оказаться бесполезными. Взгляните на этот пример:
На скриншоте показан блок FR201 “Колонки с большими иконками”
В этом приеме допущены следующие ошибки:
- Иконки использованные в этом блоке, не являются понятными и не соответствуют значениям, которые необходимо передать. Например, иконка календаря не подходит для объяснения времени работы компании, а иконка инструментов не является подходящей для описания опытных профессионалов. Для обеспечения ясности и соответствия важно выбирать иконки, которые четко и однозначно передают нужный смысл. Рекомендуется использовать иконки, которые явно связаны с передаваемыми значениями и с легкостью их идентифицируют.
- Вторая ошибка заключается в использовании иконок, которые отличаются по стилю. Смешение разных стилей иконок может создавать впечатление хаоса и ухудшать качество дизайна. Поэтому важно выбирать иконки, которые гармонично сочетаются друг с другом. Ниже мы подробнее расскажем о сочетании иконок.
где взять иконки для сайта?
Существует множество ресурсов в Интернете, где можно найти иконки, которые можно скачать бесплатно или купить готовый набор или отдельные значки. Вот несколько вариантов:
в Тильде
В интерфейсе Тильды встроен поиск картинок и значков, который включает в себя поиск в Google, сервисе Linea.io и в коллекции бесплатных иконок Tilda Icons.
- Перейти к блоку с иконками
- Открыть меню «Контент» блока
- В карточке блока нажать на ссылку «Искать в библиотеке»
Иконки в данной библиотеки представлены в хорошем качестве, а также имеют лицензию, которая позволяет бесплатно использовать скачанные иконки.
Скриншот был взят с библиотеки бесплатных иконок Tilda Icons
отрисовать самому или заказать иконки у иллюстратора
За счет того что иконки это небольшие графические изображения и зачастую имеют простые формы, отрисовка их является не сложной задачей. Однако, важно учитывать единую стилистику и консистентность при создании своих иконок.
Если же вам нужны качественные и эксклюзивные иконки, то вы можете заказать их у иллюстраторов на специализированных биржах:
Пример сетки для разработки иконки
Скриншот был взят с сайта weblancer.net
Скриншот был взят с сайта freelance.habr.com
Скриншот был взят с сайта freelance.ru
Скриншот был взят с сайта Fl.ru
Скриншот был взят с сайта behance.net/search/users?search=icons
Скриншот был взят с сайта dribbble.com/search/icons?source_file=.ai&q=icons
10 сайтов где вы сможете бесплатно скачать иконки
Онлайн-библиотека иконок, содержащая более 3 миллионов значков, созданных сообществом дизайнеров со всего мира. С помощью этого сервиса вы можете найти и скачать нужные иконки для своих проектов, а также загрузить свои собственные иконки и поделиться ими с другими пользователями. The Noun Project также предлагает платные планы, которые позволяют использовать иконки без атрибуции и получить доступ к дополнительным функциям.
Скриншот был взят с сайта thenounproject.com
Платформа, где можно найти иконки и векторные изображения от дизайнеров со всего мира. На сайте более 4 миллионов иконок в различных стилях и форматах, в том числе PNG, SVG, AI, EPS и ICO. Пользователи могут выбирать между бесплатными и платными иконками, а также использовать функцию поиска, фильтрации и сортировки. Кроме того, на Iconfinder есть возможность заказать у дизайнера уникальные иконки. Сервис пользуется популярностью среди дизайнеров и разработчиков, которые ищут качественные иконки для своих проектов.
Скриншот был взят с сайта iconfinder.com
Сервис, предоставляющий большой выбор иконок и графических элементов для использования в различных проектах. В библиотеке сервиса более 140 000 векторных иконок, которые можно использовать бесплатно или приобрести лицензию на коммерческое использование. Icons8 также предоставляет удобный инструмент для поиска иконок, а также позволяет настраивать цвет и размер выбранной иконки прямо на сайте. Сервис также предлагает и другие инструменты для дизайнеров, такие как генератор цветовых схем и бесплатные шрифты.
Скриншот был взят с сайта icons8.com
Библиотека более 4 миллионов бесплатных иконок, созданных дизайнерами со всего мира. На сервисе можно найти иконки разных стилей, цветовых схем и форматов. Все иконки разделены по тематикам, что упрощает поиск нужной иконки. Большинство иконок доступны бесплатно в формате PNG, но также есть возможность купить премиум-пакеты и получить доступ к дополнительным функциям. Сервис также предоставляет инструменты для редактирования и изменения иконок перед их скачиванием.
Скриншот был взят с сайта flaticon.com
Важно отметить, что лучше всего использовать иконки в формате SVG, так как этот формат обеспечивает масштабируемость без потери качества, имеет меньший размер файлов, легко редактируется, поддерживает анимацию и делает сайт более привлекательным и производительным.
Dprofile — это инфраструктурный проект для развития дизайн-сообщества. С упором на экспертность, насмотренность и коммерческую востребованность специалистов. Dprofile предоставляет пользователям возможность создавать портфолио, публиковать свои работы и следить за творчеством других людей.
Несмотря на то что платформа используются больше для публикации работ в качестве презентации, там можно найти готовые наборы с красивыми иконками по запросу icons.
Скриншот был взят с сайта dprofile.ru/search?query=icons
Онлайн-платформа, созданная Adobe, для представления и продвижения творческих работ в различных областях, включая дизайн, иллюстрацию, фотографию, анимацию и т.д. Behance предоставляет пользователям возможность создавать портфолио, публиковать свои работы и следить за творчеством других людей. Сайт также используется работодателями для поиска талантливых специалистов.
Несмотря на то что платформа используются больше для публикации работ в качестве презентации, там можно найти готовые наборы с красивыми иконками по запросу free icons.
Скриншот был взят с сайта behance.net/search?search=free+icons
Бесплатная онлайн-библиотека, где вы можете скачать иконки высокого качества в форматах SVG, PNG и ICO. На сайте можно найти более 4784+ иконок различных категорий, таких как технологии, еда, музыка, природа и многое другое. Iconmonstr предоставляет пользователю возможность выбрать нужный размер, цвет и формат иконки перед ее скачиванием.
Скриншот был взят с сайта iconmonstr.com
Онлайн-магазин графических ресурсов, включая иконки, шаблоны веб-дизайна, текстуры, шрифты и многое другое. Он предлагает широкий выбор продуктов, созданных профессиональными дизайнерами, и часто обновляется новыми добавлениями. PixelsMarket также предлагает возможность получить доступ к некоторым продуктам по подписке, что может быть выгодно для дизайнеров и компаний, которые постоянно нуждаются в графических ресурсах.
Скриншот был взят с сайта pixelsmarket.com/category/icons
Онлайн-ресурс, предоставляющий графические ресурсы для дизайнеров, включая готовые наборы иконок, UI компоненты, шаблоны визиток, баннеры, фоны и многое другое. Особенностью Graphicsfuel является то, что большинство ресурсов, предоставляемых на сайте, бесплатны для использования в личных и коммерческих проектах.
Скриншот был взят с сайта graphicsfuel.com/category/icons/
Онлайн-сообщество для дизайнеров и разработчиков, которое предоставляет доступ к различным материалам, связанным с веб-дизайном и разработкой. На сайте можно найти бесплатные ресурсы, такие как иконки, шаблоны, кисти и многое другое. Кроме того, Fribly содержит блог с полезными статьями и советами по дизайну и разработке веб-сайтов. Сайт также позволяет пользователям создавать свой профиль и общаться с другими дизайнерами и разработчиками через форум.
Скриншот был взят с сайта fribly.com/tag/icon/
Возможно, некоторые сервисы для скачивания иконок могут быть недоступны в РФ из-за ограничений доступа
В случае, если в бесплатных наборах иконок не было найдено подходящего варианта идеально сочетающихся с концепцией вашей страницы, стоит рассмотреть возможность их покупки. Этот вариант окажется более экономически выгодным, поскольку наборы иконок продаются многократно, в отличие от заказа индивидуальной разработки иконок у иллюстратора. К счастью многие сервисы представленные выше, дают такую возможность.
Лицензии иконок
Иконки, как и другие графические изображения, могут быть защищены авторским правом, поэтому важно убедиться в их лицензионности перед использованием.
Если вы скачиваете бесплатные иконки, распространяемые по лицензии Creative Commons, вам нужно проверить, разрешено ли использование данных иконок для коммерческих целей. Если страница или сайт, на котором будут использоваться иконки, направлена на извлечение прибыли, то это считается коммерческим использованием, и вы должны убедиться, что иконки имеют соответствующую лицензию.
Кроме того, важно правильно указывать авторство иконок по лицензии Creative Commons. Это требуется обязательно, и нарушение правил может привести к юридическим проблемам.
Делается это по шаблону «Имя автора / Наименование источника / Тип лицензии».
Пример: Robert Addington / Flaticon / CC BY-SA или Moscow State University / Wikimedia / CC BY
Если же иконки распространяются по другой лицензии, необходимо ознакомиться с правилами ее использования и следовать им. Лучше всего обращаться к авторам иконок или в поддержку сервиса, на котором вы скачали иконку и уточнять условия их использования, если вы не уверены в лицензии.
Скриншот был взят с сайта tilda.cc/ru/free-icons/license
Как выбрать иконки для сайта?
При выборе иконок для сайта необходимо учитывать несколько факторов. Ниже представлены несколько советов, которые могут помочь вам сделать правильный выбор:
1. Смысл иконок
Для обеспечения понимания и узнаваемости иконок, важно использовать универсальные символы и избегать нестандартных изображений, которые могут вызвать различные ассоциации у разных пользователей. Поэтому рекомендуется отказаться от уникальности и сосредоточиться на узнаваемости и понятности.
Существует два разных смысловых типа иконок, пиктограммы и идеограммы:
[a] ПИКТОГРАММА
Это иконка, которая представляет собой упрощенное изображение объекта или концепции, которое используется для передачи информации без использования слов. Например, значок «корзина» на сайте интернет-магазина является пиктограммой, так как изображает корзину, в которую пользователь может добавлять товары.
Примеры пиктограмм
[b] ИДЕОГРАММА
Идеограмма в свою очередь это иконка, которая используется для передачи концепции или идеи, а не для конкретного объекта. Она может представлять собой абстрактное изображение, символ или форму, которая ассоциируется с конкретной идеей. Например, иконка сердца на сайте для обозначения понравившегося контента является идеограммой, так как символизирует любовь, а не конкретный объект.
Примеры идеограмм
Оба типа иконок могут использоваться на сайте, чтобы передать информацию и улучшить пользовательский интерфейс. Однако выбор между пиктограммой и идеограммой зависит от того, какая конкретная идея или информация должна быть передана и какой тип иконки лучше соответствует дизайну вашего сайта.
2. СТИЛЬ иконок
Следующий важный пункт, это стиль иконки. Существует множество различных стилей иконок, однако мы рассмотрим три основных: контурный, плоский и объемный.
[a] КОНТУРНЫЙ
Контурный стиль иконок — это дизайн-техника, при которой иконки создаются путем отображения только их контуров, без заполнения цветом или теней. Контурные иконки обычно имеют простой и минималистичный дизайн, который позволяет им легко интегрироваться с другими элементами дизайна. Они часто используются для создания плоского и минималистичного дизайна сайта или приложения. Контурный стиль иконок также может обеспечить увеличение скорости загрузки страницы, поскольку такие иконки имеют небольшой размер.
[b] ПЛОСКИЙ
Это стиль дизайна, при котором иконки имеют плоский, двумерный вид без использования объемных эффектов, теней или градиентов. Такие иконки обычно имеют четкие линии и яркие цвета, что делает их наглядными и легко узнаваемыми. Плоские иконки отлично сочетаются с другими элементами дизайна, такими как текст или фотографии, и могут помочь создать современный и лаконичный дизайн для сайта или приложения. Плоский стиль иконок также имеет преимущество в быстрой загрузке страницы, так как он не требует сложной обработки графики.
[c] ОБЪЁМНЫЙ
Объемный стиль иконок создает иллюзию объемности и глубины путем добавления теней, градиентов и других эффектов. Объемные иконки обычно имеют более сложный дизайн, чем контурные или плоские иконки, и могут быть более реалистичными. Этот стиль иконок часто используется для создания трехмерных эффектов, которые могут привлекать внимание пользователей и выделяться на фоне других элементов дизайна. Однако, использование большого количества объемных иконок может замедлять загрузку страницы и увеличивать объем используемой памяти.
Стили иконок
3. СОЧЕТАНИЕ иконок
Сочетание иконок на сайте — это важный аспект дизайна, который может влиять на пользовательский опыт. Использование иконок, которые сочетаются по стилю, цвету и тематике, может помочь создать единый и красивый дизайн, который будет легко восприниматься пользователем. Некоторые иконки могут быть связаны между собой или использоваться для представления одной и той же темы, так что сочетание их на странице может помочь передать пользователю определенную идею или концепцию. В то же время, смешение разных стилей иконок может создавать впечатление хаоса и снижать качество дизайна, поэтому важно выбирать иконки, которые хорошо сочетаются друг с другом.
Чтобы правильно подобрать иконки и добиться эстетически приятного дизайна, рекомендуется использовать иконки из одного набора, созданного предпочтительно одним автором. Это гарантирует сочетание иконок в одном стиле, что поможет создать единый и красивый дизайн.
Ниже приведен пример удачного сочетания иконок. Иконки гармонично сочетаются, так как они выполнены в едином контурном стиле с одинаковой толщиной и хорошо соответствуют смыслу заголовков.
На скриншоте показан блок SV201 “Колонки с иконками”
Давайте рассмотрим пример, как не стоит делать. На изображении ниже видно, что иконки имеют разную толщину, цвет, размер и стилистику. Это создает впечатление, что иконки принадлежат к разным проектам, что снижает качество дизайна и усложняет восприятие пользователем.
На скриншоте показан блок SV201 “Колонки с иконками”
4. Формат иконок
Формат иконок — это способ, которым иконка сохраняется и используется на сайте. Существует несколько форматов для иконок, но наиболее распространенные форматы — это SVG, PNG и ICO. Как правило, для веб-дизайна наиболее удобным форматом является SVG, так как он обеспечивает высокое качество изображения при любом размере и позволяет легко изменять цвет иконки. Однако формат PNG также широко используется в веб-дизайне, особенно для сохранения иконок с прозрачным фоном.
[a] SVG
Масштабируемый векторный формат, который сохраняет все детали иконки независимо от размера.
[b] PNG
Формат PNG подходит для сохранения изображений с прозрачным фоном и поддерживает различные уровни прозрачности.
[c] ICO
Формат ICO — это формат, используемый для создания значков иконок, используемых в Windows. Также данный формат используется при загрузке фавикона, который отображается значком во вкладке браузера. Более подробно расскажем ниже
5. Размеры иконок
Иконки на сайте могут иметь различные размеры, в зависимости от их функционального назначения и места размещения на странице. Однако, есть несколько стандартных размеров, которые часто используются:
- 16×16 пикселей — это стандартный размер для иконок в адресной строке браузера и фавиконов.
- 32×32 пикселя — часто используется для иконок на панели навигации или в меню.
- 48х48/64×64 пикселя — может использоваться для иконок на главной странице сайта или в контенте.
При настройке размера иконок важно учитывать их детализированность. Маленькие иконки должны иметь упрощенные детали для хорошей видимости и понимания. Более крупные иконки могут содержать больше деталей, чтобы усилить визуальное воздействие. Главное, чтобы каждая иконка была четкой, узнаваемой и передавала свое назначение с минимальным количеством деталей, обеспечивая понятность в контексте использования.
Как изменить цвет маркеров в списке?
Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.
Использование
При этом цвет маркеров определяется стилевым свойством color для селектора li , а цвет текста — для селектора span (пример 1).
Пример 1. Использование вложенных тегов
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного текста
Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять .
Использование ::before
Пример 2. Использование псевдоэлемента ::before
Результат данного примера показан на рис. 2.
Рис. 2. Маркеры, созданные с помощью стилей
См. также
- color
- content
- currentColor
- list-style-type
- quotes
- relative и absolute
- text-fill-color
- Аккордеон меню
- Анимация ссылок при наведении
- Атрибут link
- Атрибуты ссылок
- Добавление тени
- Единицы цвета в CSS
- Знакомство с HTML
- Использование в вёрстке
- Наследование в CSS
- Не только текст
- Подробнее о позиционировании
- Псевдоэлемент ::before
- Псевдоэлементы
- Псевдоэлементы ::after и ::before
- Работа с типографикой
- Спойлер
- Элементы и
Как работать в Тильде
Tilda — блочный no-code конструктор сайтов. Он позволяет создавать сайты, интернет-магазины, лендинг-страницы (или посадочные страницы), а также блоги и email-рассылки. Возможностей у сайта много. Рассказываем, как пользоваться Tilda и где черпать вдохновение.
Немного о тарифах
Тильда предоставляет несколько вариантов тарифов: бесплатный, Personal и Business.
- Бесплатный позволяет создать один сайт с 50 страницами и занять 50 мегабайтов места на сервере. Конструктор здесь с минимальным функционалом. Пользователи могут зарегистрировать сайт только на поддомене. Выглядеть будет вот так: yoursite.tilda.ws.
- Personal позволяет создать один сайт с 500 страницами и занять 1 гигабайт на сервере. Здесь работают все блоки, а созданный сайт можно подключить к другому домену. Его можно использовать бесплатно в течение двух недель. Стоит он 3000 тенге в месяц при оплате за год и 4500 при ежемесячной оплате.
- Business позволяет создать 5 сайтов с 500 страницами для каждого сайта и занять 1 гигабайт места на сервере. Исходный код можно экспортировать. Здесь доступен весь функционал Тильды. Стоит такой тариф 6000 тенге в месяц при оплате на год и 7500 при ежемесячной оплате.
Как устроена Тильда?
Дизайн сайтов
У Тильды довольно простой интерфейс. Изначально конструктор предлагает использовать готовые шаблоны, начать собирать страничку с чистого листа с помощью блоков или создать сайт с помощью Zero-блоков.
Готовые шаблоны
Шаблоны — это образцы хорошего дизайна и пример использования блоков. Готовые шаблоны Тильды разделены по тематике на восемь тем: это «Бизнес», «Магазин», «Событие», «Блог», «Контакты», «Анкета» (это различные формы для заполнения), «Внутренние» (это сайты о компании) и Pro (или «Мои шаблоны» в зависимости от вашего тарифного плана).
Кстати, используя готовые шаблоны, их все равно можно менять на свое усмотрение: использовать собственный фирменный цвет или поменять блоки местами.
Готовые блоки
Если страничку вы решили собрать с нуля, то готовые блоки можно собрать из библиотеки. Это текстовые блоки, изображения, видео, формы и кнопки, инфографика, информация о команде, отзывы, меню, корзину, карты и так далее.
Блоки автоматически настраиваются под различные устройства: телефоны, компьютеры и планшеты.
Редактировать контент в готовые блоках легко: нужно просто кликнуть по блоку и слева появится меню «Контент». Нажимаем на оранжевую кнопку и меняем содержимое. Изображения можно загрузить с компьютера, использовать из библиотеки Unsplash или добавить ссылку из интернета. Менять можно всё: шрифт, цвет, иконки.
Редактировать информацию можно, не нажимая меню «Контент». Установите курсор на нужной строчке и добавьте запись. Визуальный редактор появится в верхней части экрана.
Zero-блоки
Zero-блоки используют для более сложных сайтов. Все элементы — картинки, кнопки, текст — здесь создаются и адаптируются под интерфейс разных устройств самостоятельно.
У Tilda Publishing есть целый туториал-урок о том, как создавать сайты с помощью Zero-блоков.
Для каких проектов подойдет Тильда?
- Личный сайт или портфолио. Собирайте информацию о себе как с помощью готовых блоков, так и Zero-блоков.
- Контент-проекты (например, книги или лонгриды). Здесь можно присваивать метатеги, добавлять title и description, генерить разный контент для отображения в поисковой выдаче и социальных сетях, добавлять кнопки «Поделиться в соцсетях», формы подписки и так далее.
- Промостраницы и сайты для мероприятий.
- Сайты обучающих проектов.
- Небольшие интернет-магазины. Опытные пользователи Тильды могут подключить магазин к 1С или синхронизировать витрины со складскими остатками.
Как настроить сайт на Tilda: базовые опции
В разделе «Настройка сайта» можно полностью настроить сайт.
- Добавьте описание и фирменные шрифты
- Подключите свой домен. Подробная инструкция от Тильды — по ссылке.
- Настройте аналитику. Можно подключить сайт как к «Яндекс.Метрике», так и к Google Analytics.
- Оптимизируйте сайт для поисковых систем: настройте https, посмотрите SEO-рекомендации, добавьте сайте в Google Search Console, настройте редиректы и файлы ads.txt и app-ads.txt.
- Экспортируйте сайт на другой сервер с копированием исходного кода.
- Настройте платежные системы, шапку и подвал сайта и личный кабинет.
- Здесь же можно передать сайт другому пользователю Тильды или удалить сайт.
Примеры проектов на Тильде
Большое количество сайтов создано на Тильде. Они собраны на странице Made on Tilda, а также в социальных сетях конструктора.
Четыре новых блока на Tilda: соцсети, оглавление и список товаров с Pop-up
«Тильда» — один из удобнейших конструкторов сайтов, требующий минимального знания кода. А если подключить к нему облачную базу данных AirTable через платформу типа Collabza, то по функциональности он сравнится с любым крупным маркетплейсом.
Чем хороша Tilda, так это регулярными апдейтами. Этой осенью разработчики порадовали пользователей новыми блоками, два из которых — оформление ссылок на соцсети, третий — оглавление, а четвертый — список товаров со всплывающим окошком Pop-up.
Блок SM102: ссылки на соцсети в одну колонку
SM102 расположен в категории «Соц.сети». Он позволяет оформить ссылки на все социальные сети в одну колонку в виде кнопок с иконкой, названием и стрелкой, оформленных в фирменном цвете — или в любом другом на вкус разработчика. Они будут заданной ширины, невзирая на длину надписи, что дает возможность сделать красивой и функциональной рубрику «Контакты». Особенно удачным решение будет для смартфонов — ширина блока подстроится под экран, на кнопки удобно будет тапать, они не вылезут за границы.
В дефолтных настройках представлены 24 соцсети из тех, которые используются чаще всего. Если в списке нужной нет, пользователь может сделать кастомную. Для этого есть пункт Website с редактируемым заголовком и окошком загрузки иконки. Это удобно, если в контактах хочется указать ссылки на все релевантные ресурсы.
Настройки также позволяют менять размер кнопок, задавать отступы, кастомный вид стрелки и анимации — все для персонализации сайта.
Блок SM103: прямоугольные ссылки на соцсети в ряд
Сразу после SM102 разработчики представили еще один посвященный оформлению ссылок на соцсети блок — SM103, где прямоугольные кнопки расположены строкой. Как и в предыдущем, они подчиняются ширине блока, и если места не хватит, то переносятся на следующую строку.
Названий социальных сетей на кнопках нет — это нужно для того, чтобы сделать их компактнее. Они обходятся иконками, которых 24 в стандартном варианте, плюс пункт Website с возможностью создать кастомную ссылку на любой сайт.
В настройках можно разместить иконку в кружочке, изменить цвет или оставить галочку на пункте «Использовать брендовые цвета для фона кнопки».
Вариант с небольшими прямоугольными кнопками будет идеален для страницы, на которой, помимо контактов, есть что-то еще. Например, карта, адрес, режим работы или другая информация.
Блок IX06A: оглавление для списка страниц
Блок IX06A относится к категории «Список страниц». Tilda — идеальный конструктор для создания портфолио, блога или СМИ. Категория «Список страниц» позволяет сделать на главном экране оглавление со ссылками, кликая по которым пользователи будут переходить на однотипные страницы с контентом.
Новый блок IX06A как раз расширяет возможности списка. Визуально он выглядит как список, состоящий из заголовка, краткого описания и иконки.
Ручного добавления он не подразумевает. Как и другие блоки категории, ссылки формируются через проставление галочки на странице с контентом. Отображаться они будут так, как указано в настройках, включая заголовок и описание. При желании их можно поменять местами, а еще скрыть описание совсем. Иконка кастомизируется: ей задается желаемый стиль, размер и цвет.
Блок ST330: список товаров в одну колонку + Pop-up с подробной информацией
Блок ST330 — из категории «Магазин». Он позволяет создать минималистичный список товаров с названием, картинкой, ценой и описанием, причем описание и изображение можно отключить в настройках.
Блок подойдет маркетплейсам, которым не нужны большие элементы. Тем более, что в функционал встроен Pop-up — всплывающее окно с карточкой товара. Пользователь узнает больше о продукте и при желании сразу добавит его в корзину.
В «Настройки блока» → «Элементы списка» кнопку покупки можно разместить рядом с ценой или под ней, кастомизировать детали, добавить разделители, задать ширину и в целом привести его дизайн к единообразию с сайтом.
«Тильда» — один из удобнейших конструкторов сайтов, требующий минимального знания кода. Удобный редактор, куча блоков, постоянные улучшения дизайна и функционала. На нем создают блоги, интернет-магазины, сайты-визитки, портфолио и многое другое, а если подключить к нему облачную базу данных AirTable через платформу типа Collabza, то по функциональности он сравнится с любым крупным маркетплейсом.
Наш курс «Миллион на Зерокоде» подробно раскрывает сразу несколько инструментов и способы их интеграции. На бесплатном вебинаре по этому курсу мы рассказываем подробнее.