Содержание статьи
Приветствуем пользователей программы Mobirise, а также клиентов и посетителей сервиса Mobiriz.Store!
В сегодняшней статье (видеоурок по статье) мы покажем пару полезных фишек при работе с картами в конструкторе сайтов Mobirise.
Нам понадобится:
Допустим, на своем сайте Вы используете блок с Google картами, но замечаете некорректное отображение карты при скроллинге (прокрутке) страницы.
Вместе с прокруткой страницы также изменяется и масштаб карты, это некорректно и очень неудобно для посетителя сайта.
Чтобы устранить это, добавьте следующий код в
<head> сайта
Раскрыть код
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#map').addClass('scrolloff');
$('#overlay').on("mouseup",function(){
$('#map').addClass('scrolloff');
});
$('#overlay').on("mousedown",function(){
$('#map').removeClass('scrolloff');
});
$("#map").mouseleave(function () {
$('#map').addClass('scrolloff');
});
});
</script>
, затем откройте блок с нужной картой в
Редакторе кода и добавьте следующий
CSS код:
Раскрыть код
.scrolloff {
pointer-events: none;
}
Далее, если карта подключается при помощи iframe:
- Вам необходимо перед подключением iframe добавить код :
Раскрыть код
<div id="overlay" class="map">
- В iframe указать id :
id="map"
- Сохранить изменения в Редакторе кода и запустить предпросмотр сайта
Если карта подключается стандартным методом
- Перед div’ом карты добавить
Раскрыть код
<div id="overlay" class="map">
- В div’e указать id:
id="map"
- Сохранить изменения в Редакторе кода и запустить предпросмотр сайта
Благодаря этому, отображение карты будет всегда корректным.
А что делать, если Вы не хотите использовать Google Maps, а хотите добавить Яндекс.Карты?
Все очень просто. Перейдите на сайт Яндекс карты, создайте нужную Вам карту с нужным регионом и адресом, а также задайте размеры карты (растягивайте по ширине, высота 350-400 пикселей). После этого, скопируйте код готовой карты, перейдите в конструктор сайтов Mobirise и добавьте пустой html блок.
Вставьте ранее скопированный код в содержимое блока, найдите значение scroll=true и замените “true” на “false” - это поможет нам избежать прокрутки карты при скроллинге страницы.
Напоследок, обращая внимание на такие вещи Вы можете существенно повысить юзабилити сайта, а от времени нахождения пользователя на сайте могут зависеть ваши продажи или заявки.