Включить текст телефона, значки социальных сетей и окно поиска в заголовке Weebly

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

В теме Weebly нет элементов заголовка

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

На сайте Weebly нет элементов заголовка

На сайте Weebly нет элементов заголовка

Хотя вы можете добавлять пользовательские элементы, такие как пользовательское окно поиска Google и любые социальные виджеты, очень легко включить элементы заголовка Weebly по умолчанию, изменив исходный HTML / CSS.

Включение параметров на вкладке “Дизайн”

На вкладке «Дизайн» нажмите кнопку «Редактировать HTML / CSS» и выберите макет страницы, в который вы хотите добавить элементы заголовка. Например, здесь мы изменяем страницу «no-header.html». Найдите код для отображения логотипа, он будет выглядеть примерно так:

<div id="logo">{logo}</div>

Добавьте следующий код над кодом логотипа:

<table id="header">
<tr>
<td id="header-right">
<table>
<tr>
<td class="phone-number">{phone:text}</td>
<td class="social">{social}</td>
</tr>
<tr>
<td colspan="2" class="search">{search}</td>
</tr>
</table>
</td>
</tr>
</table>

Это будет выглядеть так:

Добавить код элементов заголовка в Weebly

Добавить код элементов заголовка в Weebly

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

Сохраните изменения и проверьте вкладку «Дизайн», где вы увидите поле поиска, значки социальных сетей и поля для номеров телефонов. Отключите параметр окна поиска, если вы не являетесь пользователем Weebly pro.

Включены элементы заголовка на вкладке Weebly Design

Включены элементы заголовка на вкладке Weebly Design

Изменение CSS

Добавление приведенного выше кода в исходный HTML-код достаточно для включения элементов заголовка по умолчанию в Weebly. Если вы хотите настроить больше, добавьте следующий код для поля номера телефона и поля поиска в свой «main-style.css». Вы можете настроить эти стили в соответствии с макетом вашей темы.

Код для социальных элементов уже есть в CSS, поэтому вам не нужно добавлять его снова.

Стиль элементов заголовка
/* Header: Elements Style
------------------------------------------------------------*/
#header {
border-collapse: collapse;
border-spacing: 0;
width:100%;
}
#header td {
vertical-align: middle;
text-align: left;
}
#header-right table {
float: right;
width: 1px;
border-collapse:collapse;
}
#header-right td {
padding: 0;
}
Стиль телефонного номера заголовка
/* Header: Phone Number
------------------------------------------------------------*/
#header-right .phone-number {
text-align:right;
}
#header-right .phone-number .wsite-text {
display: block;
white-space: nowrap;
}
Стиль окна поиска заголовка
/* Header: Search Box
------------------------------------------------------------*/
#header-right .wsite-search {
float:right;
}
#header-right .wsite-search {
margin: 16px 0px 0px;
vertical-align: middle;
position: relative;
right: -2px;
}
#header-right .wsite-search-input {
width: 166px;
height: 25px;
border: none;
font-family: 'Rosario', sans-serif;
color: #414141;
font-size:13px ;
background: url(search-text.png) no-repeat top left;
float:left;
}
#header-right .wsite-search-button {
position: relative;
width: 33px;
height: 33px;
background: url(search-button.png) no-repeat;
}

Добавление социальных ссылок и телефонного текста

  • Наведите указатель мыши на значки социальных сетей, чтобы увидеть раскрывающийся список, и введите URL-адреса социальных сетей в текстовые поля.
  • Поле номера телефона доступно слева от значков социальных сетей. Щелкните здесь и добавьте номер телефона или текст, например «Следуйте за нами».
Редактировать номер телефона и значки социальных сетей в заголовке

Редактировать номер телефона и значки социальных сетей в заголовке

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

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

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

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

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

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