TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как добавить и настроить кнопки на сайте Weebly?

33

Кнопки на сайте Weebly – один из важных элементов, используемых для призыва к действию. Например, вы можете добавить кнопку, предлагающую пользователям загрузить PDF-документ. Поскольку у Weebly очень мало тем, это обычная проблема, когда вам может понравиться вся тема, но кнопка в этой теме может иметь второстепенный стиль. В таком сценарии легко заменить стиль элемента кнопки Weebly по умолчанию на свой собственный CSS или стиль кнопки другой темы. В этой статье объясняются возможности настройки элемента кнопки Weebly по умолчанию.

Добавление элемента кнопки по умолчанию

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

Как добавить и настроить кнопки на сайте Weebly?

Стили кнопок Weebly по умолчанию

Во всех неадаптивных темах Weebly использует изображения для создания кнопок, а во всех адаптивных темах стиль кнопок контролируется в файле «main.less». После перетаскивания нажмите кнопку в области содержимого, чтобы увидеть следующие параметры настройки:

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

Как добавить и настроить кнопки на сайте Weebly?

Параметры элемента Weebly Button

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

Замените или измените стили кнопок в разделе «main.less», чтобы настроить кнопки на своем сайте Weebly с использованием адаптивных тем.

Отзывчивый против неотзывчивого

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

  • Кнопки CSS на адаптивных темах – пример темы Slick, Cento.
  • Кнопки CSS на неотзывчивых темах – пример темы Cleancut.
  • Графические кнопки на неадаптируемых темах – пример темы City.

Невосприимчивые темы с кнопками изображений – здесь элемент кнопки использует изображение, а CSS просто называет это изображение фоном, пример темы – Город.

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

Адаптивные темы – все последние темы, такие как Slick, Cento, Paper и т.д., Полностью адаптивны, а элемент кнопки генерируется из кода CSS.

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

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

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

  • Войдите в свою учетную запись Weebly и выберите сайт для редактирования.
  • Перейдите на вкладку «Тема» и нажмите кнопку «Редактировать HTML / CSS».
  • В разделе «Активы» вы увидите разные изображения кнопок, как показано ниже:

Как добавить и настроить кнопки на сайте Weebly?

Изображения кнопок на неадаптивных темах Weebly

Мы заметили, что все неотзывчивые темы, использующие изображения для кнопок, имеют 9 наборов изображений (всего 18) для кнопок меньшего и большего размера, но в качестве фона кнопки используются 2 определенных изображения в CSS. Проверьте «main_style.css» и узнайте, какие изображения используются для кнопок. В приведенном ниже примере темы «Город» показано, что «button-highlight.png» и «button-highlight-large.png» используются для кнопок меньшего и большего размера соответственно.

Как добавить и настроить кнопки на сайте Weebly?

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

Если вам не нравятся эти кнопки, просто измените изображение на одно из доступных изображений из 9 наборов. Вы меняете «button-highlight.png» на «button-purple.png». В случае, если вам не нравится какое-либо из существующих изображений кнопок, создайте свои собственные изображения с аналогичными размерами и стилем разделения и загрузите их в разделе «Активы». Убедитесь, что вы используете имя изображения в «main_style.css» для свойства «background».

Случай 2 – Настройка кнопок CSS для не отвечающих темам

Если вы не найдете изображений кнопок в разделе «Активы» своей неотзывчивой темы, проверьте «main_style.css», чтобы увидеть раздел «Кнопки». Ниже приведен код CSS из темы Cleancut, в котором можно настроить фон, цвета, эффект наведения и т.д. По мере необходимости.

