Наші надійні партнери дизайн студія «Движок» ділиться досвідом, як додати плаваючий малюнок або кнопку на сайт. Дане рішення було виконано на сайті який студія створила зовсім недавно. Сподіваємося це рішення буде кому то корисним.
У прикладі - ми розмістили плаваючу картинку справа сайту в шаблоні WordPress
Тож почнемо:
1. У стилі шаблону розміщуємо стиль кнопки:
add_palitra display: block;
width: 80px;
height: 150px;
position: fixed;
right: 0;
top: 200px;
z-index: 99999;
>
де:
width: 80px; - ширина картинки.
height: 150px; - висота картинки.
right: 0; - відступ справа, якщо ви поміняєте дану рядок на left: 0; - то кнопка буде розташовуватися зліва, також можна вказати відступ в пікселях, наприклад: left: 20px;
top: 200px; - верхній відступ.
z-index: 99999; - задає розташування елемента поверх всіх інших, наприклад у картинки шапки в темі Twenty Eleven даний параметр має значення 9999 і якщо ваша кнопка буде мати значення нижче даного параметра, то вона буде розташовуватися під нею.
У ньому відразу після тега body вставляємо висновок нашої кнопки:
Як бачите це код звичайного посилання, тільки для неї заданий особливий клас -
class = "add_palitra". стиль оформлення якого ми прописали в пункті 1 цієї статті.