Тильда как редактировать кнопки
Перейти к содержимому

Тильда как редактировать кнопки

  • автор:

Zero Block: список горячих клавиш

S; Переход в Select Tool D; Переход в Draw Tool B; Переход в Bend Tool E; Переход в Edit Tool ⇧ + H; Отразить объект по горизонтали в Select Tool ⇧ + V; Отразить объект по вертикали в Select Tool ⇧ при масштабировании; Пропорциональное масштабирование ⌥ при масштабировании; Свободное масштабирование из центра ⇧ + ⌥ при масштабировании; Пропорциональное масштабирование из центра ⌘/Ctrl + Z; Отменить действие ⌘/Ctrl + ⇧ + Z; Вернуть отмененные изменения ⌘/Ctrl + C; Копировать ⌘/Ctrl + V; Вставить ⌘/Ctrl + A; Выделить все элементы ⇧ при выделении точек или векторных элементов; Выделение нескольких элементов Стрелочки на клавиатуре; Движение элемента на 1 пиксель Стрелочки на клавиатуре с зажатым Shift; Движение элемента на 10 пикселей Backspace или Delete; Удалить элемент ⌘/Ctrl + I; Импортировать SVG [;Переместить элемент векторного изображения выше в слоях ];Переместить элемент векторного изображения ниже в слоях ⌥/Alt + [;Перенести элемент выше в слоях на один шаг ⌥/Alt + ];Перенести элемент ниже в слоях на один шаг ⌥/Alt + перетаскивание мышью в Select Tool; Сделать копию элемента в Select Tool ⌘/Ctrl + перетаскивание мышью в Edit Tool; Без отражения ⌥/Alt + перетаскивание мышью в Edit Tool; Отразить угол Двойной клик в Edit Tool; Переключить режим кривой

Поменять тип экрана
Спрятать сетку
Спрятать настройки
Спрятать управляющие элементы
Отмена последнего действия
Сохранить
Копировать элемент
Вставить элемент
Переместить элемент
Удалить элемент
Изменить прозрачность
Заблокировать элемент
Изменить размер шрифта
Изменить межстрочное расстояние
Изменить межбуквенное расстояние
Выделить все
Показать/спрятать слои
Добавить горизонт. направляющие
Добавить верт. направляющие

Тильда как редактировать кнопки

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

Блок BF103. Кнопка для мобильной версии, зафиксированная внизу экрана

Блок позволяет добавить на сайт кнопку, которая будет по умолчанию отображаться на экранах шириной до 640px. Посетитель точно не сможет пропустить кнопку — она всегда зафиксирована в нижней части экрана.
В настройках можно задать время появления и исчезания кнопки, если необходимо.

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

Блок BF104. Гигантская кнопка во всю ширину экрана или с отступами

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

Помимо стандартных настроек, можно добавить отступы по бокам кнопки или уменьшить её ширину до 12 колонок.

Блок BF504. Поп-ап форма в углу экрана

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

Чтобы поп-ап работал, необходимо добавить один из блоков-триггеров из категории «Другое» — T183 для появления поп-апа при скролле, T188 для появления по таймеру или T723 для появления при закрытии окна.

Подробнее о работе с поп-апами

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

Убрать пиктограмму личного кабинета, добавить свои кнопки «Редактировать профиль» и «Выйти»

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

Вы можете создать собственные кнопки «Войти» и «Зарегистрироваться», используя стандартные ссылки (или ссылку на регистрацию в определённую группу). А для кнопок «Изменить профиль» и «Выход» потребуется использовать код. Но мы объединили всё это в один скрипт, чтобы вы не мучались. Обратите внимание на другие модификации, которые могут вам пригодиться.

Внимание! Скрипт будет работать только на страницах, которые подключены к личному кабинету.

Выберите, нужно ли скрывать значок профиля со страницы и пропишите ссылку регистрации:

