Какие способы размещения картинок на tilda существуют

Как настроить галерею изображений

Галерея — это общепринятый способ показа нескольких изображений или видео на сайте. Рассмотрим в статье, какие галереи есть в Тильде и как их настроить.

Галереи в библиотеке блоков Тильды находятся в категории Галерея.

Галереи бывают нескольких видов: слайдеры (изображения сменяют друг друга с помощью стрелок, точек или по таймеру) и галереи с комбинацией изображений (изображения могут как выстраиваться по сетке, так и выстраиваться в другие комбинации, например, одно изображение большое и два поменьше рядом).

Все доступные варианты галерей можно посмотреть в списке категории «Галерея».

Слайдер: изображение перелистывается с помощью точек и стрелок
Комбинация изображений
Несколько изображений в ряд
Настройка галерей с комбинацией изображений

Большинство блоков, где изображения формируют комбинацию, имеют похожие настройки. Ниже в справочном видео мы рассмотрели настройки блока на примере блока GL11 «Полноэкранная комбинация из изображений в колонках».

Для того, чтобы добавить изображения в галерею, зайдите в Контент блока и загрузите файлы, кликнув на кнопку «Загрузить файлы». Стандартные изображения в блоке можно либо удалить, либо заменить, кликнув на ссылку «Заменить» рядом с ним.

Рядом с каждым изображением в Контенте блока есть ссылка «Текст». Укажите заголовок, описание и alt-текст для SEO. В зависимости от дизайна блока заголовок и описание будут показываться или под фотографией, или при увеличении при клике.

SEO-текст нужен для указания поисковым системам, что изображено на фотографии. Данный текст прописывается или тегом alt, или с помощью специальной разметки, которая работает аналогичным образом.

Рассмотрим настройки блока. Большинство галерей с комбинацией изображений имеют следующие настройки:

• Размер контейнера: устанавливает ширину контейнера со всеми фотографиями
• Соотношение сторон: указывает, какое соотношение сторон будет у каждого блока с фото. Если у вас фотографии с определеннм соотношением, например, вертикальные, то нужно изменить соотношение сторон на максимально подходящее
• Отступ между колонками: устанавливает отступ между рядами изображений
• Увеличение изображения по клику: при использовании этой опции при клике на изображение будет появляться всплывающее окно с этим изображением в полный размер
• Настройки анимации: в зависимости от дизайна блока устанавливает параметры эффекта появления или наведения на блок
• Высота блока: установка высоты всего блока, можно указать в пикселях или vh (процентах от высоты экрана)

Настройка слайдеров
Слайдеры — это галереи, в которых изображения переключаются с помощью стрелок, точек или по таймеру.

Для того, чтобы добавить изображения в галерею, зайдите в Контент блока и загрузите файлы, кликнув на кнопку «Загрузить файлы». Стандартные изображения в блоке можно либо удалить, либо заменить, кликнув на ссылку «Заменить» рядом с ним.

Рядом с каждым изображением в Контенте блока есть ссылка «Текст». Укажите заголовок, описание и alt-текст для SEO. В зависимости от дизайна блока заголовок и описание будут показываться или под фотографией, или при увеличении при клике.

SEO-текст нужен для указания поисковым системам, что изображено на фотографии. Данный текст прописывается или тегом alt, или с помощью специальной разметки, которая работает аналогичным образом.

Рассмотрим настройки слайдера. Большинство слайдеров изображений имеют следующие настройки:

• Ширина (указывается в количестве колонок, от 6 до 12)
• Высота блока: установка высоты всего блока, можно указать в пикселях или vh (процентах от высоты экрана)
• Масштабирование изображения: укажите, как будет показываться изображение: в оригинальном размере или подстраиваться под высоту блока
• Настройки анимации: в зависимости от дизайна блока устанавливает параметры эффекта появления или наведения на блок
• Настройки описания: настройки типографики подписей под фотографиями
• Настройка стиля галереи (рассмотрим их ниже)

Настройки стиля галереи-слайдера