/* Buttons --------------------------------------------------------------------------------*/ /* Small structure & regular style */ .wsite-button { background: red; background: -moz-linear-gradient(top,#444 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#444),color-stop(100%,#333)); background: -webkit-linear-gradient(top,#444 0,#333 100%); background: -o-linear-gradient(top,#444 0,#333 100%); background: -ms-linear-gradient(top,#444 0,#333 100%); background: linear-gradient(top,#444 0,#333 100%); border: 1px solid #000; box-shadow:inset 0 0 15px rgba(0,0,0,0.25); -moz-border-radius: 3px; border-radius: 3px; color: white !important; font-size: 13px; font-weight: 700; padding: 3px 25px; text-align: center; text-decoration: none !important; text-shadow: 0px -1px 1px rgba(0,0,0,0.7); } .wsite-button:hover { background-position:0 0; box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button:active { background-position:0 0; } .wsite-button-inner { color: #fff !important; padding:0; background: none; } .wsite-button:hover .wsite-button-inner { background:none; } .wsite-button:active { padding:4px 25px 2px; } /* Large structure & regular style */ .wsite-button-large .wsite-button-inner { font-size:14px; padding:0; } .wsite-button-large .wsite-button-inner { background: none; } /* Highlighted styles */ .wsite-button-highlight, .wsite-button-large.wsite-button-highlight { background: #0370EA; background: -moz-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#0370EA),color-stop(100%,#0370EA)); background: -webkit-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -o-linear-gradient(top,#0370EA 0,#0370EA 100%); background: -ms-linear-gradient(top,#0370EA 0,#0370EA 100%); background: linear-gradient(top,#0370EA 0,#0370EA 100%); border: 1px solid #0052ad; box-shadow:inset 0 0 18px rgba(0,0,0,0.02); } .wsite-button-highlight:hover, .wsite-button-large.wsite-button-highlight:hover { box-shadow:0 1px 4px rgba(0,0,0,0.3); } .wsite-button-highlight .wsite-button-inner { background-image: none; } .wsite-button-large.wsite-button-highlight .wsite-button-inner { background-image: none; }

Теперь вернитесь в редактор и перетащите элемент кнопки в область содержимого. Вы можете видеть, что кнопка будет в новом стиле, как вы определили в «main.less».

Случай 3 – Настройка кнопок Weebly для адаптивных тем

Все последние темы Weebly адаптивны и используют только коды CSS для создания кнопок. Как объяснялось выше, соответствующие стили кнопок CSS определены в файле «main.less» в разделе «/ Buttons /». Если ваша тема использует функцию @import в CSS, проверьте соответствующий файл кнопки для CSS. Здесь вам нужно заменить эти коды своим собственным кодом кнопки CSS, чтобы изменить стиль кнопки по умолчанию.

Ниже приведены определения стилей CSS для кнопки Weebly:

  • .wsite-button – Маленькая кнопка
  • .wsite-button: hover – эффект зависания для маленькой кнопки
  • .wsite-button: active – Эффект при нажатии на маленькую кнопку
  • .wsite-button-inner – определяет стиль внутренних элементов, например размер и цвет шрифта.

Аналогично более крупная кнопка будет использовать класс CSS .wiste-button-large.

Примечание. Если на ваш сайт добавлена ​​страница блога, некоторые темы могут добавлять дополнительный класс CSS .blog-button для кнопок в сообщениях блога.

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

.wsite-button { border-top: 1px solid #96d1f8; background: #6594d6; background: -webkit-gradient(linear, left top, left bottom, from(#7a3e9c), to(#6594d6)); background: -webkit-linear-gradient(top, #7a3e9c, #6594d6); background: -moz-linear-gradient(top, #7a3e9c, #6594d6); background: -ms-linear-gradient(top, #7a3e9c, #6594d6); background: -o-linear-gradient(top, #7a3e9c, #6594d6); padding: 14.5px 29px; -webkit-border-radius: 39px; -moz-border-radius: 39px; border-radius: 39px; -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; color: white; font-size: 24px; font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; } .wsite-button:hover { border-top-color: #28597a; background: #28597a; color: #ccc; } .wsite-button:active { border-top-color: #1b435e; background: #1b435e; }

Изменение элемента кнопки со старым и новым кодами CSS показано в образце темы, как показано ниже:

Как добавить и настроить кнопки на сайте Weebly?

Новая кнопка CSS в Weebly

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

Чтобы упростить задачу для пользователей Weebly, у нас есть три стиля кнопок с использованием классов Weebly CSS. Вы можете заменить CSS в разделе «/ Buttons /» вашего «main.less» одним из приведенных ниже кодов, чтобы изменить стиль кнопок.

Style1:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 8px 12px; background: #333333; color: #ffffff; border: 2px solid #333333; border-radius: 1px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Quattrocento Sans', sans-serif; font-size: 14px; font-weight: 700; line-height: normal; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { padding: 12px 16px; font-family: 'Quattrocento Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #ffffff; color: #333333; border: 2px solid #333333; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: #b9b9b9; color: #ffffff; border: 2px solid #b9b9b9; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #a1a1a1; border: 2px solid #a1a1a1; }

Style2:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { height: auto; padding: 0; background: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { height: auto; padding: 10px 16px; background: #35A89A; color: white; border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; line-height: normal; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } .wsite-button-large { background: none; } .wsite-button-large .wsite-button-inner { padding: 12px 20px; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; } .wsite-button:hover .wsite-button-inner { background: #177267; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: white; color: #35A89A; border: 2px solid #35A89A; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #35A89A; color: white; }

Style3:

/* Buttons */ .wsite-button, .wsite-editor .wsite-button { display: inline-block; height: auto; padding: 0; background: none; } .wsite-button:focus, .wsite-editor .wsite-button:focus { outline: none; } .wsite-button .wsite-button-inner, .wsite-editor .wsite-button .wsite-button-inner { display: inline-block; height: auto; padding: 8px 16px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button-large, .wsite-editor .wsite-button-large { display: inline-block; height: auto; padding: 0; background: none; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wsite-button-large .wsite-button-inner, .wsite-editor .wsite-button-large .wsite-button-inner { display: inline-block; height: auto; padding: 12px 24px; background: #a1a1a1; color: white !important; border: 2px solid #a1a1a1; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.05em; white-space: normal; font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 400; line-height: normal; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .wsite-button:hover .wsite-button-inner, .wsite-button-large:hover .wsite-button-inner { background: transparent; color: #a1a1a1 !important; } .wsite-button-highlight, .wsite-button-large.wsite-button-highlight, .wsite-editor .wsite-button-highlight, .wsite-editor .wsite-button-large.wsite-button-highlight { background: none; } .wsite-button-highlight .wsite-button-inner, .wsite-button-large.wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-highlight .wsite-button-inner, .wsite-editor .wsite-button-large.wsite-button-highlight .wsite-button-inner { background: transparent; color: #808080 !important; border: 2px solid #808080; } .wsite-button-highlight:hover .wsite-button-inner, .wsite-button-large.wsite-button-highlight:hover .wsite-button-inner { background: #808080; color: white !important; }

Добавление настраиваемых кнопок CSS с помощью элемента встроенного кода

Настройка существующего элемента – сложная задача, поскольку Weebly часто меняет код, а область действия кнопки будет ограничена существующим стилем без особого интереса. Самый простой и простой способ – добавить свои собственные кнопки CSS вместо изменения существующих кодов. Это предоставляет безграничные возможности добавления различных типов кнопок 2D и 3D CSS на ваш сайт Weebly. Но проблема в том, что вам нужно добавлять каждый раз, используя элемент «Embed Code» с предопределенным стилем вместо использования элемента «Button».

Например, вы можете добавить кнопки градиента с разными стилями, как показано ниже, добавив загруженный HTML- код в элемент «Код для вставки» и CSS в основную таблицу стилей («main_style.css» для неадаптивных тем и «main.less» для адаптивных тем. темы).

Загрузите код CSS / HTML для этого виджета кнопок градиента Weebly.

Источник записи: www.webnots.com
Leave A Reply

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