Все записи:Редакция

Один из важных элементов при в Tilda – это готовые дизайны, которые позволяют быстро и легко создавать красивые и удобные веб-сайты. В этой статье мы разберемся, где найти доступные в Tilda шаблоны, как использовать их, а также как создать свои собственные.

Где найти заготовки дизайна?

На платформе доступен широкий выбор готовых дизайнов, которые можно использовать для создания различных типов веб-сайтов. Чтобы найти в Tilda шаблоны, войдите в свою учетную запись и перейдите на страницу “Проекты”. Затем нажмите кнопку “Создать проект” и выберите пункт “Из шаблонов”.

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

Как воспользоваться готовыми дизайнами в Tilda?

После выбора понравившегося вам дизайна вы сможете начать им пользоваться для создания своего веб-сайта. Готовые дизайны в Тильде состоят из различных блоков, которые можно комбинировать и настраивать по своему усмотрению. Каждый блок имеет свои настройки и возможности для изменения содержимого, дизайна и расположения.

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

Как создать свои Tilda шаблоны?

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

Чтобы создать свой Tilda шаблон, вам необходимо сначала создать в проекте страницу, которую вы хотите использовать в качестве основы. Затем откройте настройки страницы -> Дополнительные и установите флажок “Назначить страницу Шаблоном”. Сохраните настройки.

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

Какие использовать свои Tilda шаблоны?

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

Для этого просто выберите пункт “Мои шаблоны” при создании нового проекта. Затем выберите нужный вам из списка доступных.

Вывод

В Tilda шаблоны играют важную роль при работе с платформой, позволяют быстро и легко создавать красивые и удобные сайты. Вы можете найти доступные вам при создании новой страницы и выбрать их для создания своего веб-сайта. Кроме того, Тильда дает возможность создавать свои собственные шаблонные страницы, которые можно использовать в будущих проектах. Это удобно, если у вас есть уникальный дизайн или функциональность, которые вы хотите применить к нескольким веб-сайтам.

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

Создание языковых версий внутри одного веб-сайта

Если ваша цель – создание страниц на разных языках в рамках одного веб-сайта, рекомендуется добавить для каждой страницы отдельный блок меню. Для этого создайте отдельные страницы на разных языках и добавьте соответствующий блок меню: ME204, ME301, ME302, ME303 или блок меню “гамбургер” ME401-403. В содержимом блока нужно указать языки и опубликованные ссылки на страницы.

Создание языковых версий на отдельных веб-сайтах

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

Для того чтобы скопировать страницы, перейдите в настройки страницы и выберите “Действия” и “Дублировать”. Чтобы переместить страницу на другой ваш сайт, перейдите в настройки страницы, выберите “Действия” и “Перенести страницу на другой ваш сайт”.

В настройках обоих проектов внесите изменения в “шапку” и добавьте соответствующие блоки меню: ME204, ME301, ME302, ME303, или меню “гамбургер” ME401-403. В добавленном блоке контента укажите доступные языки и ссылки на опубликованные веб-сайты.

Если вы хотите использовать три языка – русский, английский и немецкий – воспользуйтест такой схемой:

– На русскоязычном сайте разместите ссылки на языки EN | DE

– На англоязычном сайте разместите ссылки на языки RU | DE

На сайте, который использует немецкий язык, есть возможность выбрать языки RU | EN. Таким образом, если пользователь находится на русскоязычном сайте, ему доступно переключение на немецкий и английский языки. Если пользователь на англоязычном сайте, ему доступно переключение на русский и немецкий языки. Нельзя создать больше трех языковых версий стандартными способами. 

Мультилендинг 

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

Для перенаправления в зависимости от языка браузера, создайте страницы на разных языках и разместите ссылки на них в меню. Затем, воспользуйтесь блоком T805 из категории “Другое”. Вставьте карточки для каждой языковой версии и заполните обязательные поля.

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

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

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

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

Как создать новую страницу

Для того чтобы создать новую страницу, нажмите на выпадающий список страниц и выберите “Добавить новую страницу”. Или перейдите к списку страниц и нажмите “Создать новую страницу”.

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

Как скопировать страницу

Для копирования страницы перейдите в Настройки страницы → Действия → Дублировать.

Как передать страницу другому пользователю или на другой сайт в пределах одного аккаунта

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

