Создание сайтов на Tilda с использованием искусственного интеллекта. Самоучитель

Владимир Молочков Санкт-Петербург «БХВ-Петербург» 2024

УДК 004.4'236 ББК 32.973.26-018 М75 Молочков В. П. М75 Создание сайтов на Tilda с использованием искусственного интеллекта. Самоучитель. — СПб.: БХВ-Петербург, 2024. — 368 с.: ил. — (Самоучитель) ISBN 978-5-9775-1947-2 Подробно рассмотрена работа с конструктором сайтов Tilda, позволяющим создавать сайты любой сложности из готовых блоков и шаблонов без программирования. Приведены рекомендации по использованию панели разработчика и советы по оптимальным настройкам. Даны пошаговые инструкции для создания одностраничного сайта-визитки, лендинга, многостраничного сайта, сайта-портфолио. Описан принцип работы с Zero block, рассказано о публикации меню, галереи изображений, об использовании форм и виджетов, добавлении анимации и видео. Рассмотрена работа с нейросетями, позволяющими создавать тексты и иллюстрации для сайта. Читатели узнают, как правильно организовать работу над сложными проектами и оптимизировать сайт для поисковых систем. Для начинающих разработчиков УДК 004.4'236 ББК 32.973.26-018 Группа подготовки издания: Руководитель проекта Павел Шалин Зав. редакцией Людмила Гауль Редактор Григорий Добин Компьютерная верстка Ольги Сергиенко Дизайн серии Карины Соловьевой Оформление обложки Зои Канторович "БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20 ISBN 978-5-9775-1947-2 © Молочков В. П., 2024 © Оформление. ООО "БХВ-Петербург", ООО "БХВ", 2024

Оглавление Введение .......................................................................................................................... 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

4 Оглавление Как оптимизировать изображения для сайта? ............................................................................. 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

Оглавление 5 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

6 Оглавление Настраиваем во всех блоках анимацию ............................................................................. 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

Оглавление 7 Третий экран: блок 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

8 Оглавление Размещаем меню на всех страницах сайта ................................................................................ 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

Оглавление 9 Пример. Делаем слайдер и слайд-шоу ....................................................................................... 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

10 Оглавление 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

Введение Эта книга рассказывает о технологии создания веб-сайтов с помощью конструктора сайтов Tilda. Как говорят психологи, у современного человека «клиповое мышление», поэтому блочный подход к созданию сайтов на Tilda как нельзя лучше подходит в качестве модели для такого восприятия информации в нашем стремительном веке. Книга ориентирована на читателей, обладающих лишь базовыми навыками работы на компьютере. Специальных знаний для работы с ней не потребуется. Первой отличительной чертой книги является то, что главы ее имеют небольшой объем. Это сделано специально, чтобы материал легче усваивался новичками в рассматриваемых в них темах. Вторая особенность ее заключается в том, что для создания контента нашего учебного сайта мы будем использовать нейросети. Иначе говоря, чтобы сгенерировать изображения и текстовый контент блоков сайта на Tilda, мы прибегнем к помощи искусственного интеллекта. Некоторые авторитетные ученые считают, что нейросети произведут в мире такую же революцию, которую произвел в свое время персональный компьютер. Нейросетям посвящены четыре главы этой книги: 6, 7, 18 и 23. НОВЫЙ ТЕРМИН Под нейросетью понимается скопление нейронов, способное в совокупности распознавать какие-либо явления или объекты. Это скопление обучается, действует последовательно, запоминает данные, умеет обрабатывать запросы и выдавать информацию. По такому принципу работают нейронные связи в человеческом мозге, поэтому нейросети часто называют искусственным интеллектом. Иначе говоря, нейронные сети — это разновидность машинного обучения, при котором компьютерная программа работает по принципу человеческого мозга, используя различные нейронные связи. Конструктор Tilda поможет читателю собрать сайт из готовых модулей и выбрать подходящий шаблон его оформления. Разбираться в программном коде сайта при этом не понадобится. В учебном процессе школ, колледжей и вузов книга может быть использована как учебное пособие в курсах «Проектирование и разработка веб-приложений» профессионального модуля ПМ.09 «Проектирование, разработка и оптимизация веб-

12 Введение приложений», код специальности 09.02.07 «Информационные системы и программирование» квалификация: «Разработчик веб- и мультимедийных приложений». Почему стоит делать сайты на Tilda? Поклонники Tilda считают, что мир изменился и классическая верстка сайтов постепенно уходит в прошлое. В этом есть резон, если требуется запустить сайт быстро и без особых знаний в области программирования и дизайна. Преимущества Tilda над другими способами создания сайтов таковы: малые сроки (2–3 недели), затрачиваемые на разработку и запуск сайта; Tilda — блочный конструктор, в котором блоки адаптированы, многократно проверены и отлажены специалистами. Поэтому в Tilda нет «багов». По этой же причине сайты на Tilda хорошо продвигаются и наращивают ссылочную массу. На жаргоне веб-разработчиков они хорошо «сеошатся» (от SEO — продвижение, оптимизация, раскрутка сайта); НОВЫЙ ТЕРМИН Слово «баг» заимствовано из английского языка (bug означает насекомое). Это жаргонное слово принято понимать в среде компьютерщиков в значении «ошибка, неполадка, сбой». Поэтому на сленге программистов слово «баг» используется для обозначения мелких ошибок в компьютерных программах, приводящих к их некорректной работе. сайт на Tilda делает один человек — он и разработчик, и дизайнер, и верстальщик. В классической верстке в работе этих звеньев могут иметь место несостыковки из-за того, что на разных этапах создания сайта ими занимаются разные специалисты, а в Tilda такие разногласия по определению исключены; сайты на Tilda — гибкие, т. е. позволяют быстро делать их правку и доработку; Tilda пригоден для создания всех видов сайтов, т. е. может закрыть все потребности заказчиков. Кратко о возможностях Tilda Конструктор создания сайтов Tilda имеет множество плюсов: легкий, интуитивно понятный интерфейс; удобные настройки для создания и редактирования сайта; интеграция с другими сервисами — например, с множеством платежных систем; наличие встроенного редактора Zero Block; автоматическая адаптация блоков под мобильные устройства; SEO-оптимизация сайтов, созданных на Tilda; возможность создания интернет-магазина; отличная система FAQ и служба поддержки для новичков и пр.

Введение 13 Tilda — блочный конструктор сайтов Блоки — основа Tilda. Сегодня в библиотеке этого блочного конструктора более 500 блоков, связанных с 30 темами (категориями) сайтов, и более 200 шаблонов для разных видов бизнеса. В каждом блоке уже имеется текст и изображения, которые мы должны заменить своим контентом. Все блоки из библиотеки изначально адаптивны. Это значит, что они правильно отображаются на экранах планшетов, смартфонов и компьютеров (контент автоматически подстраивается под размеры экранов мобильных устройств). Некоторые особенности Tilda Редактор Zero Block Если вы не захотите использовать готовые блоки, то в редакторе Zero Block, входящем в состав Tilda, можно создать свой собственный блок с уникальным дизайном. При желании с помощью анимации в Zero Block можно заставить элементы двигаться. Впрочем, анимацией не стоит злоупотреблять. Лучше ее использовать, чтобы привлечь внимание только к самым важным элементам сайта, т. е. сделать на них акценты. Формы Форма заявки — один из способов превратить посетителей сайта в ваших клиентов. В библиотеке Tilda каждая форма сделана так, что ее легко изменить. Для работы с заявками клиентов в Tilda есть специальный инструмент— Tilda CRM. Интернет-магазин С помощью Tilda вы сможете сделать свой интернет-магазин. В программе для этого имеются блоки с карточками товаров и корзиной покупателя. Для онлайн-платежей можно добавить множество платежных систем: Юmoney, Робокассу, Paypal и др. SEO В Tilda можно оптимизировать сайт для поисковых систем: добавить к сайту заголовок и описание, атрибуты (alt) к изображениям и т. п. Публикация сайта в Сети Для изучения Tilda вы можете 14 дней работать в ней бесплатно, а также бесплатно опубликовать свой учебный сайт на домене третьего уровня. При желании можно купить у регистраторов домен, а при оплате тарифа Personal или Business на год вы получите домен в подарок (бесплатно).

14 Введение Tilda и WordPress Конструкторов сайтов довольно много, но разработчики Tilda все же считают своим главным конкурентом не других конструкторов, а систему управления сайтом WordPress. И если говорить о Tilda на простом языке, то он представляет собой программу не для «крутых» профессионалов, а скорее для рядовых пользователей ПК — новичков в веб-дизайне. Представьте, что вам нужно быстро поесть, а времени варить суп у вас нет. Тогда вы используете какой-нибудь фастфуд — например, бутерброд. Исходя из этой аналогии, суп — это WordPress, а бутерброд — это Tilda. Сравним Tilda и WordPress: на Tilda проще, чем на WordPress, создать сайт и управлять им. Возможность очень быстро сделать работающий в Сети сайт — главное достоинство Tilda. И хотя Tilda имеет меньшую функциональность в сравнении c WordPress, — это не проблема. Далеко не всем пользователям она и нужна; Tilda — программа платная, хостинг и домен тоже не самые дешевые. так что за персональный доступ к ней в режиме полных возможностей придется заплатить 6000 рублей в год. Для тех, кого это не устраивает, есть альтернатива — бесплатный WordPress. Однако владельцу сайта WordPress всё равно понадобится оплатить хостинг и доменное имя (с правом выбора оных); заказчик должен понимать, что при создании за 6 дней сайта стоимостью 6000 рублей проект выполняется с использованием готового шаблона, в котором могут оставаться различные ненужные элементы типа надписи «Made on Tilda». В WordPress подобную надпись легко удалить, а в Tilda удалить ее возможно только на самом дорогом тарифе; сохранить на диск созданный вами сайт, работая на тарифе Personal, нельзя. А в WordPress — можно (и бесплатно); если вам нужен одностраничный сайт (лендинг) или сайт-визитка с портфолио и вашими контактными данными, то сделать его на Tilda — простой и наилучший вариант. WordPress в этом проигрывает; все шаблоны в Tilda одностраничные, и на них неудобно создавать масштабные сайты (порталы) со сложными многоуровневыми меню. В то же время пользователям WordPress, в отличие от Tilda, доступно бесплатно значительное количество шаблонов (и плагинов), позволяющих создавать большие многостраничные сайты. Зато Тильда привлекает простотой редактирования шаблонов, с чем сможет справиться любой неподготовленный пользователь. А вот для редактирования шаблонов в WordPress нужны специальные знания (подготовка); в Tilda за внешней простотой скрываются огромные возможности, причем их можно еще увеличить, используя сторонние сервисы и виджеты. Этими же возможностями обладает и WordPress. Обе программы сейчас стремительно развиваются и представляют общий интерес для пользователей, готовых с ними работать.

Введение 15 Используемые в книге обозначения В книге можно встретить элементы оформления и обозначения, смысл которых поясняется далее. Так, например, выражение «Выберите команду Действия | Передать сайт» означает, что нужно открыть меню Действия и в этом меню выбрать команду Передать сайт. Если в тексте встречаются два обозначения клавиш, между которыми стоит знак плюс (например, <Shift>+<F10>), то это означает, что сначала нажимают и удерживают первую клавишу, затем нажимают вторую, после чего отпускают обе. Когда используется термин «перетаскивание» (буксировка), то подразумевается удерживание нажатой кнопки мыши (левой) при перемещении ее курсора. В книге есть множество особых вставок. В них содержится дополнительная информация, облегчающая чтение и поиск информации. СОВЕТ Советы акцентируют ваше внимание на той информации, которая может быть полезной. Советы иногда могут быть даны в виде алгоритма — последовательности операций, которую нужно выполнить, чтобы получить желаемый результат. ПРИМЕЧАНИЕ Примечания (Замечания) — это подсказки, сообщающие о том, как можно быстрее и эффективнее выполнить ту или иную работу. Некоторые из них помогут в решении типичных проблем и подскажут выход из затруднительных ситуаций. ВНИМАНИЕ Вставка такого предупреждения в текст книги указывает на опасность, связанную с теми или иными ошибочными действиями, особенно если они могут привести к отрицательным результатам вашей работы.  НОВЫЙ ТЕРМИН В книге использовано много специфических терминов, которые читатель встречает впервые. Они разъясняются при первом своем появлении в тексте. В конце книги все специальные термины сведены в глоссарий (словарь) терминов по теме книги. От издательства Ваши замечания, предложения и вопросы отправляйте по адресу электронной почты издательства компьютерной литературы «БХВ» [email protected] или автору книги на адрес [email protected]. Мы будем рады узнать ваше мнение! Подробную информацию о книгах издательства «БХВ» вы найдете на веб-сайте https://bhv.ru.

ЧАСТЬ I Начало работы в Tilda В этой части мы познакомимся с конструктором сайтов Tilda, позволяющим работать над веб-проектами без знания кода. Глава 1. Регистрация. Первое знакомство. Начало работы с Tilda Глава 2. Продолжаем знакомство с Tilda. Термины. Пример Глава 3. Создаем учебный сайт из блоков Tilda Глава 4. Библиотека блоков Tilda

ГЛАВА 1 Регистрация. Первое знакомство. Начало работы с Tilda В этой главе мы выполним регистрацию на сайте производителя Tilda и активируем бесплатный период работы на этом конструкторе сайтов. Регистрация производится на главной странице сайта по адресу https://tilda.cc/ru/. Зайдите на эту страницу и нажмите на кнопку Регистрация или сразу на кнопку Создать сайт бесплатно (рис. 1.1). Рис. 1.1. Окно для регистрации пользователя (сайт https://tilda.cc/ru/)

20 Часть I. Начало работы в Tilda В любом случае работу начинаем с бесплатной учетной записи. Введите в открывшейся панели (рис. 1.2) свое имя, свою электронную почту, придумайте и введите пароль и нажмите на кнопку Зарегистрироваться Рис. 1.2. Регистрируемся у производителя Tilda На следующем шаге (рис. 1.3) создаем наш первый проект: придумываем и вписываем его название — например, Мой первый сайт, и нажимаем на кнопку Создать. Нажав в нижней части следующего окна (рис. 3.4) на кнопку Тарифы и оплата, можно познакомиться с тарифами конструктора.

Глава 1. Регистрация. Первое знакомство. Начало работы с Tilda 21 Рис. 1.3. Придумываем название проекта Рис. 1.4. Нажмите здесь на кнопку Тарифы и оплата О тарифах Tilda По нажатию в окне, показанном на рис. 1.4, на кнопку Тарифы и оплата откроется окно с тарифами Tilda (рис. 1.5). Тариф Free Тариф «Free» позволяет создать и опубликовать сайт бесплатно. Условия этого тарифа разрешают сделать один сайт объемом до 50 страниц и предоставляют до 50 Мбайт места на сервере. Бесплатно можно пользоваться тарифом «Free» в течение 2 недель много раз, но с паузой в один месяц.

22 Часть I. Начало работы в Tilda Рис. 1.5. Три тарифа для Tilda ПРИМЕЧАНИЕ Дизайнер, работающий под заказ, имеет возможность создать такой сайт на бесплатном тарифе, а затем — передать его на оплаченный заказчиком. В подвале созданного сайта будут размещены логотип Tilda и ссылка на сайт конструктора. Удалять это разработчиками Tilda запрещено. ПРИМЕЧАНИЕ Полноценный сайт можно делать лишь на платных тарифах. Бесплатный тариф подходит для знакомства с программой, но создать полноценно работающий сайт на нем вряд ли получится. Дело в том, что на таком тарифе доступны не все блоки, не будет, например, работать собственный домен (т. к. это платная опция), нет доступа к панели Вебмастера (в этой панели можно увидеть ошибки в SEO-оптимизации), форма обратной связи работает лишь частично — т. е. заявки можно просматривать в личном кабинете Tilda, а не получать их на свой почтовый ящик, и т. д. Вот перечень ограничений бесплатного тарифа: нельзя подключить собственный домен (уже подключенный будет отключен); максимальное количество страниц: 50; не работают сервисы приема данных в формах (заявки хранятся во внутренней системе ограниченное время); доступ к библиотеке блоков ограничен (не все блоки доступны); отключится код, добавленный в блок Т123 из категории Другое (см. далее); отключатся системы аналитики (Яндекс.Метрика, Аналитика Google, GTM, пиксели);

Глава 1. Регистрация. Первое знакомство. Начало работы с Tilda 23 нет возможности редактировать содержимое тега <Head>; платежные сервисы недоступны; недоступен Каталог (все добавленные товары будут перемещены в корзину на 30 дней, затем удалены без возможности восстановления); недоступны Потоки (все добавленные записи будут перемещены в корзину на 30 дней, затем удалены без возможности восстановления). Тариф Personal Тариф Personal позволяет создать один сайт, используя все возможности платформы Tilda. Условия этого тарифа разрешают сделать один сайт объемом до 500 страниц и предоставляют до 1 Гбайт места на сервере. Имеется на этом тарифе и возможность подключения своего домена (но только при регулярной и без просрочек ежемесячной оплате). Надо также отметить, что в подвале сайта все равно будет находиться значок Tilda с кликабельным переходом на сайт конструктора, и убрать его оттуда можно будет только при оплате за год сразу. ПРИМЕЧАНИЕ На любом тарифе, если не продлить подписку, ваш сайт будет снят с публикации. Но его данные будут храниться на Tilda еще в течение 6 месяцев. То есть при продлении подписки в течение этого периода можно будет продолжить вносить изменения в свой сайт. Тариф Business Тариф Business позволяет создать пять сайтов по 500 страниц в каждом и получить 1 Гбайт места на сервере. При оплате за год домен предоставляется в подарок. При экспорте исходного кода сайта вы получите сайт, который будет открываться с вашего сервера и не будет зависим от Tilda. Но имейте в виду следующее: вносить изменения в уже выгруженные файлы нельзя — этот пункт прописан в специальном документе разработчиками; форма обратной связи без оплаты тарифа на Тильда на вашем домене работать не будет. ПРИМЕЧАНИЕ При оплате тарифа Personal или Business на год в настройках сайта появляется дополнительная опция отключения лейбла Made on Tilda, который по умолчанию установлен на всех страницах. * * * Выберите в окне, показанном на рис. 1.5, тариф Free. В открывшемся окне этого бесплатного тарифа (рис. 1.6) вы увидите кнопку Активировать. По ее нажатию начнется отсчет 2-недельного бесплатного периода работы по тарифному плану Personal (рис. 1.7).

24 Часть I. Начало работы в Tilda Рис. 1.6. Получаем бесплатную работу в конструкторе в течение 2 недель Рис. 1.7. Тарифный план Personal получен Нажмите в окне, показанном на рис. 1.7, на кнопку Продолжить. В левом верхнем углу открывшегося окна (рис. 1.8) перейдите по ссылке Мои сайты и выберите наш проект с названием МОЙ ПЕРВЫЙ САЙТ.

ГЛАВА 3 Создаем учебный сайт из блоков Tilda Наша задача в этой главе — изучение инструментов Tilda. Мы создадим сайт из семи блоков. Но поскольку в этом сайте будет много картинок, то предварительно ознакомимся с информацией об изображениях для сайтов. Графические форматы для сайтов В веб-дизайне принято использовать следующие растровые графические форматы: формат GIF рекомендован для анимаций. Однако максимальное число цветов, которое может хранить палитра GIF, — 256. То есть для качественных фотографий он не подходит; графический файл в формате JPEG содержит 16-битную (и более) информацию о цвете пиксела. Файл, записанный в формате JPEG, примерно в шесть раз меньше файла, записанного в формате GIF, при одинаковом (на глаз) качестве изображения. Поэтому принято использовать формат JPEG для фотографий; формат PNG, как и JPEG, является форматом сжатия и имеет разновидности: PNG8 и PNG24. PNG8 может хранить лишь 256 цветов (как GIF), а PNG24 использует 16 миллионов цветов (как JPEG). Но главное отличие формата PNG от GIF и JPEG — в поддержке прозрачных изображений (это когда каждому пикселу в отдельности можно задать свою степень прозрачности); WebP — графический формат, созданный компанией Google. Главная цель этого формата — еще больше, чем в других форматах для веб, уменьшить вес (при визуальном сохранении качества картинок). Этот чудо-формат сжимает изображения лучше, чем PNG и JPEG, а также поддерживает прозрачность как PNG. Однако его «любят» не все браузеры; формат SVG (в отличие от четырех предыдущих) — векторный. Размер картинок SVG намного меньше размера любых растровых изображений, а сами изображения не теряют в качестве при масштабировании. На сайтах мы можем взаимодействовать с изображениями в формате SVG при помощи каскадных таблиц стилей (CSS), а применив JavaScript, можно анимировать SVG-изо-

58 Часть I. Начало работы в Tilda бражения. Формат поддерживается всеми браузерами и используется чаще всего для логотипов и значков. 1. Блок CR04. Обложка: заголовок и подзаголовок Начнем с выбора обложки для первого экрана сайта и выполним команду Создать новую страницу | Пустая страница | Все блоки | блок CR04 (рис. 3.1). Рис. 3.1. Выбираем шаблон для первого экрана сайта Отредактируем обложку, нажав на кнопку Контент и записав в блок текст, показанный на рис. 3.2. Рис. 3.2. Начинаем менять блок под свои задачи Мы также загрузили свой графический файл для замены фона в этом блоке (рис. 3.3). Зайдем в Настройки и добавим на обложку элемент Стрелка вниз — она покажет посетителю на направление продолжения информации. Стрелку анимируем и зададим ей белый цвет (рис. 3.4). Нажмите на кнопку Сохранить и закрыть, а затем — на кнопку Предпросмотр, и вы увидите, как выглядит первый экран сайта (рис. 3.5).

Глава 3. Создаем учебный сайт из блоков Tilda 59 Рис. 3.3. Картинка для фона первого экрана сайта Рис. 3.4. Добавляем на экран стрелку вниз Рис. 3.5. Первый экран сайта готов

60 Часть I. Начало работы в Tilda 2. Блок TX15. Текст на белой подложке Для создания второго экрана нажимаем на кнопку , расположенную в нижней части окна интерфейса страницы, из предложенных вариантов текстовых блоков останавливаемся на шаблоне TX15 (рис. 3.6) и вносим в этот блок следующий текст: Об авторе сайта Кандидат педагогических наук. Преподаватель высшей квалификационной категории в ПТК НовГУ. Преподавал такие спецдисциплины, как «Компьютерная графика» (Adobe Photoshop, CorelDRAW, InDesign, основы рекламы и др), «Компьютерные и телекоммуникационные сети» (LAN, WAN, Cisco), «Информатика», «Веб-дизайн» (создание статических и динамических сайтов с использованием HTML5, CSS3, PHP, WordPress, Tilda). Имею большое количество электронных и печатных публикаций, например в издательстве «Академия» издал учебное пособие «Информационные технологии в профессиональной деятельности». В издательстве «Питер» выпустил книги «Цифровое фото» и «Цифровое видео», а также самоучитель «Компьютер для секретаря и офис-менеджера». В издательстве «ДИАЛОГ-МИФИ» опубликовал учебное пособие «От Delphi 7 к Delphi 2006». А в издательстве «БХВ» выпустил серию книг по записи CD и DVD. Всего издал более 20 книг и примерно 200 печатных публикаций в СМИ. Рис. 3.6. Выбираем шаблон для второго экрана сайта Исходную картинку для фона второго экрана сайта заменим на следующую (рис. 3.7). Чтобы текст выглядел нескучно, можно добавить акценты — т. е. выделить отдельные слова и фразы в нем полужирным шрифтом. Затем выделяем весь текст и в появившейся при этом Панели форматирования текста выбираем Типограф. Что у нас получилось в результате, показано на рис. 3.8.  НОВЫЙ ТЕРМИН В Тильде есть специальный инструмент — Типограф, который автоматически заменяет в тексте все «неправильные» кавычки и тире. Так, «елочки» — это французские кавычки (им отдается предпочтение в русском языке), а ''английские двойные'' принято

Глава 3. Создаем учебный сайт из блоков Tilda 61 использовать в англоязычных текстах. Дефис «-» — это орфографический знак (как в «офис-менеджере»), а тире «—» — знак пунктуационный (как в этом тексте). Кроме того, Типограф убирает лишние пробелы, а также ставит неразрывные пробелы, чтобы в тексте не было «висячих» предлогов и строк. Рис. 3.7. Картинка для фона второго экрана сайта Рис. 3.8. Добавляем акценты и Типограф 3. Блок TL02A. Заголовок 52 Прежде чем создать галерею изображений, мы предварительно создадим для нее заголовок, выбрав для этого блок TL02A (рис. 3.9). После редактирования в этом блоке текста и фона у нас получился следующий экран (рис. 3.10).

62 Часть I. Начало работы в Tilda Рис. 3.9. Выбираем шаблон для третьего экрана сайта Рис. 3.10. Заголовок галереи на основе шаблона TL02A 4. Блок GL05. Изображения в одну строку Для экрана с галереей мы выберем вариант шаблона GL05 (рис. 3.11). В разделе Контент исходные изображения шаблона меняем на свои. Результат сохраняем. Теперь блоки TL02A (заголовок) и GL05 (галерея) выглядят совместно как единое целое (рис. 3.12).

Глава 3. Создаем учебный сайт из блоков Tilda 63 Рис. 11. Выбираем шаблон для галереи Рис. 3.12. Изображения в блоке GL05 мы заменили на свои ПРИМЕЧАНИЕ Фотографии, загруженные в галерею и имеющие по большей стороне меньше 1680 пикселов, сохраняют свой исходный размер. Все фотографии, имеющие изначально по большей стороне свыше 1680 пикселов, при загрузке в галерею автоматически уменьшаются до 1680 пикселов по большей стороне.

64 Часть I. Начало работы в Tilda 5. Блок AB604. Две колонки с четырьмя картинками и текстом. Знакомство с фоторедактором Photo Editor В Tilda есть свой встроенный фоторедактор, и загруженные нами фото можно в нем обработать. Для примера добавим в проект блок AB604, предлагающий размещение контента в две колонки с четырьмя картинками и текстом (рис. 3.13). Нажимаем на кнопку Контент и загружаем в шаблон свои фотографии. Как можно видеть на рис. 3.14 — с их размещением возникли проблемы. Рис. 3.13. Для знакомства с Photo Editor выбираем шаблон AB604 Рис. 3.14. Текст на обложках обрезан, и это надо поправить

Глава 3. Создаем учебный сайт из блоков Tilda 65 Рис. 3.15. Вызываем фоторедактор Рис. 3.16. Инструменты фоторедактора Photo Editor Рис. 3.17. Изображения отредактированы

66 Часть I. Начало работы в Tilda Чтобы вызвать фоторедактор, снова войдем в Контент и нажмем на значок Карандаш (рис. 3.15). Интерфейс фоторедактора Photo Editor крайне прост и интуитивно понятен (рис. 3.16). Очевидно, что встроенный в Tilda редактор Photo Editor довольно слабый. Но, как видно из рис. 3.17, ситуацию с картинками с его помощью нам исправить удалось. 6. Блок VD01. Видео с YouTube Для вставки на сайт видео с YouTube в библиотеке блоков выбираем блок VD01 (рис. 3.18). В Контент блока вставляем ссылку на свое видео. Этого достаточно — можно запускать Предпросмотр или Публиковать (рис. 3.19). Рис. 3.18. Блок Видео с YouTube Рис. 3.19. Видео с YouTube помещено в блок VD01

ЧАСТЬ II Практикум работы в Tilda Во второй части книги мы от первого знакомства с Tilda перейдем к углубленной работе с этой программой, включая получение контента посредством нейросетей, а также рассмотрим поисковую оптимизацию сайтов, выполненных на Tilda. Глава 5. Сайт подводного охотника и рыбака из стандартных блоков Глава 6. Получаем контент для сайта (тексты пишут нейросети) Глава 7. С помощью нейросетей генерируем изображения для сайта Глава 8. Финальные настройки рыболовного сайта Глава 9. SEO сайта на Tilda

ГЛАВА 5 Сайт подводного охотника и рыбака из стандартных блоков В этом примере при создании сайта без шаблонов мы используем последовательную цепочку из одиннадцати блоков: 1. CR09. Обложка с отступами по краям. 2. TL02. Заголовок. 3. TX02. Лид (вводный текст). 4. TX01. Текст. 5. TL02. Заголовок. 6. CL19N. Три колонки с цифрами. 7. TL02. Заголовок. 8. QT01. Прямая речь. 9. FD302. Поток: сетка для новостей или блога с фоном. 10. BF305. Призыв к действию: текст и большая кнопка. 11. SM101. Ссылки на соцсети. Теперь надо добавить эти блоки на сайт. Приступим. 1. Блок CR09. Обложка с отступами по краям Нажимаем на кнопку Все блоки | Обложка и находим блок CR09. По щелчку на этом блоке мышью он будет размещен на первом экране нашего сайта (рис. 5.1). 2. Блок TL02. Заголовок Нажав на значок в нижней части блока CR09, открываем библиотеку стандартных блоков Tilda и из раздела Заголовок добавляем блок TL02 Заголовок (рис. 5.2).

92 Часть II. Практикум работы в Tilda Рис. 5.1. Выбор блока CR09 Обложка с отступами по краям Рис. 5.2. За блоком CR09 будет следовать блок TL02 Заголовок 3. Блок TX02. Лид (вводный текст) Уже знакомым способом добавляем текстовый блок TX02 Лид (вводный текст) (рис. 5.3). Рис. 5.3. За блоком TL02 Заголовок последует блок TX02 Лид (вводный текст) 4. Блок TX01. Текст Нажав на значок в нижней части блока TX02, добавляем текстовый блок TX01. Текст. 5. Блок TL02. Заголовок По аналогии с шагом 2 добавляем из раздела Заголовок второй заголовок — блок TL02 Заголовок.

Глава 5. Сайт подводного охотника и рыбака из стандартных блоков 93 6. Блок CL19N. Три колонки с цифрами Из раздела Колонки добавляем блок CL19N Три колонки с цифрами (рис. 5.4). Рис. 5.4. Вид блока CL19N Три колонки с цифрами по умолчанию 7. Блок TL02. Заголовок На этом шаге добавляем блок TL02 Заголовок в третий раз. 8. Блок QT01. Прямая речь Из раздела Текстовый блок добавляем текстовый блок QT01 Прямая речь. 9. Блок FD302. Поток: Сетка для новостей или блога с фоном Добавляем блок с контентом FD302 Поток: Сетка для новостей или блога с фоном. Это новый для нас блок Tilda и весьма непростой. Проще всего для поиска блока FD302 использовать инструмент Лупа (рис. 5.5). Рис. 5.5. Инструмент Лупа вызывает строку поиска, с помощью которой найти желаемый блок очень просто

94 Часть II. Практикум работы в Tilda 10. Блок BF305. Призыв к действию: текст и большая кнопка На этом шаге добавляем блок BF305 — блок призыва к действию с текстом и большой кнопкой (рис. 5.6). Рис. 5.6. Вид блока BF305 по умолчанию — блока призыва к действию с текстом и большой кнопкой 11. Блок SM101. Ссылки на соцсети В завершение построения макета сайта добавляем блок SM101 Ссылки на соцсети с кнопками для всех ваших сетей (рис. 5.7). Рис. 5.7. В настройках этих кнопок можно добавить все ваши сети (а не только «Фейсбук» и «Твиттер») На этом мы завершаем работу над «скелетом» нашего сайта. Далее мы контент каждого из одиннадцати добавленных в него блоков отредактируем «под себя». Редактируем цепочку из одиннадцати блоков Итак, блоки для сайта мы выбрали и добавили. Теперь мы их настроим. Работу выполним по шагам.

Глава 5. Сайт подводного охотника и рыбака из стандартных блоков 95 Шаг 1. Редактируем блок CR09. Обложка с отступами по краям Текст заголовка и подзаголовка редактируем на свое усмотрение. Чтобы изменить текст на кнопке, необходимо нажать на кнопку Контент и опуститься вниз до раздела Текст кнопки (рис. 5.8). Здесь мы меняем текст кнопки на желаемый и выполняем команду Сохранить и закрыть. Результат редактирования блока CR09 показан на рис. 5.9. Рис. 5.8. Меняем текст для кнопки на желаемый и выполняем команду Сохранить и закрыть Рис. 5.9. Предварительные настройки для блока CR09 выполнены Шаг 2. Добавляем якорную ссылку: блок T173 Для знакомства с якорными ссылками между восьмым блоком макета QT01 Прямая речь и девятым блоком FD302 Поток: Сетка для новостей или блога с фоном добавим (через кнопку ) еще один блок — T173 Якорная ссылка. Найти его можно с помощью строки поиска в библиотеке блоков в разделе Другое.

96 Часть II. Практикум работы в Tilda НОВЫЙ ТЕРМИН Якорные ссылки — это гиперссылки, которые указывают на определенный элемент или раздел страницы сайта. Они могут быть полезны для создания навигации внутри длинных документов. Благодаря якорной ссылке посетитель сайта по щелчку на ней будет попадать не просто на новую страницу, а на конкретный блок внутри страницы. На длинных лендингах якорные ссылки можно применять для создания поблочных меню. Добавив на сайт блок T173 Якорная ссылка (рис. 5.10), нажимаем для него на кнопку Контент и в поле Имя якорной ссылки вставляем осмысленное название будущей ссылки, набранное латиницей. Рис. 5.10. Блок T173 Якорная ссылка СОВЕТ «Осмысленное» название ссылки должно отражать суть перехода по этой ссылке. Например, для блока с услугами назовите ссылку uslugi. Именно это название (в виде #uslugi) вы будете указывать в поле ссылки для меню или кнопки. И это будет осмысленное решение. Поскольку по созданной нами ссылке мы делаем переход на блок FD302 Поток: Сетка для новостей или блога с фоном, то ссылку можно назвать, например, potok или blog (рис. 5.11). Затем нажимаем на кнопку Сохранить и закрыть. Рис. 5.11. Мы назвали якорную ссылку blog

Глава 5. Сайт подводного охотника и рыбака из стандартных блоков 97 Теперь в блоке CR09 Обложка с отступами по краям нажимаем мышью на кнопку Контент, добавляем ссылку для кнопки через хештег с решеткой #blog и активируем флажок Открыть в новом окне (рис. 5.12). Завершаем настройку якорной ссылки нажатием на кнопку Сохранить и закрыть. Рис. 5.12. Текст для кнопки и якорная ссылка для кнопки настроены ВАЖНО Между значком # и словом blog не должно быть пробела! В противном случае ссылка работать не будет. Проверить работу якорной ссылки можно в режиме Предпросмотр. Шаг 3. Обеспечиваем плавный скролл до локальной якорной ссылки — блок T178 Если переход по кнопке Перейти к консультациям на блок FD302 Поток: Сетка для новостей или блога с фоном происходит слишком быстро, то его можно сделать плавным. Для этого вернитесь к редактированию блока с кнопкой для перехода по ссылке (рис. 5.13), нажмите в его нижней части на кнопку и добавьте в него (через строку поиска) блок T178 Плавный скролл до локальной якорной ссылки (рис. 5.14). Теперь в режиме Предпросмотр можно убедиться, что по нажатию на кнопку Перейти к консультациям переход к блоку FD302 осуществляется плавно. Рис. 5.13. Возврат к редактированию блока с кнопкой

98 Часть II. Практикум работы в Tilda Рис. 5.14. Блок T178 Шаг 4. Настраиваем остальные блоки Дальнейшие настройки выполняются похожим образом, и в большинстве случаев вам придется редактировать только контент блоков через кнопку Контент с сохранением итогов редактирования командой Сохранить и закрыть. Например, так выглядят настройки контента третьего блока (рис. 5.15). Рис. 5.15. При желании параметры текста в блоке можно изменить ПРИМЕЧАНИЕ В этой главе мы полностью все блоки начисто редактировать не станем. Часть работы будет показана в следующей главе. Шаг 5. Задаем расстояния между блоками На нашей странице менять расстояние между блоками целесообразно из эстетических соображений, а также чтобы показать, какие из блоков связаны между собой

ГЛАВА 12 Сайт-портфолио В этой главе мы предлагаем вам поучаствовать в создании личных портфолио врача-диетолога и дизайнера сайтов. По сути такие портфолио — это те же лендинги: первый будет призывать посетителя получить консультацию диетолога, а второй предлагает посетителю услугу по созданию сайта. Приведенный в этой главе учебный материал станет отчасти примером работы над сайтами-портфолио, а отчасти — вашим заданием на закрепление изученных ранее приемов работы в Tilda. Пример 1. Консультация диетолога В этом разделе главы мы создадим лендинг нутрициолога-диетолога. Определяем целевую аудиторию лендинга Для определения целевой аудитории мы должны ответить на ряд вопросов: Конкуренты. С какой проблемой сталкивается наша целевая аудитория, ищущая советы по похудению в Интернете? Имеет резон просмотреть аналогичные сайты в Сети и отметить их достоинства и недостатки. В частности, у многих конкурентов нет индивидуальной направленности диет с учетом особенностей конкретного человека. Задачи и проблемы. Сформулируем задачу, которую должен решить наш лендинг, — мы должны создать такой проект, который бы не просто учил людей сбрасывать вес, но и мотивировал бы их изменить свой образ жизни с тем, чтобы результаты сброса веса сохранить надолго, а не на неделю-две. Регистрируемся и создаем лендинг Процесс регистрации нам уже знаком. Даем нашему проекту название и создаем для адреса сайта человекопонятный URL (рис. 12.1): ppzozh53, где pp — правиль-

194 Часть III. Продолжаем и углубляем знакомство с Tilda Рис. 12.1. Даем нашему проекту название и создаем для адреса сайта человекопонятный URL ное питание, zozh — здоровый образ жизни, 53 — регион в котором живет автор сайта (коуч). Первый экран: блок CR17 Первый экран — это визитная карточка лендинга. На нем мы кратко описываем суть сайта и часто добавляем кнопку для перехода на консультацию, покупку или форму заявки. Это самый важный блок, и если он не сработает, то пользователь может сразу закрыть страницу лендинга (рис. 12.2). Рис. 12.2. Блок Обложка в различных ее вариантах часто служит первым экраном сайта

Глава 12. Сайт-портфолио 195 Рис. 12.3. Вид обложки после редактирования блока CR17 Рис. 12.4. Настройки блока CR17

196 Часть III. Продолжаем и углубляем знакомство с Tilda Отредактированный блок CR17 показан на рис. 12.3. Чтобы добиться такого его вида, мы заходим в его Контент и устанавливаем параметры, показанные на рис. 12.4. Чтобы кнопка Обо мне работала, ставим якорь #obomne для перехода по этой кнопке на второй экран. Соответственно перед блоком Обо мне (блок AB201 — см. далее) надо будет установить блок T173 Якорная ссылка (рис. 12.5). Рис. 12.5. Между блоками CR17 и AB201 ставим якорь (блок T173) Второй экран: блок AB201 Этот блок (рис. 12.6) по сути демонстрирует преимущества специалиста, о котором рассказывает лендинг, над конкурентами. Здесь, хотя и не в виде крупных изображений, показаны его сертификаты и составленные им красочно оформленные диеты (рис. 12.7). Например, для людей с непереносимостью лактозы. Рис. 12.6. Блок AB201 в его первоначальном виде

ГЛАВА 17 Знакомство с Zero-блоком Основные задачи по созданию сайта на Tilda могут быть решены с помощью набора типовых блоков. Но Zero-блок (нулевой блок) — редактор, который позволяет с чистого листа располагать элементы блока так, как вам захочется. Работают с ним, как правило, продвинутые пользователи (эксперты в Tilda). Пример одностраничной визитки в Zero-блоке для новичков Начнем с рассмотрения основных (базовых) возможностей редактора Zero Block. НОВЫЙ ТЕРМИН Zero Block (Zero-блок) — встроенный редактор для веб-дизайна в составе Tilda. Он позволяет не использовать для вашего сайта готовые блоки из библиотеки, а с чистого листа создать собственное (уникальное) его оформление. Для создания учебного Zero-блока в библиотеке стандартных блоков Tilda воспользуемся командой Все блоки | Нулевой блок (рис. 17.1). Рис. 17.1. Выбираем нулевой блок Нулевой блок создан, но пока что он наполнен ненужной нам информацией. Чтобы вмешаться в ситуацию, воспользуемся командой Редактировать блок (рис. 17.2) и попадем в панель редактирования Zero-блока (рис. 17.3). Для начала избавимся от содержимого по умолчанию: выделим все его объекты комбинацией клавиш <Ctrl>+<A> и нажмем на клавишу <Delete> — в результате блок станет пустым (рис. 17.4).

262 Часть III. Продолжаем и углубляем знакомство с Tilda Рис. 17.2. Выполняем команду Редактировать блок Рис. 17.3. Здесь можно менять контент Zero-блока и адаптировать его под себя Рис. 17.4. Zero-блок от содержимого по умолчанию очищен На основе этого блока мы создадим одноэкранную визитку — с ее помощью мы расскажем о себе. Для того чтобы добавить в блок заголовок, нажимаем в верхнем левом углу на кнопку и выбираем инструмент Add Text (рис. 17.5). В открывшейся панели вводим заголовок: ОБО МНЕ — и нажимаем на кнопку Settings, расположенную в нижнем правом углу панели (рис. 17.6). В следующей панели нам предоставляется доступ к форматированию введенного текста. В области Element Settings мы зададим ему расположение по центру, в поле Size установим размер шрифта 40 пикселов, а в поле Weight — толщину шрифта заголовка сделаем Bold (рис. 17.7).