Подробно рассмотрена работа с конструктором сайтов Tilda, позволяющим создавать сайты любой сложности из готовых блоков и шаблонов без программирования. Приведены рекомендации по использованию панели разработчика и советы по оптимальным настройкам. Даны пошаговые инструкции для создания одностраничного сайта-визитки, лендинга, многостраничного сайта, сайта-портфолио и интернет-магазина. Описан принцип работы с Zero block, рассказано о публикации меню, галереи изображений, об использовании форм и виджетов, добавлении анимации и видео . Рассмотрена работа со шрифтами, регистрация и подключение домена, добавление SSL-сертификата. Отдельное внимание уделено интеграции интернет-магазина с платежными системами. Читатели узнают, как правильно организовать работу над сложными проектами и разрабатывать сайты на заказ.
Для начинающих разработчиков
СОЗДАЙ СВОЙ САЙТ ЗА ЧАС!
- Простое создание сайтов без программирования
- Инструменты и возможности конструктора Tilda
- Подробная инструкция по созданию лендинга, «визитки» и многостраничного сайта
- Создание портфолио
- Сборка сайта из стандартных блоков
- Создание контента и иллюстраций с использованием нейросетей
- Использование анимации и видео
- Внедрение виджетов и форм
- Оптимизация сайта для поисковых систем
Книгу “Создание сайтов на Tilda с использованием искусственного интеллекта. Самоучитель” можно купить со скидкой в интернет-магазине издательства “БХВ“.
Введение………………………………………………………………………………………………… 11
Почему стоит делать сайты на Tilda?………………………………………………………………………………………. 12
Кратко о возможностях Tilda……………………………………………………………………………………………………. 12
Tilda — блочный конструктор сайтов……………………………………………………………………………………… 13
Некоторые особенности Tilda…………………………………………………………………………………………………… 13
Редактор Zero Block…………………………………………………………………………………………………………… 13
Формы…………………………………………………………………………………………………………………………………. 13
Интернет-магазин………………………………………………………………………………………………………………. 13
SEO………………………………………………………………………………………………………………………………………. 13
Публикация сайта в Сети………………………………………………………………………………………………….. 13
Tilda и WordPress………………………………………………………………………………………………………………………… 14
Используемые в книге обозначения…………………………………………………………………………………………. 15
От издательства…………………………………………………………………………………………………………………………. 15
Часть I. Начало работы в Tilda…………………………………………………. 17
Глава 1. Регистрация. Первое знакомство. Начало работы с Tilda…………. 19
О тарифах Tilda………………………………………………………………………………………………………………………….. 21
Тариф Free………………………………………………………………………………………………………………………….. 21
Тариф Personal…………………………………………………………………………………………………………………… 23
Тариф Business……………………………………………………………………………………………………………………. 23
Интерфейс…………………………………………………………………………………………………………………………………… 25
Устанавливаем базовые настройки сайта………………………………………………………………………………. 26
Резюме…………………………………………………………………………………………………………………………………………. 33
Глава 2. Продолжаем знакомство с Tilda. Термины. Пример………………….. 35
Действия со страницей сайта……………………………………………………………………………………………………. 38
Инструменты для редактирования страницы………………………………………………………………….. 40
Действия с блоками……………………………………………………………………………………………………………………. 41
Блоки Шапка (Header) и Подвал (Footer)…………………………………………………………………………. 43
Библиотека значков Tilda………………………………………………………………………………………………………….. 43
Как написать в поддержку?………………………………………………………………………………………………………. 44
Практический пример………………………………………………………………………………………………………………… 44
Как оптимизировать изображения для сайта?………………………………………………………………………… 50
Виды сайтов на Tilda…………………………………………………………………………………………………………………. 53
Лендинг……………………………………………………………………………………………………………………………….. 54
Многостраничник………………………………………………………………………………………………………………. 54
Магазин………………………………………………………………………………………………………………………………. 54
Корпоративный сайт…………………………………………………………………………………………………………. 55
Визитка……………………………………………………………………………………………………………………………….. 55
Портфолио………………………………………………………………………………………………………………………….. 55
Промо-сайт…………………………………………………………………………………………………………………………. 55
Блог……………………………………………………………………………………………………………………………………… 55
Лонгрид……………………………………………………………………………………………………………………………….. 55
Личный (персональный) сайт……………………………………………………………………………………………. 56
Вопросы для самопроверки………………………………………………………………………………………………………. 56
Задание……………………………………………………………………………………………………………………………………….. 56
Глава 3. Создаем учебный сайт из блоков Tilda……………………………………… 57
Графические форматы для сайтов……………………………………………………………………………………………. 57
- Блок CR04. Обложка: заголовок и подзаголовок……………………………………………………………….. 58
- Блок TX15. Текст на белой подложке………………………………………………………………………………….. 60
- Блок TL02A. Заголовок 52…………………………………………………………………………………………………….. 61
- Блок GL05. Изображения в одну строку………………………………………………………………………………. 62
- Блок AB604. Две колонки с четырьмя картинками и текстом. Знакомство с фоторедактором Photo Editor 64
- Блок VD01. Видео с YouTube……………………………………………………………………………………………….. 66
- Блок CN103. Контакты с телефоном и e-mail………………………………………………………………………. 67
Вопросы для самопроверки………………………………………………………………………………………………………. 69
Глава 4. Библиотека блоков Tilda………………………………………………………….. 71
Создаем первую страницу сайта……………………………………………………………………………………………… 71
Знакомимся с настройками страницы……………………………………………………………………………………… 75
Библиотека блоков Tilda…………………………………………………………………………………………………………… 77
Инструмент Настройки…………………………………………………………………………………………………….. 80
Инструмент Контент…………………………………………………………………………………………………………. 83
Кнопка добавления нового блока…………………………………………………………………………………….. 85
Стандартные блоки Tilda………………………………………………………………………………………………….. 85
Все блоки…………………………………………………………………………………………………………………… 85
Zero Block (нулевой блок)………………………………………………………………………………………… 87
Резюме…………………………………………………………………………………………………………………………………………. 88
Часть II. Практикум работы в Tilda…………………………………………. 89
Глава 5. Сайт подводного охотника и рыбака из стандартных блоков….. 91
- Блок CR09. Обложка с отступами по краям………………………………………………………………………… 91
- Блок TL02. Заголовок……………………………………………………………………………………………………………. 91
- Блок TX02. Лид (вводный текст)…………………………………………………………………………………………… 92
- Блок TX01. Текст……………………………………………………………………………………………………………………. 92
- Блок TL02. Заголовок……………………………………………………………………………………………………………. 92
- Блок CL19N. Три колонки с цифрами…………………………………………………………………………………… 93
- Блок TL02. Заголовок……………………………………………………………………………………………………………. 93
- Блок QT01. Прямая речь………………………………………………………………………………………………………… 93
- Блок FD302. Поток: Сетка для новостей или блога с фоном……………………………………………… 93
- Блок BF305. Призыв к действию: текст и большая кнопка………………………………………………. 94
- Блок SM101. Ссылки на соцсети………………………………………………………………………………………… 94
Редактируем цепочку из одиннадцати блоков………………………………………………………………………… 94
Шаг 1. Редактируем блок CR09. Обложка с отступами по краям…………………………………. 95
Шаг 2. Добавляем якорную ссылку: блок T173………………………………………………………………. 95
Шаг 3. Обеспечиваем плавный скролл до локальной якорной ссылки — блок T178….. 97
Шаг 4. Настраиваем остальные блоки…………………………………………………………………………….. 98
Шаг 5. Задаем расстояния между блоками……………………………………………………………………… 98
Шаг 6. Выравниваем текст………………………………………………………………………………………………. 100
Шаг 7. Делаем в блоках одинаковый кегль текста……………………………………………………….. 100
Шаг 8. Добавляем разделители………………………………………………………………………………………. 102
Резюме………………………………………………………………………………………………………………………………………. 102
Глава 6. Получаем контент для сайта (тексты пишут нейросети)…………. 103
Работаем с блоком FD302 Поток: Сетка для новостей или блога с фоном
в несколько колонок………………………………………………………………………………………………………………… 103
Генерируем тексты постов для сайта с помощью нейросети Perplexity.ai…………………………. 107
Переносим тексты дыхательных упражнений на сайт………………………………………………………… 109
Используем для сайта нейросеть ChatGPT……………………………………………………………………………. 113
Резюме………………………………………………………………………………………………………………………………………. 116
Глава 7. С помощью нейросетей генерируем изображения для сайта…… 117
Нейросеть Leonardo Ai……………………………………………………………………………………………………………. 117
Генерируем изображения………………………………………………………………………………………………… 119
Нейросеть Lexica, рисующая по словам……………………………………………………………………………….. 123
Нейросеть Easy-Peasy.AI………………………………………………………………………………………………………… 125
Нейросеть DreamStudio…………………………………………………………………………………………………………… 126
Добавляем скачанные изображения на сайт Tilda……………………………………………………………….. 127
Резюме………………………………………………………………………………………………………………………………………. 130
Глава 8. Финальные настройки рыболовного сайта…………………………….. 131
Настраиваем обложку (блок CR09)……………………………………………………………………………………….. 131
Задаем число колонок в блоке………………………………………………………………………………………… 131
Задаем высоту первого экрана сайта…………………………………………………………………………….. 132
Задаем размер заголовка………………………………………………………………………………………………… 132
Меняем фон блока……………………………………………………………………………………………………………. 132
Настраиваем контент в других блоках сайта……………………………………………………………………….. 134
Второй экран (блок TL09)……………………………………………………………………………………………….. 134
Экраны 3 и 4 (текстовые блоки TX02 и TX01)………………………………………………………………. 134
Прием заливки фона цветом без загрузки фонового изображения………………………………. 134
Создаем и настраиваем блок BF101 Кнопка…………………………………………………………………. 136
Редактируем блок SM101………………………………………………………………………………………………… 136
Меняем цвет чисел с помощью пипетки…………………………………………………………………………. 137
Превращаем кнопку в ролловер……………………………………………………………………………………… 137
Добавляем на сайт изображение с помощью гиперссылки………………………………………….. 138
Настраиваем внешний вид кнопки…………………………………………………………………………………. 139
Добавляем ссылки на соцсети………………………………………………………………………………………… 139
Настраиваем во всех блоках анимацию………………………………………………………………………… 140
Настраиваем кнопку Поделиться…………………………………………………………………………………… 142
Советы по красивому оформлению страниц сайта………………………………………………………………. 143
Резюме………………………………………………………………………………………………………………………………………. 144
Глава 9. SEO сайта на Tilda………………………………………………………………….. 145
Тег H1 — заголовок и описание страницы…………………………………………………………………………….. 146
Метатег Title (заголовок) и метатег description (описание страницы)……………………………….. 146
Альтернативный текст для изображений………………………………………………………………………………. 148
Человекопонятный (ЧПУ) URL (понятный человеку адрес сайта)……………………………………… 149
Сниппеты для социальных сетей и поисковых систем…………………………………………………………. 150
Переадресация на единую версию сайта………………………………………………………………………………. 152
Делаем страницу на Tilda главной…………………………………………………………………………………………. 154
Создаем страницу 404…………………………………………………………………………………………………………….. 155
Фавикон (favicon) — значок сайта для браузера…………………………………………………………………. 158
Яндекс.Вебмастер и Google Search Console…………………………………………………………………………… 160
Настройка адаптивности сайта……………………………………………………………………………………………… 161
Находим и обезвреживаем ошибки SEO………………………………………………………………………………… 162
Ошибки важные, но не критические……………………………………………………………………………………….. 162
Резюме………………………………………………………………………………………………………………………………………. 164
Часть III. Продолжаем и углубляем знакомство с Tilda 165
Глава 10. Сайт-визитка………………………………………………………………………… 167
Первый экран сайта…………………………………………………………………………………………………………………. 167
Второй экран сайта…………………………………………………………………………………………………………………. 169
Третий и другие экраны сайта……………………………………………………………………………………………….. 170
Местонахождение (карта)………………………………………………………………………………………………………. 170
Виджет для заказа обратного звонка…………………………………………………………………………………….. 174
Виджет для отправки сообщений…………………………………………………………………………………………… 177
Вопросы для самопроверки……………………………………………………………………………………………………. 180
Глава 11. Лендинг………………………………………………………………………………… 181
Первый экран шаблона: блок CR16………………………………………………………………………………………. 183
Второй экран шаблона: блок FR201……………………………………………………………………………………… 184
Третий экран шаблона: блок FR301………………………………………………………………………………………. 185
Четвертый экран шаблона: блок BF302………………………………………………………………………………… 185
Пятый экран шаблона: блок BF203N…………………………………………………………………………………….. 186
Подключаем службу приема данных из форм (Telegram)……………………………………………………. 187
Редактируем кнопку Попробовать бесплатно……………………………………………………………………… 190
Вопросы для самопроверки……………………………………………………………………………………………………. 191
Задание…………………………………………………………………………………………………………………………………….. 191
Глава 12. Сайт-портфолио……………………………………………………………………. 193
Пример 1. Консультация диетолога………………………………………………………………………………………. 193
Определяем целевую аудиторию лендинга…………………………………………………………………… 193
Регистрируемся и создаем лендинг………………………………………………………………………………… 193
Первый экран: блок CR17……………………………………………………………………………………………….. 194
Второй экран: блок AB201……………………………………………………………………………………………… 196
Третий экран: блок FR102N……………………………………………………………………………………………. 197
Четвертый экран: блок TL028…………………………………………………………………………………………. 198
Пятый экран: блок BF204N……………………………………………………………………………………………… 199
Подключение к форме заявки сервисов приема данных………………………………………………. 200
Шестой экран: блок CN101…………………………………………………………………………………………….. 201
Настройки лендинга………………………………………………………………………………………………………… 201
Настройка главной страницы…………………………………………………………………………………………. 203
Пример 2. Услуга по созданию сайта……………………………………………………………………………………. 205
Первый экран……………………………………………………………………………………………………………………. 205
Второй экран……………………………………………………………………………………………………………………. 205
Третий экран…………………………………………………………………………………………………………………….. 208
Четвертый экран………………………………………………………………………………………………………………. 208
Пятый экран……………………………………………………………………………………………………………………… 210
Где брать контент для лендинга?…………………………………………………………………………………………… 210
Иллюстрации……………………………………………………………………………………………………………………. 210
Тексты……………………………………………………………………………………………………………………………….. 210
Резюме………………………………………………………………………………………………………………………………………. 211
Глава 13. Многоэкранный сайт с меню………………………………………………… 213
- Выбор шаблона, настройка страницы сайта……………………………………………………………………. 213
- Создаем логотип для шапки сайта…………………………………………………………………………………….. 214
- Редактируем блок ME302……………………………………………………………………………………………………. 215
- Блок CR16 и якорная ссылка T173…………………………………………………………………………………….. 215
- Блок FR101. Список с галочками……………………………………………………………………………………….. 217
- Блок AB604. Две колонки с четырьмя картинками итекстом………………………………………….. 217
- Блоки TL03 и BF204N………………………………………………………………………………………………………….. 218
- Блок FR201…………………………………………………………………………………………………………………………… 220
- Добавление значков из пакета Tilda Icons…………………………………………………………………………. 221
- Блок TS201…………………………………………………………………………………………………………………………. 221
- Блок BF308N………………………………………………………………………………………………………………………. 222
- Блок CN106………………………………………………………………………………………………………………………… 223
- Добавляем кнопку Наверх…………………………………………………………………………………………………. 223
- Публикация сайта в Сети………………………………………………………………………………………………….. 224
Вопросы для самопроверки……………………………………………………………………………………………………. 224
Глава 14. Сайт-многостраничник…………………………………………………………. 225
Первая страница многостраничника……………………………………………………………………………………… 225
Вторая страница многостраничника…………………………………………………………………………………….. 227
Третья страница многостраничника……………………………………………………………………………………… 228
Используем буфер обмена блоками……………………………………………………………………………………….. 228
Редактируем наш черновик…………………………………………………………………………………………………….. 229
Шапка и меню сайта……………………………………………………………………………………………………………….. 230
Подвал сайта……………………………………………………………………………………………………………………………. 231
Вопросы для самопроверки……………………………………………………………………………………………………. 234
Задание 1………………………………………………………………………………………………………………………………….. 234
Задание 2………………………………………………………………………………………………………………………………….. 234
Глава 15. Меню из стандартных блоков для многостраничного сайта…. 235
Предварительная подготовка…………………………………………………………………………………………………. 235
Создаем меню…………………………………………………………………………………………………………………………… 238
Размещаем меню на всех страницах сайта…………………………………………………………………………… 241
Резюме………………………………………………………………………………………………………………………………………. 243
Глава 16. Виды меню для сайта……………………………………………………………. 245
Пример 1. Одно меню для всех страниц многостраничника……………………………………………….. 245
Пример 2. Многоуровневое меню…………………………………………………………………………………………… 249
Способ 1. Использование блоков ME601, ME601A и ME601B…………………………………… 250
Способ 2. Использование команды Добавить меню 2-го уровня…………………………………. 253
Пример 3. Меню для перемещения внутри одной страницы……………………………………………….. 254
Пример 4. Меню с переходом на метку…………………………………………………………………………………. 256
Способ 1. Используем ID блока……………………………………………………………………………………… 256
Способ 2. Ставим якорь…………………………………………………………………………………………………… 259
Вопросы для самопроверки……………………………………………………………………………………………………. 260
Задание…………………………………………………………………………………………………………………………………….. 260
Глава 17. Знакомство с Zero-блоком…………………………………………………….. 261
Пример одностраничной визитки в Zero-блоке для новичков……………………………………………… 261
Адаптация нулевого блока……………………………………………………………………………………………………… 266
Настраиваем макет нулевого блока для планшета с горизонтальной ориентацией… 266
С помощью панели для работы с отзывчивым дизайном……………………………………. 266
Используем эмулятор……………………………………………………………………………………………… 267
Настраиваем макет нулевого блока для планшета с вертикальной ориентацией…….. 268
Настраиваем макет нулевого блока для смартфона в горизонтальном положении…. 268
Настраиваем макет нулевого блока для смартфона в вертикальном положении……… 271
Резюме………………………………………………………………………………………………………………………………………. 271
Глава 18. Продолжаем изучать Zero-блок…………………………………………….. 273
Новые знания о веб-редакторе Zero Block…………………………………………………………………………….. 273
Пример создания собственной страницы в Zero Block…………………………………………………………. 275
Фон сайта………………………………………………………………………………………………………………………….. 276
Изображение…………………………………………………………………………………………………………………….. 277
Использование для фона изображения………………………………………………………………………….. 279
Текст………………………………………………………………………………………………………………………………….. 281
Кнопка………………………………………………………………………………………………………………………………. 284
Настройка адаптивности в Zero Block…………………………………………………………………………………… 285
Планшет в горизонтальной ориентации………………………………………………………………………… 285
Планшет в вертикальной ориентации……………………………………………………………………………. 286
Смартфон в горизонтальном положении……………………………………………………………………….. 287
Смартфон в вертикальном положении…………………………………………………………………………… 287
Вопросы для самопроверки……………………………………………………………………………………………………. 290
Задание…………………………………………………………………………………………………………………………………….. 290
Глава 19. Анимирование блоков………………………………………………………….. 291
Basic Animation в настройках стандартных блоков…………………………………………………………….. 291
Анимация в Zero Block…………………………………………………………………………………………………………….. 293
Базовая анимация в Zero Block……………………………………………………………………………………….. 293
Раздел Animation…………………………………………………………………………………………………….. 293
Раздел Parallax……………………………………………………………………………………………………….. 295
Раздел Fixing…………………………………………………………………………………………………………… 295
Пошаговая анимация в Zero Block………………………………………………………………………………….. 296
Пример. Делаем слайдер и слайд-шоу…………………………………………………………………………………… 299
Слайдер…………………………………………………………………………………………………………………………….. 299
Слайд-шоу………………………………………………………………………………………………………………………… 301
Вопросы для самопроверки……………………………………………………………………………………………………. 302
Задание…………………………………………………………………………………………………………………………………….. 302
Глава 20. Zero Block + pop-up……………………………………………………………….. 303
Пример 1. Создаем pop-up на блоке BF503…………………………………………………………………………… 303
Создаем первый Zero-блок с кнопкой…………………………………………………………………………….. 303
Инструмент Волна…………………………………………………………………………………………………… 304
Инструмент Слои…………………………………………………………………………………………………….. 305
Заливка фона…………………………………………………………………………………………………………… 306
Создаем блок BF503………………………………………………………………………………………………………… 306
Кнопка первого Zero-блока получает адрес…………………………………………………………………. 307
Создаем второй Zero-блок………………………………………………………………………………………………. 307
Добавляем блок T123 с HTML-кодом……………………………………………………………………………. 309
Пример 2. Создаем всплывающее окно на новом блоке-модификаторе T1093…………………. 311
Первый блок: стандартный блок CR40………………………………………………………………………….. 311
Второй блок: Zero Block………………………………………………………………………………………………….. 311
Третий блок: модификатор Т1093………………………………………………………………………………….. 311
Выполняем необходимые настройки pop-up…………………………………………………………………. 313
Резюме………………………………………………………………………………………………………………………………………. 313
Глава 21. Добавляем и настраиваем форму на сайте Tilda……………………. 315
Пример настройки формы на прием данных…………………………………………………………………………. 315
Шаг 1. Шапка блока и поля формы………………………………………………………………………………… 315
Поле 1. Почта читателя электронной библиотеки………………………………………………. 317
Поле 2. Ф.И.О. (фамилия, имя, отчество) читателя………………………………………………. 317
Поле 3. Маска телефона читателя………………………………………………………………………… 318
Поле 4. Отзыв…………………………………………………………………………………………………………… 319
Шаг 2. Текст на кнопке…………………………………………………………………………………………………….. 320
Шаг 3. Прием данных из формы……………………………………………………………………………………… 323
Шаг 4. Внешний вид формы…………………………………………………………………………………………….. 324
Вопросы для самопроверки……………………………………………………………………………………………………. 326
Задание…………………………………………………………………………………………………………………………………….. 326
Глава 22. Полезные советы и ресурсы для дизайнера,
использующего Tilda……………………………………………………………………………. 327
Поиск работы на Tilda…………………………………………………………………………………………………………….. 327
Где искать заказчиков на сайт Tilda?…………………………………………………………………………………….. 328
Этапы работы над сайтом………………………………………………………………………………………………………. 328
Полезные программы и сервисы…………………………………………………………………………………………….. 330
Adobe Photoshop………………………………………………………………………………………………………………. 330
Joxi…………………………………………………………………………………………………………………………………….. 330
ColorZilla……………………………………………………………………………………………………………………………. 331
WhatFont…………………………………………………………………………………………………………………………… 332
Emmet Re:view………………………………………………………………………………………………………………….. 332
flaticon:т значки……………………………………………………………………………………………………………….. 334
WebFonts.pro: шрифты…………………………………………………………………………………………………….. 334
Color Hunt: помощь в работе с цветом…………………………………………………………………………… 335
Шаблоны…………………………………………………………………………………………………………………………… 336
Сайты………………………………………………………………………………………………………………………………… 336
Тексты……………………………………………………………………………………………………………………………….. 337
Figma…………………………………………………………………………………………………………………………………. 337
Растровые изображения и фотографии………………………………………………………………………….. 339
Векторные изображения………………………………………………………………………………………………….. 339
Как бесплатно скопировать Tilda-сайт на диск?…………………………………………………………… 342
Фавикон (Favicon)…………………………………………………………………………………………………………….. 343
Freepik: фон для сайта……………………………………………………………………………………………………… 343
Программа для создания шапки сайта…………………………………………………………………………… 345
Создание логотипов и бейжиков для сайта…………………………………………………………………… 345
Оптимизатор графики для Сети………………………………………………………………………………………. 346
Вопросы для самопроверки……………………………………………………………………………………………………. 347
Задания…………………………………………………………………………………………………………………………………….. 347
Глава 23. Еще об использовании нейросетей в веб-разработке…………….. 349
Использование ChatGPT для прототипирования сайта……………………………………………………….. 349
Пример 1. Создаем прототип (скелет) сайта с помощью нейросети…………………………… 349
Пример 2. Договор с заказчиком на создание сайта…………………………………………………….. 351
Пример 3. Генерация красивых изображений онлайн………………………………………………….. 352
Мощная нейронная сеть Midjourney……………………………………………………………………………………… 353
Нейросеть Midjo………………………………………………………………………………………………………………………. 355
Резюме………………………………………………………………………………………………………………………………………. 357
Глоссарий…………………………………………………………………………………………….. 359
Предметный указатель…………………………………………………………………………. 365
Владимир Петрович Молочков — кандидат педагогических наук, преподаватель высшей квалификационной категории Политехнического колледжа Новгородского госуниверситета им. Ярослава Мудрого. Автор 18 книг по компьютерной тематике и более 200 статей в СМИ.