Как изменить порядок страниц

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

Второй способ – установить номер страницы вручную. Это можно сделать, перейдя в Настройки страницы → Дополнительно → Порядковый номер. В настоящее время номера страниц задаются десятками: первая страница – №10, вторая страница – №20, и так далее. Это сделано для того, чтобы можно было вставить страницы между уже существующими, не пронумеровав все страницы заново.

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

Ссылки на номер телефона

Для создания ссылки на номер телефона нужно использовать следующий формат: tel:+71234567890 (без пробелов). Эта ссылка будет работать на мобильных устройствах, а на компьютерах откроется приложение для звонков, если оно установлено.

Ссылки на email

 Для создания ссылки на email пропишите в поле для ссылки адрес вашей электронной почты, например, yourmail@mysite.com. При клике на эту ссылку откроется почтовый клиент, установленный на устройстве посетителя.

Если вы хотите создать кнопку с ссылкой на email, укажите адрес, начиная с mailto:, например, mailto:yourmail@mysite.com. При клике на кнопку откроется почтовый клиент, установленный на устройстве посетителя.

Вы можете настроить появление всплывающих окон (pop-up) на вашей странице в зависимости от действий пользователя, таких как клик по ссылке, прокрутка, время нахождения на странице или закрытие страницы.

Появление блока при клике на ссылку

Чтобы показать окно с информацией или формой подписки при клике на кнопку, необходимо добавить специальную ссылку для этой кнопки. Ссылку можно создать в блоке с самим всплывающим окном.

1. Откройте Библиотеку блоков и перейдите в категорию “Форма”. Там вы найдете блоки pop-up (BF501N, BF502N, BF503, BF504), которые можно использовать.

2. Когда блок добавляется в текст, он будет иметь ссылку (линкхук).

3. Та же ссылка будет в содержимом этого блока, ее можно изменить на любое произвольное название, например, #popup:superpopup.

4. Теперь эту ссылку можно добавить к кнопке. Откройте меню “Контент” блока с кнопкой и введите ссылку в поле “Ссылка для кнопки” в формате: #popup:subscription.

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

Ссылку можно разместить не только на кнопке, но и на любом слове в любом месте – механизм остается тем же.

1. Выделите слово, при нажатии на которое должен появиться всплывающий блок.

2. Через контекстное меню выберите опцию для добавления ссылки на всплывающее окно.

3. Добавьте блок всплывающего окна (категория «Форма»).

4. В меню «Контент», в поле «Ссылка» введите ту же самую ссылку – #popup:anyword

Появление блока при прокрутке

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

1. В разделе «Контент» введите ссылку в формате: #popup:subscription (слово может быть на ваш выбор).

2. Добавьте специальный триггерный блок, который вызывает появление элемента при прокрутке страницы. Этот блок находится в категории «Другое» и называется T183.

3. В разделе «Контент» укажите точно такую же ссылку, которую вы использовали в блоке pop-up.

Настройка времени запоминания посетителя

В разделе «Настройки» триггера в поле «Время жизни cookie» укажите количество дней, на которое необходимо запомнить посетителя, чтобы избежать частого показа ему вашего pop-up’а.

Если нужно, чтобы pop-up появлялся не чаще, чем раз в 10 дней, установите значение 10.

Чтобы pop-up блок был показан один раз в год, установите значение 365 – после этого посетитель больше не увидит этот блок. Pop-up блок будет появляться каждый раз, когда посетитель заходит на вашу страницу, оставьте поле пустым.

4. Опубликуйте страницу. Блок появится, когда посетитель прокрутит до того места, где вы разместили pop-up блок.

Появление блока по времени 

Добавьте pop-up блок, который появится через определенное время. Например, форму подписки или важное напоминание.

1. В разделе “Контент” вставьте ссылку с использованием формата: #popup:subscription (слово может быть любым).

2. Создайте триггер, способный вызывать появление блока после определенного времени. Триггер находится в категории “Другое”. Используйте блок T188.

3. В разделе “Контент” укажите точно такую же ссылку, какую вы указали в блоке pop-up.

В разделе “Настройки” установите время через которое появится блок – “Тайме (в секундах)”. Это будет время, в течение которого посетитель запомнится.

