Добавить многоколоночный нижний колонтитул с перетаскиванием на бесплатный сайт Weebly

В нашей предыдущей статье мы объяснили, как удалить бесплатный нижний колонтитул Weebly и добавить свои собственные ссылки на бесплатный сайт Weebly, чего может быть недостаточно для создания профессионального сайта. Как правило, нижний колонтитул должен состоять из нескольких столбцов с содержанием, которое должно отображаться на всем сайте. Но нижний колонтитул с несколькими столбцами — это функция Weebly Pro, и вам нужно обновить, чтобы добавить элементы перетаскивания в область нижнего колонтитула. В этой статье мы объясним пошаговый процесс добавления многоколоночного перетаскивания нижнего колонтитула на бесплатный сайт Weebly, просто изменив CSS и HTML страницы.

Какие шаги необходимо предпринять?

Ниже приведены шаги по добавлению элементов в нижний колонтитул:

Шаг 1. Доступ к исходному HTML / CSS сайта

  • Войдите в свою учетную запись Weebly и выберите «редактировать»Напротив сайта, нижний колонтитул которого вы хотите удалить.
  • В редакторе Weebly выберите «Редактировать HTML / CSS» на вкладке «Дизайн».

Кнопка редактирования HTML на вкладке Weebly Design

Шаг 2 — Изменение основного CSS

  • Чтобы добавить нижний колонтитул из нескольких столбцов, вам необходимо добавить следующий код CSS в «main_style.css» в разделе «Assets». Этот код можно добавить в любом месте CSS, но добавляйте его осторожно, чтобы не перекрывать другой элемент.
/* Weebly Multi Column Drag and Drop Footer by WebNots*/
#multicolumnfooter{
width: 100%;
color:#ffffff;
font-size: 15px;
text-align: center;
padding: 10px 0px 10px 0px;
margin: 10px;
overflow-x: hidden;
overflow-y: hidden;
}
  • Настройте ширину, цвет, шрифт, фон и выравнивание отступов в соответствии с дизайном вашего сайта. Также вы можете добавить дополнительные стили, чтобы сделать нижний колонтитул более красивым.
  • После добавления кода он должен выглядеть, как показано ниже.
Изменить основную таблицу стилей в Weebly

Изменить основную таблицу стилей в Weebly

Шаг 3. Изменение макета страницы HTML для скрытия существующего нижнего колонтитула

  • Выберите подходящий макет страницы в соответствии с вашими настройка страницы на вкладке «Страницы». В этом примере страница настроена как «Стандартная страница» (без изображения заголовка), поэтому необходимо внести изменения в макет страницы «no-header.html».
  • Если на вашем сайте несколько макетов страниц, внесите изменения во все макеты страниц. В противном случае на некоторых страницах будет отображаться нижний колонтитул с перетаскиванием, а некоторые страницы не будут отображаться.
  • Просмотрите содержимое HTML и найдите код {нижний колонтитул}.
  • Теперь добавьте следующий код, чтобы скрыть существующую бесплатную рекламу в нижнем колонтитуле.
<div id="footer" style="display:none">{footer}</div>

Разные темы могут иметь разный тип кода нижнего колонтитула. Некоторые темы могут иметь нижний колонтитул, который вам нужно скрыть целиком. Как правило, все темы должны иметь тег {footer} в обязательном порядке, и вам нужно его скрыть.

Шаг 4 — Добавление нижнего колонтитула с несколькими столбцами

  • Теперь, когда вы скрыли существующий нижний колонтитул, пришло время добавить пользовательский нижний колонтитул.
  • Добавьте приведенный ниже код чуть выше скрытого нижнего колонтитула.
<div id="multicolumnfooter">{multicolumnfooter:content}</div>
  • После добавления кода он должен выглядеть так:
Добавить многоколоночный нижний колонтитул в HTML

Добавить многоколоночный нижний колонтитул в HTML

Шаг 5 — Перетащите элементы в нижний колонтитул

  • Теперь вы можете перетаскивать элементы в область нижнего колонтитула в редакторе сайта, как профессиональные пользователи. Ваш сайт будет выглядеть как сайт Weebly Pro с красивым нижним колонтитулом, разделенным на несколько столбцов.
  • Ниже приведен пример нижнего колонтитула из трех столбцов на бесплатном сайте Weebly.
Внешний вид нижнего колонтитула Weebly Free Drag and Drop

Внешний вид нижнего колонтитула Weebly Free Drag and Drop

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

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

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

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