Как использовать эксклюзивный пакет макетов пекарни Cyber ​​Monday для создания страницы местоположений для вашего бизнеса

В этом году, чтобы получить киберпонедельник, вы также получите массу бесплатных вещей! Помимо скидки 25%, каждый, кто купит новое членство в Elegant Themes или обновит свою существующую учетную запись (или у кого уже есть пожизненное членство), также получит 6 бесплатных эксклюзивных пакетов макетов, которые доступны для загрузки ТОЛЬКО во время нашей распродажи в Киберпонедельник.

Загрузите эксклюзивный макет, пока он не исчез!

Уже пожизненный член? Вы можете скачать набор прямо сейчас, не участвуйте в нашей распродаже в Киберпонедельник!

Загляните внутрь эксклюзивного макета пекарни Cyber ​​Monday

Один из эксклюзивных пакетов макетов, который мы предоставляем вам как пожизненным участникам и новым клиентам Cyber ​​Monday, - это для пекарен. Он состоит из 5 вкусных страниц, которые сделают любой сайт пекарни неотразимым.

Дизайн целевой страницы

Загрузите эксклюзивный макет, пока он не исчез!

Уже пожизненный член? Вы можете скачать набор прямо сейчас, не участвуйте в нашей распродаже в Киберпонедельник!

Дизайн страницы рецептов

Загрузите эксклюзивный макет, пока он не исчез!

Уже пожизненный член? Вы можете скачать набор прямо сейчас, не участвуйте в нашей распродаже в Киберпонедельник!

Дизайн страницы меню

Загрузите эксклюзивный макет, пока он не исчез!

Уже пожизненный член? Вы можете скачать набор прямо сейчас, не участвуйте в нашей распродаже в Киберпонедельник!

О дизайне страницы

Загрузите эксклюзивный макет, пока он не исчез!

Уже пожизненный член? Вы можете скачать набор прямо сейчас, не участвуйте в нашей распродаже в Киберпонедельник!

Контактная информация Дизайн страницы

Загрузите эксклюзивный макет, пока он не исчез!

Уже пожизненный член? Вы можете скачать набор прямо сейчас, не участвуйте в нашей распродаже в Киберпонедельник!

Получите эксклюзивный набор макетов пекарни Cyber ​​Monday

Прежде чем перейти к этому варианту использования, вам нужно будет заполучить Эксклюзивный пакет макетов пекарни Cyber ​​Monday, который вы можете получить, став новым участником Elegant Themes, обновив свою существующую учетную запись или уже являясь пожизненным участником с нами. Если вы действительно уже являетесь пожизненным участником, вы можете войти в личный кабинет и загрузить все наши эксклюзивные пакеты макетов здесь. Всем остальным нужно будет использовать кнопку ниже, чтобы купить или обновить, прежде чем они смогут следовать остальной части нашего руководства.

Загрузите эксклюзивный макет, пока он не исчез!

Уже пожизненный член? Вы можете скачать набор прямо сейчас, не участвуйте в нашей распродаже в Киберпонедельник!

Как использовать эксклюзивный пакет макетов пекарни Cyber ​​Monday для создания страницы местоположений для вашего бизнеса

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

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

Теперь перейдем к самому варианту использования.

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

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

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

Давайте начнем.

Начните с использования макета контактов для создания страницы местоположений

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

Создать новую страницу

Во-первых, вам нужно будет создать новую страницу и дать ей название (что-то вроде «Наши местоположения») и щелкнуть, чтобы использовать конструктор divi, а затем визуальный конструктор.

Загрузить макет контактной страницы пекарни

На этом этапе макеты страниц уже должны быть загружены в вашу библиотеку Divi. Щелкните, чтобы открыть фиолетовое меню внизу страницы, и выберите кнопку «Добавить из библиотеки» со значком плюса. Выберите загрузку из вкладки библиотеки, а затем выберите из списка макет «Контакты пекарни». Макет сразу загрузится на страницу.

