Искате ли да създадете карта с множество местоположения в WordPress с Elementor и Essential Addons?
Да кажем, че имате бизнес с множество клонове в града и искате да създадете дигитална карта, показваща местоположението на тези клонове. Ако имате уебсайт на WordPress, можете лесно да създадете такава карта. Има отличен плъгин, който можете да използвате, за да създадете карта с множество местоположения: Основни добавки.
Основни добавки Това е премиум добавка за Elementor, така че трябва да инсталирате и Elementor, преди да можете да го използвате. Можете да използвате безплатната версия на Elementor, за да създадете карта с модула Essential Addons.
La безплатна версия на Essential Addons също е наличен. Уиджетът за създаване на карта обаче е наличен само в платената версия. Можете да изтеглите платената версия на Essential Addons от нейния официален уебсайт.
Ще използваме платформата Google Maps, за да създадем карта на вашия WordPress сайт, използвайки Essential Addons. Преди да започнем, уверете се, че имате инсталирани Elementor и Essential Addons.
Интегрирайте Google Maps с модула Essential Addons
Преди да можете да добавите карта към Google Maps, използвайки модулите Essential Addons, първо трябва да ги интегрирате. Необходим ви е API ключ, за да интегрирате Google Maps с модулите Essential Addons.
Първо, посетете Google API конзола и влезте с вашия акаунт в Google. Създайте нов проект, като щракнете върху падащото меню в горната част и щракнете върху НОВ ПРОЕКТ.
Дайте име на новия си проект и щракнете върху бутона СЪЗДАВАНЕ .
След като новият ви проект е създаден, изберете го от падащото меню и щракнете върху библиотека на левия панел.
Google разделя API-то на платформата Google Maps на 17 типа. Можете да ги видите, като кликнете върху връзката. DISPLAY ALL в раздела Карти. Трябва да активирате API в зависимост от това какво искате да постигнете.
Открийте също: Как да създадете персонализиран шаблон за един продукт в WooCommerce с Elementor
В нашия случай трябва да активирате следните API, за да добавите карта на Google Maps, използвайки Essential Addons.
- Указания за API
- API за геокодиране
- JavaScript API за карти
- API места
За да активирате API, изберете API, който искате да активирате (като щракнете върху него) и щракнете върху бутона АКТИВИРАТЕ.
След като завършите необходимото активиране на API, върнете се към главното табло на конзолата на Google API и кликнете върху Идентификатори на левия панел. Кликнете върху бутона Създаване на идентификационни данни за вход и изберете API ключ. Копирайте API ключа в изскачащия прозорец, който се появява.
Влезте в таблото за управление на WordPress и щракнете Основни добавки в левия панел. Кликнете върху раздела Елементи и превъртете надолу в секцията Разширена Google Map, Кликнете върху Настройки и поставете API ключа, който току-що копирахте.
Кликнете върху бутона ЗАПАЗЕТЕ НАСТРОЙКИ за да приложите новата промяна.
Започнете да създавате картата
След като Google Maps и Essential Addons бъдат интегрирани, можете да започнете да създавате картата. За да направите това, създайте нова страница (Страници -> Добавяне ) или нова статия (Статии -> Добавяне) и го редактирайте с Elementor.
Преди да създадете страницата, дефинирайте оформлението, като щракнете върху иконата на зъбно колело в долния ляв ъгъл, за да отворите панела с настройки. Задайте оформлението от падащото меню.
Създайте нова секция, като щракнете върху бутона със знак плюс в областта за редактиране. За да имате по-голяма площ за картата, можете да изберете оформление с една колона. Плъзнете уиджета EA Google Maps от левия панел към областта за редактиране.
Отидете в левия панел и задайте типа карта на множествен маркер.
Отворена секция Настройки на маркера на картата и щракнете върху съществуващия маркер на картата, за да го редактирате. Поставете географската ширина и дължина на първото местоположение, което искате да добавите към картата. Също така задайте заглавието, както и описанието.
За да намерите географската ширина и дължина на дадено местоположение, отворете Google Maps и потърсете местоположението (мястото), за което искате да получите географската ширина и дължина. След като го намерите, щракнете с десния бутон на мишката и след това щракнете с левия бутон върху числото, което се появява в контекстното меню.
Следователно това действие ви позволява да копирате географската ширина (първата стойност) и дължината (втората стойност).
Когато приключите с добавянето на географската ширина и дължина на първото местоположение, щракнете върху бутона ДОБАВЯНЕ НА ЕЛЕМЕНТ за да добавите друго местоположение към вашата карта.
Отворете отново Google Maps и потърсете новото местоположение, което искате да добавите към картата. Копирайте географската дължина и ширина, след което ги поставете в съответните полета, както е показано по-горе. Повторете стъпките по-горе, за да добавите още местоположения към картата.
Прочетете още: Как да използвате приспособлението за публикации на Elementor
След като приключите с добавянето на слотове, отворете блока Контроли на картата за да активирате/деактивирате командите, които искате да предоставите на вашата карта. Тук можете също да зададете нивото на мащабиране.
Можете също да отворите блока Тема на картата за да изберете темата на Google Maps, която искате да използвате.
Досега успешно създадохте карта с множество местоположения. Можете да отворите раздела Стил за да определите височината, както и ширината на картата.
Ако искате да имате карта с пълна ширина, задайте секцията, която съдържа картата, на пълна ширина. За да направите това, щракнете върху манипулатора на секцията.
В раздела и блока оформление задайте Ширина на съдържанието на пълна ширинаr и разстоянието между колоните на Без отклонение
Щракнете върху бутона ПУБЛИКУВАНОER в долната част на левия панел, за да публикувате страницата си.
Вградете картата в страница или публикация
Ако по някаква причина предпочитате да вградите картата си в страница/публикация (страницата/публикацията, създадена с редактора по подразбиране на WordPress — Gutenberg), можете да използвате плъгина за WordPress. Елементарни блокове за Гутенберг. Този плъгин ще конвертира шаблон на Elementor в блок Gutenberg.
За да запазите току-що създадената от вас карта като шаблон на Elementor, щракнете върху иконата със стрелка до бутона. ПУБЛИКУВАНЕ / АКТУАЛИЗИРАНЕ и изберете Запази като шаблон.
Дайте име на вашия модел и кликнете върху бутона ЕНГРЕГИСТР.
След това създайте нова страница или публикация (уверете се, че предварително сте инсталирали плъгина Elementor Blocks for Gutenberg). Добавете нов блок и изберете Библиотека Elementor и изберете шаблона, който току-що създадохте.
Ремарк: Ако видите съобщение „Само за целите на разработката“, когато добавяте карта, уверете се, че сте активирали фактурирането си в Google Cloud. Новата политика на Google изисква от разработчиците да активират акаунта за фактуриране (все още можете да използвате Google Maps API безплатно).
Вземете Elementor Pro сега!!!
Заключение
Това е всичко! С това завършва тази статия, показваща ви как да създадете карта с множество местоположения, използвайки Elementor. Ако имате въпроси, моля, уведомете ни в коментарите. Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...