форма в 2 колонки tilda

Как настроить форму приема данных

Посмотрите видеоурок о том, как добавить настроить форму или прочитайте подробную инструкцию ниже.

Блоки с формами находятся в категории «Форма и кнопка», также несколько блоков есть в категории «Обложка».

Готовые страницы опросов (форм с множеством полей) можно найти в шаблонах, в категории «Анкеты».

Рассказываем, как настроить поля в формах, отредактировать их внешний вид и как посмотреть полученные заявки внутри интерфейса Тильды.

В одной форме может быть до 100 полей.

Поля в форме настраиваются в меню «Контент» формы во вкладке «Поля для ввода».

Заголовок поля — напишите, какую информацию нужно ввести, например, «Ваше полное имя». Этот текст выводится над полем.

Подзаголовок поля — если необходимо, расшифруйте заголовок, дайте инструкцию, например, «Укажите имя, фамилию и отчество». Этот текст выводится над полем, после заголовка.

Подсказка значения — напишите пример, как должно быть заполнено поле. Например, «Михайлов Сергей Александрович». Этот текст виден внутри поля до ввода в него данных.

Обязательно для заполнения — поставьте галочку, чтобы было невозможно было отправить пустое поле, если наличие информации в этом поле критично.

Имя переменной задается по умолчанию в зависимости от типа поля. Если сервис приема данных из форм требует определенное имя переменной, то его можно поменять. Например, свои заранее заданные имена переменных есть у Mailchimp и Bitrix24.

Источник

Запись на стене

8 полей формы, о которых вы могли не знать

На Тильде можно гибко настраивать формы сбора данных. Есть много полей, которые можно комбинировать между собой и не переживать, что получится некрасиво. Расскажем про восемь неочевидных полей, о которых вы могли не знать.

— Дата. Добавьте поле, и пользователь сможет выбрать дату в календаре. Ему не понадобится уходить со страницы, чтобы свериться с днями недели. Подойдёт, если вы продаете билеты на событие или предлагаете выбрать дату доставки.

— Телефон с настроенным параметром маски. Чтобы человек не ошибся при вводе номера телефона, задайте маску в настройках поля. Теперь там будет отображаться код страны и количество цифр. Ещё это удобно, потому что все данные будут приходить в одном формате.

— Файл. Человек сможет прикрепить к форме файл, а вы получите его на Яндекс.Диск, в Dropbox или Google Drive. Это может быть резюме при отправке заявки на вакансию или описание технического задания при заказе сайта. Не забудьте подключить приёмщик файла в настройках.

— Вопрос с вариантами ответа в виде картинок. Поле более наглядно покажет варианты для выбора. Его удобно использовать в пошаговой форме (блоки BF919 и BF920). Например, предложите пользователю выбрать один тип упаковки из четырех при индивидуальном заказе.

— Отступ. Чтобы визуально разделить поля на группы, добавьте отступы в нужных местах. Можно использовать, если у вас больше 5-7 полей.

— Разбиение по шагам. Добавьте, если хотите визуально сократить количество вопросов — поле разобьёт их на карточки. Также можно использовать для создания квизов, наряду с BF919.

— Текстовый комментарий. Добавьте комментарий к полю или используйте в сочетании с отступом, чтобы подписать группы полей.

— Скрытое поле. Используйте системное название, если у вас есть несколько форм на сайте. Пользователь его не увидит, а вы поймёте из какой формы пришли данные в CRM.

О каких полях формы вы не знали? Поделитесь в комментариях

Создавайте красивые и функциональные формы, которые хочется заполнить.

— Дата. Добавьте поле, и пользователь сможет выбрать дату в календаре. Ему не понадобится уходить со страницы, чтобы свериться с днями недели. Подойдёт, если вы продаете билеты на событие или предлагаете выбрать дату доставки.

— Телефон с настроенным параметром маски. Чтобы человек не ошибся при вводе номера телефона, задайте маску в настройках поля. Теперь там будет отображаться код страны и количество цифр. Ещё это удобно, потому что все данные будут приходить в одном формате.

