OptimizePress 2.5. Мастер — класс #10. Создание страницы «Подписка на вебинар».

Мастер — класс #10. Создание страницы «Подписка на вебинар».

1. Строка с заголовком и таймером обратного отсчета
2. Строка с датой вебинара и с кнопкой регистрации
3. Строка с информацией о вебинаре и об авторе
4. Подключение формы подписки к Getresponse
5. Создание страницы «Спасибо за регистрацию»
6. Создания прямого эфира на Youtube
7. Создание страницы с видео трансляцией Youtube

Стили для таймера отсчета времени и даты проведения вебинара (чтобы эти стили сработали, необходимо выбирать «Таймер» №2 и «Дату и время» №3)

/*! Стиль для таймера отсчета времени */

.countdown-timer-style-2 .countdown_amount:after {
height: 0px;
background: none;
}

.countdown-timer-style-2 .countdown_amount:after {
background: none;
}

.countdown-timer-style-2 .countdown_amount {
-webkit-box-shadow:none;
-moz-box-shadow: none;
text-shadow: none;
background: none;
box-shadow: 0px;
filter: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
color: #979ca0;
display: inline-block;
position: relative;
font-size: 35px;
font-weight: 400;
height: 20px;
width: 20px;
padding: 15px;
margin: 0 2px 0;
}

.countdown-timer-style-2 span.countdown_section {
color: #979ca0;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}

/*! Стиль для Даты и времени проведения вебинара */

.calendar-date .calendar-time-box ul li {
font-size: 16px !important;
color: #646e76;
}

.calendar-date .calendar-date-box {
float: left;
width: 140px;
}

div.calendar-date-style-3 div.calendar-date-box p.month {
position: relative;
z-index: 1;
display: block;
margin: 0;
padding: 10px 0;
line-height: 1em;
font-size: 20px;
font-weight: 500;
color: #fff;
border-radius: 0;
box-shadow: none;
text-shadow: none;
background-image:none;
}

div.calendar-date-style-3 div.calendar-date-box p.day {
font-weight: 400;
color: #646e76;
border-radius: 0;
box-shadow: none;
background-image:none;
background-color: #f7f7f7;
}

div.calendar-date-style-3 div.calendar-date-box {
border-radius: 0px;
box-shadow: none;
}

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

#646e76 — цвет текста и заголовков
#53bbb4 — светло-зеленый — для выделения текста и даты
#c25975 — розовый — для кнопки

Фоновый узор — скачать

Перейдите по ссылке и узнайте больше о OptimizePress для создания лендингов и маркетинговых воронок для сайтов на WordPress.
 

Вернутся к содержанию мастер-классов