Пропустить

Как изменить сторону боковой панели на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

Недавно один из наших читателей спросил нас, как изменить боковую панель темы WordPress?

Обычно мы получаем этот вопрос от пользователей, которые хотят изменить расположение своей боковой панели слева направо или справа налево.

В этом уроке мы покажем вам, как изменить расположение боковой панели в WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

Тогда вернемся к тому, почему мы здесь.

Зачем менять расположение боковой панели на WordPress?

Эксперты по юзабилити считают, что люди сканируют страницы слева направо. Они рекомендуют размещать важный контент слева, чтобы пользователи сначала видели этот контент. Тем не менее, это может быть отменено, если ваш сайт на языке RTL (прямо слева).

Узнайте, если должен ли ваш блог на WordPress иметь боковые панели

Многие веб-сайты на WordPress используют типичный макет блогов с двумя столбцами. Один для контента, а другой столбец для боковой панели.

типичное содержание демо боковой панели WordPress

Если вы новичок на веб-сайтах, вам следует выбрать тему WordPress, которая имеет боковую панель в выбранном вами месте.

Многие темы WordPress предлагают варианты изменения боковой панели в настройках последней. Однако, если ваша тема WordPress не имеет этой опции, вам нужно будет изменить стороны боковой панели вручную. Идите дальше, открывая для себя как убрать боковую панель на WordPress

Тем не менее, давайте взглянем на метод, который вам нужно использовать, чтобы легко изменить боковую панель WordPress с помощью CSS.

Изменение боковой панели с помощью CSS

Прежде чем вносить какие-либо изменения в вашу тему WordPress, вы должны сначала рассмотреть создание детской темы, Используя дочернюю тему, вы сможете обновить родительскую тему, не теряя своих изменений.

Откройте для себя Как отобразить другую боковую панель для каждого элемента на WordPress

Во-вторых, вы всегда должны создавать резервную копию своего веб-сайта WordPress, когда вы вносите изменения в активную тему в реальном времени.

Вам понадобится FTP-клиент для редактирования файлов темы WordPress. Проверьте руководство о том, как использовать FTP.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Войдите на свой сайт WordPress с помощью FTP-клиента и перейдите в папку тем. Обычно он расположен по адресу:

 / YourSite / WP-содержание / темы / ваш-тематический каталог / 

Теперь вам нужно скачать и открыть основной файл таблицы стилей вашей темы WordPress в текстовом редакторе, таком как Блокнот. Этот файл называется style.cssи он находится в корневом каталоге вашей темы WordPress.

Откройте для себя как управлять файлами и папками WordPress

В этом файле найдите класс CSS вашей боковой панели. Вообще этот класс есть боковая панель ». В этом примере мы используем тему WordPress по умолчанию " двадцать пятнадцать У кого есть этот класс для боковой панели:

.sidebar {float: left; margin-right: -100%; максимальная ширина: 413px; положение: относительное; ширина: 29.4118%; }

Как вы можете видеть, боковая панель плавает влево с полем -100%. Мы изменим поплавок справа:

.sidebar {float: right; поле слева: -100%; максимальная ширина: 413px; положение: относительное; ширина: 29.4118%; }

Сохраните изменения и загрузите файл style.css на свой веб-сайт с помощью FTP-клиента. Теперь, если вы посетите свой сайт, он будет выглядеть так:

демо-сайт изменить врезку

Действительно, мы переместили боковую панель, но мы не переместили область содержимого. " Двадцать Пятнадцать Использует этот CSS для определения положения области содержимого.

.site-content {display: block; плавать: слева; поле слева: 29.4118%; ширина: 70.5882%; }

Мы изменим его, чтобы переместить контент вправо. Следующим образом:

.site-content {display: block; плавать: слева; поле справа: 29.4118%; ширина: 70.5882%; }

Вот как будет выглядеть ваш сайт после применения этого CSS-кода.

новая презентация перенесена на боковую панель сайта

Как видите, мы изменили расположение области содержимого и боковой панели. Тем не менее, слева все еще есть белый блок.

Идите дальше, открывая для себя как управлять файлами и папками WordPress

Вы часто будете сталкиваться с этими ошибками при работе с CSS. Требуется некоторая детективная работа, чтобы понять, что вызывает это и как это исправить.

Используйте инструмент «Инспектор» в вашем браузере для просмотра исходного кода. Наведите курсор мыши на уязвимую область в браузере, щелкните правой кнопкой мыши и выберите «Инспектор» в меню браузера.

инспектировать инструмент браузера

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

Откройте для себя 5 WordPress плагины для визуального редактирования CSS в вашем блоге

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

Поэтому CSS, соответствующий выделенному элементу, должен быть перенастроен.

@media screen and (min-width: 59.6875em) {body: before {background-color: #fff; тень блока: 0 0 1px rgba (0, 0, 0, 0.15); содержание: ""; дисплей: блок; высота: 100%; минимальная высота: 100%; положение: фиксированное; верх: 0; слева: 0; ширина: 29.4118%; z-индекс: 0; / * Исправлена ​​ошибка с прокруткой в ​​Safari * /}

Этот код CSS добавляет пустой блок с шириной 29,4118% и шириной 100% в верхнем левом углу. Вот как мы собираемся переместить это вправо.

@media screen and (min-width: 59.6875em) {body: before {background-color: #fff; тень блока: 0 0 1px rgba (0, 0, 0, 0.15); содержание: ""; дисплей: блок; высота: 100%; минимальная высота: 100%; положение: фиксированное; верх: 0; справа: 0; ширина: 29.4118%; z-индекс: 0; / * Исправлена ​​ошибка с прокруткой в ​​Safari * /}

После сохранения и загрузки таблицы стилей на сервер ваш сайт будет выглядеть так.

Новый веб-сайт взгляд боковая панель справа

Работа с CSS может сбивать с толку новичков. Если вы не хотите делать всю ручную работу, то вы можете попробовать Плагин WordPress CSS Hero, Он позволяет редактировать CSS без написания кода и работает с любой темой WordPress.

Откройте для себя также несколько премиальных плагинов WordPress

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Zxeion

Zxeion - это мощный плагин для WordPress, который повышает безопасность вашего сайта. Этот плагин содержит набор инструментов защиты и безопасности, которые защитят ваш сайт от возможных атак.

Его система защиты в режиме реального времени поможет вам определить угрозы для вашего сайта и заблокировать их, без необходимости что-либо делать. Его функции: защита в режиме реального времени, отличная поддержка клиентов, регулярные обновления, блокировка IP-адресов, отличная документация, современный и профессиональный интерфейс, специализированная поддержка и многое другое

скачать | Демонстрация | веб-хостинг

2. WordPress WooCommerce плагин для push-уведомлений

Этот плагин WordPress от WooCommerce позволяет администратору отправлять push-уведомления своим подписанным пользователям. Push-уведомления в Интернете - это интерактивные сообщения, отправляемые веб-сайтом браузерам их подписчиков.

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

Push-уведомления в Интернете - это важный канал для электронной коммерции, поскольку он дает веб-сайтам возможность мгновенно общаться со своими подписчиками, в том числе на любом устройстве, будь то настольное, мобильное или планшет.

скачать | Демонстрация | веб-хостинг

3. Форма обратной связи

Форма обратной связи - это отзывчивый плагин WordPress и простой, но богатый инструмент настройки, который отображает понятную и обнадеживающую форму, где ваши посетители могут связаться с вами со своим сообщением.

Вы сможете определить необходимые поля, выбрать лучший макет полей и полностью настроить его, чтобы ваши клиенты или посетители оставляли свои предложения или сообщения.

Просто установите адрес электронной почты, на который вы хотите получать сообщения, и используйте его, чтобы развивать свой бизнес в наиболее выгодном направлении.

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Откройте для себя другие рекомендуемые ресурсы, которые будут сопровождать вас при создании и управлении вашим сайтом.

Вывод

Вуаля! Вот именно для этого урока. Мы надеемся, что это поможет вам изменить боковую панель вашего блога на WordPress. Не стесняйтесь поделитесь этой статьей с друзьями в ваших любимых социальных сетях.

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Если у вас есть предложения или замечания, оставьте их в нашем разделе Комментарии.

...

Эта статья содержит 1 комментарий
  1. [...] В этом уроке вы научитесь изменять расположение на боковой панели вашей темы WordPress. [...]

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

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
1 акции
доля
чирикать
Регистрация1