135. OptimizePress #8. Создание продающей страницы для продажи инфопродукта/курса/ тренинга.

Создание продающей страницы для продажи инфопродукта/курса/ тренинга.
  1. Строка с заголовком и описанием инфопродукта
  2. Строка с описанием проблемы
  3. Строка «Для кого инфопродукт»
  4. Строка «Что получите после прохождения»
  5. Строка «Нас рекомендуют/Что о нас говорят» (отзывы)
  6. Строка «Преимущества инфопродукта»
  7. Строка призыв к действию с кнопкой «Принять участие»
  8. Строка «Программа инфопродукта»
  9. Строка «Автор инфопродукта»
  10. Строка «В результате вы получите»
  11. Строка с прайсом
  12. Строка «Как будет проходить»
  13. Строка «Отзывы»
  14. Строка «Результаты учеников»
  15. Строка «Частые вопросы»
  16. Строка «Призыв к действию»
  17. Создание фиксированной шапки с меню и логотипом
  18. Меню с переходами на строки страницы
  19. Нижняя часть страницы (копирайт и политика конфиденциальности)

Пример лендинга, который создали на мастер-классе:
https://get.wptraining.ru/business-blog/

Стили, которые использовали на мастер-классе:

/*! круглые изображения в строке "Для кого..." */
.round-image img {
border-radius:50%;
}

/*! фиксированная шапка с прозрачным фоном */
.banner {
padding: 20px 0px;
background:rgba(231, 230, 236,.5) !important;
position:fixed;
width:100%;
top:0;
}


/*! Увеличение ширины шапки (смотрится лучше) */
@media screen and (min-width: 1170px) {
.banner .fixed-width{width:97%; max-width: 1170px;}
.container .eight.columns{width:31%;}
.container .sixteen.columns{width:64%;}
}

/*! увеличение ширины колонок для тарифов с ценой (созданы с помощью конструктора стилизованных блоков) */
.price-table .cols {margin:0px !important}
.price-table .one-third.column.cols.narrow {width:320px !important}
.price-table .popular {box-shadow: 1px 1px 1px #eaeaea}

/*! Размер шрифта в выпадающем контенте (в строке "Частые вопросы") */
.toggle-panel .toggle-panel-toggle-text, .toggle-panel-toggle-text {font-size:16px;}

Номера цветов, которые использовались в мастер-классе:

#3c4766 – темно-синий
#fe8f92 – розовый
#f2f2f2 – светло-серый (для фона строк)

Приобрести видео запись данного урока и всех уроков этой серии можно здесь >>>

Поделиться со своими друзьями:
Комментарии на Блог
4 комментария
  1. Алексей Дроздов

    Анфиса, добрый день.
    Не получается установить фоновое изображение. В чем может быть причина и как исправить? Подскажите, пожалуйста. Ссылка на видео: https://youtu.be/847psZQh_34
    С ув., Алексей.

    • Владимир Севостьянов

      Алексей, у меня так же не получалось. Вставил фон через LiveEditor -> настройки цвета -> настройки цвета страницы -> параметры цвета страницы-> загрузил фоновую картинку

    • Алексей, попробуйте выйти из страницы (закройте ее). Затем выйдите из админки (разлогиньтесь). Затем снова зайдите под логином и паролем и откройте страницу для редактирования. Попробуйте еще раз загрузить изображение. Иногда во время работы происходит обнуление входа в админку (при длительной работе), и необходимо снова перезайти. Если все еще не получается, войдите в контакт по скайпу mlmproekt.ru, я посмотрю в чем может быть причина.

  2. Владимир Севостьянов

    Доброго времени суток, Анфиса! Только что обнаружил такой момент: При открывании моего блога созданного ранее, в разделе карта сайта -> мои страницы: видны все мои страницы созданные в opmizePress. Как поступить в таком случае? Что необходимо отключить? Получается, что новый подписчик сразу видит страницы -подписки, спасибо, скачай PDF. Или создать полностью новый сайт на плагине optimizePress, а всё раннее созданное отключить?

Оставьте ваш комментарий или вопрос