Как добавить и настроить кнопки на сайте Weebly? »WebNots
Кнопки на сайте Weebly — один из важных элементов, используемых для призыва к действию. Например, вы можете добавить кнопку, предлагающую пользователям загрузить PDF-документ. Поскольку у Weebly очень мало тем, это обычная проблема, когда вам может понравиться вся тема, но кнопка на этой теме может иметь вторгающийся стиль. В таком сценарии легко заменить стиль элемента кнопки Weebly по умолчанию на свой собственный CSS или стиль кнопки другой темы. В этой статье объясняются возможности настройки элемента кнопки Weebly по умолчанию.
Добавление элемента кнопки по умолчанию
Weebly по умолчанию предлагает элемент кнопки перетаскивания, который можно настроить на четыре разных типа. Элемент кнопки сгруппирован в категорию элементов «структура». По умолчанию пользователи могут добавить два стиля маленьких кнопок и два стиля больших кнопок.
Стили кнопок Weebly по умолчанию
Во всех неадаптируемых темах Weebly использует изображения для создания кнопки, а во всех адаптивных темах стиль кнопок контролируется в файле «main.less».
После перетаскивания нажмите кнопку в области содержимого, чтобы увидеть следующие параметры настройки:
- Текст кнопки — текст, который будет отображаться на кнопке.
- Стиль кнопки — выберите один из четырех доступных стилей.
- Положение — выравнивание кнопки по центру, правому или левому краю.
- Ссылка — добавить ссылки в текст кнопки.
- Интервал — отрегулируйте верхнее и нижнее поля.
Параметры элемента кнопки Weebly
Помимо кнопки перетаскивания, 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
Мы заметили, что все неотзывчивые темы, использующие изображения для кнопок, имеют 9 наборов изображений (всего 18) для кнопок меньшего и большего размера, но в качестве фона кнопки используются 2 определенных изображения в CSS. Проверьте «main_style.css»И узнайте, какие изображения используются для кнопок. В приведенном ниже примере темы «Город» показано, что «button-highlight.png» и «button-highlight-large.png» используются для кнопок меньшего и большего размера соответственно.
Изображения, используемые для кнопок на не отвечающих темах
Если вам не нравятся эти кнопки, просто измените изображение на одно из доступных изображений из 9 наборов. Вы меняете «button-highlight.png» на «button-purple.png». В случае, если вам не нравится какое-либо из существующих изображений кнопок, создайте свои собственные изображения с аналогичными размерами и стилем разделения и загрузите их в разделе «Активы» раздел. Убедитесь, что вы используете имя изображения в «main_style.css» для «задний план» свойство.
Случай 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-style.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 показано в образце темы, как показано ниже:
Новая кнопка CSS в Weebly
Таким же образом можно изменить стили больших кнопок. Обязательно измените коды CSS для стилей маленьких и больших кнопок, чтобы кнопки не ломались на опубликованном сайте.
Чтобы упростить задачу для пользователей Weebly, у нас есть три стиля кнопок с использованием классов Weebly CSS. Вы можете заменить CSS в разделе «/ * Кнопки * /«Раздела»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. Но проблема в том, что вам нужно каждый раз добавлять, используя «Код для вставкиЭлемент с предопределенным стилем вместо использования «Кнопка”Элемент.
Например, вы можете добавить кнопки градиента с разными стилями, как показано ниже, добавив загруженный HTML-код внутри «Код для вставки»И CSS в основной таблице стилей («main_style.css«Для неотзывчивых тем и»main.less»Для адаптивных тем). (См. Полную демонстрацию здесь).
Загрузите код CSS / HTML для этого виджета кнопок градиента Weebly.
