Перейти к содержимому

Как изменить размер кнопки в тильде

  • автор:

Как изменить размер кнопки «Читать далее» на сайте.

5a0d7248258b2074951718.jpeg

Помогите найти настройки кнопки «Читать далее», как изменить цвет, размер, месторасположение и т.п.
khartsyzsk.ugletele.com
на что обращать внимание? где записан код ответственный за внешний вид?
Она даже не выделяется вся полностью, где ее найти?

  • Вопрос задан более трёх лет назад
  • 3152 просмотра

Комментировать
Решения вопроса 2

myagkikh_evgeniy

Евгений Мягких @myagkikh_evgeniy

.btn,
.Button,
.colour-preview .button,
input[type=»submit»],
button[type=»submit»],
#commentform #submit,
.wpsc_buy_button background: #4F2D69;
border: none;
color: #ffffff;
border-radius: 3px;
font-family: Lato, sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 34px;
padding: 5px 25px;
>

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Rimush

файл style.css

.btn, .Button, .colour-preview .button, input[type="submit"], button[type="submit"], #commentform #submit, .wpsc_buy_button

Стиль привязан к span. Но учтите что на этом стиле много всего висит.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 1

Young_khv

ASP.NET Developer

Ну это span с классом btn, ищите стили с вхождением этого слова, за размер там отвечают padding, line-height и font-size

Как изменить размер кнопки в тильде

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

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

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

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

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

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

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

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

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

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

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

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

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; Переключить режим кривой

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

Лендинг на Tilda: как добавить кнопку?

13.05.2020

Сложность: новичок

6 мин.

10 079

Как добавить кнопку на Тильде

CTA (от англ. call-to-action, призыв к действию) — один из самых важных компонентов любого сайта. Простой конструктор Tilda не требует знаний верстки, чтобы добавить недостающий элемент. Давайте разберемся, как можно добавить кнопку на ваш сайт, собранный на Тильде.

Как добавить кнопку в существующий блок

Если вы хотите добавить призыв к действию в уже существующем блоке, зайдите в настройки контента. В информационно-текстовом блоке у вас появятся поля с вариантами контента, который вы можете добавить. Выбираем вкладку “кнопка” и переходим к ее редактированию. Здесь можно добавить название кнопки, ссылку и возможность ее открытия в новой вкладке.

Добавление в существующий блок

Рис.1. Редактирование кнопки в настройках контента

После основных настроек кнопки, можно перейти к визуальному оформлению. Для этого заходим в “Настройки” (верхний левый угол блока) и приступаем к редактированию.

*Для того, чтоб кнопка была по центру блока в настройке “Выравнивание заголовочной секции блока” выберете “По центру”.

Вкладка редактирования кнопки в Настройках

Рис.2. Вкладка редактирования кнопки в “Настройках”

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

Как добавить кнопку отдельным блоком

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

Добавление кнопки в новом блоке

Рис.3. Добавление кнопки в новом блоке

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

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

Здесь можно отредактировать кнопку

Рис.4. Здесь можно отредактировать кнопку

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

Остались вопросы по работе с конструктором Тильда?

Не нашли ответ на интересующий Вас вопрос? Или у вас возникла другая проблема, в работе с Tilda? Задавайте вопросы, которые Вас интересуют в комментариях, на них оперативно ответит специалист отдела разработки Convert Monster.

ВЕра Здравствуйте ! Обращаюсь к вам по такому вопросу. я сделала самостоятельную кнопку под формой, (так как не смогла в форме расположить ее по середине) и теперь не знаю куда будут отправляться заявки и впринципе как сделать ее рабочей?

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

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