Глава 17. Знакомство с Zero-блоком 263 Рис. 17.5. Выбираем инструмент Add Text Рис. 17.6. Пишем заголовок: ОБО МНЕ Далее снова используем инструмент Add Text и напишем о себе какую-нибудь подходящую информацию (рис. 17.8). Чтобы отформатировать текст, т. е. вызвать панель форматирования текста, следует выполнить на введенном тексте двойной щелчок мышью. В завершение мы командой Add Image добавляем последовательно три изображения. Tilda создает для них прямоугольники серого цвета — контейнеры (рис. 17.9). В эти контейнеры мы и тянем изображения с диска ПК (рис. 17.10). Подготовив таким образом сайт-визитку, нажимаем в окне Zero-блока (справа вверху) на кнопки SAVE и CLOSE (см. рис. 17.4). Как можно видеть в Предпросмотре — для ПК блок готов. Чего нельзя сказать про просмотр его на экране смартфона (рис. 17.11). Что ж, макет блока нам придется корректировать под каждое разрешение — от планшета до смартфона.
264 Часть III. Продолжаем и углубляем знакомство с Tilda Рис. 17.7. Для форматирования заголовка ОБО МНЕ мы задали три настройки Рис. 17.8. Для форматирования текста двойным щелчком мыши вызывается верхняя панель с инструментами
Глава 17. Знакомство с Zero-блоком 265 Рис. 17.9. Контейнер для изображения Рис. 17.10. Страница ОБО МНЕ готова Рис. 17.11. Блок не адаптивен — его верстка «поплыла»
266 Часть III. Продолжаем и углубляем знакомство с Tilda Адаптация нулевого блока Первоначально мы работаем с десктопной версией Zero-блока. То есть когда вы впервые создаете Zero-блок, то Tilda по умолчанию подгоняет его настройки для монитора ПК. При этом в настройках блока параметры выставляются так, как показано на рис. 17.12: 800 пикселов по высоте рабочей области (Grid Container) — это позволяет нам удобно редактировать нулевой блок; 100% высоты экрана (Window Container) — такая высота экрана назначается, чтобы после публикации макет растягивался на весь экран. Рис. 17.12. Настройки нулевого блока на монитор ПК Настраиваем макет нулевого блока для планшета с горизонтальной ориентацией С помощью панели для работы с отзывчивым дизайном Перейти с десктопной версии на планшет можно с помощью панели для работы с отзывчивым дизайном — она расположена в центре окна Zero-блока вверху (рис. 17.13). В ней имеются значки для основных экранов всех мобильных устройств (слева направо): смартфон в вертикальном положении — 320×480 пикселов; смартфон в горизонтальном положении — 480×640 пикселов; Рис. 17.13. Планшет в горизонтальной ориентации имеет разрешение экрана 960×1200 пикселов
ГЛАВА 22 Полезные советы и ресурсы для дизайнера, использующего Tilda В этой главе мы собрали различные полезные советы и информацию о ресурсах для дизайнера-новичка, работающего на Tilda. Поиск работы на Tilda Вот вы и научились делать сайты на Tilda. Что дальше? А дальше, перед тем, как предлагать свои услуги заказчикам, нужно набраться практики в Tilda. Это можно выполнить поэтапно, шагами, не спеша. Стоит начать свою практику с бесплатного создания сайтов для себя и своих друзей. Так вы приобретете опыт, уверенность в себе, наработаете портфолио. Как вариант — можно копировать понравившиеся сайты с максимальной точностью. Подобным образом учатся, например, художники, копируя картины мастеров. Имеет смысл выбрать свою специализацию (лендинги, интернет-магазины или что-то иное). Чтобы хорошо зарабатывать, не нужно знать всё (это как у врачей). Определяясь со специализацией, придите к компромиссу между тем, что вам нравится, и тем, на что есть спрос. Клиенты часто просят поставить на сайт: обратный звонок, чат, CRM-системы, SEO (Яндекс.Метрика, Google Analytics и др.). Освойте уверенную работу по этим темам. Для поиска клиентов можно создать свою группу в социальных сетях и показывать там свои проекты, а также приводить отзывы на ваши работы. Такую группу можно вместе с портфолио показать потенциальному заказчику. На этом шаге мы работаем уже не бесплатно, а по цене, предлагаемой заказчиком. Нарабатываем репутацию, беремся не за все проекты, а только за те, что нам по силам. Работаем на биржах фриланса. Их очень много — например, kwork.ru, https://www.weblancer.net/ и другие. Можно воспользоваться также сервисом Яндекс.Услуги. Он бесплатен и позволяет общаться с заказчиком в чате. НОВЫЙ ТЕРМИН Биржа — площадка, где фрилансер может найти работу, а работодатель — исполнителя. Биржи есть с бесплатной регистрацией, а есть с платной (PRO-аккаунты). Ваша уверенная работа в Tilda поднимает стоимость работ — вы работаете уже не по цене заказчика, а на своих условиях. Кроме того, вы сможете работать не только как фрилансер, но и как сотрудник веб-студии.
328 Часть III. Продолжаем и углубляем знакомство с Tilda Где искать заказчиков на сайт Tilda? Новичок может начать свою работу с регистрации на биржах фриланса — например, на https://www.kadrof.ru/ (рис. 22.1), а затем в ленте искать проекты с небольшими бюджетами, где клиентам требуется сайт. Предлагать им свои услуги стоит за небольшую оплату, объясняя заказчику, что вам нужны работы для портфолио. Как правило, чем ниже бюджет, тем сложнее заказчику найти хорошего исполнителя. Таким образом, вы можете получить проекты в работу и быстро набрать портфолио. Рис. 22.1. Ищем заказы по Tilda на сайте https://www.kadrof.ru/ СОВЕТ На Kadrof легче брать те заказы, где мало откликов (меньше конкуренция). Помимо портфолио, имеет смысл отправить заказчику сопроводительное письмо — например, «Я рыбак с большим стажем. Поэтому меня заинтересовало ваше предложение сделать сайт о рыбалке». Портфолио себе создавать надо обязательно. Так вы заслужите больше доверия у заказчика. Все, кто профессионально работает по Tilda на бирже FL (https://www. fl.ru/), однозначно имеют портфолио своих работ (рис. 22.2). Этапы работы над сайтом Любой сайт сразу не начинается с верстки. Ему предшествует предварительная работа: 1. Сбор материала (значков, видео, фотографий, текстов и др.) для контента сайта. 2. Прорисовка макета сайта на бумаге.
Глава 22. Полезные советы и ресурсы для дизайнера, использующего Tilda 329 Рис. 22.2. Портфолио Анастасии для поиска заказов на бирже FL 3. Разработка сайта в стандартных блоках. В сайтах часто используют следующие типовые блоки: • Ответы на вопросы. • Галерея. • Меню. • Форма заявки. • Формы заявки в pop-up. • Отзывы. • Якорные ссылки.
330 Часть III. Продолжаем и углубляем знакомство с Tilda 4. Проработка дизайна в Zero-блоках с его адаптацией под мобильные устройства. Адаптацию и настройку страницы стоит делать только после того, как с заказчиком будет согласован дизайн сайта. 5. Выбор цветовой палитры (она может быть задана заказчиком). 6. Подбор шрифтов в соответствии с тематикой сайта, вида и наличия кнопок, расположения объектов на странице, вида меню, наличия анимации — все это называется прототипированием дизайна сайта и требует согласования с заказчиком. 7. Настройка, тестирование и публикация сайта. Полезные программы и сервисы Далее рассказано о нескольких программах и сервисах, которые могут быть весьма полезны в работе веб-дизайнера на Tilda. Adobe Photoshop Это лучший на сегодня растровый графический редактор (рис. 22.3). В нем легко оптимизировать графику для Сети, произвести кадрирование (обрезку) изображений, удалить фон, сделать изображение прозрачным (формат PNG), анимировать изображение (формат GIF) и т. п. Сайт программы: https://www.adobe.com/ru/. Рис. 22.3. Логотип программы Adobe Photoshop При выборе изображений для фона ориентируйтесь на ширину изображения не менее 1680 пикселов, форматы JPG или PNG, отсутствие пикселизации изображения. Помните, что на сайте любое изображение необходимо оптимизировать, т. е. максимально уменьшать его «вес», но при этом сохранять качество. Joxi Joxi — бесплатная программа для создания скриншотов (рис. 22.4) с поддержкой русского языка. Joxi позволяет редактировать скриншоты и размещать их в облаке, доступ к которому можно получить после бесплатной регистрации. Срок хранения скриншотов в облаке Joxi при бесплатной регистрации — 90 дней. Скачать программу можно здесь: http://joxi.ru/ (рис. 22.5).
Предметный указатель A API Key 187, 188, 359 C ChatGPT 107, 113, 349, 350–352, 357, 359, 360 CRM 35, 36, 56, 359 F Footer (подвал) 43 H Header 43 I ID блока 256, 260 M Maps API 173, 174, 359 N NSFW (Not Safe For Work) 117, 359 O Open Graph 150, 164, 359 P Perplexity AI 107, 360 Pop-up (Всплывающее окно) 303, 360 S Search Engine Optimization 145 Z Zero Block (Zero-блок) 261, 293, 360 А Абсолютный (полный) адрес сайта 247 Адаптивная верстка сайта 161, 360 Адаптивность 242, 285, 286, 290 Акценты 60, 61 Альтернативный текст для изображений 148, 162, 164 Анимация 291, 293–299, 302, 362, 363 Б Баг 12, 360 Бейджик 75, 76, 184 Библиотека блоков 66, 71, 77, 78, 169 Биржа 327, 360 Блог 37, 55 Бриф 37, 218, 224, 360
366 Предметный указатель В Виджет для заказа обратного звонка 174, 175, 360 Г Гайд (guide) 208, 360 Градиентный переход 276 Графический ролловер 138, 361 Д Домен 29, 67, 361 З Значок favicon (фавикон) 158 И Индексирование 150, 361 Инструменты интерфейса Tilda 25 Искусственный интеллект 11, 107, 210, 349, 361 К Каскадные таблицы стилей (CSS) 57 Ключевые запросы 146, 361 Контейнер для изображения 263 Л Лендинг 54, 181, 361 Лицензия Creative Commons Zero 51 Логотип 246, 247 М Мессенджер 187, 361 Метка 256 Н Нейросети 11, 103, 117, 126, 349, 351–353, 357, 361 Нейросеть 11, 106, 107, 113, 361 О Онлайн-переводчик DeepL 121 Оптимизация изображений 50, 149, 361 Отзывчивый дизайн 266 Относительный адрес сайта 247 П Пакет Tilda Icons 221 Партнерская программа 36, 37, 56, 362 Платежные системы 12, 13, 31 Подвал 231, 233, 362 Поисковая оптимизация 29, 145 Поисковые системы 38 Портал 55 Портфолио 193, 205, 207, 211 Потоки нового контента 103, 362 Промо-сайт 55 Протокол ◊ HTTP 31, 359 ◊ HTTPS 31, 359 Прототипирование сайта 339, 362 Р Редактор Zero Block 12, 13 Редирект 30, 31, 362 С Сайт-визитка 45, 55, 362 Сервис Яндекс Wordstat 146 Система управления сайтом WordPress 14 Слайдер 299 Слои 305, 362 Сниппет 150, 362 Субдомен 214, 362 Т Тариф ◊ Business 23 ◊ Free 21, 23 ◊ Personal 23 Типограф 60, 61, 69, 362 Триггер 295, 363 У Универсальный шаблон 167, 168, 170
Предметный указатель 367 Ф Формат ◊ GIF 57 ◊ JPEG 57 ◊ PNG 57 ◊ SVG 57 ◊ WebP 57 Формы приема данных 315 Ч Чат-бот 107, 363 Чек-лист (check-list) 208, 363 Ш Шапка 230, 363 ◊ блока 315, 317 Э Эмулятор 267 Я Якорные ссылки 96, 239, 249, 259, 363