Затем создайте на странице кнопки в Zero-блоке для действий с соответствующими ссылками или в любом блоке маркированный список, где каждая строка — это отдельная текстовая ссылка:
«Изменить профиль» — #profile:edit
«Логин» — #login;
«Регистрация» — #signup;
«Выход» — #logout.

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

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

 script>const nProjectId=parseInt(document.querySelector("#allrecords").dataset.tildaProjectId),nLsUser=window.localStorage.getItem("tilda_members_profile"+nProjectId),nUserEmail=!(null==nLsUser||!JSON.parse(nLsUser).login)&&JSON.parse(nLsUser).login;let userbarReady=!1;const generateUserbar=()=>const o=document.querySelector(".tlk-userbar"),e=o.querySelector(".tlk-userbar__popup");t=o.querySelector(".tlk-userbar__popup-wrap"),r=o.querySelector(".tlk-userbar__popup-content"),s=o.querySelector(".tlk-userbar__user-image"),tma__userbar__showPreloader(s,t,r),tma__getObjProfile((function( ))),tma__userbar__showWidgetPanel(o,e,t),tma__userbar__calcCoordinatsWidgetPanel(o,e,t);const waitUserbarPopup=e=>"tlk-userbar__popup-login")&&(o.removeEventListener("DOMNodeInserted",waitUserbarPopup),tma__profile__drawProfilePopup(),userbarReady=!0)>;o.addEventListener("DOMNodeInserted",waitUserbarPopup,!1)>,waitUserbar=e=>if(e.target.classList.contains("tlk-userbar"))document.body.removeEventListener("DOMNodeInserted",waitUserbar),generateUserbar();const userbarPopupInterval=setInterval(()=>document.querySelectorAll('[href="#signup"]').forEach(btn=>btn.parentNode.remove()),document.querySelectorAll('[href="#login"]').forEach(btn=>btn.parentNode.remove()),document.querySelectorAll('[href="#profile:edit"]').forEach(btn=>"click",()=>var i=tma__getProfileObjFromLS(),e=tma__profile__getFormEditProfileHtml(i);tma__drawPopup("edit-profile",main:document.getElementById("app"),content:tma__translate(e,"userbar_dict"),closeBtns:[".tlk-popup__close-cancel"]>),tma__profile__addUploadEvents();var p=document.getElementById("edit-profile"),l=document.getElementById("form-change-profile"),e=l.querySelector(".tlk-popup__change-password"),t=l.querySelector(".tlk-popup__change-lang"),o=l.querySelector('button[type="submit"]'),s=!1;i.memberlogo_uuid&&(tildaMembers.upload.id=i.memberlogo_uuid,tildaMembers.upload.oldId=i.memberlogo_uuid),l.addEventListener("submit",(function(e)0<(e=tma__validationFormFields(l)).length?tma__showErrorFields(l,e,"userbar_dict"):((e=tma__serializeArray(l)).projectid=i.projectid,e.token=i.token,e.tzoffset=(new Date).getTimezoneOffset(),tildaMembers.upload&&tildaMembers.upload.id&&(e.memberlogo=tildaMembers.upload.id),tildaMembers.userLang!==t.value&&(e.lang=t.value,s=!0),e=JSON.stringify(e),tma__request("/api/editprofile/",e,o,(function(e)var t;"ok"===e.status&&"object"==typeof e.data?(t=e.data,tildaMembers.upload.id="",i.name=t.name,i.login=t.login,t.memberlogo_uuid?(i.memberlogo=t.memberlogo,i.memberlogo_uuid=t.memberlogo_uuid):(i.memberlogo="",i.memberlogo_uuid=""),tma__showSuccessRequest(l,tma__translate(">","userbar_dict")),t="tilda_members_profile"+i.projectid,localStorage.setItem(t,JSON.stringify(i)),localStorage.setItem(t+"_timestamp",Math.floor(Date.now()/1e3)),s?setTimeout((function( )window.location.reload()>),1e3):tma__userbar__updateDataProfile()):tma__showErrorRequest(l,e.code,"userbar_dict","edit_profile")>)))>)),e.addEventListener("click",(function( )var e=tma__profile__getFormChangePasswordHtml();tma__drawPopup("change-password",main:document.getElementById("app"),content:tma__translate(e,"userbar_dict"),closeBtns:[".tlk-popup__close-cancel"]>);var t=document.getElementById("change-password"),l=document.getElementById("form-change-password"),o=l.querySelector('button[type="submit"]');tma__profile__addButtonShowHidePasswordEvents(l),l.addEventListener("submit",(function(e)0<(e=tma__validationFormFields(l)).length?tma__showErrorFields(l,e,"userbar_dict"):((e=tma__serializeArray(l)).projectid=i.projectid,e.token=i.token,e.tzoffset=(new Date).getTimezoneOffset(),e=JSON.stringify(e),tma__request("/api/editpassword/",e,o,(function(e)"ok"===e.status?(tma__showSuccessRequest(l,tma__translate(">","userbar_dict")),setTimeout((function( )),1e3)):tma__showErrorRequest(l,e.code,"userbar_dict","change_password")>)))>))>))>)>))>,500);document.querySelectorAll('[href="#logout"]').forEach(btn=>"click",(function(e)window.localStorage.removeItem("tilda_members_profile"+nProjectId),window.localStorage.removeItem("tilda_members_profile"+nProjectId+"_timestamp"),window.location.replace("/")>))>)>>;document.addEventListener("DOMContentLoaded",()=>document.body.addEventListener("DOMNodeInserted",waitUserbar,!1):(document.querySelectorAll('[href="#signup"]').forEach(btn=>btn.setAttribute("href","/members/signup/")),document.querySelectorAll('[href="#login"]').forEach(btn=>btn.setAttribute("href","/members/login/")),document.querySelectorAll('[href="#logout"]').forEach(btn=>btn.parentNode.remove()),document.querySelectorAll('[href="#profile:edit"]').forEach(btn=>btn.parentNode.remove()))>); script> style>.tlk-userbar, .tlk__userbar display: none !important;> style>

Как поменять текст кнопки BUY NOW

Чтобы изменить текст кнопки в поп-апе, перейдите во вкладку «Контент» блока с этой кнопкой, пролистайте в самый низ до пункта «ДОПОЛНИТЕЛЬНО», откройте его, и в поле «ТЕКСТ КНОПКИ В ПОПАПЕ» задайте необходимый текст.

  • Как добавить корзину (блок ST100)?
  • Сколько товаров можно разместить в блоке?
  • Как в блоке категории Магазин ST*** в popup привязать свою ссылку для кнопки?
  • Как создать интернет-магазин?
  • Как подключить платежную систему ЮMoney?

Этот ответ был вам полезен?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *