Создание сайта обзора продукта с дополнительными возможностями - Часть 3

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

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

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

Вот краткий обзор того, что мы собираемся построить

Подготовка элементов дизайна

Поскольку макеты категорий во многом зависят от содержимого публикации, убедитесь, что вы добавили достаточно сообщений, чтобы вы могли почувствовать, как будет выглядеть сайт после добавления собственного содержимого. Как обсуждалось во второй части этой серии, мои макеты категорий содержат 4 категории и по 3 продукта в каждой категории. Я использую стоковые изображения с Shutterstock для избранных изображений своих сообщений.

Для разработки макетов категорий мы будем использовать Конструктор категорий Extra и немного Custom CSS.

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

Создание сайта обзора продукта с дополнительными возможностями - Часть 3

Подпишитесь на наш канал Youtube

Создание макета категории для домашней страницы

По умолчанию extra использует макет категорий для домашней страницы. Чтобы создать собственный макет, на боковой панели панели инструментов WordPress перейдите в Extra> Category Building . Найдите уже существующий макет категории с именем «домашняя страница», затем наведите на него курсор и выберите «Редактировать».

Затем нажмите «Очистить макет» в фиолетовом меню компоновщика, чтобы стереть текущий макет по умолчанию.

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

В левый (две трети) столбца добавьте слайдер избранных сообщений.

Обновите настройки модуля слайдера избранных сообщений следующим образом:

На вкладке "Содержание"…

Категории: Все
Отображать только избранные сообщения: [Я бы не стал это делать, пока вы не решите, какие сообщения вы хотите показывать. Вы можете обозначить определенную публикацию как указанную в поле «Дополнительные настройки» на странице редактора сообщений.]
Показать Автор: OFF
Дата показа: ВЫКЛ.

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

Цвет стрелки навигации: #ffffff
Фон стрелки навигации: # 000000
Фон заголовка: rgba (255,255,255,0.4)
Размер шрифта заголовка: 24px
Цвет текста заголовка: # 000000
Размер мета-шрифта: 16 пикселей.
Цвет метатекста: # 000000
Пользовательское поле: нижний 0 пикселей

На вкладке "Дополнительно"…

Введите следующий настраиваемый CSS в текстовое поле «Главный элемент»:

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

Сохранить настройки

Теперь добавьте текстовый модуль в правый (одна треть) столбец и обновите настройки текстового модуля следующим образом:

На вкладке содержимого добавьте следующий HTML-код на вкладку текста в поле содержимого:

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

Ссылка здесь предназначена для использования в качестве имитации кнопки с призывом к действию. Вы можете использовать его как хотите. Просто обновите URL-адрес и текст ссылки.

Совет : вы можете использовать Bloom, чтобы вызвать всплывающее окно выбора электронной почты при нажатии на этот CTA. Таким образом, посетители смогут всегда быть в курсе продуктов с помощью вашей маркетинговой кампании по электронной почте. Для этого вам нужно будет установить Bloom, добавить всплывающую форму и интегрировать своего почтового провайдера. Затем выберите отображение всплывающего окна при нажатии на селектор CSS «a.join-cta», который соответствует классу ссылки в приведенном выше html-коде.

Вы также можете узнать больше о том, как сделать всплывающее окно формы подписки при нажатии кнопки.

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

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

Размер шрифта текста: 40 пикселей (рабочий стол), 24 пикселей (планшет и смартфон)
Размер шрифта заголовка: 42 пикселей (рабочий стол), 38 пикселей (планшет), 28 пикселей (смартфон)
Пользовательские отступы: 40 пикселей (вверху), 15 пикселей (справа), 15 пикселей (внизу), 15 пикселей (слева)

Сохранить настройки

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

Затем обновите следующее:

На вкладке "Содержание"…

Справочная информация: #ffffff

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

Сделать эту строку полной шириной: ДА
Выровнять высоту столбца: ДА

На вкладке «Дополнительно» добавьте следующий настраиваемый CSS в поле ввода «Главный элемент»:

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
-moz-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);

Сохранить настройки

Ознакомьтесь с разделом настраиваемого слайдера прямо сейчас.

Пока все хорошо.

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

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

На вкладке «Содержимое» добавьте этот заголовок html в текстовую вкладку поля содержимого:

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

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

Ориентация текста: по центру
Шрифт заголовка: B (жирный)
Размер шрифта заголовка: 48 пикселей (рабочий стол), 42 пикселя (планшет), 36 пикселей (смартфон)

Сохранить настройки

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

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

В левом (три четверти) разделе добавьте строку из двух столбцов.

В левом столбце этой строки добавьте модуль сообщений.

Затем обновите настройки модуля «Сообщения» на вкладке «Содержимое», присвоив модулю категорию. Таким образом, модуль сообщений будет отображать только эту категорию. Для этого я выберу «Одежда» в качестве своей категории.

Затем обновите следующее:

