Добавление баннера на сайт Ucoz: пошаговая инструкция

От: Master F1

Эта инструкция поможет вам разместить рекламный или информационный баннер на вашем сайте Ucoz. Мы покажем, как подготовить изображение, загрузить его на сервер Ucoz и добавить код баннера в глобальные блоки вашего сайта.

Шаг 1: Подготовка изображения баннера

Прежде чем начать, нам нужно готовое изображение баннера.

Размер и формат: определяем размер баннера на нашем сайте. Изображение должно быть адаптировано для веб-использования (файл небольшого размера) и иметь подходящий формат (JPG, PNG или GIF).
Создание или редактирование изображения: Используем графический редактор (например, Adobe Photoshop, GIMP или онлайн-редакторы, такие как Canva) для создания или редактирования изображения баннера. Важно, чтобы изображение было привлекательным, информативным и тематическим названием вашего сайта.
Оптимизация: Сохраняем изображение с высоким качеством изображения на веб-сайте. Слишком большое изображение будет долго загружаться и замедлять работу сайта.

Шаг 2: Загрузка изображения баннера на сервер Ucoz

Теперь нам нужно загрузить изображение баннера на сервер Ucoz, чтобы получить ссылку на него.

Входим в панель управления вашего сайта Ucoz: Используем свой логин и пароль для входа в панель управления.
Переходим в «Файловый менеджер»: В панели управления находим и выбираем раздел «Файловый менеджер».
Создаём или выбираем расположение для баннеров: В менеджере файлов мы можем создать новое расположение или выбрать существующий каталог (например, doc/img/rec).
Загружаем изображение: Нажимаем кнопку «Загрузить файлы» и выбираем изображение баннера с компьютера. Дожидаемся завершения загрузки.
Получаем ссылку на изображение: После загрузки изображения переходим в колонку «Действие» и нажимаем на значок с изображением буквы «i». Откроется окно с информацией о файле, ссылка на изображение. Скопируем эту ссылку.

В результате ссылка на изображение выглядит так: https://rcdom.ru/doc/img/rec/Z-banner.png.

Шаг 3: Добавление кода баннера в глобальные блоки Ucoz

Теперь мы добавляем код баннера в один из блоков нашего сайта. Глобальные блоки – это области сайта, которые указаны на всех страницах (или на определенных страницах) и позволяют включать различные элементы, включая баннеры.

Переходим в раздел «Дизайн» — «Глобальные блоки»: В панели управления Ucoz переходим в раздел «Дизайн» и выбираем «Глобальные блоки».

Выбираем контейнер: Выбираем контейнер (глобальный блок), в который нам нужно добавить баннер. Например, «Первый контейнер», но это может быть любой другой контейнер, в зависимости от конструкции.

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

&lt;a href="ССЫЛКА_НА_САЙТ" target="_blank"&gt;
    &lt;div class="scale"&gt;
        &lt;abbr title="ТЕКСТ_ПОДСКАЗКИ"&gt;
            &lt;img src="" width="100%" alt="ОПИСАНИЕ_ИЗОБРАЖЕНИЯ" class="scale"&gt;
        &lt;/abbr&gt;
    &lt;/div&gt;
&lt;/a&gt;

</abbr>

</div>

</a>

В коде следует заменить:

ССЫЛКА_НА_САЙТ — ссылку на сайт, на который осуществляется переход.
- ССЫЛКА_НА_ИЗОБРАЖЕНИЕ — ссылка на наше изображение, которое мы загрузили на сервер Ucoz (полученную на шаге 2).
- ТЕКСТ_ПОДСКАЗКИ — текст, который будет проводиться на баннере (в атрибуте title).
- ОПИСАНИЕ_ИЗОБРАЖЕНИЯ — Краткое описание изображения (в атрибуте alt). Это важно для SEO и доступности сайта.

Пример заполненного кода (с использованием данных):

&lt;a href="https://www.culture.ru/afisha/russia/tags-uchastnikam-svo" target="_blank"&gt;
    &lt;div class="scale"&gt;
        &lt;abbr title="Ветеранам СВО и их семьям - свободный вход на культурные мероприятия"&gt;
            &lt;img src="" width="100%" alt="Баннер с информацией о культурных мероприятиях для ветеранов СВО" class="scale"&gt;
        &lt;/abbr&gt;
    &lt;/div&gt;
&lt;/a&gt;

</abbr>

</div>

</a>

Сохраняем изменения: нажимаем кнопку «Сохранить» (или аналогичную) внизу страницы, чтобы сохранить изменения в глобальном блоке.

Пояснения к коду:

<a href=»…» target=»_blank»> «: Это HTML-тег для создания ссылок. Атрибут href указывает URL-адрес, который будет перенаправлять пользователя при появлении баннера. Атрибут target=»_blank» указывает, что ссылка должна открыться в новом окне или вкладке браузера.
<div class=»scale»>: Этот div класс scale предназначен для масштабирования баннера. Он позволяет баннеру автоматически адаптироваться к размеру контейнера, в котором он находится. (Обычно этот класс уже определен в вашей CSS-теме Ucoz).
<abbr title=»…»>: Этот тег abbr (аббревиатура) позволяет добавить подсказку, которая будет использоваться при наведении курсора на баннер. Атрибут title содержит текст подсказки. Это полезно для предоставления дополнительной информации о баннере.
<img src=»» width=»100%» alt=»…» class=»scale»>»: Это изображение HTML-тега для вставок. Атрибут src указывает URL-адрес изображения. Атрибут width=»100%»указывает, что изображение должно занимать 100% интервала контейнера, в котором оно находится. Атрибут alt содержит текстовое описание изображения, которое отображается, если изображение не может быть загружено, а также используются поисковые цепи для индексации. Класс scale применяется для масштабирования изображения.

Шаг 4. Проверка результата

Открываем сайт в браузере: переходим на главную страницу или на страницу, где должен быть баннер, и убеждаемся, что баннер отображается правильно.
Проверяем ссылку: нажимаем на баннер и проверяем, что он перенаправляет на нужный сайт.
Проверяем адаптивность: убеждаемся, что баннер правильно отображается на разных устройствах (компьютерах, планшетах, смартфонах).