Создание заголовка перетаскивания для пользовательских и старых тем Weebly

Weebly предлагает очень ограниченное количество тем с небольшими вариациями, что заставляет пользователей либо искать собственные темы, либо изменять темы по умолчанию для улучшения функций. Поскольку ни одна из настраиваемых тем не может предлагать аналогичные возможности перетаскивания, как темы по умолчанию Weebly, лучший доступный способ – отредактировать исходный HTML / CSS для изменения темы по умолчанию. Одна из крайне необходимых функций для пользователей Weebly – наличие заголовка перетаскивания, чтобы можно было добавить любой тип контента. В этой статье мы объясним, как создать перетаскиваемый заголовок для целевой страницы на сайте Weebly.

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

Общие сведения о заголовке макета по умолчанию

Войдите на свой сайт Weebly и перейдите к «Тема> Изменить HTML / CSS> Тип заголовка” раздел. В этом примере мы будем использовать «Сумерки – Бизнес»И создайте перетаскиваемую целевую страницу, изменив значение по умолчанию«Landing.html»Шаблон. Вы можете использовать тот же метод для создания макетов высокого и короткого заголовков с перетаскиванием заголовка для любых других тем.

Как правило, все макеты целевой страницы содержат заголовок, заголовок и кнопку в области заголовка. Под “Landing.html”Вы увидите похожий контент, как показано ниже:

<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{action:button global="false"}</div>
</div>

На целевой странице используются три элемента-заполнителя:

  • В h2 тег используется для создания заполнителя для заголовка.
  • В п тег используется для создания заполнителя для заголовка (краткого описания).
  • В кнопка тег используется для создания заполнителя для кнопки.
В некоторых темах вы также можете увидеть логотип в области заголовка.

Поскольку используются заполнители, Weebly позволяет изменять только заголовок, заголовок и текст кнопки без возможности добавления каких-либо других элементов. Целевая страница по умолчанию “Сумерки – Бизнес»Будет выглядеть так:

Заголовок целевой страницы Weebly по умолчанию

Создание области заголовка перетаскиванием

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

<div class="banner">
<h2>{headline:text global="false"}</h2>
<p>{headline-paragraph:text global="false"}</p>
<div class="button-wrap">{button:content global="false"}</div>
</div>

Сохраните изменения и вернитесь в редактор сайта Weebly.

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

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

Две кнопки в области заголовка Weebly

Две кнопки в области заголовка Weebly

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

Перетащите форму информационного бюллетеня в заголовок Weebly

Перетащите форму информационного бюллетеня в заголовок Weebly

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

Опубликованные пользовательские элементы сайта Weebly в заголовке

Опубликованные пользовательские элементы сайта Weebly в заголовке

Посмотреть демо на сайте Weebly

Вы также можете создать собственный тип заголовка и выбрать между макетом целевой страницы по умолчанию и настраиваемым макетом с перетаскиванием заголовка.

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

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

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