В настройках стиля находятся все опции, влияющие на поведение галереи: настройка управляющих элементов, иконки старта видео и настройка анимации (чтобы слайды переключались по таймеру).

В качестве управляющий элементов можно использовать точки (внизу или на изображении) и стрелки, а также их комбинации. После выбора подходящего решения настройте цвета управляющих элементов в тех же настройках стиля галереи.

Для того, чтобы настроить анимацию переключения слайдов, существуют 2 настройки: скорость анимации и скорость смены слайдов в миллисекундах. Скорость анимации устанавливает скорость самого эффекта смены изображения (стандартно, быстро и медленно), а скорость смены слайдов — время, через которое изображения будут меняться. Это время нужно указать в миллисекундах (1 секунда — это 1000 миллисекунд).

Оформление сайта: как работать с текстом и изображениями

Изображения на сайте вызывают интерес и погружают человека в контекст. Вместе с текстом фотография работает на главную цель — донести до аудитории сообщение о продукте или сервисе.

Из статьи вы узнаете, как подбирать оформление сайта, и делать так, чтобы изображение и текст действительно работали вместе, а не мешали друг другу.

Текст поверх изображения

Расположение текста поверх фотографии или иллюстрации — популярный и сильный графический прием оформления сайта. Он обращает на себя внимание, показывает важность информации.

Этот прием используется чаще всего в обложках и на первом экране сайта, в оглавлении в виде плитки (товары, статьи блога), в начале раздела, в блоках с призывами к действию и кнопкой.

Проектная мастерская R3, сайт: pmr3.ru

Обложка на сайте varenye.com

Обложка лонгрида Cycling’s Road Forward от Washington Post

Никита Обухов
Основатель Tilda Publishing

В обложках фотография является фоном, она должна соответствовать тематике сайта, но главное — это текст. Изображение не должно спорить с текстом, оно отвечает за создание правильной атмосферы. Текст должен хорошо читаться.

В обложках текст чаще всего располагают по центру. Поэтому лучше подбирать фотографию, у которой нет мелких деталей посередине — там, где будет заголовок. Это может быть простая фигура, например, стена дома или открытое пространство на пейзаже. Что-то однородное. Хорошо работают белые обложки — со светлой фотографией на фоне. Можно задать тексту цвет, чтобы создать яркий стиль.

Какие способы размещения картинок на tilda существуют

Все популярные виды меню для удобной навигации: «гамбургер», прозрачное на обложке, фиксированное при скролле и другие.

Формы и кнопки

Легко собирайте списки для рассылок или данные клиентов. Добавляйте кнопки призыва к действию и кнопки расшаривания в соцсетях.

Плитка и ссылка

Специальная категория блоков, чтобы сделать красивые переходы на другие страницы или внешние ресурсы.

Преимущества
Готовая комбинация фотографий и текста для того, чтобы рассказать о вашем товаре или услугах.

Используйте готовую инфографику, чтобы рассказать в деталях, как именно работает ваш продукт или сервис.

Сделайте понятными цены на ваши услуги, чтобы найти свою аудиторию.
Компания — это люди. Добавьте специальный блок, чтобы рассказать, кто создает ваш продукт.
Добавьте отзывы клиентов, чтобы повысить доверие.

Добавьте видео с YouTube или Vimeo. Используйте различные комбинации: один или два плеера, сочетание видео и текста.

Разделители

Сделайте структуру страницы более легкой для восприятия с помощью нумерации, разделительных линий, плавной смены цвета фона.

