Как узнать ширину и высоту элемента в шаблоне AB-Inspiration

  Автор:
  Один комментарий
  14639

Пишу серию вспомогательных статей для конкурса на «Самый эффектный дизайн блога на шаблоне AB-Inspiration» и идеи для статей так и сыпятся. Спасибо Татьяна Прозорова за вопрос. Решила ответить в виде статьи. Думаю будет полезна всем.

Итак, чтобы  создать фоновое изображение точных размеров (в том случае, если у вас например Живая форма не на всю ширину или блог не на всю ширину), то необходимо знать как минимум ширину блока, куда будет вставлено фоновое изображение.

Как узнать ширину элемента в шаблоне AB-Inspiration

Самый простой способ, это посмотреть какую ширину вы задали в настройках шаблона и премиум плагинов «Живая форма+слайдер» и «Входная страница».

Например, вы хотите узнать ширину блока с формой подписки под шапкой. Для этого:

  1. зайдите в настройки формы
  2. Во вкладке «Ширина/Высота/Отступы» посмотрите какую ширину вы задали для формы. Это и будет ширина блока.

Если ширина задана на 100% — это значит блок с формой будет на ширину блога. Узнать ширину блога можно так:

  1. Зайдите в «Внешний вид» — Настройки шаблона — Стиль блога
  2. Посмотрите, какую ширину вы выбрали, такая ширина и будет у формы (если форма 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 до границ

Как узнать ширину элемента в браузере

Еще один способ определить ширину элемента это посмотреть в коде в браузере. Для этого:

  1. Откройте страницу, на которой вы хотите узнать ширину элемента в браузере хром
  2. Наведите мышку на элемент и нажмите правой кнопкой мыши
  3. Выберите из списка «Просмотреть код»
  4. В коде внизу наводите мышку на строки кода пока не увидите, что желаемый элемент выделился и сверху появилась желтая подсказка с размерами элемента.

Подробнее в видео здесь:

Если есть вопросы, не стесняйтесь, пишите здесь в комментариях.

P.S. Данный материал написан в рамках конкурса «Самый эффектный дизайн блога на шаблоне AB-Ispiration». Больше о конкурсе можно узнать здесь:Конкурс на самый эффектный дизайн блога на шаблоне AB-Inspiration

 


Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget

 

Как узнать ширину и высоту элемента в шаблоне AB-Inspiration

   4 голоса
Средняя оценка: 5 из 5
Если Вам понравилась статья и Вы нашли её полезной, поделитесь ею в соцсетях! Нажмите на кнопки ниже, чтобы сделать это прямо сейчас.

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Оставьте свой комментарий:

Комментарии на Блог
Один комментарий
  1. Огромное благодарю, Анфиса, за подробный видео ответ *THUMBS UP* *ROSE*
    Надеюсь я успею еще преобразовать свои сайты до 15-го!

Ваш адрес email не будет опубликован. Обязательные поля помечены *