Как сделать ссылку в Зеро блоке Тильда
Поставить ссылку, которая ведет внутрь страницы к конкретному блоку (разделу), можно двумя способами: 1. Добавьте в нужное место специальный блок — T173 Якорная ссылка из категории Другое. В Контенте T173 пропишите желаемое название для якоря, например: «contacts».
- Для создания ссылки внутри страницы на конкретный блок есть два способа:
- 1. Добавление блока T173 Якорная ссылка из категории Другое с выбранным названием якоря в Контенте T173.
- 2. Использование уникального номера блока в адресе ссылки — #rec129000.
- Для создания ссылки на кнопку в Зеро блоке нужно добавить блок с кнопкой и указать ссылку в поле «Ссылка для кнопки» в меню «Контент».
- Чтобы создать ссылку на любой блок в Тильде, пропишите номер блока (#rec129000) в адресе ссылки.
- Для создания кликабельных ссылок на email и номер телефона используйте следующие коды: tel:+71234567890 для номера телефона и mailto:yourmail@mysite.com для email.
- Чтобы создать ссылку на Попап в Тильде, добавьте блок с всплывающим окном из категории «Форма» и используйте ссылку (линкхук) указанную на блоке или задайте свое название в Контенте.
- Чтобы создать ссылку на главную страницу сайта, достаточно в поле «ссылка» в настройках блока ввести косую черту (/).
- Для создания ссылки на блок в Тильде, переместите блок в редактор и в его HTML-коде пропишите атрибут id, например: которое будет являться ссылкой на этот блок.
- Чтобы создать якорную ссылку на блок в Зеро блоке, добавьте блок Т173 из категории «Другое» перед нужным блоком и укажите название якоря в Контенте T173.
- Как в Зеро блоке сделать ссылку на кнопку
- Как сделать ссылку на конкретный блок в Тильде
- Как сделать кликабельную ссылку в Тильда
- Как сделать ссылку на Попап Тильда
- Как сделать слово ссылкой в Тильде
- Как сделать ссылку на блок
- Как сделать якорную ссылку в Тильде Зеро блок
- Как в Зеро блоке сделать ссылку на блок
- Как сделать ссылку на страницу в Зеро блоке
- Как сделать якорную ссылку в Зеро блоке Тильда
- Как сделать ссылку на зеро блок в Тильде
- Как сделать якорные ссылки в Тильда
- Как сделать ссылку на корзину Тильда
Как в Зеро блоке сделать ссылку на кнопку
Добавьте блок с кнопкой, откройте меню «Контент» и в поле «Ссылка для кнопки» поставьте адрес страницы, на которую должен перейти посетитель.
Как сделать ссылку на конкретный блок в Тильде
Поставить ссылку на любой блок: Для этого вам нужно в адресе ссылки прописать «#rec129000». Этот уникальный номер есть у каждого блока. Его можно найти в контекстной панели Settings блока (в самом низу).
Как сделать кликабельную ссылку в Тильда
Как сделать кликабельные email и номер телефона:
1. Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела).
2. Пропишите в поле для ссылки ваш email, например, yourmail@mysite.com.
3. Для кнопки укажите ваш email, начиная с mailto:, например, mailto:yourmail@mysite.com.
Как сделать ссылку на Попап Тильда
Ссылку можно создать в блоке с всплывающим окном:
1. Откройте Библиотеку блоков → категория «Форма» и добавьте pop-up блок.
2. При добавлении блока в тексте на нем будет указана его ссылка (линкхук).
3. Эта же ссылка будет в Контенте этого блока, ее можно поменять на произвольное название.
Как сделать слово ссылкой в Тильде
Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока. Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.
Как сделать ссылку на блок
Из меню справа страницы переместите в редактор блок, на который вы хотите сделать ссылку. Нажмите на блок, в панели его управления выберите «Редактировать HTML блока» и пропишите в теге div атрибут id, например: и нажмите «Сохранить».
Как сделать якорную ссылку в Тильде Зеро блок
Чтобы на Тильде сделать якорную ссылку, необходимо в Библиотеке блоков нажать на категорию «Другое» и там выбрать блок Т173. Разместите его перед тем блоком, на который вы хотите ссылаться.
Как в Зеро блоке сделать ссылку на блок
Поставить ссылку на любой блок: Для этого вам нужно в адресе ссылки прописать «#rec129000». Этот уникальный номер есть у каждого блока.
Как сделать ссылку на страницу в Зеро блоке
Чтобы поставить ссылку, которая ведет внутрь страницы к конкретному блоку (разделу), добавьте на страницу в нужное место специальный блок — якорь (в библиотеке блоков: Другое → T173 Якорная ссылка).
Как сделать якорную ссылку в Зеро блоке Тильда
1. Указываем название якоря в генераторе кода
2. Копируем готовый код вставляем в html контейнер в Zero block.
3. Кнопке, которая будет ссылаться на наш якорь, указываем ссылку, которую задали в генераторе. Если якорь назвали down, то кнопке прописываем ссылку #down.
Как сделать ссылку на зеро блок в Тильде
Создание ссылки с элемента в Zero Block:
Необходимо дважды кликнуть по текстовому блоку и в открывшейся панели нажать на иконку скрепки. Далее появляется панель, описанная в главе «Создание ссылки в тексте».
Как сделать якорные ссылки в Тильда
Чтобы поставить ссылку, которая ведет внутрь страницы к конкретному блоку (разделу), добавьте на страницу в нужное место специальный блок — якорь (в библиотеке блоков: Другое → T173 Якорная ссылка). В Контенте этого блока укажите имя якоря, например: сontacts.
Как сделать ссылку на корзину Тильда
Для того, чтобы добавить корзину на сайт, нужно добавить блок ST100 из категории Магазин. Далее нужно использовать карточки товара из этой же категории блоков для вызова корзины или использовать ссылку вида #order:Название товара =1000, где «Название товара» — название товара, «1000» — цена.
09.05.2023 Как сделать ссылку в Зеро блоке Тильда
Для тех, кто использует платформу Тильда для создания своего сайта, важно знать, как добавлять ссылки на разные элементы сайта. Например, как сделать ссылку на конкретный блок или сделать слово ссылкой. мы рассмотрим особенности создания ссылок в Зеро блоке Тильда.
Ссылка на конкретный блок
Один из способов создания ссылки на конкретный блок — через якорную ссылку. Якорь — это ссылка на конкретный раздел внутри страницы. Чтобы создать якорь, необходимо добавить специальный блок Т173 Якорная ссылка в категории Другое. В контенте блока пропишите название якоря, например, «contacts». Далее, чтобы сделать ссылку на этот якорь, нужно использовать адрес страницы и приписать к нему #contacts.
Еще один способ создания ссылки на блок — напрямую через его уникальный номер. У каждого блока на Тильде есть свой уникальный номер, который можно найти в контекстной панели Settings блока, в самом низу. Если вам нужно сделать ссылку на конкретный блок, то в адресе ссылки напишите #rec129000 (где 129000 — это номер нужного блока).
Ссылка на кнопку
Если вы хотите сделать ссылку на кнопку, то нужно добавить блок с кнопкой и открыть меню Контент. В поле «Ссылка для кнопки» введите адрес страницы, на которую должен перейти посетитель при нажатии на кнопку.
Кликабельные ссылки на email и телефон
Чтобы сделать email и телефон кликабельными, необходимо использовать специальные ссылки. Для email адреса нужно прописать в поле для ссылки ваш email, начиная с mailto:, например, mailto:yourmail@mysite.com. Для телефонного номера нужно использовать ссылку, например, tel:+71234567890 (все без пробела).
Ссылка на попап
Если вы хотите создать ссылку на блок с всплывающим окном, то нужно добавить pop-up блок из категории «Форма» в Библиотеке блоков. При добавлении блока в тексте на нем будет указана его ссылка (линкхук). Эту ссылку можно поменять на произвольное название в Контенте этого блока.
Создание якорных ссылок
Чтобы на Тильде сделать якорные ссылки, необходимо в Библиотеке блоков выбрать блок Т173 из категории «Другое». Разместите его перед тем блоком, на который вы хотите ссылаться. После этого в адресе ссылки пропишите #название якоря.
Важно помнить, что для создания ссылок на различные элементы сайта, необходимо знать их уникальные номера или названия якорей. Это поможет создавать ссылки, которые будут перенаправлять пользователей на нужные страницы и разделы сайта.
Zero Block в Tilda: что это такое и как использовать
Разбираемся с настройками элементов и создаём собственный сайт-визитку.
Иллюстрация: Оля Ежак для Skillbox Media
Степан Степанов
Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.
Многие задачи в Tilda решаются с помощью набора типовых блоков, но они лишены гибкости и привязаны к конкретному расположению элементов. Это не всегда удобно, приходится искать компромисс.
Zero-блок, или нулевой блок, в Tilda — редактор, с помощью которого можно настраивать дизайн сайта, как в Figma, Sketch или Photoshop. Он не привязан к расположению элементов и позволяет реализовать любую идею.
Это инструкция о продвинутой работе в Tilda. Если вы ещё ей не пользовались, советуем прочитать предыдущие статьи об этом конструкторе сайтов:
- Осваиваем конструктор Tilda: делаем сайт-визитку с нуля
- Как сделать меню для многостраничного сайта в Tilda
Создание Zero-блока
Перейдите в Tilda и создайте новую страницу. Выберите шаблон «Пустая страница», и откроется стартовое рабочее пространство Tilda.
Чтобы создать Zero Block, на стартовом рабочем пространстве нажмите на кнопку Zero.
Появится Zero-блок — внешне он очень похож на типовые блоки Tilda. Единственное отличие — при наведении на него мыши в левом верхнем углу вместо кнопок «Настройки» и «Контент» будет только «Редактировать блок».
Базовые настройки Zero-блок
Нажмите на кнопку «Редактировать блок», чтобы перейти на страницу редактора. Если вы знакомы с Figma или Sketch, то в интерфейсе редактирования Zero-блока вы сразу заметите сходство с этими программами.
Чтобы вам ничего не мешало делать свою страницу, удалите все стандартные модули Zero-блока: текст и иллюстрации. Для этого зажмите правую кнопку мыши, выделите всё, нажмите по объектам правой кнопкой мыши и выберите Delete (или просто нажмите клавишу Delete).
Ширина Zero Block фиксирована, а высота ограничена контейнерами Window Container и Grid Container.
Grid Container — условное обозначение границ сайта, значение указывается в пикселях.
Window Container — условное обозначение границ экрана, указывается в процентах. Если значение не указано, его размер будет равен Grid Container.
По умолчанию ширина Window Container не указывается, поэтому Tilda берёт значение Grid Container — по умолчанию это 550 пикселей. Чтобы изменить эти значения, кликните в любое пустое место макета, и справа появится панель Artboard Settings.
Оба контейнера имеют высоту 550 пикселей — это примерно половина экрана, а нужен весь. Для этого укажите в строке Window Container height значение 100%, чтобы Window Container занял всю высоту экрана.
Если ваш Grid Container обрезается, укажите в настройках Window Container выравнивание по центру.
Иллюстрации и фон
Начать делать страницу в Zero-блоке можно с чего угодно. Но мы сначала добавим фотографию:
1. Нажмите на плюс в верхнем левом углу и в выпадающем меню нажмите Add Image.
2. Внутри Zero-блока появится серый квадрат — это плейсхолдер под иллюстрацию.
3. Кликните на серый квадрат и справа на панели настроек нажмите на кнопку Upload file. В появившееся окно перетащите фотографию со своего компьютера, и она окажется на месте плейсхолдера.
Теперь отредактируйте фотографию, чтобы она подходила под вашу будущую вёрстку:
1. Уменьшите картинку, чтобы её высота была равна 120 пикселям. Найти эту настройку можно на панели Element settings справа — она отмечена буквой W. Также вы можете изменить размер вручную, потянув за один из углов изображения.
-2021111018213144.png)
2. На панели Element settings, нажмите на иконку , чтобы фотография выровнялась по центру.
3. На той же панели скруглите края, чтобы фотография была не квадратной, а круглой. Для этого перейдите в раздел Border и в пункте Radius укажите 180.
Теперь добавьте на страницу фоновое изображение. Для этого кликните на любое пустое место на макете и нажмите на кнопку Upload File в пункте Background Image:
Когда картинка загрузится, фон заполнит всё пространство макета.
Текстовые блоки
На сайте-визитке нужно написать о себе, чтобы клиенты знали, с какими задачами к вам можно обратиться. Для этого добавьте текстовый блок:
1. Нажмите на плюсик в левом верхнем углу и выберите Add Text.
2. Если фон вашей страницы тёмный, перекрасьте текст в белый цвет. Для этого в меню Element settings в пункте Color вместо #000000 напишите #FFF.
3. Перенесите текст под фотографию и выровняйте его по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center.
4. Дважды кликните по текстовому блоку и вместо рыбного текста добавьте свой. По желанию, в меню Element settings можно изменить его настройки: шрифт, кегль, интерлиньяж и межбуквенные отступы.
5. Аналогичным образом сделайте заголовок страницы и впишите в него своё имя. Заголовок должен быть больше основного текста.
Чтобы заново не настраивать все свойства текста, можно просто скопировать готовый. Для этого зажмите клавишу Alt и тащите свой текст в любую сторону.
Лайфхак — чтобы быстро убрать все панели с экрана, нажмите клавишу F. Так будет проще оценить свой макет и никакой визуальный шум мешать не будет. Чтобы скрыть только панель настроек, нажмите клавишу Tab.
Кнопка
Теперь добавьте кнопку и сделайте из неё ссылку на вашу рабочую почту:
1. Чтобы добавить кнопку, нажмите на плюсик в левом верхнем углу и выберите Add Button.
2. Перенесите кнопку под фотографию и выровняйте её по центру. Для этого в меню Element settings нажмите на иконку и в пункте Grid Container align in window укажите Center. При необходимости поменяйте цвет фона — например, на жёлтый.
3. Чтобы поменять текст на кнопке, кликните на неё и в меню Element settings в пункте Caption укажите, что именно на ней должно быть написано.
4. В том же меню в пункте URL укажите адрес своей почты.
Фиксированное позиционирование изображений и фигур
Если у вас есть логотип, его можно добавить на страницу и закрепить в углу:
1. Добавьте ваш логотип на страницу как обычную картинку.
2. Выделите логотип и на панели Element settings нажмите на мелкую подпись + Container: grid.
3. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis — Left и Top.
4. Если логотип «прилип» к углу, вручную перенесите его в то место, где он должен стоять. Настройки позиционирования при этом не собьются.
Логотипы и иконки желательно загружать в векторном формате SVG, чтобы на больших экранах они не размазывались. Если у вас таких нет, подойдёт и PNG в высоком разрешении, но прогружаться он будет дольше, чем SVG.
Теперь добавьте кружки, которые будут имитировать пункты меню. Для примера рассмотрим только самый первый — остальные можно сделать по этой же инструкции:
1. Нажмите на плюсик в левом верхнем углу и выберите Add Shape.
2. На макете появится квадрат — чтобы сделать его кругом, на панели Element settings укажите радиус скругления 180. В отличие от иллюстрации, у фигуры нужно указать значения и высоты, и ширины — например, по 15 пикселей. Если нужно, цвет кружка можно изменить.
3. Выделите кружок и на панели Element settings нажмите на мелкую подпись
+ Container: grid.
4. В появившемся меню в пункте Container укажите Window Container, а в обоих Axis — Right и Top.
5. Чтобы буллет не «влип» в угол, сместите его положение так же, как и у логотипа.
По тому же принципу можно сделать остальные буллеты и полоску для слайдера.
В итоге у вас получится примерно такая страница:
Сохраните свою работу — нажмите в правом верхнем углу на кнопку Save, а затем на Close, чтобы выйти из редактора. Проверьте страницу в предпросмотре и опубликуйте её.
Посмотреть, как выглядит созданный в этом уроке сайт, можно здесь.
Как в тильде в зеро блоке вставить ссылку на кнопку
В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Материал посвящен дизайну меню — то, как меню работает и как оно выглядит. Если вам нужно разобраться как вообще создать меню сайта, добавить меню сразу на все страницы или сделать навигацию внутри страницы, пожалуйста прочитайте статью:
Как сделать меню сайта
Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Каждая ссылка — пункт меню. Меню необходимо для навигации: перехода между страницами или между разделами одной страницы.
Общие рекомендации
Меню должно помогать посетителю быстро найти необходимую информацию.
Меню должно быть лаконичным.
Пунктов меню не должно быть слишком много.
Оптимальное количество пунктов меню — 5 или меньше.
Названия пунктов меню лучше делать из одного слова.
Хорошо, если слова будут не слишком длинные.
Меню не должно быть тяжеловесным и отнимать внимание от контента.
Примеры хороших меню
Описание картинки
Прозрачное статичное меню поверх обложки
Как себя ведет:
Всегда находится вверху страницы, не отвлекает от содержания, при необходимости пользователь может легко к нему обратиться, так как оно расположено в привычном месте.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Посмотреть страницу с меню в браузере
Фиксированное меню
Как себя ведет:
Меню, которое всегда находится в поле зрения пользователя и он может обратиться к нему на любом месте на странице. У такого меню чаще всего прозрачный фон в начале страницы (на обложке), который меняется на непрозрачный во время скрола.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%
Посмотреть страницу с меню в браузере
Два разных меню: одно вверху страницы, другое появляется при скролле
Как себя ведет:
Вариант, похожий на предыдущий, только при скролле появляется меню с другим содержимым. Например, в начале страницы меню содержит логотип, пункты (ссылки на разделы сайта) и ссылки на социальные сети. А когда пользователь начинает пролистывать страницу, появляется и остается в поле зрения меню с логотипом, призывом к действию и кнопкой обратного звонка.
Добавить на страницу два блока ME301. И задать им следующие параметры:
Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%
Первое меню
Первое меню
Второе меню
Второе меню
Посмотреть страницу с меню в браузере
Меню «гамбургер»
Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.
Для чего используется:
В случаях, когда необходимо, чтобы отвлекающие элементы были сведены к минимуму и внимание пользователя было обращено только к контенту. Довольно часто меню «гамбургер» используется в мобильных версиях сайта. Например, можно добавить обычное меню и назначить ему видимость «только для компьютера», затем добавить меню «гамбургер» и назначить ему видимость «только для мобильных».
Как настроить видимость блока только для мобильных устройств
Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:
Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый
Посмотреть страницу с меню в браузере
Многоуровневое меню
Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.
Для чего используется:
В объемных сайтах со сложной структурой.
Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.
Пункты подменю основного блока
Добавить на страницу любой блок меню, который содержит пункты меню.
Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.
Нажать на иконку плюса напротив пункта к которому нужно добавить пункт второго уровня. Заполнить появившиеся поля названия пункта и его ссылку.
Чтобы добавить новый пункт подменю, нажмите на иконку плюса ещё раз.
Подпункты меню будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Блок ME601
Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus
Как создать сайт-визитку бесплатно и самому: пошаговая инструкция
Хотите заявить о себе в интернете и собрать в одном месте информацию о том, кто вы и какие услуги оказываете? Можно, конечно, заморочиться и сделать сайт с блогом. А можно просто создать сайт-визитку бесплатно и своими руками с помощью конструктора Тильда. Ирина Жданова продолжает знакомить нас с функционалом Тильды.
Чтобы быстро выйти в онлайн, понадобится масса инструментов. В конце статьи или прямо сейчас скачайте бесплатную подборку из 116 сервисов, которые облегчат работу с текстами, изображениями, видео и аудио
Если вы никогда не создавали страниц на Тильде, то прочтите сначала эту пошаговую инструкцию. Она познакомит вас с базовыми функциями и блоками конструктора. Сегодня же мы узнаем, как в Тильде создать сайт-визитку.
Создайте новую страницу и выберите шаблон
На странице редактирования сайта создайте новую страницу.
Во вкладке «бизнес» есть несколько шаблонов для сайта-визитки: для адвокатов, психотерапевтов, преподавателей, репетиторов, фрилансеров, фотографов, ведущих, гидов и людей других профессий. Но ещё больше шаблонов для визиток лежит, как ни странно, в разделе «Контакты».
Выберите понравившийся шаблон. Профессия и цвета шаблоны — не важны, всё это можно поменять в настройках. Смотрите на расположение блоков и удобство навигации.
Одноэкранный сайт-визитка
Одноэкранная страница занимает один экран устройства: компьютера или телефона. Если информации о вас немного, хватит одноэкранной страницы-визитки.
Выберите пункт «Настройки» на главной странице редактирования и заполните раздел «Главное».
Поставьте бейджик. На сайте-визитке это должна быть не абстрактная иллюстрация, а ваш портрет. Когда вы будете размещать ссылку на страницу в соцсетях, вы сразу представитесь своей аудитории.
Сохраните изменения.
Одноэкранный сайт-визитка обычно состоит из одного блока. Это логично. Проблема в том, что чаще всего это зеро-блок, который мы ещё не рассматривали в предыдущих статьях о Тильде. Выглядит это вот так.
Как отредактировать зеро-блок
Вообще для редактирования зеро-блока нужны навыки программирования, знание html и английского — русского меню нет. Но поменять текст, фотографию и фон вы сумеете, и не обладая этими навыками.
Выделите в блоке нужные для редактирования части.
- Для начала можно поменять цвет блока, это BG Color.
- Или вставить свою фотографию на фон — это Upload File.
Чтобы сменить фотографию, выделите шаблонную картинку. Нажмите Upload file. Меню справа изменится, это нормально. У каждой части этого блока своё меню.
Чтобы изменить текст, выделите исходный и вместо него напишите свой.
Чтобы изменить кнопку, выделите её и справа в меню найдите строки «Capton» — это название кнопки, и URL — сюда надо вставить ссылку, если c кнопки надо куда-то надо перейти.
Если кнопка не нужна, её можно просто удалить.
Я поставила ссылку на страницу компании, которую мы создавали в прошлой статье.
Как указать соцсети в зеро-блоке Тильды
Чтобы оживить ссылки на социальные сети, поочерёдно выделите каждую кнопку и заполните поля в меню справа.
- Для этого откройте графу «Link».
- В строке URL поставьте ссылку на соцсеть, соответствующую иконке.
- Измените это значение, если хотите, чтобы ваша соцсеть открывалась в новом окне.
Лишние иконки соцсетей удалите.
Как оптимизировать зеро-блок под разные устройства
В зеро-блоке все элементы можно двигать, менять им размеры и перемещать. Чтобы всё было аккуратно, как в шаблоне, используйте вертикальную разметку для выравнивания строк и элементов.
И если вам кажется, что страница готова, огорчу — нет. Начинается самое сложное — оптимизация страницы под разные экраны. Стандартные и шаблонные блоки Тильда оптимизирует страницы сами, автоматически.
В зеро-блоке вы должны на каждый размер экрана оптимизировать всё сами. Иначе страница будет нормально выглядеть только на экране компьютера, а во всех остальных устройствах всё съедет.
Сейчас мы сделали красиво для компьютеров и ноутбуков. Теперь выберите следующий размер экрана, и переделайте страницу под него. В общем и целом, страница смотрится прилично, нужно только поправить сбившуюся центровку.
Вот так неотредактированная страница выглядит на большом экране смартфона. Надо подправить центровку частей страницы. И всё то же самое повторить с другими размерами экранов. Все изменения для одних экранов не затрагивают другие.
А вот если поменять контент, то он изменится везде. Поэтому я рекомендую сначала настроить блок, как вам нравится, а потом подгонять всё по размеру на другие экраны.
В конце не забудьте нажать «Save». Для закрытия блока редактирования надо нажать «Close». А затем опубликовать полученную страницу и посмотреть, как она выглядит в браузере.
Лайфхак: почти любой блок в Тильде можно перевести в зеро-блок и делать с ним, что захочется. Но перед этим я рекомендую вам пройти курс на Тильде про зеро-блоки. Вам откроются невиданные прежде возможности редактирования сайтов. Если вы готовы вкладывать в это своё время. А если не готовы возиться с зеро-блоками, смотрите, как создать сайт-визитку подлинней.
Как создать многоэкранный сайт-визитку
Как создать сайт-визитку, который расскажет о вас гораздо больше? Выберите шаблон из раздела «Бизнес». В этом разделе все шаблоны сделаны из стандартных блоков.
Я взяла себе шаблон про адвоката. То, что подходит адвокату, подойдёт и программисту.
Настройте пункты меню в шаблоне
Первым делом поменяйте настройки страницы. А потом займитесь пунктами в меню.
Лайфхак: Меню позволяет быстрее путешествовать по странице до интересующих разделов. И чисто визуально делает страницу солиднее.
В директории «Контент» выберите раздел «Список пунктов меню». Если вам мало имеющихся пунктов, нажмите «Добавить», много — удалите лишнее название и ссылку, и пункт пропадёт.
У нас всего одна страница, и надо быстро переходить по ней. Поэтому в качестве адреса выбирайте не другую страницу, а блок.
Лайфхак: Сначала отредактируйте всю страницу, а потом уже подключайте кнопки. Вам будет сразу видно, какую куда.
Отредактируйте блоки шаблона
Теперь время редактировать страницу. Я не буду останавливаться подробно на том, как редактировать блоки. Подробно об этом читайте в инструкции по Тильде.
Давайте рассмотрим, из каких блоков в принципе может состоять сайт-визитка.
Знакомство
Первый блок — знакомство — вполне может быть и одноэкранной визиткой, если удалить меню и остальные разделы.
Услуги
Но если вы решили продолжить, то раздел «Мои услуги» состоит из 6 разных элементов: заголовков, текстовых блоков и кнопки.
У меня услуга одна — создание сайтов. Меняю текст, а лишние блоки удаляю.
Кнопка «Записаться на консультацию» — переход на форму записи внизу страницы. Это облегчает пользователю путь до работы с вами. И повышает конверсионность сайта-визитки.
Опыт работы
Раздел опыт работы выделен цветом и состоит из трех блоков: заголовка и двух разных текстовых блоков. Это нужно, чтобы выделить главную мысль ярче.
Цены
Я считаю, что публиковать цены на сайте — правильный, прозрачный и честный подход. Если вы считаете иначе, просто удалите этот раздел, благо он состоит из одного блока.
Контент в этом блоке создан карточками. Одна карточка — одна строчка на сайте-визитке. Карточки можно добавлять, убирать или менять местами.
Новости
Новости и полезные материалы нужны вам, только если вы собираетесь завести блог и писать статьи.
Если вы просто хотите сайт-визитку, удаляйте его спокойно. А если решите оставить, то вам придётся написать несколько статей на отдельные страницы Тильды и добавить их сюда. Как это сделать, я расскажу в статье о создании блога.
Контакты
Контакты — самый важный пункт страницы. Укажите все контакты, по которым вас можно найти, и свои соцсети. Облегчите клиентам путь до покупки ваших услуг.
Когда все блоки наполнены, переопубликуйте страницу. И не забудьте подключить форму к месту сбора контактов. По умолчанию Тильда собирает все адреса в «Заявки» и хранит месяц. И, конечно, раз у нас есть форма сбора данных, то обязана быть политика конфиденциальности.
На этом ответ на вопрос, как создать сайт-визитку, исчерпан. Вы можете добавить в него всё, что захотите: портфолио, кейсы, отзывы клиентов и любые блоки, подтверждающие ваш профессионализм и компетенции. И этого будет достаточно для вашего первого представительства в интернете.
Ирина Жданова, специалист в Тильде, лоукостер сайтов, копирайтер и маркетолог.