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

Як додати та налаштувати кнопки на веб -сайті Weebly?

0

Кнопки на веб -сайті Weebly – один із важливих елементів, які використовуються для заклику до дії. Наприклад, ви можете додати кнопку, яка просить користувачів завантажити документ PDF. Оскільки Weebly має дуже меншу кількість тем, поширеною проблемою може бути те, що вам може сподобатися вся тема, але кнопка на цій темі може мати вторгнений стиль. У такому сценарії легко замінити стиль елемента кнопки Weebly за замовчуванням власним власним CSS або стилем кнопки іншої теми. У цій статті пояснюються можливості налаштування елемента кнопки Weebly за замовчуванням.

Додавання елемента кнопки за замовчуванням

Weebly за замовчуванням пропонує елемент кнопки перетягування, який можна налаштувати на чотири різні типи. Елемент кнопки згрупований у категорії елементів "структура". За замовчуванням користувачі можуть додавати два стилі маленьких кнопок та два стилі великих кнопок.

Як додати та налаштувати кнопки на веб -сайті Weebly?

Стилі кнопок Weebly за замовчуванням

Для всіх тем, що не реагують, Weebly використовує зображення для створення кнопки, а для всіх адаптивних тем стиль кнопок контролюється у файлі “main.less". Після перетягування натисніть на кнопку у своїй області вмісту, щоб побачити такі параметри налаштування:

  • Текст кнопки – текст, що відображається на кнопці.
  • Стиль кнопки – виберіть один із чотирьох доступних стилів.
  • Положення – вирівнювання кнопки по центру, праворуч або ліворуч.
  • Посилання – додавання посилань до тексту кнопки.
  • Інтервал – налаштування верхнього та нижнього полів.

Як додати та налаштувати кнопки на веб -сайті Weebly?

Параметри елементів кнопки Weebly

Окрім елемента кнопки перетягування, Weebly також пропонує кнопку заклику до дії у шаблонах цільових сторінок.

Замініть або змініть стилі кнопок у розділі “main.less”, щоб налаштувати кнопки на своєму веб -сайті з використанням адаптивних тем.

Чуйні проти Невідповідні

Перш ніж намагатися змінити стиль своїх кнопок, перевірте, який тип теми ви зараз використовуєте. У темах Weebly використовуються три типи кнопок:

  • Кнопки CSS на чутливі теми – приклад теми Slick, Cento.
  • Кнопки CSS на невідповідні теми-приклад теми Cleancut.
  • Кнопки зображення на невідповідні теми-приклад теми Місто.

Невідповідні теми з кнопками зображення- тут елемент кнопки використовує зображення, а 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-ефект зависання для маленької кнопки
  • .ws-button: active-Ефект при натисканні на маленьку кнопку
  • .wsite-button-inner-Визначте стиль внутрішніх елементів, наприклад розмір і колір шрифту

Так само більші кнопки використовуватимуть клас .wiste-button-large.

Примітка. Якщо на вашому сайті є сторінка блогу, деякі теми можуть додати додаткову кнопку .blog класу CSS для кнопок у публікаціях блогу.

Ви можете змінити ці коди 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” одним із кодів нижче, щоб змінити стиль кнопок.

Стиль 1:

/* 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; }

Стиль 2:

/* 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; }

Стиль 3:

/* 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.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі