В.П. Молочков | Создание сайтов на Tilda с использованием искусственного интеллекта. Самоучитель (2024) [PDF]

Оглавление
Введение ................................................................................................................................. 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
1. Блок CR04. Обложка: заголовок и подзаголовок .................................................................... 58
2. Блок TX15. Текст на белой подложке ...................................................................................... 60
3. Блок TL02A. Заголовок 52 ........................................................................................................ 61
4. Блок GL05. Изображения в одну строку .................................................................................. 62
5. Блок AB604. Две колонки с четырьмя картинками и текстом.
Знакомство с фоторедактором Photo Editor ................................................................................ 64
6. Блок VD01. Видео с YouTube ................................................................................................... 66
7. Блок 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
1. Блок CR09. Обложка с отступами по краям ............................................................................ 91
2. Блок TL02. Заголовок ................................................................................................................ 91
3. Блок TX02. Лид (вводный текст) .............................................................................................. 92
4. Блок TX01. Текст ....................................................................................................................... 92
5. Блок TL02. Заголовок ................................................................................................................ 92
6. Блок CL19N. Три колонки с цифрами ..................................................................................... 93
7. Блок TL02. Заголовок ................................................................................................................ 93
8. Блок QT01. Прямая речь ........................................................................................................... 93
9. Блок FD302. Поток: Сетка для новостей или блога с фоном ................................................. 93
10. Блок BF305. Призыв к действию: текст и большая кнопка.................................................. 94
11. Блок 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
1. Выбор шаблона, настройка страницы сайта .......................................................................... 213
2. Создаем логотип для шапки сайта ......................................................................................... 214
3. Редактируем блок ME302 ....................................................................................................... 215
4. Блок CR16 и якорная ссылка T173 ......................................................................................... 215
5. Блок FR101. Список с галочками ........................................................................................... 217
6. Блок AB604. Две колонки с четырьмя картинками и текстом .................................................... 217
7. Блоки TL03 и BF204N ............................................................................................................. 218
8. Блок FR201 ............................................................................................................................... 220
9. Добавление значков из пакета Tilda Icons ................................................................................... 221
10. Блок TS201 ............................................................................................................................. 221
11. Блок BF308N .......................................................................................................................... 222
12. Блок CN106 ............................................................................................................................ 223
13. Добавляем кнопку Наверх..................................................................................................... 223
14. Публикация сайта в Сети ...................................................................................................... 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