Создание сайта обзора продукта с дополнительными возможностями - Часть 1
Опубликовано: 2017-09-12Добро пожаловать в первую часть этой серии из четырех статей о том, как разработать сайт с обзором продукта с помощью Extra. Если вы ломаете голову над тем, как начать разработку сайта с обзором продуктов, эта серия статей для вас. Благодаря встроенным функциям обзора и интеллектуальной категоризации сообщений Extra специально оборудован для создания привлекательных обзоров, шаблонов сообщений о продуктах, мегаменю и макетов категорий за считанные минуты. Присоединяйтесь ко мне, когда мы исследуем возможности Extra.
Я люблю обзоры продуктов. Фактически, в наши дни я редко покупаю что-либо, не проведя тщательного расследования на уровне ФБР, чтобы определить, что мир может сказать о продукте. Если я когда-нибудь выхожу в магазин (это редко), я тот парень в магазине, который стоит 30 минут перед полкой и читаю отзывы о товарах на полках. Бьюсь об заклад, я не одинок.
Сайты с обзорами продуктов популярны, и они являются отличным способом заработать немного дополнительных денег, не выходя из собственного дома, если вы готовы построить его самостоятельно. С точки зрения бизнеса, создание блога с обзором продукта потребует значительного труда и большого терпения для его успеха. Но что касается разработки вашего настоящего сайта, Extra вас позаботится.
Extra поставляется с множеством встроенных функций, которые значительно упрощают добавление обзоров продуктов. Модули и макеты умных категорий чрезвычайно эффективны и легко настраиваются. Вы можете одним щелчком мыши превратить любой пункт меню в мегаменю с избранными изображениями, что важно для сайта с большим количеством контента. А мощь Visual Builder добавляет высокий уровень дизайнерских возможностей в макеты публикаций вашего продукта.
В сегодняшнем посте я расскажу об основных параметрах темы и настройках тем, чтобы начать работу над великолепно выглядящим веб-сайтом с обзорами продуктов.
Вот краткий обзор того, что мы собираемся построить в этой серии
Прежде чем мы начнем, давайте рассмотрим некоторые другие важные шаги.
Важные шаги для сайтов с обзором продуктов, не упомянутых в этой серии
В этой серии статей будут рассмотрены основы создания и стилизации вашего сайта с обзором продуктов с помощью Extra. Поэтому я не буду описывать другие важные шаги, которые необходимо предпринять для создания успешного сайта с обзором продуктов. Некоторые из этих важных действий включают:
- Найдите подходящую нишу и сузьте кругозор. Это непросто и потребует серьезных исследований.
- Изучение партнерских доходов от продуктов, чтобы увидеть, действительно ли вы будете зарабатывать деньги.
Amazon - популярный выбор для многих сайтов с обзорами продуктов, хотя и не всегда лучший вариант. - Создание простой последовательности подписок по электронной почте и маркетинговой кампании с использованием Bloom и сторонних сервисов, таких как Mailchimp или Aweber.
- Создавайте отличный контент или платите за это другим.
- Оптимизируйте свой сайт для поисковых систем (SEO).
- Продвигайте свой сайт в социальных сетях
- Сотрудничайте с другими блоггерами в своей нише, чтобы генерировать больше трафика.
Конечно, есть еще шаги.
Подготовка элементов дизайна
- Установлена последняя версия Extra.
- Активная дочерняя тема. Мы не будем редактировать какие-либо основные файлы темы, такие как файлы header.php или function.php для этой серии. Мы будем использовать только настройщик темы и собственный CSS.
- Светлая версия вашего логотипа на темном фоне. Размер моего логотипа 103 × 63.
- Изображения продуктов. Для этого урока у меня будет 4 категории по 3 продукта в каждой категории, поэтому я буду использовать в общей сложности 12 изображений. Я использую стоковые изображения с Shutterstock с белым фоном, чтобы придать им более четкий вид.
Кроме того, самая большая версия изображения продукта будет иметь размер 1280 пикселей (ширина содержимого веб-сайта), поэтому убедитесь, что ваши изображения имеют как минимум такую ширину. В идеале я бы снимал все ваши изображения с разрешением 1280 × 720, чтобы придерживаться соотношения сторон 16: 9 большинства мониторов.
Все готово? Давайте начнем.
Создание сайта обзора продукта с дополнительными возможностями - Часть 1
Подпишитесь на наш канал Youtube
Настройка параметров темы и параметров настройки темы.
На панели управления WordPress перейдите в Extra> Theme Options> General tab и обновите следующее:
Логотип: введите свой логотип. Убедитесь, что это светлая версия вашего логотипа, так как он будет перекрывать темный фон в вашем заголовке.
Фавикон: введите свой фавикон
Цвет глобального акцента: # 222222
Расположение боковой панели: без боковой панели
Сохранить настройки
Теперь перейдите в Extra> Theme Customizer> General Settings> Typography Settings и обновите следующее:
Размер текста заголовка: 24
Размер основного текста: 20
Высота заголовка: 1,3
Стиль шрифта заголовка: B (полужирный)
Шрифт заголовка: Oswald
Шрифт основного текста: Open Sans
Цвет звеньев тела: # e6567a
Сохранить и опубликовать
Вернитесь и выберите « Настройки фона» и измените цвет фона на rgba (0,0,0,0.14).
Сохранить и опубликовать
Теперь вернитесь в главное меню настройщика темы и выберите « Настройки заголовка и навигации»> «Настройки формата заголовка» и выберите «По центру».
Сохранить и опубликовать
Теперь вернитесь и выберите Настройки основной панели меню и обновите следующее:
Высота меню: 124
Высота логотипа: 51
Размер текста: 20
Цвет текста: rgba (255,255,255,0,86)
Цвет фона: # 222222
Цвет фона выпадающего меню: # 222222
Анимация раскрывающегося меню: перевернуть по вертикали
Сохранить и опубликовать
Теперь вернитесь и выберите Дополнительные настройки панели меню и обновите следующее:
Размер текста: 20
Цвет фона: # 121212
Цвет фона выпадающего меню: # 121212
Размер текста трендов: 16 пикселей
Размер текста поиска, корзины и значка: 16
Цвет фона значка поиска, корзины и значка: # 444444
Затем вернитесь и выберите « Фиксированные настройки навигации» . Затем обновите следующее:
Выберите "Скрыть изображение логотипа"
Высота меню: 60
Размер текста: 16
Цвет фона: # 222222
Сохранить и опубликовать
Если вы работаете с новой установкой WordPress и Extra, ваша домашняя страница должна выглядеть примерно так.
Настройка категорий для ваших продуктов
Как только вы закончите с настройками Theme Customizer, вы можете начать добавлять категории для продуктов, которые мы будем добавлять в будущем.
Чтобы настроить категории, перейдите в панель управления WordPress и выберите « Записи»> «Категории» . В разделе « Добавить новую категорию » слева добавьте информацию для своей первой категории. В этом примере я собираюсь добавить категорию под названием «Электроника» с заголовком «Электроника» и цветом «# 5bd999».
Затем нажмите кнопку « Добавить новую категорию» .
Я собираюсь повторить этот шаг еще для трех категорий. Вот информация по всем 4 моим категориям:
- Имя: Электроника
Слаг: электроника
Цвет: # 5bd999 - Имя: Одежда
Слизняк: одежда
Цвет: # 00c0e4 - Имя: Кухня
Слизень: кухня
Цвет: # e6567a - Имя: Здоровье и фитнес
Слаг: здоровье и фитнес
Цвет: # 7658f8
Примечание . Цвета будут играть важную роль в дизайне сайта, поэтому обязательно добавьте их.
Как только вы закончите добавлять свои категории, вы закончите первую часть этой серии!
Скоро: добавление постов и создание макетов постов для ваших продуктов
Во второй части этой серии статей мы начнем добавлять контент для публикации и создавать новый макет для публикаций о наших продуктах. Добавление сообщений с обзором продукта в Extra в основном похоже на добавление обычного сообщения, поэтому, если вы знакомы с созданием сообщений в блогах и использованием Divi Builder, у вас не должно возникнуть проблем с нашим следующим шагом. Если вы новичок во всем этом, считайте, что сейчас отличное время, чтобы научиться строить с помощью Extra.
Вот пример одного из постов о продуктах, которые мы будем создавать во второй части нашей серии статей.
Если у вас есть какие-либо вопросы или отзывы, не стесняйтесь оставлять комментарии.
Ваше здоровье!