Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>12 ноя 2021</li>

3 <li>0</li>

4 </ul>Разбираемся с настройками элементов и создаём собственный сайт-визитку.

5 Иллюстрация: Оля Ежак для Skillbox Media

6 Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.

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

8 Zero-блок, или нулевой блок, в Tilda - редактор, с помощью которого можно настраивать дизайн сайта, как в Figma, Sketch или Photoshop. Он не привязан к расположению элементов и позволяет реализовать любую идею.

9 Перейдите в Tilda и создайте новую страницу. Выберите шаблон "Пустая страница", и откроется стартовое рабочее пространство Tilda.

10 Изображение: Skillbox MediaЧтобы создать Zero Block, на стартовом рабочем пространстве нажмите на кнопку Zero.

11 Изображение: Skillbox MediaПоявится Zero-блок - внешне он очень похож на типовые блоки Tilda. Единственное отличие - при наведении на него мыши в левом верхнем углу вместо кнопок "Настройки" и "Контент" будет только "Редактировать блок".

12 Изображение: Skillbox MediaНажмите на кнопку "Редактировать блок", чтобы перейти на страницу редактора. Если вы знакомы с Figma или Sketch, то в интерфейсе редактирования Zero-блока вы сразу заметите сходство с этими программами.

13 Изображение: Skillbox MediaЧтобы вам ничего не мешало делать свою страницу, удалите все стандартные модули Zero-блока: текст и иллюстрации. Для этого зажмите правую кнопку мыши, выделите всё, нажмите по объектам правой кнопкой мыши и выберите Delete (или просто нажмите клавишу Delete).

14 Изображение: Skillbox MediaШирина Zero Block фиксирована, а высота ограничена контейнерами Window Container и Grid Container.

15 Изображение: Skillbox MediaGrid Container - условное обозначение границ сайта, значение указывается в пикселях.

16 Window Container - условное обозначение границ экрана, указывается в процентах. Если значение не указано, его размер будет равен Grid Container.

17 По умолчанию ширина Window Container не указывается, поэтому Tilda берёт значение Grid Container - по умолчанию это 550 пикселей. Чтобы изменить эти значения, кликните в любое пустое место макета, и справа появится панель Artboard Settings.

18 Изображение: Skillbox MediaОба контейнера имеют высоту 550 пикселей - это примерно половина экрана, а нужен весь. Для этого укажите в строке Window Container height значение 100%, чтобы Window Container занял всю высоту экрана.

19 Если ваш Grid Container обрезается, укажите в настройках Window Container выравнивание по центру.

20 Изображение: Skillbox MediaНачать делать страницу в Zero-блоке можно с чего угодно. Но мы сначала добавим фотографию:

21 1. Нажмите на плюс в верхнем левом углу и в выпадающем меню нажмите Add Image.

22 Изображение: Skillbox Media2. Внутри Zero-блока появится серый квадрат - это плейсхолдер под иллюстрацию.

23 Изображение: Skillbox Media3. Кликните на серый квадрат и справа на панели настроек нажмите на кнопку Upload file. В появившееся окно перетащите фотографию со своего компьютера, и она окажется на месте плейсхолдера.

24 Изображение: Skillbox MediaТеперь отредактируйте фотографию, чтобы она подходила под вашу будущую вёрстку:

25 1. Уменьшите картинку, чтобы её высота была равна 120 пикселям. Найти эту настройку можно на панели Element settings справа - она отмечена буквой W. Также вы можете изменить размер вручную, потянув за один из углов изображения.

26 Изображение: Skillbox Media2. На панели Element settings, нажмите на иконку , чтобы фотография выровнялась по центру.

27 Изображение: Skillbox Media3. На той же панели скруглите края, чтобы фотография была не квадратной, а круглой. Для этого перейдите в раздел Border и в пункте Radius укажите 180.

28 Изображение: Skillbox MediaТеперь добавьте на страницу фоновое изображение. Для этого кликните на любое пустое место на макете и нажмите на кнопку Upload File в пункте Background Image:

29 Изображение: Skillbox MediaКогда картинка загрузится, фон заполнит всё пространство макета.

30 - Изображение: Skillbox MediaНа сайте-визитке нужно написать о себе, чтобы клиенты знали, с какими задачами к вам можно обратиться. Для этого добавьте текстовый блок:

30 + Изображение: Skillbox MediaНа сайте-визитке нужно написать о себе, чтобы клиенты знали, с какими задачами к вам можн�� обратиться. Для этого добавьте текстовый блок:

31 1. Нажмите на плюсик в левом верхнем углу и выберите Add Text.

32 Изображение: Skillbox Media2. Если фон вашей страницы тёмный, перекрасьте текст в белый цвет. Для этого в меню Element settings в пункте Color вместо #000000 напишите #FFF.

33 Изображение: Skillbox Media3. Перенесите текст под фотографию и выровняйте его по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center.

34 Изображение: Skillbox Media4. Дважды кликните по текстовому блоку и вместо рыбного текста добавьте свой. По желанию, в меню Element settings можно изменить его настройки: шрифт, кегль, интерлиньяж и межбуквенные отступы.

35 Изображение: Skillbox Media5. Аналогичным образом сделайте заголовок страницы и впишите в него своё имя. Заголовок должен быть больше основного текста.

36 Чтобы заново не настраивать все свойства текста, можно просто скопировать готовый. Для этого зажмите клавишу Alt и тащите свой текст в любую сторону.

37 Изображение: Skillbox MediaЛайфхак - чтобы быстро убрать все панели с экрана, нажмите клавишу F. Так будет проще оценить свой макет и никакой визуальный шум мешать не будет. Чтобы скрыть только панель настроек, нажмите клавишу Tab.

38 Теперь добавьте кнопку и сделайте из неё ссылку на вашу рабочую почту:

39 1. Чтобы добавить кнопку, нажмите на плюсик в левом верхнем углу и выберите Add Button.

40 Изображение: Skillbox Media2. Перенесите кнопку под фотографию и выровняйте её по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center. При необходимости поменяйте цвет фона - например, на жёлтый.

41 Изображение: Skillbox Media3. Чтобы поменять текст на кнопке, кликните на неё и в меню Element settings в пункте Caption укажите, что именно на ней должно быть написано.

42 Изображение: Skillbox Media4. В том же меню в пункте URL укажите адрес своей почты.

43 Если у вас есть логотип, его можно добавить на страницу и закрепить в углу:

44 1. Добавьте ваш логотип на страницу как обычную картинку.

45 2. Выделите логотип и на панели Element settings нажмите на мелкую подпись + Container: grid.

46 3. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis - Left и Top.

47 Изображение: Skillbox Media4. Если логотип "прилип" к углу, вручную перенесите его в то место, где он должен стоять. Настройки позиционирования при этом не собьются.

48 Логотипы и иконки желательно загружать в векторном формате SVG, чтобы на больших экранах они не размазывались. Если у вас таких нет, подойдёт и PNG в высоком разрешении, но прогружаться он будет дольше, чем SVG.

49 Теперь добавьте кружки, которые будут имитировать пункты меню. Для примера рассмотрим только самый первый - остальные можно сделать по этой же инструкции:

50 1. Нажмите на плюсик в левом верхнем углу и выберите Add Shape.

51 2. На макете появится квадрат - чтобы сделать его кругом, на панели Element settings укажите радиус скругления 180. В отличие от иллюстрации, у фигуры нужно указать значения и высоты, и ширины - например, по 15 пикселей. Если нужно, цвет кружка можно изменить.

52 Изображение: Skillbox Media3. Выделите кружок и на панели Element settings нажмите на мелкую подпись + Container: grid.

53 4. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis - Right и Top.

54 Изображение: Skillbox Media5. Чтобы буллет не "влип" в угол, сместите его положение так же, как и у логотипа.

55 По тому же принципу можно сделать остальные буллеты и полоску для слайдера.

56 Изображение: Skillbox MediaВ итоге у вас получится примерно такая страница:

57 Изображение: Skillbox MediaСохраните свою работу - нажмите в правом верхнем углу на кнопку Save, а затем на Close, чтобы выйти из редактора. Проверьте страницу в предпросмотре и опубликуйте её.

58 Посмотреть, как выглядит созданный в этом уроке сайт, можно<a>здесь.</a>

59 <a>Научитесь: Дизайнер сайтов на Tilda Узнать больше</a>