В разделе “Настройки” триггера заполните поле “Срок жизни cookie” указывая время (в днях), в течение которого будет запоминаться посетитель, чтобы избежать многочисленного показа pop-up одному и тому же человеку.

Чтобы контролировать частоту появления pop-up окна и ограничить его появление не чаще, чем раз в 10 дней, установите значение 10.

Если Вы хотите, чтобы pop-up блок появлялся только один раз в течение года, то установите значение 365, и после этого посетитель не будет видеть данный блок в течение всего года.

Если же Вы хотите, чтобы pop-up блок появлялся каждый раз при заходе посетителя на Вашу страницу, оставьте поле пустым. Когда страница будет опубликована, через заданное время появится всплывающее окно.

При закрытии страницы

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

1. В разделе “Контент” введите ссылку в формате #popup:subscription (слово может быть любым).

2. Добавьте триггер из категории “Другое”, который вызовет появление блока при закрытии вкладки. Блок T723 должен быть использован.

3. В разделе “Контент” укажите точно такую же ссылку, какую вы установили для pop-up блока.

4. Опубликуйте страницу. Поп-ап будет появляться, когда курсор приближается к верхней границе браузера.

В Тильда есть функция, которая позволяет использовать скидку.

Для создания промокода перейдите в раздел “Настройки сайта” → “Платежные системы” → “Промокоды”.

Для добавления промокода введите его название, которое может состоять из букв и цифр. Общая длина промокода не должна превышать 20 символов.

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

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

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

Описание – это небольшая заметка к промокоду, которая будет видна только в системе. Длина описания не должна превышать 255 символов.

Чтобы применить промокод, перейдите в меню “Контент” у блока с корзиной на вашем сайте. Добавьте поле типа “Промокод” и заполните данные. Сохраните изменения и переопубликуйте страницу. После этого покупатели смогут ввести и применить промокод на скидку при оформлении заказа в корзине.

Максимальное количество промокодов – 500 штук.

Промокод не зависит от регистра – если вы задали промокод как “HELLO”, то “hello” тоже будет работать. Рекомендуется использовать латиницу и цифры.

Промокод действует только на сумму товаров. На доставку, отдельные и дополнительные товары скидка не распространяется.

Если у промокода указан срок действия, то его можно использовать до 23:59:59 предыдущего дня по времени GMT+3 (Москва). Например, если указана дата 01.07.2022, то промокод перестанет работать в 30.06.2022 в 23:59:59 по московскому времени.

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

Скорость загрузки картинки зависит от ее веса, который определяется двумя параметрами:

1. Размер в пикселях по ширине и высоте (фотография размером 3000х2000 пикселей будет тяжелее, чем фото 300х200 пикселей).

Наилучший подход заключается в изменении размера изображения перед удалением избыточной информации. Это позволяет дополнительно уменьшить вес без значительной потери качества. Размер изображения должен быть не больше 1680 px по большей стороне при загрузке на Тильду, чтобы изображение могло быть автоматически уменьшено программой. Картинки меньшего размера сохранят свой оригинальный размер. Однако, хотя это программное уменьшение размера помогает уменьшить вес, это также приводит к потере качества изображения.

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

Для определения размера изображения на сайте, можно добавить блок на страницу и включить сетку (в настройках текстового блока), чтобы узнать, сколько колонок оно занимает. Одна колонка равна 60 px, а расстояние между колонками составляет 40 px.

Как сократить вес изображения в максимальной степени?

 Существуют специализированные программы, которые сжимают изображения, объединяя схожие цвета. Они выполняют эту задачу интеллектуально, не заметно визуально, но значительно уменьшают размер файла фотографии – достигая до 70%.

Примеры таких сервисов: 

TinyPNG, Squoosh, Kraken, Compressor, Compressjpeg и ImageOptim (требует установки на Mac). Рассмотрим пример оптимизации изображения на примере скачанной с Unsplash фотографии Christoph Bengtsson Lissalde.

Исходные размеры файла составляют 4405×2478 px и 3,5 мб.

Если загрузить его на Тильду без изменений, фотография будет обрезана до размера 1680×945 px и ее размер уменьшится до 1,2 мб.

Однако, если открыть исходный файл в Photoshop, изменить его размеры на 1680×945 px и сохранить, полученный размер будет составлять 832 кб.

Если загрузить фото в TinyPNG, его размер уменьшится до 353 кб.