Якорные ссылки
Сделайте понятную навигацию, поставив ссылки, которые ведут к конкретному месту на странице.
Карты Google и Яндекс
Добавьте блок с картой, впишите ваш адрес в настройках, и клиентам будет легче вас найти.
Интерактивные подсказки
Требуется подсказка или дополнительная информация? Добавьте на страницу всплывающие подсказки.
Интеграция сервисов
Бесшовно подключите сторонние сервисы: SlideShare, Disqus, SoundCloud, TimePad, Yclients и другие.
Вставка html кода
Добавьте на сайт уникальные элементы, с помощью вставки своего html-кода (включая js и css).
Zero Block. Редактор для веб-дизайнеров
Профессиональный редактор
Реализуйте любую идею, создав собственный блок с помощью редактора для веб-дизайна.
Адаптивность для любых устройств
Zero Block позволяет адаптировать дизайн для всех типов экранов.
Настройка анимации
Оживляйте элементы сайта, чтобы привлечь внимание пользователей.
Формы приема данных
Разместите форму в любом месте нулевого блока. Настройте поля и внешний вид.
Слои и направляющие
Слои можно скрыть, заблокировать или перетянуть выше или ниже относительно другого.
9 типов элементов
Добавляйте текст, фигуры, изображения, кнопки, видео, галерею, подсказки, html-код и формы.
Интернет-магазин
Виджет корзины
Добавьте возможность покупать сразу несколько товаров, выбирать параметры или менять количество.
Настройка формы заказа

Добавьте поля, которые вам нужны для обработки заказов, например: адрес, время доставки, контакты, количество.

Готовые шаблоны для магазинов
Сэкономьте время, используя готовые шаблоны интернет-магазинов, которые создали наши дизайнеры.
Карточки товаров
Покажите товар, используя функциональные блоки, спроектированные специально для интернет-магазина.
Промокоды и акции
Повышайте лояльность покупателей — создавайте промокоды и организуйте акции.
Платежные системы или наличные
Принимайте платежи онлайн, подключив популярные платежные системы, или наличные курьеру.
Передача данных для онлайн-кассы
Настройте параметры, которые подходят для вашего типа налогового учета.
Отправка уведомлений на email

После оплаты или оформления заказа клиент автоматически получает на почту подтверждение, что заказ принят.

Каталог товаров

Панель администрирования магазина, которая позволяет организовывать и редактировать позиции на вашем сайте.

Доставка товаров

Настройте корзину так, чтобы покупатель мог выбрать способ доставки или самовывоз товара. Добавьте свой вариант доставки или подключите один из популярных сервисов: CДЭК, Boxberry, Почта России, Новая почта.

Статистика

Следите за эффективностью работы магазина и принимайте бизнес-решения, основанные на фактических показателях.

Потоки для ведения блога и новостей
Новостные ленты
Потоки — это функция для ежедневного постинга. Помогают эффективно вести блог или новостную ленту.
Удобная панель редактирования

Создавайте и редактируйте посты. Переопубликовывать страницы не нужно — все изменения мгновенно отображаются на сайте.

На одном сайте может быть несколько Потоков
Например, на сайте школы можно вести одновременно ленту новостей и афишу ближайших мероприятий.
SEO и соцсети для поста

Для каждого поста автоматически создается уникальная страница, которая индексируется в поисковых системах.

Разделы (теги)

Сделайте рубрики по темам для удобной навигации. У каждого поста может быть несколько разделов (тегов).

Категория блоков в библиотеке

Вы можете выбирать дизайн блока в категории «Новости и потоки». В категории есть блоки в линию и в виде сетки с настраиваемым количеством колонок.

Планирование и публикация по графику

Вы можете готовить новости заранее. Поставьте дату выпуска в будущем, и пост появится на сайте в нужное время. А также можно настроить автоматическое исчезновение устаревших постов.

Турбо-страницы и AMP

У потоков автоматически генерируется RSS лента. Ее можно подключить в Яндекс Вебмастере, для турбо-страниц и на Яндекс Дзене.

Коллекция авторских шрифтов

Futura, Circe, Kazimir и другие шрифты партнера — студии Rentafont. Для пользователей Тильды шрифты бесплатны.

Подключение собственных шрифтов
Установите абсолютно любой шрифт из вашей собственной коллекции, загрузив файлы.
Шрифты из бесплатной библиотеки Google Fonts
Используйте многообразие бесплатных шрифтов Google.
Подключение шрифтов из библиотеки Adobe Fonts
Легко установите шрифты из Adobe Fonts, указав Project ID и название шрифта.
Объединение нескольких страниц в единый сайт
На Тильде можно не только создавать страницы, но и объединять их в полноценный сайт.
Добавление элементов, которые видны на всех страницах

