Дополнительные уроки
Galina AbramenkoКАК СОЗДАТЬ 2-ОЙ БЛОК (С ПРЕИМУЩЕСТВАМИ)
Заходите на сайт Тильда: https://tilda.cc/ru/
Нажимаете кнопку: Войти
жмёте на блок: Маркетинг
нажимаете на название страницы к примеру:
Галина Абраменко | Специалист по сайтам на Tilda
КАК СОЗДАТЬ ЕЩЕ БЛОК ПУСТОГО ПОЛОТНА
Нажимаете кнопку: Zero блок
Вверху слева наводите стрелочку
высветится кнопка и её нажимаете: Редактировать блок
над буквой Z зажимаете левой кнопкой мышки и растягиваете рамку
нажимаете удалить всё кнопкой: DELET
пустое полотно создано
КАК РАЗДЕЛИТЬ ПОЛОТНО НА ДВА БЛОКА
Кликаете по пустому месту полотна правой кнопкой мышки
в открывшемся меню нажимаете на вкладку: Guides
в открывшемся меню нажимаете на строчку: Add Vertical
появилась слева на странице вертикальная красная линия
цепляете линию левой кнопкой мышки и двигаете вправо
наверху должны высветится 600 px (всего 1200 px)
КАК ОКРАСИТЬ ПОЛОТНО В ЧЁРНЫЙ ЦВЕТ
нажимаете в правом нижнем углу на кнопку: Settings
в открывшемся меню в строчке BG COLOR выбираете чёрный цвет #000000
КАК ОТКРЫТЬ ПОДЛОЖКУ ДРУГОГО ЦВЕТА
Для этого в левом верхнем углу нажимаете на плюс +
в открывшемся меню нажимаете на строчку: Add Shape (эд шейп)
появился четырёхугольник с желтой подложкой
КАК СМЕНИТЬ ЦВЕТ ПОЛОТНА ПОДЛОЖКИ
для этого закройте правое меню крестиком
кликаете мышкой на четырёхугольник с желтой подложкой
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся правом меню
устанавливаете в строчке BG COLOR белый цвет #ffffff
растягиваете белый четырёхугольник:
влево - до границы-до красной вертикальной разделительной линии
вниз - до границы,
вверх - до границы,
влево - до границы и еще побольше влево
КАК СДЕЛАТЬ ТЕКСТ НА ПОЛОТНЕ ПОДЛОЖКИ
Для этого в левом верхнем углу нажимаете на плюс +
в открывшемся меню
нажимаете на строчку: Add Text
кликаете по тексту мышкой
вводите текст: Делаю больше, чем сайт
КАК ИЗМЕНИТЬ РАЗМЕР ТЕКСТА НА ПОЛОТНЕ ПОДЛОЖКИ
для этого закройте правое меню крестиком
кликаете по тексту мышкой - появляется рамка у текста
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся правом меню выбираете строчку: Size
вводите размер текста Size 52 px
КАК ИЗМЕНИТЬ ШРИФТ ТЕКСТА ПОЛОТНА ПОДЛОЖКИ
для этого закройте правое меню крестиком
кликаете по тексту мышкой - появляется рамка у текста
нажимаете в правом нижнем углу кнопку: Settings
далее в правом меню выбираете строчку: TYPEFACE
и вместо шрифта PT Sans стрелкой выбираете шрифт: Playfair Display (шрифт заголовка)
КАК УСТАНОВИТЬ РАЗМЕР МЕЖДУ СТРОЧЕК В ЗАГОЛОВКЕ
для этого закройте правое меню крестиком
кликаете по тексту мышкой - появляется рамка у текста
нажимаете в правом нижнем углу кнопку: Settings
Далее двигаетесь в правом меню до строчки SPACING
устанавливаете в SPACING размер между строчек равный 1,15
нажимаете на компьютере клавишу: Enter
и мышкой кликаете по пустому месту выше по серой полоске
КАК СДЕЛАТЬ ТАК, ЧТОБЫ ТЕКСТ ОТОБРАЖАЛСЯ В ДВУХ СТРОЧКАХ
переходите в левое полотно белой подложки
кликаете по тексту мышкой - появляется рамка вокруг текста
двигаете рамку выделенного текста влево так, чтобы текст стал отображаться в двух строчках (к примеру):
Делаю больше,
чем сайт
ДЕЛАЕТЕ ТЕКСТ НА ЧЁРНОМ ПОЛОТНЕ
Переходите на правое черное полотно
закрываете правое меню крестиком
далее в левом верхнем углу нажимаете на плюс +
в открывшемся меню
нажимаете на строчку: Add Text
появляется текст
МЕНЯЕТЕ ЦВЕТ ТЕКСТА ДЛЯ ЧЁРНОГО ФОНА
для этого закройте правое меню крестиком
кликаете по тексту мышкой - появляется рамка у текста
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся правом меню
устанавливаете в строчке BG COLOR белый цвет #ffffff
цепляете текст мышкой и перетягиваете влево на черный фон
УСТАНАВЛИВАЕТЕ ШРИФТ ЗАГОЛОВКА НА ЧЁРНОМ ФОНЕ
для этого закройте правое меню крестиком
кликните по тексту мышкой
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся правом меню выбираете строчку: TYPEFACE
и вместо шрифта PT Sans стрелкой выбираете шрифт: Playfair Display (шрифт заголовка)
ВВОДИТЕ ТЕКСТ ЗАГОЛОВКА НА ЧЁРНОМ ФОНЕ
для этого кликаете по тексту на чёрном фоне дважды мышкой
и вводите тест: Акцент на визуал
УСТАНАВЛИВАЕТЕ РАЗМЕР ТЕКСТА ЗАГОЛОВКА НА ЧЁРНОМ ФОНЕ
для этого закройте правое меню крестиком
кликните по тексту мышкой
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся правом меню выбираете строчку: Size
вводите размер текста Size 42 px
КАК СКОПИРОВАТЬ ТЕКСТ ЗАГОЛОВКА
Для этого кликните по тексту мышкой - появится рамочка
нажмите клавиши на пк Ctrl + C (скопировать)
нажмите клавиши Ctrl + V (вставить)
ВВЕДИТЕ НУЖНЫЙ ТЕКСТ НА ЧЁРНОМ ФОНЕ
Для этого по второму тексту кликаете мышкой дважды
мышкой выделяете текст
вводите скопированный текст:
Помогаю отстроиться от конкурентов с помощью
цепляющего и осмысленного дизайна
УСТАНАВЛИВАЕТЕ ШРИФТ НУЖНОГО ТЕКСТА НА ЧЁРНОМ ФОНЕ
для этого закройте правое меню крестиком
кликните по тексту мышкой
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся правом меню выбираете строчку: TYPEFACE
и вместо шрифта Playfair Display стрелкой выбираете шрифт: PT Sans
(шрифт текста) Futura PT нет
УСТАНАВЛИВАЕТЕ РАЗМЕР ТЕКСТА НА ЧЁРНОМ ФОНЕ
для этого закройте правое меню крестиком
кликните по тексту мышкой
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся правом меню выбираете строчку: Size
вводите размер текста Size 22 px
УСТАНАВЛИВАЕТЕ РАЗМЕР МЕЖДУ СТРОЧЕК В ЗАГОЛОВКЕ В ОДНОМ БЛОКЕ
для этого закройте правое меню крестиком
кликните по тексту мышкой
нажимаете в правом нижнем углу кнопку: Settings
Далее двигаетесь в правом меню до строчки SPACING
устанавливаете в SPACING размер между строчек равный 1,2
нажимаете на компьютере клавишу: Enter
и мышкой кликаете по пустому месту выше по серой полоске
КАК УСТАНОВИТЬ РАССТОЯНИЕ МЕЖДУ БЛОКАМИ ТЕКСТОВ
для этого закройте правое меню крестиком
кликаете (на чёрном фоне) на заголовок
нажимаете клавиатуре клавишу: Shift
кликаете мышкой (на чёрном фоне) по тексту
оба блока чёрного фона соединяются линиями
в правом нижнем углу нажимаете кнопку: Settings
в открывшемся меню устанавливаете размер 10 (горизонтальная черточка между двумя скобочками)
ДЕЛАЕТЕ ТАК, ЧТОБЫ ТЕКСТ ОТОБРАЖАЛСЯ В ДВУХ СТРОЧКАХ
для этого закройте правое меню крестиком
переходите в правое чёрное полотно
кликаете по тексту мышкой - появляется рамка вокруг текста
двигаете рамку выделенного текста влево так,
чтобы текст стал отображаться в двух строчках (к примеру):
Помогаю отстроиться от конкурентов с помощью
цепляющего и осмысленного дизайна
КАК СДЕЛАТЬ, ЧТОБЫ ТЕКСТ ЛЕВОЙ И ПРАВОЙ СТОРОНЫ
НАХОДИЛИСЬ НА ОДНОЙ ЛИНИИ ПО ГОРИЗОНТАЛИ
Для этого кликаете по тексту слева
далее нажимаете на клавиатуре клавишу: Shift
мышкой кликаете по правому тексту
тексты выделяются общими линиями
нажимаете в правом нижнем углу кнопку: Settings
далее в блоке: ALIGN ELEMENTS
нажимаете кнопку выравнивания по верхней горизонтали (горизонтальная линия нарисована сверху над прямоугольниками)
В строчке: to each other установлена точка
нажимаете сохранить: SAVE
КАК СКОПИРОВАТЬ СРАЗУ ДВА БЛОКА
Для этого
кликаете на чёрном фоне на заголовок
нажимаете клавиатуре клавишу: Shift
кликаете мышкой по тексту на чёрном фоне
оба блока чёрного фона соединяются линиями
нажимаете клавиши: Ctrl+C
нажимаете клавиши Cntrl+V
перетягиваете вниз скопированные блоки
КАК БЫСТРО ЗАМЕНИТЬ ТЕКСТ ЗАГОЛОВКА И ТЕКСТ ФОНА
Для этого два раза кликаете левой кнопкой мышки по нижнему заголовку
на чёрном фоне курсор начинает мигать в слове около буквы А
нажимаете клавиши: Ctrl+А (текст блока заголовка: "Акцент на визуал" - быстро весь выделяется)
копируете текст: Продумываю структуру сайта (нажимая клавиши: Ctrl+C)
далее на выделенный текст заголовка нажимаете клавиши Cntrl+V - текст вставляется вместо старого.
Аналогично меняете текст в следующем блоке
Текст заголовка и фона:
Продумываю структуру сайта,
чтобы он был не просто красивой картинкой в интернете, а приносил заказы
КАК УСТАНОВИТЬ РАССТОЯНИЯ В ЦЕЛОМ
Для этого попеременно соединяете по 2 блока
1) блок заголовка и блок текста:
для этого кликаете по блоку заголовка, нажимаете Shift, кликаете на блок текста, оба блока соединяются линиями, нажимаете кнопку: Setting,
в открывшемся меню устанавливаете размер 10 (горизонтальная черточка между двумя скобочками)
2) далее блок текста и блок следующего заголовка:
для этого кликаете по блоку текста, нажимаете Shift, кликаете на блок следующего заголовка, оба блока соединяются линиями, нажимаете кнопку: Setting, в открывшемся меню теперь устанавливаете размер 60 (горизонтальная черточка между двумя скобочками)
3) блок заголовка и блок текста:
для этого кликаете по блоку заголовка, нажимаете Shift, кликаете на блок текста, оба блока соединяются линиями, нажимаете кнопку: Setting,
в открывшемся меню устанавливаете размер 10 (горизонтальная черточка между двумя скобочками)
и т. д. в одном объявлении расстояние 10 px
между объявлениями расстояние 60 px
ВЫДЕЛЯЕТЕ ВСЕ БЛОКИ
для этого закройте правое меню крестиком
Далее кликаете на 1-ый заголовок
зажимаете клавишу Shift
и кликаете по началу каждого следующего блока
все блоки объединяться линиями
нажимаете в правом нижнем углу кнопку: Settings
В строчке: to grid container устанавливаете точку
далее в блоке: ALIGN ELEMENTS
нажимаете кнопку выравнивания по средней горизонтали (горизонтальная линия нарисована посередине двух прямоугольников)
Закройте правое меню крестиком
Далее переходите в левую часть
и передвигаете надпись ниже (чем в правой части заголовок первого объявления)
Далее кликаете по заголовку левой части
зажимаете клавишу Shift
и кликаете по заголовку правой части первого блока
два блока объединяться линиями
нажимаете в правом нижнем углу кнопку: Settings
в открывшемся меню
В строчке: to each other устанавливаете точку
нажимаете кнопку выравнивания по верхней горизонтали (горизонтальная линия нарисована поверх двух прямоугольников)
нажимаете сохранить: Save