Как добавить боковую панель сайта на страницы Weebly и в сообщения блога?

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

Редактор Weebly, темы и боковая панель

Прежде чем мы продолжим, необходимо понять следующее:

  • Для стандартных страниц редактор сайтов Weebly показывает предварительный просмотр вашего живого контента. Благодаря этому ваша боковая панель будет видна в редакторе вместе с основным контентом. Это может вызвать некоторую перегрузку редактора из-за нехватки места. Однако на перетаскивание не повлияет добавление боковой панели на ваши страницы.
  • Вы можете добавить общую боковую панель для всего сайта или пользовательскую боковую панель для отдельных страниц в зависимости от ваших потребностей. На боковую панель страницы можно добавить любые элементы Weebly.
  • Weebly предлагает боковую панель по умолчанию для сообщений в блогах, которую вы можете включать или отключать по мере необходимости. Однако эта боковая панель не будет отображаться на ваших страницах.

Добавить боковую панель в Weebly Pages

Есть два способа добавить боковую панель на страницы Weebly:

  • Боковая панель сайта, которая появляется на всех страницах
  • Пользовательская боковая панель для разных страниц

Давайте подробно объясним оба варианта в следующих разделах. Вы можете проверить живой сайт Weebly с 8 различными типами настройки боковой панели. Если вам нравятся макеты, загрузите полную тему бесплатно и импортируйте на свой сайт, чтобы сэкономить много времени.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Добавить боковую панель сайта на страницы Weebly

Процесс включает в себя создание макета страницы с добавлением CSS в вашу тему. Если вы не знакомы, ознакомьтесь с нашей статьей о том, как редактировать исходный код в Weebly, чтобы понять основы. Когда вы являетесь редактором сайта Weebly, перейдите в раздел «Темы» и нажмите кнопку «Редактировать HTML / CSS». Вы можете найти эту кнопку в левом нижнем углу экрана. Поскольку Weebly немного скрывает эту кнопку, вы можете нажать клавиши «Control» и «+», чтобы увеличить дисплей, чтобы кнопка отображалась четко.

Изменить тему в Weebly

Изменить тему в Weebly

Это приведет вас к редактору кода Weebly, где вы увидите различные разделы. Вы можете найти все шаблоны HTML-страниц, доступные для вашей темы, в разделе «Тип заголовка». Большинство тем Weebly предлагают три типа заголовков:

  • header.html, который будет иметь изображение заголовка сверху
  • no-header.html — это шаблон для изображения без заголовка.
  • splash.html — создать полноценный шаблон страницы (мы заметили, что в некоторых темах этот шаблон отсутствует)

Просмотр типа заголовка Weebly

Просмотр типа заголовка Weebly

Что нам нужно, так это создать дубликат шаблона и включить код боковой панели в этом шаблоне. Давайте объясним здесь с шаблоном header.html, и вы можете следовать тому же процессу, если хотите добавить боковую панель к шаблону no-header.html. Нажмите на шаблон header.html и скопируйте все содержимое файла с правой панели. Теперь щелкните значок «+», отображаемый рядом с заголовком «Тип заголовка» на левой боковой панели, и выберите параметр «Новый тип заголовка».

Создать новый тип заголовка

Создать новый тип заголовка

Weebly создаст новый шаблон и переименует его в «sidebar.html» или любое другое имя, которое вам нравится. Вы можете видеть, что во вновь созданном шаблоне есть HTML-код по умолчанию и другие элементы.

Переименовать тип заголовка

Переименовать тип заголовка

Просто удалите весь контент внутри шаблона и вставьте скопированный контент из шаблона header.html. Найдите {content} в коде, который обычно появляется внутри раздела div основной оболочки, как показано ниже.

Найти контейнер содержимого

Найти контейнер содержимого

Код будет выглядеть примерно так, как показано ниже, и может меняться в зависимости от используемой вами темы. Обязательно выберите раздел div, содержащий тег {content}.

<div class="main-wrap">
  {{#sections}}
       <div class="container">{content}</div>
  {{/sections}}
</div>

Удалите указанный выше раздел и замените его приведенным ниже кодом в редакторе:

<div class="main-wrap">
 <div id="main-content" class="column">
  <div class="maincontent">{content global="false"}</div>
  <div class="sidebarcontent">{sidebarcontent:content}</div>
 </div>
</div>

В редакторе кода это должно выглядеть так:

Добавить код боковой панели сайта в шаблон

Добавить код боковой панели сайта в шаблон

Следующий шаг — добавить немного CSS, для этого перейдите в файл «main.less», доступный в разделе «Стили». Скопируйте приведенный ниже код CSS и вставьте его в нижнюю часть файла main.less. Вы можете просто вставить внизу любой существующий код в файле.

/* Sidebar Layout*/

.column {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    width: 100%;
}

.maincontent {
    width: 60%;
    float: left;
    margin: 15px 30px 20px 25px;
    padding: 15px 30px 0 25px;
    border-right: 1px rgba(96, 125, 139, 0.39) solid;
}

.sidebarcontent {
    width: 25%;
    float: left;
    margin: 30px 15px 20px 15px;
}

В редакторе это будет выглядеть так:

Добавить код в основную таблицу стилей

Добавить код в основную таблицу стилей

Вы можете увидеть предварительный просмотр в реальном времени под разделом кода или нажать кнопку предварительного просмотра, чтобы открыть свой сайт в новом всплывающем окне. Если все в порядке, нажмите кнопку «Сохранить», которая отображается в правом верхнем углу редактора кода. Если вы редактируете код впервые, Weebly предложит вам сохранить изменения как новую тему. Укажите имя для своей темы и сохраните изменения. Помните, что вы можете выбрать эту тему для другого сайта под своей учетной записью, перейдя на вкладку «Темы» в редакторе сайта при редактировании этого сайта.

Сохранить изменения темы Weebly

Сохранить изменения темы Weebly

Добавление элементов на боковую панель

Теперь, когда вы создали боковую панель для всего сайта, пришло время добавить содержимое на боковую панель. Перейдите в раздел «Страницы» и создайте новую «Стандартную страницу». Нажмите «Тип заголовка» и выберите макет страницы «sidebar.html», который вы создали. Вы увидите редактор с двумя столбцами с основным содержимым и боковой панелью. Перетащите элементы в области содержимого и боковой панели, чтобы создать свой сайт.

Перетаскивание элементов на боковой панели

Перетаскивание элементов на боковой панели

Вы можете добавить любые элементы по умолчанию и пользовательские элементы из приложений на боковую панель. Содержимое, добавленное на боковую панель, будет отображаться на всех страницах сайта с шаблоном «sidebar.html». Опубликуйте свой сайт и посмотрите на красивую боковую панель в действии.

Элементы, добавленные в боковую панель

Элементы, добавленные в боковую панель

Создание пользовательской боковой панели для разных страниц

Как правило, элементы боковой панели появляются на всех страницах сайта. Однако вы также можете отображать разные боковые панели на разных страницах. Все, что вам нужно, это добавить параметр «global=»false» в тег шаблона боковой панели, который вы добавили в шаблон страницы sidebar.html. Ниже приведен полный код, и вы можете создать дополнительный шаблон с именем custom-sidebar.html. Таким образом, вы можете использовать как шаблоны sidebar.html, так и custom-sidebar.html и выбирать тот, который вам нужен при создании ваших страниц.

<div class="main-wrap">
 <div id="main-content" class="column">
  <div class="maincontent">{content global="false"}</div>
  <div class="sidebarcontent">{sidebarcontent:content global="false"}</div>
 </div>
</div>

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

Боковая панель для сообщений блога Weebly

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

  • Войдите в свою учетную запись Weebly и отредактируйте сайт, на котором вы хотите добавить боковую панель к своим сообщениям / страницам блога.
  • Перейдите в «Настройки» и нажмите раздел «Блог».
  • Включите или отключите опцию «Боковая панель блога».

Включить или отключить боковую панель в сообщениях блога Weebly

Включить или отключить боковую панель в сообщениях блога Weebly

Помните, что на вашем сайте должна быть уже добавлена ​​страница блога, чтобы настройки блога появились. В противном случае вы не увидите раздел блога в настройках. Узнайте больше о том, как создать бесплатный блог Weebly и настроить параметры.

После того, как вы включили боковую панель, нажмите на страницу своего блога в меню навигации внутри редактора сайта. в качестве альтернативы перейдите на вкладку «Страницы» и выберите страницу своего блога. Он покажет боковую панель, куда вы можете перетаскивать элементы блога и другие разделы. Weebly предлагает специальные элементы боковой панели блога, такие как автор, архивы, категории, лента и т. д., которые вы можете добавить на боковую панель.

Боковая панель, редактируемая на странице блога

Боковая панель, редактируемая на странице блога

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

Боковая панель недоступна для редактирования в записи блога

Боковая панель недоступна для редактирования в записи блога

Заключительные замечания

Новые тенденции в дизайне хороши для того, чтобы ваш сайт оставался привлекательным на всех устройствах. Однако такие вещи, как темы без боковой панели, подходят не для всех веб-сайтов. К сожалению, Weebly заставляет всех пользователей использовать темы без боковой панели и не предлагает тему с боковой панелью для стандартных страниц. Как объяснялось выше, вы можете создать новый шаблон страницы и использовать боковую панель сайта для страниц или использовать пользовательскую боковую панель для разных страниц. Кроме того, вы также можете загрузить нашу бесплатную тему WebSense с 8 макетами боковой панели и 6 полноэкранными макетами страниц.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

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