Добавьте проекту постоянные элементы: header (логотип, меню), footer (контакты, навигация, дополнительная информация), которые будут автоматически появляться на всех страницах.

Индексные блоки для блогов и портфолио

Назначьте главную страницу со специальным индексным блоком и включите блок «похожие материалы» в конце каждой статьи или работы — ваш сайт готов.

Все виды популярных типов меню

«Гамбургер», прозрачное меню с обложкой, залипание при скролле, плавный скролл к ссылке внутри страницы и другие.

Поиск по сайту
Добавьте поиск по внутренним страницам сайта. Отдельные страницы можно исключить из поиска.
Формы сбора данных и управление базой данных клиентов
Конструктор форм

Создайте свою форму сбора данных. Собирайте email, номера телефонов, добавляйте календарь для выбора даты, форму для загрузки файлов, предложите выбор вариантов.

Формирование списка email рассылки

Установите форму на Тильде и создавайте списки рассылок на MailChimp, UniSender, SendGrid или GetResponse.

Получение информации от пользователя прямо на ваш email
Укажите в настройках формы ваш email и информация, которую оставит посетитель, придет вам на почту.
Мгновенные уведомления в Telegram или Slack

Подключите сервисы и получайте сообщения в мессенджеры сразу же, как только данные о заказе отправлены.

Отправка и сохранение данных в таблице Google

Укажите адрес gmail при подключении сервиса и данные будут собраны в удобную таблицу на Google Drive.

Повышайте продажи, используя AmoCRM, Мегаплан, Битрикс24
Системы управления данными клиентов (CRM) интегрированы с Тильдой. Просто подключите свой аккаунт.
Отслеживание конверсии достижения целей форм
Анализируйте эффективность вашего предложения, получая данные о заполнении форм.
Конструктор политики обработки персональных данных

Создайте документ политики конфиденциальности с помощью конструктора и добавьте ссылку на него в форму приема данных.

Хранение заявок внутри личного кабинета
Ни одна заявка не потеряется — все, что отправлено через форму, сохраняется в личном кабинете.
Калькулятор внутри форм
В вертикальных формах можно добавить расчёт цены по параметрам из полей для ввода.
Заполнение по шагам

Вертикальную форму можно разделить на несколько этапов заполнения с помощью поля «Разбиение по шагам»

Прикрепление файлов

В форме можно добавить поле «Файл». Файлы из форм будут сохраняться в ваш Dropbox, Google Drive или Яндекс.Диск.

Создайте интерактивный тест или викторину в форме карточек с вопросами.
Опросы и голосования
Собирайте статистику, вовлекайте посетителей и получайте обратную связь.
Простой инструмент для работы с заявками внутри Тильды
Сервисы обратной связи: обратные звонки и онлайн-чаты
Собственные виджеты обратной связи

Добавьте специальный блок из библиотеки, чтобы посетители могли отправить вам сообщение, оставить номер телефона или email.

Интегрированы сервисы Jivosite, Callbackhunter, Chatra.io и YClients

Используйте интегрированные сервисы обратных звонков и онлайн-чатов, чтобы увеличить количество обращений.

Любой другой сервис можно добавить через блок html-embed
Установите сервис, к которому вы привыкли, через функцию вставки html кода.
Прием платежей
Прием оплаты через Cloudpayments
Принимайте платежи картами Visa и MasterCard, а также по картам национальной платежной системы МИР.
Прием оплаты через Robokassa
Используйте 40 способов оплаты (карты, электронные деньги, мобильные, Apple Pay и терминалы оплаты).
Прием оплаты через PayPal
Используйте одну из самых популярных платежных систем.
Прием оплаты через ЮMoney и ЮKassa
Принимайте платежи, в том числе банковской картой и мобильным телефоном.
Прием оплаты через LiqPay
Принимайте платежи картой, используя сервис украинской платежной системы LiqPay.
Оплата через Stripe
Подключайте международную систему, если ваше юридическое лицо зарегистрировано в США или Европе.
Эквайринг Альфа-банка, Сбербанка и Тинькофф банка
Принимайте платежи напрямую на расчетный счет вашего банка.
Оплата через PayAnyWay