Показать Автор: NO
Дата показа: НЕТ

Сохранить настройки

Дублируйте этот модуль сообщений, чтобы у вас было два модуля сообщений, уложенных в левом столбце и 2 справа.

Затем обновите настройки в каждом модуле, указав другую категорию. У меня есть категории "Одежда", "Электроника", "Кухня" и "Здоровье и фитнес".

Если вы хотите добавить модуль сообщений, который отображает видеообзоры, вы можете добавить его здесь. Сначала вам нужно будет добавить новую категорию постов под названием «Видео», присвоив категории цвет # 222222. Затем создайте новое сообщение, выберите «Видео» для формата и добавьте URL-адрес видео во встроенное поле «Параметры формата видео» в Extra.

Затем вы можете добавить содержимое окна обзора для отображения под видео.

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

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

Для первого обновите настройки модуля «Сообщения», включив в него «Все» категории. Затем выберите метод сортировки «Самый высокий рейтинг».

Дублируйте этот модуль сообщений, чтобы под ним располагался другой. Затем обновите метод сортировки этого метода до «Самый популярный».

Продолжайте и обновите сообщение, чтобы сохранить настройки. Вот как должен выглядеть макет на данный момент.

Затем продублируйте (или скопируйте) второй основной раздел, содержащий текстовый модуль с заголовком «Обзоры продуктов».

Затем перетащите (или вставьте) дублированный раздел под специальный раздел. В новом разделе обновите содержимое Text Module Settings следующим html:

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

Сохранить настройки

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

В только что обновленном текстовом модуле добавьте в столбец модуль масонства канала блога. В настройках модуля масонства канала блога на вкладке «Содержимое» выберите все категории, которые должны отображаться в канале.

Сохранить настройки

И, наконец, в модуле масонства ленты блогов добавьте модуль карусели сообщений. Обновите настройки модуля карусели сообщений на вкладке «Контент», чтобы включить все категории, и выберите ДА, чтобы отображать только избранные сообщения.

Эта карусель предназначена для отображения только тех сообщений, которые вы выбрали в качестве избранных при создании сообщений с обзором продукта.

Теперь посмотрим, как выглядит окончательный макет.

Добавление нескольких строк пользовательского CSS

Чтобы объединить дизайн, нам нужно добавить несколько строк Custom CSS. Перейдите в Настройщик тем> Дополнительный CSS и добавьте следующее вверху уже существующего текущего кода CSS:

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

Затем внутри скобок медиа-запроса, установленного на минимальную ширину 980 пикселей, добавьте следующее:

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

Первый фрагмент CSS добавляет к модулям немного более темную тень и более высокую верхнюю границу. Второй настраивает кнопку «Присоединиться сейчас» в верхней части.

Ну вот и все, что касается макета категории Домашняя страница. Вот как выглядит окончательный результат:

В дополнение к макету категорий домашней страницы давайте добавим еще один простой макет для отображения всех наших категорий на одной странице.

Создание макета «Все категории»

Этот макет действительно просто создать теперь, когда у вас есть все ваши сообщения, настроены ваши категории и стиль темы. Цель этого макета - создать страницу, которая отображает все категории и продукты на одной странице. Это можно сделать разными способами, но с помощью Extra я хотел воспользоваться модулем карусели сообщений для отображения категорий и сообщений в макете, аналогичном тому, который вы бы видели на веб-сайтах потокового видео, таких как Hulu и Netflix.

Чтобы добавить макет, прокрутите вверх макета текущей категории и выберите «Добавить новый». Используя конструктор категорий, добавьте строку из одного столбца в стандартный раздел. Затем добавьте текстовый модуль в строку. Обновите настройки текстового модуля на вкладке «Содержимое», чтобы включить в поле содержимого следующий тег h1:

<h1 class="subtitle fancy"><span>All Categories</span></h1>

Сохранить настройки

Затем добавьте модуль карусели сообщений в текстовый модуль. В настройках модуля «Карусель сообщений» выберите «Одежда» в качестве категории.

Сохранить настройки

Затем добавьте текстовый модуль в карусель сообщений категории «Одежда». В настройках текстового модуля добавьте следующую ссылку в поле «Содержимое» на вкладке «Содержимое»:

<a href="/category/clothing">view all clothing reviews</a>

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

На вкладке «Дизайн» измените ориентацию текста на «Правую».

Сохранить настройки

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

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

Окончательный макет должен выглядеть так, когда вы закончите.

А вот как выглядит расположение категорий на сайте.

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

Это все, что нужно для сегодняшнего поста. Надеюсь, вам понравилась третья часть этой серии из 4 частей, посвященная созданию сайта с обзором продукта с помощью Extra.

Надеюсь, вы еще не устали, у нас есть последний пост в нашей серии.

Скоро

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

Я с нетерпением жду совместной работы над последней частью нашего веб-сайта.

Как всегда, не стесняйтесь оставлять комментарии ниже.