— Файл. Человек сможет прикрепить к форме файл, а вы получите его на Яндекс.Диск, в Dropbox или Google Drive. Это может быть резюме при отправке заявки на вакансию или описание технического задания при заказе сайта. Не забудьте подключить приёмщик файла в настройках.

— Вопрос с вариантами ответа в виде картинок. Поле более наглядно покажет варианты для выбора. Его удобно использовать в пошаговой форме (блоки BF919 и BF920). Например, предложите пользователю выбрать один тип упаковки из четырех при индивидуальном заказе.

— Отступ. Чтобы визуально разделить поля на группы, добавьте отступы в нужных местах. Можно использовать, если у вас больше 5-7 полей.

— Разбиение по шагам. Добавьте, если хотите визуально сократить количество вопросов — поле разобьёт их на карточки. Также можно использовать для создания квизов, наряду с BF919.

— Текстовый комментарий. Добавьте комментарий к полю или используйте в сочетании с отступом, чтобы подписать группы полей.

— Скрытое поле. Используйте системное название, если у вас есть несколько форм на сайте. Пользователь его не увидит, а вы поймёте из какой формы пришли данные в CRM.

О каких полях формы вы не знали? Поделитесь в комментариях 👇

🙌 Создавайте» style=»width: 100%; height: 100%; margin: 0 0% 0% 0;» >

Источник

Вёрстка статьи в Тильде: разбор ошибок

Наталия Шергина, редактор и коммерческий писатель, специально для блога Нетологии поделилась своим опытом о том, как заверстать статью в Тильде и на что обратить внимание.

До курса по копирайтингу в Нетологии я никогда не работала с Тильдой, поэтому сверстала свою первую статью как смогла. Отступы, шрифты, модули, выравнивание, заголовки — все было не то. Четыре раза все переделывала и наконец разобралась, что к чему. В этой статье расскажу про свои ошибки и про то, как сверстать статью на Тильде, чтобы не было стыдно. Информация для новичков в верстке и тех, кто только знакомится с Тильдой.

Тильда — это платформа для создания сайтов, интернет-магазинов и портфолио. Также она подходит для вёрстки статей и лендингов. Её главный плюс — простота использования. Тильда работает как конструктор: вы собираете страницу, используя блоки из библиотеки. Знать программирование не надо, работать с ней может каждый. Из минусов — вы ограничены стандартными блоками, а так называемый «Нулевой блок», который можно сделать самому, требует сноровки.

Сколько стоит

Бесплатно: 1 сайт, 50 страниц, 50MB места на сервере. На этом тарифе доступны не все блоки и нельзя подключить свой домен.

750 руб./месяц — тариф Personal: 1 сайт, 500 страниц, 1GB места на сервере. Доступ ко всем блокам и возможность подключить свой домен.

1250 руб./месяц — тариф Business: 5 сайтов в 500 страниц для каждого и 1GB места на сервере.

Для моей статьи хватило функций бесплатного тарифа.

С чего начать: шаблон или пустая страница

Страница выбора шаблона

Мне казалось, что проще взять готовый шаблон (например, лонгрид) и адаптировать его под свою статью. На деле же получилась ерунда. Моя статья про кемпинг в Калифорнии по содержанию и оформлению не то же самое, что лонгрид о бритпопе, который я пыталась переделать. Это тот случай, когда проще начать с пустого шаблона и добавлять свои блоки.

Шаблон лонгрида, который я планировала переделать под свою статью

Адаптировать шаблоны из библиотеки проще, если вы работаете над чем-то более конкретным, что просто статья. Например, у Тильды неплохие шаблоны для создания фотоотчета, блога фотографа, страницы-визитки для юриста и персонального гида.

Блоки и модули

Как учит Митя Моровов на курсе по копирайтингу, у каждого модуля статьи должен быть свой блок и стиль. Модуль — это элемент логического разделения страницы, а блок — физический блок в Тильде.

Есть соблазн налепить разные модули в один блок, что я и сделала в первый раз.

Блок TL02 «заголовок: 64»

Теоретически можно использовать этот блок не только для заголовка, но и добавить пару абзацев текста в раздел «описание». Но в этом случае нарушается модульность статьи, не говоря уже о вёрстке. Неправильный выбор блоков для заголовка и текста также негативно сказывается на индексации поисковиками — Гугл этого не любит.

Неправильно: использовать блок «заголовок» для чего-то кроме заголовка

Лучше: три модуля (заголовок, лид, фотография) — три блока

Что еще почитать по теме:

Расстояние между элементами

Мало определиться с блоками, нужно ещё правильно задать расстояния между ними и между их элементами: заголовками, подзаголовками, текстом, фотографиями и подписями к ним. Здесь не обойтись без правила внутреннего и внешнего и концепции «воздуха» (белого пространства).

Правило внутреннего и внешнего

Дизайнер Антон Жиянов пишет: «Универсальное правило внутреннего и внешнего в типографике: внутреннее ≤ внешнее.

Внутреннее — расстояние между буквами, внешнее — между словами.

Внутреннее — между словами, внешнее — между строками.

Внутреннее — между строками, внешнее — между абзацами или поля вокруг текста».

Согласно этому правилу, расстояние между блоками не может быть меньше расстояния между заголовком и абзацем, которые находятся внутри одного модуля. Но мой первый черновик был именно таким. Почитала советы Антона Жиянова, исправила:

Плохо: расстояние между двумя блоками меньше, чем расстояние между элементами внутри одного блока (между заголовком и текстом). Правило «внутреннего и внешнего» не соблюдено.

Лучше: «внутреннее», то есть расстояние между заголовком и текстом, меньше «внешнего», то есть расстояние между двумя блоками.

Вертикальное расстояние между блоками задаётся в настройках блока.

Лучше сразу определиться, сколько строк будет между смысловыми блоками. Мне проще придерживаться нулевого отступа снизу и задавать только верхний. Можно делать наоборот. Главное помнить, что при отступе и сверху и снизу, например, по 1.5 строки, суммарное расстояние между блоками будет равно трём.

Воздух (белое пространство)

Ещё одно ключевое правило типографики: между смысловыми блоками веб-страницы, а также слева и справа от контента, должно быть достаточно незаполненного пространства, или воздуха.

Read – WordPress theme. Много «воздуха», глазу приятно, ничто не отвлекает от чтения

Сайт сети магазинов «Техник». Мало незаполненного пространства, недостаточно «воздуха» вокруг контента.

В тильде 12-колоночная вёрстка. Отступа слева и справа от контента статьи задаются в настройках блока.

Если заполнить контентом все 12 колонок, текст будет тяжело читаться. Оптимально отступить хотя бы 1 колонку слева.

Плохо: нет отступов слева и справа, текст растянут на 12 колонок.

Лучше: отступ слева — 1 колонка, ширина текста — 8 колонок, ширина фактоида — 2 колонки. Остаётся одна колонка для отступа справа.

Что почитать по теме:

Шрифты

На один сайт в Тильде можно подключить только два шрифта. Чем больше шрифтов, тем больше вес страницы, а значит она будет медленнее загружаться. С двумя шрифтами нет соблазна заняться «украшательством», применяя несочетающиеся шрифты.

В Тильде шрифты задаются в настройках всего сайта, а не отдельной страницы.

Если предложенных Тильдой шрифтов вам недостаточно, можно подключить Google Fonts. Вот инструкция.

Моей ошибкой при выборе шрифтов и начертаний был недостаточный контраст между размером заголовка и текста. Для пары заголовок-описание сочетание размера 52px и 42px не создаёт контраста. Пара 62px и 32px смотрится лучше.

Плохо: слабый контраст.

При размере заголовка в 32px и размере основного текста в 20px заголовок не выделяется за счет контраста, а скорее сливается с текстом. Пара 42px и 20px работает лучше.