Публиковать.

Добавление разделов для конкретной информации о местоположении

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

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

Затем измените макет столбца строки на макет две трети одна треть.

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

Затем обновите Контент в текстовых модулях в левом столбце, чтобы представить местонахождение вашей конкретной компании. В моем примере я добавлю следующее:

Главный штаб
Нью-Йорк

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

Это послужит хорошим разделом для каждого вашего конкретного местоположения.

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

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

Затем обновите дублированные разделы, добавив в них контент для конкретного местоположения. В этом примере, помимо моего местоположения в Нью-Йорке, я собираюсь создать раздел также для Сан-Франциско и Хьюстона.

Создание раздела нижнего колонтитула контактной формы

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

Сначала удалим оставшиеся модули в правом столбце. Затем обновите макет столбца строки до макета одного столбца. Теперь все, что вы должны увидеть, - это контактная форма в строке из одного столбца.

Затем щелкните, чтобы изменить настройки строки и обновить следующее:

На вкладке содержания…

цвет фона: #ffffff

На вкладке "Дизайн"…

настраиваемое заполнение: 5% сверху, 5% справа, 5% снизу, 5% слева

Тень блока: [выберите тень блока]

Теперь добавим фоновое изображение для нашего раздела. Зайдите в настройки раздела и выберите одно из фоновых изображений, включенных в макет.

Большой! Теперь перейдем к модулю карты.

Добавьте свой ключ API Google

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

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

На данный момент большая часть нашей страницы завершена. Все, что осталось, - это обновления модуля карты вверху страницы. Нам нужно добавить новые местоположения контактов для трех разделов, которые мы создали в разделах страницы (Нью-Йорк, Сан-Франциско и Хьюстон).

Нажмите, чтобы отредактировать модуль карты и обновить настройки следующим образом:

Сотрите один вывод, показанный в модуле, чтобы начать все заново. Затем добавьте новый пин и обновите настройки следующим образом:

Название: Пекарня Нью-Йорка
Содержание: Подробнее
Адрес карты: Нью-Йорк.

Щелкните кнопку "Найти".

Затем добавьте новый пин и обновите настройки следующим образом:

Название: Пекарня Сан-Франциско
Содержание: подробнее
Адрес карты: Сан-Франциско

Щелкните кнопку "Найти".

Затем добавьте новый пин и обновите настройки следующим образом:

Название: Хьюстонская пекарня
Содержание: подробнее
Адрес карты: Хьюстон, Техас.

Щелкните кнопку "Найти".

Вы можете оставить адрес центра карты как Нью-Йорк. Но отрегулируйте отображение карты, чтобы уменьшить масштаб настолько, чтобы можно было видеть все местоположения, когда посетитель впервые просматривает карту.

Добавление ссылок привязки в поля содержимого булавки

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

Откройте настройку модуля карты, а затем отредактируйте настройки первого контакта. Выделите текст в поле содержимого с надписью «Дополнительная информация», а затем щелкните значок ссылки, чтобы сделать его ссылкой. В качестве URL-адреса введите «#newyork» и нажмите «ОК».

Сделайте то же самое для метки San Francisco (используйте URL-адрес «#sanfran») и метки Houston (используйте URL-адрес «#houston»).

Теперь все, что вам нужно сделать, это добавить пользовательский идентификатор CSS в каждый из ваших разделов, который будет соответствовать URL-адресам ссылок, которые вы только что создали в контактах.

Для раздела «Нью-Йорк» обновите настройки раздела на вкладке «Дополнительно» с идентификатором CSS «newyork» и сохраните свои настройки.

Теперь, когда пользователь щелкает ссылку «дополнительная информация» (с URL-адресом #newyork) на булавке New York, страница переходит в этот раздел.

Сделайте то же самое для раздела Сан-Франциско (используйте идентификатор CSS «sanfran») и раздела Хьюстон (используйте идентификатор CSS «houston»).

Вот и все. Все готово!