Принимайте платежи картой, через систему быстрых платежей, по SMS и другими способами, если вы работаете из России, Беларуси, Казахстана и других стран СНГ.

Прием оплаты через Wayforpay
Принимайте платежи картой, через систему Приват24 и терминалы. Подойдёт, если вы из Украины.
Прием оплаты через 2Checkout
Принимайте оплату картой в 200+ странах мира.
Мобильная версия
Автоматическая адаптация сайта под все мобильные устройства
Вам не нужно специально адаптировать сайт или создавать мобильную версию.
Оптимизация тестируется на всех популярных устройствах
Мы учитываем как будет выглядеть сайт на iPhone, iPad, устройствах с системой Android.
Гибкая настройка мобильной версии
При необходимости отдельные блоки можно настроить и адаптировать для разных типов устройств.
Управление сайтом
Передача сайтов в другой аккаунт и перемещение страниц внутри аккаунта
Создавайте сайты на заказ и передавайте их в управление клиенту.
Дублирование страниц
Скопируйте страницу, чтобы поменять отдельные элементы, например, для проведения a/b тестирования.
Создание своего шаблона

Сделайте собственный дизайн страницы, сохраните ее как шаблон, используйте для дальнейшей работы и делитесь шаблоном с другими пользователями.*

Возможность передавать свои шаблоны другим пользователям доступна на годовом плане Business
Совместный доступ

Для других пользователей Тильды можно предоставить полный или ограниченный доступ к редактированию вашего проекта.

Домен и публикация
Домен в подарок
Получите домен бесплатно при оплате любого тарифа на год.
Подключение собственного домена в два шага
Укажите в настройках сайта ваш домен и пропишите IP адрес у регистратора — домен подключен.
Покупка домена

Купите без комиссии доменное имя внутри аккаунта на Тильде, при необходимости перенесите управление к регистратору.

Подключение HTTPS протокола
Установите бесплатный сертификат LetsEncrypt в настройках сайта.
«Простые», настраиваемые адреса страниц
Понятные адреса страниц без лишних элементов, которые легко индексируются и читаются.
Использование субдомена на tilda.ws бесплатно
Придумайте красивое имя для своего сайта и используйте субдомен Тильды бесплатно.
301 редирект
Включите переадресацию, чтобы улучшить SEO при смене адреса страницы.
Быстрая загрузка: изображения хранятся в сети CDN

Изображения хранятся в сети доставки (и дистрибуции) контента (CDN), что сокращает время загрузки за счет использования географически распределенных серверов.

Защита от DDoS атак
Мы используем специальное оборудование для защиты ваших сайтов от атак злоумышленников.
Оптимизация загрузки изображений

На Тильде для всех сайтов по умолчанию включен режим Lazy Load. Это позволяет сайтам загружаться очень быстро, даже на мобильных устройствах.

Адаптивная загрузка изображений

Технология обработки изображений уменьшает вес сайта в 3-7 раз. Скрипт масштабирует картинки под размер контейнера на странице и конвертирует в WebP. Эта оптимизация доставки изображений посетителям ускоряет загрузку сайтов.

Какие способы размещения картинок на tilda существуют

Галереи бывают нескольких видов: слайдеры (изображения сменяют друг друга с помощью стрелок, точек или по таймеру) и галереи с комбинацией изображений (изображения могут как выстраиваться по сетке, так и выстраиваться в другие комбинации, например, одно изображение большое и два поменьше рядом).

Все доступные варианты галерей можно посмотреть в списке категории «Галерея».

Рядом с каждым изображением в Контенте блока есть ссылка «Текст». Укажите заголовок, описание и alt-текст для SEO. В зависимости от дизайна блока заголовок и описание будут показываться или под фотографией, или при увеличении при клике.

