Пишу серію допоміжних статей для конкурсу на «Найефектніший дизайн блога на шаблоні AB-Inspiration» і ідеї для статей так і сипляться. Дякую Тетяна Прозорова за питання. Вирішила відповісти у вигляді статті. Думаю буде корисна всім.
Отже, щоб створити фонове зображення точних розмірів (в тому випадку, якщо у вас наприклад Жива форма не на всю ширину або блог не на всю ширину), то необхідно знати як мінімум ширину блоку, куди буде вставлено фонове зображення.
Як дізнатися ширину елемента в шаблоні AB-Inspiration
Найпростіший спосіб, це подивитися яку ширину ви задали в налаштуваннях шаблону і плагінів Жива форма і Вхідна сторінка.
Наприклад ви хочете дізнатися ширину блоку з формою підписки під шапкою. Для цього:
- зайдіть в налаштування форми
- У вкладці «Ширина / Висота / Відступи» подивіться яку ширину ви задали для форми. Це і буде ширина блоку.
Якщо ширина задана на 100% - це означає блок з формою буде на ширину блогу. Дізнатися ширину блогу можна так:
- Зайдіть в «Зовнішній вигляд» - Налаштування шаблону - Стиль блогу
- Подивіться, яку ширину ви вибрали, така ширина і буде у форми (якщо форма 100%)
Коротко перерахую ширину різних елементів в шаблоні AB-Inspiration
Блог - 100%, 1140px, 1100px
Шапка, Основне меню потрібні нові обличчя! Футер - 100%, 1100px, 1060px
Жива форма, Вхідна сторінка - 100%, 1100px, 1060px
Статті - 642px (контент) + 25px отсутпи з кожного боку = 692px - до кордонів
Форма в віджеті - 348px, зображення в формі в віджеті 275px
Віджети - 300px (контент) + 25px відступи з кожного боку = 350px до кордонів
Сторінка на всю ширину - 980px (контент) + 40px відступи з кожного боку = 1060px до кордонів
Як дізнатися ширину елемента в браузері
Ще один спосіб визначити ширину елемента це подивитися в коді в браузері. Для цього:
P.S. Даний матеріал написаний в рамках конкурсу «Найефектніший дизайн блога на шаблоні AB-Ispiration». Більше про конкурс можна дізнатися тут: Конкурс на найефектніший дизайн блога на шаблоні AB-Inspiration
Як дізнатися ширину і висоту елемента в шаблоні AB-Inspiration
3 голоси
Середня оцінка: 5 з 5