Веб-сайты без боковой панели — это последняя тенденция дизайна, которая обычно хорошо работает на мобильных устройствах. Тем не менее, боковая панель является одной из основных частей макета сайта на рабочем столе и имеет большой потенциал для преобразования ваших посетителей в клиентов. Это особенно актуально для веб-сайтов электронной коммерции, где вы можете легко продвигать товары на боковой панели. Weebly не предлагает боковую панель для блогов, но не для страниц. В этой статье мы рассмотрим пошаговый процесс добавления боковой панели сайта в Weebly для страниц и сообщений в блогах.
Редактор Weebly, темы и боковая панель
Прежде чем мы продолжим, необходимо понять следующее:
Добавить боковую панель в Weebly Pages
Есть два способа добавить боковую панель на страницы Weebly:
Давайте подробно объясним оба варианта в следующих разделах. Вы можете проверить живой сайт Weebly с 8 различными типами настройки боковой панели. Если вам нравятся макеты, загрузите полную тему бесплатно и импортируйте на свой сайт, чтобы сэкономить много времени.
Добавить боковую панель сайта на страницы Weebly
Процесс включает в себя создание макета страницы с добавлением CSS в вашу тему. Если вы не знакомы, ознакомьтесь с нашей статьей о том, как редактировать исходный код в Weebly, чтобы понять основы. Когда вы являетесь редактором сайта Weebly, перейдите в раздел «Темы» и нажмите кнопку «Редактировать HTML / CSS». Вы можете найти эту кнопку в левом нижнем углу экрана. Поскольку Weebly немного скрывает эту кнопку, вы можете нажать клавиши «Control» и «+», чтобы увеличить дисплей, чтобы кнопка отображалась четко.
Это приведет вас к редактору кода Weebly, где вы увидите различные разделы. Вы можете найти все шаблоны HTML-страниц, доступные для вашей темы, в разделе «Тип заголовка». Большинство тем Weebly предлагают три типа заголовков:
Что нам нужно, так это создать дубликат шаблона и включить код боковой панели в этом шаблоне. Давайте объясним здесь с шаблоном header.html, и вы можете следовать тому же процессу, если хотите добавить боковую панель к шаблону no-header.html. Нажмите на шаблон header.html и скопируйте все содержимое файла с правой панели. Теперь щелкните значок «+», отображаемый рядом с заголовком «Тип заголовка» на левой боковой панели, и выберите параметр «Новый тип заголовка».
Weebly создаст новый шаблон и переименует его в «sidebar.html» или любое другое имя, которое вам нравится. Вы можете видеть, что во вновь созданном шаблоне есть HTML-код по умолчанию и другие элементы.
Просто удалите весь контент внутри шаблона и вставьте скопированный контент из шаблона header.html. Найдите {content} в коде, который обычно появляется внутри раздела div основной оболочки, как показано ниже.
Код будет выглядеть примерно так, как показано ниже, и может меняться в зависимости от используемой вами темы. Обязательно выберите раздел div, содержащий тег {content}.
{content}
{{/sections}}
Удалите указанный выше раздел и замените его приведенным ниже кодом в редакторе:
{content global=”false”}
В редакторе кода это должно выглядеть так:
Следующий шаг — добавить немного CSS, для этого перейдите в файл «main.less», доступный в разделе «Стили». Скопируйте приведенный ниже код CSS и вставьте его в нижнюю часть файла main.less. Вы можете просто вставить внизу любой существующий код в файле.
/* Макет боковой панели*/ .column { margin: 0 auto; box-sizing: граница-коробка; отступ: 10 пикселей; переполнение: скрыто; ширина: 100%; } .maincontent { ширина: 60%; плыть налево; поля: 15px 30px 20px 25px; отступ: 15px 30px 0 25px; граница справа: 1px rgba(96, 125, 139, 0,39) сплошная; } .sidebarcontent { ширина: 25%; плыть налево; поля: 30px 15px 20px 15px; }
В редакторе это будет выглядеть так:
Вы можете увидеть предварительный просмотр в реальном времени под разделом кода или нажать кнопку предварительного просмотра, чтобы открыть свой сайт в новом всплывающем окне. Если все в порядке, нажмите кнопку «Сохранить», которая отображается в правом верхнем углу редактора кода. Если вы редактируете код впервые, Weebly предложит вам сохранить изменения как новую тему. Укажите имя для своей темы и сохраните изменения. Помните, что вы можете выбрать эту тему для другого сайта под своей учетной записью, перейдя на вкладку «Темы» в редакторе сайта при редактировании этого сайта.
Добавление элементов на боковую панель
Теперь, когда вы создали боковую панель для всего сайта, пришло время добавить на нее контент. Перейдите в раздел «Страницы» и создайте новую «Стандартную страницу». Нажмите «Тип заголовка» и выберите макет страницы «sidebar.html», который вы создали. Вы увидите редактор с двумя столбцами с основным содержимым и боковой панелью. Перетащите элементы в области содержимого и боковой панели, чтобы создать свой сайт.
Вы можете добавить любые элементы по умолчанию и пользовательские элементы из приложений на боковую панель. Содержимое, добавленное на боковую панель, будет отображаться на всех страницах сайта с шаблоном «sidebar.html». Опубликуйте свой сайт и посмотрите на красивую боковую панель в действии.
Примечание: Вы также можете изменить тип заголовка любой существующей страницы на вашем сайте, чтобы добавить боковую панель на эту страницу. Страница будет автоматически отображать элементы боковой панели, когда вы выберете тип заголовка «Боковая панель». Таким образом, вы можете отображать боковую панель одинаково на всех страницах, просто изменив тип заголовка.
Создание пользовательской боковой панели для разных страниц
Как правило, элементы боковой панели появляются на всех страницах сайта. Однако вы также можете отображать разные боковые панели на разных страницах. Все, что вам нужно, это добавить параметр «global=»false» в тег шаблона боковой панели, который вы добавили в шаблон страницы sidebar.html. Ниже приведен полный код, и вы можете создать дополнительный шаблон с именем custom-sidebar.html. Таким образом, вы можете использовать как шаблоны sidebar.html, так и custom-sidebar.html и выбирать тот, который вам нужен при создании ваших страниц.
{content global=”false”}
Всякий раз, когда вы хотите создать страницу с настраиваемой боковой панелью, выберите тип заголовка «Настраиваемая боковая панель». Раздел боковой панели будет отображаться как пустой, и вы сможете добавить свои пользовательские элементы. Когда вы создаете новую страницу с пользовательской боковой панелью, вы снова обнаружите, что боковая панель пуста, куда вы можете добавлять различные элементы.
Боковая панель для сообщений блога Weebly
Давайте сначала объясним включение боковой панели в сообщениях блога Weebly. Эта боковая панель будет отображаться только на странице вашего блога и во всех отдельных сообщениях.
Помните, что на вашем сайте должна быть уже добавлена страница блога, чтобы настройки блога появились. В противном случае вы не увидите раздел блога в настройках. Узнайте больше о том, как создать бесплатный блог Weebly и настроить параметры.
После того, как вы включили боковую панель, нажмите на страницу своего блога в меню навигации внутри редактора сайта. в качестве альтернативы перейдите на вкладку «Страницы» и выберите страницу своего блога. Он покажет боковую панель, куда вы можете перетаскивать элементы блога и другие разделы. Weebly предлагает специальные элементы боковой панели блога, такие как автор, архивы, категории, лента и т. д., которые вы можете добавить на боковую панель.
Эта боковая панель по-прежнему будет отображаться при редактировании или создании сообщений в блоге. Однако вы не сможете добавлять элементы, так как редактор заморозит боковую панель, что позволит вам добавлять элементы только в область содержимого сообщения блога.
Заключительные замечания
Новые тенденции в дизайне помогут сохранить привлекательность вашего сайта на всех устройствах. Однако такие вещи, как темы без боковой панели, подходят не для всех веб-сайтов. К сожалению, Weebly заставляет всех пользователей использовать темы без боковой панели и не предлагает тему с боковой панелью для стандартных страниц. Как объяснялось выше, вы можете создать новый шаблон страницы и использовать боковую панель сайта для страниц или использовать пользовательскую боковую панель для разных страниц. Кроме того, вы также можете загрузить нашу бесплатную тему WebSense с 8 макетами боковой панели и 6 полноэкранными макетами страниц.