SEO-текст нужен для указания поисковым системам, что изображено на фотографии. Данный текст прописывается или тегом alt, или с помощью специальной разметки, которая работает аналогичным образом.

Рассмотрим настройки блока. Большинство галерей с комбинацией изображений имеют следующие настройки:

• Размер контейнера: устанавливает ширину контейнера со всеми фотографиями
• Соотношение сторон: указывает, какое соотношение сторон будет у каждого блока с фото. Если у вас фотографии с определеннм соотношением, например, вертикальные, то нужно изменить соотношение сторон на максимально подходящее
• Отступ между колонками: устанавливает отступ между рядами изображений
• Увеличение изображения по клику: при использовании этой опции при клике на изображение будет появляться всплывающее окно с этим изображением в полный размер
• Настройки анимации: в зависимости от дизайна блока устанавливает параметры эффекта появления или наведения на блок
• Высота блока: установка высоты всего блока, можно указать в пикселях или vh (процентах от высоты экрана)

Рядом с каждым изображением в Контенте блока есть ссылка «Текст». Укажите заголовок, описание и alt-текст для SEO. В зависимости от дизайна блока заголовок и описание будут показываться или под фотографией, или при увеличении при клике.

SEO-текст нужен для указания поисковым системам, что изображено на фотографии. Данный текст прописывается или тегом alt, или с помощью специальной разметки, которая работает аналогичным образом.

Рассмотрим настройки слайдера. Большинство слайдеров изображений имеют следующие настройки:

• Ширина (указывается в количестве колонок, от 6 до 12)
• Высота блока: установка высоты всего блока, можно указать в пикселях или vh (процентах от высоты экрана)
• Масштабирование изображения: укажите, как будет показываться изображение: в оригинальном размере или подстраиваться под высоту блока
• Настройки анимации: в зависимости от дизайна блока устанавливает параметры эффекта появления или наведения на блок
• Настройки описания: настройки типографики подписей под фотографиями
• Настройка стиля галереи (рассмотрим их ниже)

В качестве управляющий элементов можно использовать точки (внизу или на изображении) и стрелки, а также их комбинации. После выбора подходящего решения настройте цвета управляющих элементов в тех же настройках стиля галереи.

Для того, чтобы настроить анимацию переключения слайдов, существуют 2 настройки: скорость анимации и скорость смены слайдов в миллисекундах. Скорость анимации устанавливает скорость самого эффекта смены изображения (стандартно, быстро и медленно), а скорость смены слайдов — время, через которое изображения будут меняться. Это время нужно указать в миллисекундах (1 секунда — это 1000 миллисекунд).

Добавление изображений в Блок HTML в конструкторе Tilda

Только начала разбираться с конструктором Tilda и у меня возник вопрос.

Как добавить изображения в блоке T123?

Я хочу сделать полностью кастомный блок, сверстала его и тут встал вопрос изображений. Как их добавить, не используя другие блоки?

Конкретно в блок 123 вы загрузить изображение не сможете, однако вы можете загрузить его в какой-нибудь другой блок (например галерею), сохранить и скопировать оттуда URL на изображение.

Ещё как вариант — загрузить изображение на сторонний сервер (например Vkontakte) и взять ссылку оттуда.

Дальше вы можете просто вставить в HTML блок код изображения.

Даст вам результат:

В том же ВК сохраняется не только обработанная и сжатая версия файла, но и оригинал (если требуется прикрепить его).

Как сделать сайт на Тильде: пошаговая инструкция

Автор статей и SMM-специалист Svoemedia Ирина Сорогина рассказала о первом опыте создания сайта на Тильде ― о том, с какими сложностями столкнулась и сколько времени на это ушло.

ирина сорогина

Я занимаюсь контентом, но захотела сделать лендинг онлайн-курса на Тильде. Чтобы сайт получился сильным, я расспросила об этапах создания сайта коллегу Антона Чикова — главного дизайнера оперативной группы Svoemedia. Советы Антона включила в этот материал.

Перед созданием сайта я отвела день на подготовку: продумала структуру сайта, подобрала контент, сделала прототип, выбрала цвета и шрифт.

Структура сайта

Структура сайта зависит от задачи и типа сайта. Например, студии дизайна интерьера нужно показать готовые проекты, а организатору онлайн-курса — рассказать о программе.

У многостраничников и интернет-магазинов своя структура, а у лендингов ― традиционная: оффер на первом экране, описание компании или продукта, призыв к действию, преимущества, отзывы и контакты.

Сайты на Тильде состоят из блоков и страниц. Один блок — один экран.

Чтобы продумать структуру лендинга, я использовала шаблон с универсальными блоками и оставила только те, что решают мою задачу: обложка, команда, главные цифры, содержание курса, цены, FAQ, контакты.

Количество блоков на сайте неограниченно, всё зависит от задач. Чем сложнее задача, тем больше блоков нужно: для сайта пейнтбольного клуба хватит 6‒7 блоков, а продавцу буровых установок может не хватить пятнадцати.

Подготовка контента для сайта

Дальше я подготовила текст и фотографии. Вот несколько советов по подготовке текста:

• Текст должен быть простым и понятным. Представьте, что вы рассказываете клиенту о своей компании или продукте. Так всё и запишите, а потом перечитайте вслух.

• Выделите главное и добавьте интересные подробности. Не старайтесь расписать на сайте всё, что возможно.

• Включите зануду: придирайтесь к словам, найдите неясные моменты, ответьте на свои вопросы.

В блоге Тильды есть статья, которая поможет написать полезный текст для сайта.

Я подобрала иллюстрацию для главной страницы, скачала фотографии авторов курса, сделала скриншоты страниц с уроками.

Используйте свои иллюстрации или покупайте на стоках. Мы берём фото с Энвато — недорого и с коммерческой лицензией. Обратите внимание на оптимальный размер фото для Тильды — 1680px по большей стороне.
Если у вас много иллюстраций на сайте, сожмите их. Иначе у пользователя с нестабильным интернетом сайт не загрузится и он уйдёт. Сжимать фото можно на бесплатном сервисе Optimizilla.

Прототипирование

Прототип — схема сайта, которая показывает, как будут располагаться кнопки, текст, картинки и другие элементы. Мне как начинающему ребята советовали нарисовать прототип на бумаге или расписать структуру сайта в гуглдоке.

В Svoemedia делают прототипы и согласовывают проекты сайтов в Фигме: в ней удобно работать командой и не приходится менять дизайн в Тильде.

Шрифты, цвета, иконки

Для начинающих самый простой способ подобрать шрифт и цвет — подсмотреть на других сайтах по схожей тематике. Несколько ресурсов, где можно вдохновиться: One Page Love, Lapa Ninja, Land-Book.

Если у вас уже есть корпоративные цвета и шрифт, используйте их. Шрифт и цвета можно посмотреть с помощью расширения для Google Chrome CSS Pepper.

Лучше не использовать на сайте больше 2‒3 цветов. Один цвет — основной, остальные — акцентные.

Советуем не использовать больше двух разных шрифтов. Лучше пользоваться шрифтовыми парами, уже подобранными дизайнерами Тильды. Забудьте о курсиве и шрифте Roboto — он «состарит» сайт».

Я не стала искать иконки, решила ограничиться стандартными иконками Тильды. Мои коллеги-дизайнеры для поиска иконок пользуются сайтами Flaticon или Thenounproject. На первом сайте иконки бесплатные, их можно скачать в любом цвете и в формате SVG. На втором сайте — хорошие подборки, можно найти несколько разных иконок в едином стиле.

курс

Landing Page

Узнать больше

• Научитесь создавать лендинги и отслеживать их эффективность
• Сделаете рабочую посадочную страницу для своего проекта уже во время обучения
• Разберётесь, как управлять вниманием пользователя, чтобы он совершал целевые действия

Вёрстка в Тильде

Вёрстка сайта заняла один день. Чтобы быстро собрать сайт на Тильде, я взяла готовый шаблон. Впоследствии от него осталось только три блока, остальное я добавляла из библиотеки блоков Тильды.

Собирать сайт из блоков было легко, интерфейс Тильды интуитивно понятный. Мне даже не пришлось обращаться к инструкциям на этом этапе. Если вам что-то будет неясно, в справочном центре Тильды — ответы на все вопросы.

Вот несколько блоков моего лендинга:

Все стандартные блоки Тильды хорошо сочетаются между собой. И лучше не вносить много правок.

Проверяйте, чтобы одинаковыми были цвета, формы кнопок, отступы, размер шрифта для заголовков разных уровней и основного текста.

Мысленно проведите две линии слева и справа ― элементы сайта не должны выходить за эти линии.

Отрегулировать ширину блока можно в его настройках. Можно установить ширину 12 колонок.

Чтобы сайт на Тильде не выглядел шаблонным, его можно кастомизировать. Есть несколько простых приёмов, которые помогут сделать сайт непохожим на все остальные:

• Загрузите видео на обложку вместо фото. Это просто сделать, и сайт будет выглядеть эффектно.

• Подключите анимацию к блоку. Когда на сайте всё движется, информацию тяжело воспринимать, поэтому лучше с ней не перебарщивать.

• Разбавьте стандартные блоки zero-блоками. С их помощью картинку или текст располагают в определённом месте, а не там, где они размещены в стандартных блоках. Но потом этот блок придётся отдельно адаптировать для мобильных устройств.

Опытные дизайнеры часто всё делают в zero. Начинающим для кастомизации лучше попробовать сторонние сервисы, которые легко интегрируются с Тильдой. Например, на сайт можно добавить фотогалерею из Instagram, калькуляторы, интерактивные картинки.

Действия перед публикацией сайта

Я собрала всё в Тильде, но мне предстоит ещё один важный этап: оптимизация и тестирование. У нас есть чеклист, который дизайнеры Svoemedia каждый день используют в работе. В нем всё, что нужно сделать перед публикацией сайта с нашими лайфхаками. Ещё у Тильды есть инструкции для каждого из этих действий.

Я перечислю только самое важное, без чего сайт не будет функционировать полноценно. Вот что нужно сделать:

• Проверить ссылки — в правильное ли место они ведут.
• Проверить, как сайт выглядит на мобильных устройствах, если вы использовали zero-блоки.
• Настроить и протестировать формы приёма данных.
• Сделать базовое SEO. Прописать заголовки: H1, H2, H3 и так далее. Заголовок H1 должен содержать ключевой запрос, по которому будут искать ваш сайт. Также нужно прописать title и description ― их видно в поисковике и когда отправляете ссылку на свой сайт.
  Тильда позволяет прописать разные варианты заголовка и описания для отображения в поисковой выдаче и при шеринге в социальных сетях.

• Добавить документы о защите персональных данных, если собираете информацию о пользователях: имя, e-mail, телефон и другое.
• Добавить фавикон и бейджик для соцсетей.
• Подключить домен.
• Включить индексацию в настройках сайта.
• Проверить оптимизацию для поисковиков через Тильда-панель вебмастера.

Что в итоге

Чтобы сделать сайт на Тильде, за который не будет стыдно, нужно продумать структуру, написать текст, подобрать картинки, собрать всё в Тильде, оптимизировать, протестировать и опубликовать.

Чтобы сайт получился достойным, вдохновляйтесь сайтами из вашей ниши. Смотрите, что в них работает и почему, применяйте лучший опыт на своём сайте.

Создание лендинга заняло 2 дня: один на подготовку контента и прототип и день на вёрстку в Тильде, оптимизацию и тестирование.

Похожие публикации:

1. Какие способы отображения массивов существуют в mathcad
2. Какие способы построения декартовых графиков существуют в среде mathcad
3. Какие существуют способы выделения блоков в mathcad
4. Какие существуют способы управления настройками браузера html