Интернет-магазина на WordPress бесплатно. Как правильно оформить подвал

Интернет-магазина на WordPress бесплатно. Как правильно оформить подвал

Здравствуйте, дорогие читатели моего блога!

Продолжаем создавать интернет-магазина на WordPress бесплатно. Давайте рассмотрим какие элементы необходимо добавить в подвале интернет-магазина и как это сделать.

Если вы ещё не читали предыдущих статей из серии создание интернет-магазина на WordPress бесплатно, вот ссылки:
Интернет-магазин на WordPress бесплатно за 30 минут
Интернет-магазин на WordPress бесплатно. Как настроить фильтр товаров?

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

Видео инструкция по настройке подвала интернет-магазина


Какие элементы можно и нужно добавить в подвале интернет-магазина

  1. 1.Обязательно: копирайт.
  2. 2.Обязательно: ссылка на политику конфиденциальности.
    Как оформлять политику конфиденциальности я рассказывала в этой статье с видео инструкцией: Как добавить политику конфиденциальности на сайт?
  3. 3.Желательно: контактные данные (номер телефона, e-mail, адрес, время работы и т.д.)
  4. 4.Желательно: информация о магазине (логотип, название, краткое описание).
  5. 5.Кнопки социальных сетей.
  6. 6.Виджеты социальных сетей.
  7. 7.Галереи изображений.
  8. 8.Виджет последних статей, размещенных в блоге.
  9. 9.Кнопка заказа звонка.
  10. 10.Форма обратной связи.
  11. 11.Форма подписки на новости и т.д.

Добавление информации о магазине

  1. 1.В разделе «Внешний вид»«Виджеты» выбираем виджет «Текст» и добавляем его в одну из областей подвала.
    Оформление подвала в интернет-магазине
  2. 2.Добавляем логотип и краткое описание.
  3. 3.Добавляем иконки социальных сетей при помощи изображений. Заготовленные изображения для наиболее популярных социальных сетей вы можете скачать по ссылке ниже.
    ==Скачать==
  4. 4.Для оформления иконок социальных сетей и создания эффекта при наведении присваиваем картинкам CSS класс social.
  5. 5.Переходим в раздел «Внешний вид»«Настроить»«Дополнительные стили» и добавляем следующий CSS код:

  6. 6.После заполнения виджета нажимаем на кнопку «Сохранить».

Добавление меню навигации

  1. 1.Для начала переходим в раздел «Внешний вид»«Меню» и создаем новое меню навигации.
  2. 2.Задаем ему название и кликаем на копку «Создать меню».
  3. 3.Добавляем в меню созданные ранее страницы и нажимаем на кнопку «Сохранить».
    Добавляем меню в подвал
  4. 4.Переходим в раздел «Внешний вид»«Виджеты» и находим виджет «Меню навигации».
  5. 5.Кликаем по нему и добавляем в нужную область виджетов подвала интернет-магазина.
  6. 6.Задаем название и в раскрывающемся списке выбираем только-что созданное меню.
    Создаем меню для подвала
  7. 7.Нажимаем на копку «Сохранить».

Создание HTML карты сайта для посетителей

  1. 1.Переходим в раздел «Плагины»«Добавить новый» и в стоке поиска вводим название Sitemap by click5
    Плагин для создания карты сайта
  2. 2.Устанавливаем и активируем плагин.
  3. 3.Настройки плагина можно оставить по умолчанию или изменить как показано в видео инструкции выше.
  4. 4.Для создания страницы с картой сайта копируем шорткод на странице настроек плагина и вставляем его на ту страницу, на которой нужно разместить кату сайта.
    Создаем карту сайта для интерент-магазина

Вывод контактной информации

  1. 1.В разделе «Внешний вид»«Виджеты» находим виджет «Текст» и добавляем его в нужную область подвала.
  2. 2.Добавляем кликабельный номер телефона. Для этого можно использовать код:

    Номер телефона нужно заменить на свой.
  3. 3.Добавляем e-mail, адрес и время работы.
  4. 4.Переходим на сайт иконочного шрифта FontAwesom
    Ссылка: fontawesome.ru
  5. 5.Подбираем подходящие иконки и добавляем их в виджет через вкладку «Текст», как показано на видео в начале статьи, а затем нажимаем на кнопку «Сохранить».
  6. 6.Чтобы придать иконкам более привлекательный внешний вид переходим в раздел «Внешний вид»«Настроить»«Дополнительные стили» и добавляем следующий CSS код:

    Обратите внимание что данные классы используются для темы Orchid Store. Если у Вас на сайте используется другая тема, то скорее всего названия классов для блока подвала будет отличаться. Не забудьте заменить их на свои!
  7. 7.Нажимаем на кнопку «Опубликовать» в верхней части панели.

В следующей статье мы продолжим создавать наш интернет-магазин на WordPress и займемся настройкой главной страницы. Если Вы ещё не подписан на обновления блога и на мой канал YouTube – самое время это сделать чтобы ничего не пропустить!
Успехов Вам в создании своего интернет-магазина!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

2 комментария

  1. Юля! Какая же Вы умница! спасибо за понятные и толковые статьи и уроки!

    • Наталья, спасибо Вам большое за такой добрый комментарий!

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

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif