
Пишу серию вспомагательных статей для конкурса на “Самый эффектный дизайн блога на шаблоне AB-Inspiration” и идеи для статей так и сыпятся. Спасибо Татьяна Прозорова за вопрос. Решила ответить в виде статьи. Думаю будет полезна всем.
Итак, чтобы создать фоновое изображение точных размеров (в том случае, если у вас например Живая форма не на всю ширину или блог не на всю ширину), то необходимо знать как минимум ширину блока, куда будет вставлено фоновое изображение.
Как узнать ширину элемента в шаблоне -конструкторе AB-Inspiration
Самый простой способ, это посмотреть какую ширину вы задали в настройках шаблона и премиум плагинов “Живая форма+слайдер” и “Входная страница“.
Например вы хотите узнать ширину блока с формой подписки под шапкой. Для этого:
- зайдите в настройки формы
- Во вкладке “Ширина/Высота/Отступы” посмотрите какую ширину вы задали для формы. Это и будет ширина блока.
Если ширина задана на 100% – это значит блок с формой будет на ширину блога. Узнать ширину блога можно так:
- Зайдите в “Внешний вид” – Настройки шаблона – Стиль блога
- Посмотрите, какую ширину вы выбрали, такая ширина и будет у формы (если форма 100%)
Я записала отдельное видео про работу с шириной в шаблоне AB-Inspiration. Это поможет лучше понять как настраивается ширина блога, шапки, основного меню, контента, футера, живой формы и входной страницы.
Кратко перечислю ширину разных элементов в шаблоне AB-Inspiration
Блог – 100%, 1140px, 1100px
Шапка, Основное меню, Контент, Футер – 100%, 1100px, 1060px
Живая форма, Входная страница – 100%, 1100px, 1060px
Статьи – 642px (контент) + 25px отсутпы с каждой стороны = 692px – до границ
Форма в виджете – 348px, изображение в форме в виджете 275px
Виджеты – 300px (контент) + 25px отступы с каждой стороны = 350px до границ
Страница на всю ширину – 980px (контент) + 40px отступы с каждой стороны = 1060px до границ
Как узнать ширину элемента в браузере
Еще один способ определить ширину элемента это посмотреть в коде в браузере. Для этого:
- Откройте страницу, на которой вы хотите узнать ширину элемента в браузере хром
- Наведите мышку на элемент и нажмите правой кнопкой мыши
- Выберите из списка “Просмотреть код”
- В коде внизу наводите мышку на строки кода пока не увидите, что желаемый элемент выделился и сверху появилась желтая подсказка с размерами элемента.
Подробнее в видео здесь:
https://youtu.be/wHxsErKosCw
Если есть вопросы, не стесняйтесь, пишите здесь в комментариях.
P.S. Данный материал написан в рамках конкурса “Самый эффектный дизайн блога на шаблоне AB-Ispiration”. Больше о конкурсе можно узнать здесь:Конкурс на самый эффектный дизайн блога на шаблоне AB-Inspiration
Средняя оценка: 5 из 5
Огромное благодарю, Анфиса, за подробный видео ответ

Надеюсь я успею еще преобразовать свои сайты до 15-го!