Плохо: заголовок 32px, текст 20px.

Лучше: заголовок 42px, текст 20px.

Я не знаю, по какой форме высчитывать размер кегля, а скорее делаю это «по-дилетантски» — на глаз. Проверяя наши работы на курсе, Дмитрий Моровов дал вот этот вариант: пара 12–14pt — плохая. 12–16pt — уместная. 12–18pt — хорошая. (Pt — от немецкого «Punkt» — это единица измерения кегля шрифта).

Если игнорировать принцип контраста, статья выглядит как скучная простыня. Глазу трудно зацепиться за элементы в тексте, теряется внимание, а значит страдает и качество чтения.

Что почитать по теме:

Фактоиды

Специального блока под фактоид нет, но можно адаптировать блок «CL05 Текст и сноска» в разделе «Колонки».

Шаблон, который подходит для фактоида или ссылки на полях.

В моём случае не удалось подтянуть фактоид еще на одну строку. Пришлось оставить так.

Мелкие косяки

Футер, прилипший к предыдущему блоку

Футер — это тоже блок, которому нужны отступы сверху и снизу. Проверьте, настроен ли нижний отступ у предыдущего блока, чтобы футер не казался «приклеенным» и сжатым.

Плохо: не задан нижний отступ у текстового блока. Футер прилип.

Лучше: задан нижний отступ в 120px.

Поддомен Тильды

По умолчанию поддомен моей статьи вот этот — http://project201667.tilda.ws. Не понятно, о чем страница и куда ведёт ссылка. Поддомен можно изменить в настройках сайта в разделе «Главное». Здесь же подключается ваш персональный домен.

Выравнивание всего текста по центру

Большинство дизайнеров и верстальщиков сходятся во мнении, что такой текст невозможно читать. Центрирование текста портит не только читаемость, но и вид всей страницы.

Выравнивание по центру.

Выравнивание по левому краю.

Что почитать по теме:

Слишком тонкое начертание

Не злоупотребляйте тонким начертанием. Если текст объёмный, воспринимать «сверхтонкий» шрифт тяжело. Более того, на скриншотах такое начертание отображается плохо (как на скриншоте ниже). Настроить размер и насыщенность можно в настройках сайта (не страницы!) в разделе «Шрифты и цвета».

Что еще пригодится

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Источник

Создаем пошаговый лендинг на Tilda через переменные [Инструкция]

Немного покопавшись в интерфейсе, нашел способ создавать пошаговые лендинги на Тильде в рамках одной страницы (чтобы не плодить по 10 одинаковых страниц). Получается примерно вот такая штука. Кому интересно — держите инструкцию: )

Поскольку на тильде есть ограничение в 500 страниц, мне не слишком хотелось создавать по 10 страниц и связывать их кнопкой перехода. Мало того, что это заняло бы приличную часть ресурсов (ведь количество страниц ограничено), дык еще и путался бы постоянно. Да и хотелось потенциально улучшить поведенческие факторы для SEO в рамках одной страницы, а не создавать десяток обрубков.

Чтобы все было в рамках одного URL — логично предположить, что все блоки, по которым будет гулять пользователь — должны находится в рамках одной страницы. Я использовал блок BF303 и в настройках блока указал высоту «100vh» — чтобы он занимал всю высоту экрана пользователя. Ниже на скрине видно, что экран 2 идет сразу после экрана 1, никаких разделителей или еще чего-то такого.

Таким образом в рамках одной страницы создаем все шаги по очереди.

Не забывайте, что на каждом экране обязательно должна быть кнопка, при клике на которую человек будет перемещаться по этапам.

После того, как шаги настроены, можно начинать настраивать саму «пошаговость».

Но для начала поясню, что такое переменные. Переменные — это специальный параметр (get, если по научному) в ссылке, при помощи которого можно отслеживать статистику, подменять контент, работать с базами данных и вообще куча всего. Состоит из двух частей — ключа и значения. Я не программист, поэтому мог криво объяснить, но самый популярный среди маркетологов get-параметр — это UTM.
?utm_source=google — это переменная с ключом «utm_source» и значением «google».
Добавляется он вот так, после знака вопроса или знака &:

Надеюсь понятно объяснил, если нет — спрашивайте в комментах: )

Итак, вернемся к Тильде. Надо добавить возможность заменять при помощи переменных контент на нашем лендинге.

Для этого в самый низ нашей заготовки добавляем блок Т809 (Мультилендинг: скрыть/показать блок по параметру в URL). Он находится в разделе «Другое», практически в самом низу.

Открываем его настройки и указываем следующие данные.

Источник

Инструкция: создаем лендинг на Tilda через Zero Block

Лендинг – идеальный инструмент для быстрого запуска новых товаров, услуг и акций. Теперь вовсе необязательно привлекать сторонних подрядчиков, чтобы создать свою посадочную страницу: достаточно будет конструктора сайтов на Tilda в Zero Block. Вместе создадим первый экран лендинга, адаптированный под все распространенные устройства.

Интерфейс Zero-редактора

Чтобы приступить к работе, переходим на уже созданный ранее лендинг либо создаем новый и нажимаем на кнопку «Создать новую страницу»:

В случае, если мы создали новый сайт, Tilda сама предложит добавить первый блок. Выбираем иконку Zero:

Если у вас уже есть несколько блоков на странице, такого предложения вы не увидите. Нужно будет навести курсор на поле между блоками, чтобы появилась иконка плюса:

Нажимаем на плюс и прокручиваем боковое меню в самый низ. Нажимаем по кнопке «Нулевой блок»:

Поздравляем! Теперь у нас создан нулевой блок со стандартным содержимым. Он не несет никакой практической пользы, да и приятным с точки зрения визуала его никак не назовешь. Все его содержание мы удалим, после чего приступим к созданию своего уникального дизайна на базе этого самого нулевого блока.

Для редактирования содержимого нажимаем по кнопке «Редактировать блок»:

Чтобы удалить содержимое, достаточно выделить курсором все элементы и нажать на кнопку del на клавиатуре. Алгоритм такой же, как в Photoshop, Paint или любой другой офисной программе.

Многие элементы в Zero Block выполнены по аналогии с привычными программами, и, если у вас есть опыт работы в Photoshop, Word и похожем софте, вы увидите знакомые элементы.

Артборд

Артборд – наша основная рабочая зона. На ней мы размещаем элементы, и именно ее содержимое увидит реальный пользователь, когда перейдет на наш сайт.

Ширина блока составляет 1200 px – это максимально возможная ширина лендинга. Большинство ноутбуков имеют ширину экрана 1344 px, и с большей шириной сайт рискует просто не поместиться на экран. Появится горизонтальная прокрутка, что негативно скажется на пользовательском опыте и, как следствие, на конверсии. Адаптировать сайт под меньшее разрешение мы можем (вплоть до 320 px), но об этом чуть дальше в статье.

В отличие от ширины, высоту мы можем менять. Достаточно навести курсор на нижний край и с зажатой мышкой потянуть его вверх или вниз.

При работе с артбордом учитывайте, что, даже если какой-либо элемент сайта размещен вне видимой части, он все равно будет прогружаться у пользователя.

Злоупотреблять этим не стоит, т. к. большое количество элементов может повлиять на скорость загрузки. Если вы разместите элемент ниже видимой части артборда, он может отобразиться в блоке ниже.

За это отвечает параметр Overflow в настройках артборда. Доступно 3 параметра:

Модульная сетка

Обратите внимание на вертикальные полосы в артборде. Это направляющие линии, которые используются для позиционирования элементов. Их отображение можно включать и выключать – достаточно нажать на клавиатуре G. Мы ориентируемся на них, когда размещаем элементы, чтобы они выглядели органично и привычно для пользователя. Таким образом, нам не придется вручную считать пиксели.

Если необходимо, мы можем создавать дополнительные направляющие, горизонтальные и вертикальные, чтобы по ним выравнивать элементы сайта.

Для создания горизонтальных направляющих нужно нажать комбинацию клавиш Ctrl+H (⌘+H для Mac), а для вертикальных – Ctrl+Shift+H (⌘+Shift+H).

Также это можно сделать через меню в правом верхнем углу:

Направляющие не отображаются на сайте, а только служат для более точного позиционирования элементов. Удалять их не обязательно – можно просто временно скрыть через то же меню (пункт Guides: Hide/Show). Если все-таки собираетесь удалять, наведите курсор на направляющую и нажмите крестик.

Настройки блока

По умолчанию настройки скрыты. Чтобы они появились, нажмите Tab на клавиатуре.

В настройках мы можем установить высоту блока, задав точное значение в пикселях.

Не советуем устанавливать слишком большое значение. Берите максимум 700 px, иначе блок не поместится на одном экране ноутбука и ухудшит пользовательский опыт. Например, ваш оффер не будет видно, и пользователь уйдет с сайта.

Значение высоты мы можем установить как в пикелях (Grid Container Height, px), так и в процентах (Window Container Height, %). С помощью параметра Grid Container Align in window можно установить, из какой точки будет идти отчет пикселей: из центра, верней или нижней границы.

Присутствует также возможность изменить цвет фона или добавить изображение:

Предусмотрена возможность дополнить фон вертикальным градиентом, изменяя цвет и прозрачность. Особенно это полезно при создании первого экрана. Так, можно добавить тематическую картинку и затемнить ее с помощью градиента, чтобы сделать акцент над элементами сайта.

К примеру, если мы делаем лендинг компании, занимающейся строительством домов, подойдет тематическое фото постройки дома, но оно не должно перетягивать на себя внимание. Для этого добавляем фото на фон и дополняем градиентом.

Сравните оригинальное фото и получившийся результат.

Как и настройки артборда, слои по умолчанию не отображаются. Для начала работы с ними нужно нажать комбинацию клавиш Ctrl+L (либо ⌘+L для MacOS). Этот инструмент позволяет нам схематично посмотреть на элементы, из которых состоит Zero Block.

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

Учитывайте, что слои имеют приоритет по высоте. Если фон будет выше слоя с текстом, то пользователь увидит только фон – он закроет собой текст. Менять слои можно, перетаскивая их мышкой в меню слоев.

Чтобы зафиксировать слой, нажмите по символу замка справа от названия слоя. Это полезно, если речь идет о фоне или любом уже готовом элементе. После этого вы не сможете его сдвинуть, даже если случайно выделите на артборде. Такое бывает часто, если хочешь выделить текст, а попадаешь на фон. Приходится отменять действие, возвращать фон на место, снова выделять текст и т. д. Может показаться, что это некритично. Если такое будет происходить часто, вы поймете, что это может отнимать много времени. Лучше сразу блокировать слои, по крайней мере, различные фоны, которые точно не придется двигать.

Доступные элементы

Для добавления элементов на артборд необходимо нажать в левом верхнем углу на плюс, после этого появится выпадающий список с доступными элементами:

После создания и размещения элемента в артборде доступны отдельные настройки. По умолчанию они скрыты. Для их отображения нужно нажать Tab или кнопку Settings справа внизу экрана.

Настройки всех элементов начинаются с настроек позиционирования.

Мы можем выровнять объекты относительно друг друга или задать позицию, высоту и ширину объекта в пикселях.

Для разных элементов настройки тоже будут разными. Следует сначала выбрать элемент, а затем переходить к настройкам. Если они открыты, когда не выбран ни один элемент, это настройки всего артборда.

Text – самый понятный элемент. Создает обычный текст.

Текст

В первую очередь это выравнивание (слева, по центру, справа), цвет, кегль, шрифт и отступы. Учитывайте, что выравнивание по ширине выполняется относительно текстового блока, а не всей страницы.

При выборе цвета мы можем сохранить текущий, чтобы не подбирать его снова. Для этого нажмите на маленький плюсик, и тогда цвет сохранится слева от знака:

Для основного текста лучше не выбирать значения кегля меньше 14 px.

Есть 2 значения отступов (spacing): интерлиньяж (расстояние между строками) и кернинг (между символами). Рекомендую первое значение выбирать между 1,2–1,5, а второе не менять. В любом случае, в первую очередь ориентируйтесь на визуальное восприятие текста.

Нам также доступна прозрачность, изменение угла наклона и слоя текста.

Первые 2 параметра могут пригодиться для реализации нестандартного решения с текстом:

Для управления слоем с текстом мы можем воспользоваться четырьмя командами (слева направо):

При этом есть возможность через параметр Target выбрать, в каком окне откроется ссылка: в том же самом (Same window) или в новой вкладке (New window).

Если вы делаете лендинг, лучше обойтись без внешних ссылок. Если вам все-таки нужно их использовать, выбирайте New window: закрыв окно, пользователь сможет вернуться на ваш лендинг.

Чтобы добавить меню сайта, используем инструмент «Текст». Создаем первый элемент. Пусть это будет ссылка «Главная». Задаем ей основные параметры:

Я выбрал такой оттенок, чтобы он подходил под цветовую гамму сайта, но при этом на контрасте с фоном привлекал к себе внимание. Старайтесь не использовать на сайте больше 3 цветов.

Размер кегля устанавливаем такой, чтобы меню было и заметно, и не перетягивало внимание с основных элементов, которые мы разместим ниже.

Теперь мы можем просто скопировать получившийся элемент и поменять текст.

Скопировать можно двумя способами: нажатием на клавиатуре Ctrl+C (⌘+C для MacOS) и Ctrl+V (⌘+V для MacOS) или через боковое меню, нажав на Copy.

Советую приучить себя использовать именно горячие клавиши: это значительно ускорит рабочий процесс.

Теперь просто делаем нужное нам количество копий и переименовываем ссылки. Выставляем их в ряд на глаз. Более точное позиционирование элементов рассмотрим чуть позже.

Теперь добавим номер телефона и разместим его правее меню. Немного изменим его цвет – сделаем его более ярким и заметным:

Обратите внимание, что мы можем менять внешний вид текста не только для всего элемента, но и для отдельных букв или слов. Для этого дважды щелкните на тексте, чтобы выделить его. После этого появится небольшое меню вверху:

Через него мы можем:

Теперь наш первый экран выглядит вот так:

Изображения

С помощью этого элемента, как нетрудно догадаться, мы добавляем графические элементы. Это может быть как фон, так и картинка, фото, иконка и т. д.

Добавляем элемент на артборд. Сначала он будет незаполненным.

Чтобы загрузить нужное изображение, переходим в настройки этого элемента и добавляем изображение:

Доступно 2 варианта загрузки: как файл с компьютера и по ссылке из интернета.

Для загрузки файла с компьютера нажмите по кнопке Upload file в центре окна. Для загрузки по URL нажмите по ссылке Upload from URL внизу формы.

Далее идут такие же настройки, как и в тексте: прозрачность, поворот, слои, гиперссылки. Также к изображениям можно добавлять границу и текст.

Эти элементы позволяют разнообразить визуал добавленных нами изображений. Иногда уместно использовать тень, чтобы отделить изображение от остального контента страницы.

Нам доступно изменение цвета (color), ширины (brdr.size) и скругления границы (radius). Помимо этого, можно выбрать стиль самой границы через параметр Style. Доступны такие варианты:

Что касается тени, тут гораздо больше возможностей для креатива:

Секрет удачной тени кроется в параметрах Offset, Blue, Spread. Мы можем сдвинуть одну или несколько сторон, изменить размытие или величину тени. По сути, мы можем даже фон поменять не отдельным элементом, а просто изменив тень.

Источник