Домашняя страница
- 16 июня 2023 г. Сегодня большая часть интернет-серфинга осуществляется на портативных устройствах, таких как смартфоны и планшеты. Это означает, что вам важно знать, как использовать Beaver Builder, чтобы сделать WordPress адаптивным.
Адаптивный веб-сайт — это веб-сайт, который адаптируется к размеру устройства, на котором он просматривается, поэтому ваш веб-сайт будет отлично выглядеть и им будет легко пользоваться на любом устройстве, независимо от того, насколько оно маленькое или большое.
Beaver Builder может помочь вам сделать WordPress адаптивным благодаря своим адаптивным инструментам редактирования. Конструктор страниц дает вам полный контроль над тем, как будет выглядеть ваш сайт, независимо от того, какое устройство используют посетители.
В этой статье мы обсудим важность адаптивных веб-сайтов. Затем мы покажем вам, как с помощью Beaver Builder сделать WordPress адаптивным за четыре шага. Давайте займемся этим!
Оглавление:
Концепция адаптивного веб-сайта проста. Это сайт, который должен выглядеть и функционировать безупречно (или максимально близко) на широком спектре устройств, включая мобильные.
Чем меньше экран, тем сложнее становится создать дизайн, в котором легко ориентироваться и который хорошо выглядит:
Как мы упоминали ранее, большинство пользователей просматривают веб-сайты преимущественно через мобильные устройства. Это означает, что если веб-сайт не работает должным образом на маленьком экране или обеспечивает плохой пользовательский опыт, он не будет популярным. Другими словами, вы получите меньше трафика, более высокий показатель отказов и меньше конверсий.
Современные адаптивные страницы во многом полагаются на то, что мы называем «точками останова». Вы можете настроить элементы на странице, чтобы изменить их стиль и функциональность в зависимости от разрешения, в котором они просматриваются, и установить несколько точек останова. Это позволяет создавать конструкции, подходящие для большего количества типов устройств.
Выполнение этого вручную требует от вас навыков веб-дизайна и разработки. Хорошей новостью является то, что Beaver Builder включает в себя адаптивный режим редактора, который значительно упрощает этот процесс.
Одна из лучших особенностей использования Beaver Builder для создания сайтов WordPress заключается в том, что включенные шаблоны достаточно отзывчивы и не требуют выполнения большой дополнительной работы. Тем не менее, мы по-прежнему рекомендуем вам протестировать каждый дизайн и модуль, чтобы увидеть, как они выглядят на разных устройствах, прежде чем публиковать ваш файл .
В следующих разделах мы покажем вам, как проверить адаптивность проектов Beaver Builder. Во-первых, давайте поговорим об адаптивных макетах.
Самый простой способ сделать WordPress адаптивным с помощью Beaver Builder — использовать один из наших предустановленных макетов. Beaver Builder поставляется с множеством шаблонов страниц, которые вы можете использовать на своем веб-сайте. Сюда входят параметры для целевых страниц , страниц контента и микространиц :
Эти макеты полностью настраиваются, и у вас есть варианты практически для каждого типа страниц. Вы можете использовать шаблон, похожий на тот тип дизайна, который вы хотите использовать. Затем вы сможете настроить макет, настроив модули, переупорядочив их или добавив на страницу новые элементы.
Основное преимущество использования шаблонов Beaver Builder заключается в том, что они полностью адаптивны. Это означает, что они настроены так, чтобы отлично выглядеть на всех типах устройств и разрешениях экрана.
В любом случае никогда не следует публиковать страницу, прежде чем самостоятельно проверить ее отзывчивость. Beaver Builder позволяет вам сделать это с помощью адаптивного инструмента редактирования.
Когда вы используете Beaver Builder, вы можете точно видеть, как страница будет выглядеть во внешнем интерфейсе во время ее редактирования. Однако по умолчанию редактор Beaver Builder показывает только то, как будут выглядеть страницы в полноэкранном режиме с значительным разрешением:
Если вы хотите увидеть, как макет будет выглядеть на экранах разного размера, вам нужно будет использовать адаптивный режим редактирования Beaver Builder. Вы можете получить доступ к этому режиму из меню «Инструменты» в верхнем левом углу экрана или нажав клавишу R.
Открыв режим адаптивного редактирования, вы сможете увидеть четыре уникальные точки останова для разрабатываемого вами макета. Каждая точка останова имеет предустановленное разрешение. Например, малая точка останова по умолчанию срабатывает для экранов с разрешением ниже 360 x 1131:
Вы можете изменить точки останова для разных макетов, которые хотите создать. Редактор Beaver Builder работает одинаково независимо от того, с каким разрешением вы работаете. Единственная разница в том, что сам макет изменится, поскольку вы работаете с меньшим пространством.
Beaver Builder включает четыре точки останова, поэтому у вас есть больший контроль над тем, как ваши страницы будут выглядеть на устройствах любого размера.
Каждая точка останова может выглядеть по-разному в зависимости от выбранного вами дизайна. Чтобы увидеть, как это работает, давайте посмотрим, как можно сделать отдельные элементы адаптивными с помощью Beaver Builder.
Как мы уже говорили, основной способ, с помощью которого Beaver Builder позволяет сделать WordPress адаптивным, — это использование набора точек останова. Каждая точка останова представляет, как будет выглядеть страница в зависимости от разрешения, которое вы используете для ее просмотра.
Помимо точек останова, Beaver Builder также позволяет вам изменять порядок или «наложение» элементов и столбцов в разных разрешениях. В предыдущем примере мы показали вам страницу «О нас» , на которой в середине экрана есть фотография сотрудника. Если мы настраиваем макет этой страницы для меньшего разрешения, мы можем переместить это изображение вверх, чтобы порядок расположения столбцов на мобильных устройствах был противоположным:
Порядок наложения одной точки останова не влияет на другие. Это означает, что одна и та же страница может выглядеть совершенно по-разному, как с точки зрения дизайна, так и с точки зрения функциональности для посетителей с разными разрешениями.
На практике это не лучшая идея. Ваш сайт должен выглядеть единым на всех устройствах. Однако вы можете изменить расположение элементов, если считаете, что это улучшит мобильность. Например, вы можете выбрать отображение призывов к действию раньше в меньшем разрешении, чтобы пользователям не приходилось прокручивать страницу вниз, чтобы совершить действие.
Если вы посмотрите на экран настроек отдельных столбцов или модулей, вы также сможете настроить их видимость. Настройки видимости позволяют опускать элементы из определенных точек останова, что может быть полезно при работе с меньшими разрешениями:
Кроме того, вы можете настроить элементы для отображения для всех или для вошедших или вышедших пользователей. Однако эти функции видимости предназначены для членских веб-сайтов, поэтому вы, вероятно, можете игнорировать их, когда дело доходит до того, чтобы сделать ваш дизайн более отзывчивым.
При использовании адаптивного редактирования вы можете заметить одну вещь: размеры и стили текста не меняются между точками останова. Это может быть правильным выбором дизайна, поскольку большой текст легче читать на небольших устройствах. Однако если вы хотите настроить внешний вид текста в разных разрешениях, вы можете сделать это в строках, столбцах или модулях Beaver Builder. Кроме того, если у вас установлена тема Beaver Builder, вы можете настроить стили текста в настройщике.
Для последнего перейдите в «Внешний вид» > «Настройка» на панели управления WordPress, затем перейдите на вкладку «Пресеты». Отсюда вы можете настроить параметры как заголовков, так и общего текста.
Для начала перейдите в «Основные» > «Заголовки» и выберите параметр «Все заголовки» . Меню ниже позволяет вам настроить семейство шрифтов, толщину и формат, которые вы хотите использовать для заголовков от H1 до H6:
Если вы посмотрите на нижнюю левую часть экрана, вы увидите, что можете переключить конфигурацию с настольного компьютера на планшеты и мобильные устройства. Это означает, что вы можете установить разные стили текста заголовка для всех трех точек останова.
Чтобы изменить стиль общего текста, вернитесь в меню «Общие» и перейдите на экран «Текст» . Здесь вы можете настроить семейство шрифтов, толщину, размер и высоту строки для общего текста:
Как и в случае с заголовками, вы можете настроить стили текста для больших экранов, планшетов и мобильных устройств. Настройки, которые вы примените здесь, появятся в редакторе Beaver Builder, когда вы используете адаптивный режим. Обязательно проверяйте любые изменения, вносимые в стили текста, чтобы увидеть, как они влияют на читаемость, и продолжайте их настраивать, пока не будете довольны результатами.
Есть много способов сделать современные веб-сайты адаптивными. Если вы используете WordPress и Beaver Builder, процесс намного проще. Большинство проектов Beaver Builder готовы к адаптации. Более того, вы получаете доступ к инструментам, которые дают вам полный контроль над тем, как ваш сайт будет выглядеть в разных разрешениях. Это означает, что вы ничего не оставляете на волю случая, когда дело касается взаимодействия с мобильными пользователями.
Если вы новичок в Beaver Builder, возможно, вы не знаете, как использовать его для создания адаптивных веб-сайтов WordPress:
Будет ли ваш сайт WordPress адаптивным или нет, во многом будет зависеть от того, какую тему вы выберете. Без темы WordPress — это, по сути, чистый лист. Это означает, что вам нужно убедиться, что вы выбрали тему, которая является одновременно адаптивной и легко настраиваемой.
Если ваш веб-сайт WordPress не очень хорошо выглядит на мобильных устройствах, возможно, вы не используете адаптивную тему. Использование темы с адаптивным дизайном должно обеспечить гораздо лучший опыт для пользователей и потребует меньше настроек с вашей стороны. Вы также можете использовать конструкторы страниц, такие как Beaver Builder, чтобы сделать WordPress адаптивным.
Beaver Builder предлагает множество инструментов и функций, которые делают его удобным для мобильных устройств конструктором страниц WordPress. Вы можете использовать адаптивное редактирование, чтобы изменить внешний вид ваших страниц в разных разрешениях. Конструктор страниц также поставляется с полностью адаптивными шаблонами страниц, которые можно использовать для запуска дизайна.
Наш информационный бюллетень пишется лично и рассылается примерно раз в месяц. Это ни в малейшей степени не раздражает и не является спамом.
Мы обещаем.
