КАСТОМИЗАЦИЯ ЛЕНДИНГОВ

FAQ Section

Ваш вопрос 1 +

Ответ 1 на первый вопрос.

Ответ 2 на первый вопрос.

Ответ 3 на первый вопрос.

Ваш вопрос 2 +

Ответ 1 на второй вопрос.

Ответ 2 на второй вопрос.

Ответ 3 на второй вопрос.

Ваш вопрос 3 +

Ответ 1 на третий вопрос.

Ответ 2 на третий вопрос.

Ответ 3 на третий вопрос.

Ваш вопрос 4 +

Ответ 1 на четвертый вопрос.

Ответ 2 на четвертый вопрос.

Ответ 3 на четвертый вопрос.

Ваш вопрос 5 +

Ответ 1 на пятый вопрос.

Ответ 2 на пятый вопрос.

Ответ 3 на пятый вопрос.

УРОК 1 БЛОК ПЕРЕКЛЮЧАЮЩЕЙСЯ ИНФОРМАЦИИ

F.A.Q.

С чего начать создание онлайн-школы?

Как привлечь студентов в мою онлайн-школу?

Нужно ли мне создавать контент самостоятельно?

Как удержать интерес студентов к курсу?

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

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

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

Используйте интерактивные элементы,
такие как видео, квизы и задания для самопроверки. Регулярно обновляйте курсы и добавляйте новый контент. Поддерживайте общение со студентами через форумы, чаты и вебинары, чтобы создать сообщество вокруг вашей онлайн-школы.

УРОК 2. ЭФФЕКТ ПЕЧАТАЮЩЕГОСЯ ТЕКСТА

УРОК 3. Дизайн интерактивных инпутов формы

Покупка курса

ОПЛАТИТЬ СЕЙЧАС

УРОК 4. "Загрузка" после отправки формы. Механики ожидания

УРОК 5. Установка JQuery на Prodamus XL

Проверка как работает jquery на опубликованной странице:

просмотреть код
перейти в консоль
получить слово "работает"

УРОК 6. Эффект 3D кнопок с анимациями (часть 2)

Записаться на консультацию

Оставить заявку

CSS - Кнопка с частицами:
Не забудьте поставить пользовательский класс bubbly-button кнопке!

& .ezb-wrapper,
& .ezb-first {
pointer-events: none;
}

.bubbly-button {
--color: forestgreen;

display: inline-block;
font-size: 1em;
padding: 1em 2em;
margin-top: 100px;
margin-bottom: 60px;
-webkit-appearance: none;
appearance: none;
background-color: var(--color);
color: #fff;
cursor: pointer;
position: relative;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px var(--color);
}
.bubbly-button:focus {
outline: 0;
}
.bubbly-button:before, .bubbly-button:after {
position: absolute;
content: '';
display: block;
width: 140%;
height: 100%;
left: -20%;
z-index: -1000;
transition: all ease-in-out 0.5s;
background-repeat: no-repeat;
}
.bubbly-button:before {
display: none;
top: -75%;
background-image: radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--color) 20%, transparent 30%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--color) 15%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}
.bubbly-button:after {
display: none !important;
bottom: -75%;
background-image: radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--color) 15%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%), radial-gradient(circle, var(--color) 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}
.bubbly-button:active {
transform: scale(0.9);
background-color: #e60074;
box-shadow: 0 2px 25px var(--color);
}
.bubbly-button.animate:before {
display: block;
animation: topBubbles ease-in-out 0.75s forwards;
}
.bubbly-button.animate:after {
display: block !important;
animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
@keyframes bottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}

JS-код к кнопке с частицами:

S - Кнопка с 3D вращением:
Не забудьте поставить пользовательский класс button3d кнопке!

УРОК 7. Эффект 3D кнопок с анимациями (часть 1)

Кнопка

CSS - Кнопка с переворотом:

& {
transform-style: preserve-3d;
transform-origin: center bottom;
transition: all 800ms ease;
}

&:after {
text-align: center;
top: -100%;
left: 0px;
width: 100%;
color: #ffd630;
position: absolute;
background: #000000;
border-radius: 5px;
content: 'Нажми :)';
transform-origin: left bottom;
transform: rotateX(90deg);
line-height: 55px;
height: 55px;
}

&:hover {
transform: rotateX(-90deg) translateY(100%);
}

Кнопка

CSS - Кнопка с бликом и парением:

@keyframes
sheen {
0%,79%{
opacity:0;filter:alpha(opacity=0);
-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
transform:rotateZ(60deg) translate(-5em,7.5em)
}
80%{
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
transform:rotateZ(60deg) translate(-5em,7.5em)
}
95%{
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:rotateZ(60deg) translate(1em,-11em);
transform:rotateZ(60deg) translate(1em,-11em)
}
100%{
opacity:0;
filter:alpha(opacity=0);
-webkit-transform:rotateZ(60deg) translate(1em,-9em);
transform:rotateZ(60deg) translate(1em,-9em)
}
}

.mybuttonstyle {
outline: none;
position: relative;
top: -7px;
margin: 10px 0;
overflow: hidden;
box-shadow: 0 4px 0 #e7b642, 0 25px 15px -10px #e3d1a8;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.mybuttonstyle:hover {
background: #ffe828 !important;
}

.mybuttonstyle:active {
background: #fec744 !important;
position: relative;
top: -1px;
box-shadow: none;
}

.mybuttonstyle:before{
content:'';
position:absolute;
top:-50%;
right:-50%;
bottom:-50%;
left:-50%;
background:-webkit-gradient(linear,left top,left bottom,from(#e5ac8e),color-stop(50%,#fff),color-stop(50%,#e5ac8e));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(229,172,142,0)),color-stop(50%,rgba(255,255,255,.7)),color-stop(50%,rgba(229,172,142,0)));
background:linear-gradient(to bottom,rgba(229,172,142,0),rgba(255,255,255,.7) 50%,rgba(229,172,142,0));
-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
-ms-transform:rotate(60deg) translate(-5em,7.5em);
transform:rotateZ(60deg) translate(-5em,7.5em);
opacity:0;
filter:alpha(opacity=0);
-webkit-animation:sheen 3s infinite;
animation:sheen 3s infinite
}

УРОК 8. Полноэкранный слайдер с текстом

Код в HTML-блоке на странице:

Меня зовут Гульбану Сулейманова

Основатель Абилитационного центра и онлайн-школы "Taмшылар". Мама особенного ребенка

Меня зовут Бахитжан Сатвалдинова

Основатель проекта "Global Study" и онлайн-школы "ЭкспертHub", маркетолог и эксперт по автоматизации процессов

Меня зовут Зиба Сатвалдинова

11 лет я посвятила себя танцам, хотела связать свою жизнь с этим, но так сложилось, что по специальности я дизайнер. Но! Свою жизнь с движением я связала всё таки🥰.

Меня зовут Мария Шаймерденова

Специалист по настройке онлайн-школ и специалист по нейросетям.

Меня зовут Наталья Федоренко

Телесно-ориентированный психотерапевт с опытом работы более 10 лет.

@keyframes
sheen {
0%,79%{
opacity:0;filter:alpha(opacity=0);
-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
transform:rotateZ(60deg) translate(-5em,7.5em)
}
80%{
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
transform:rotateZ(60deg) translate(-5em,7.5em)
}
95%{
opacity:1;
filter:alpha(opacity=100);
-webkit-transform:rotateZ(60deg) translate(1em,-11em);
transform:rotateZ(60deg) translate(1em,-11em)
}
100%{
opacity:0;
filter:alpha(opacity=0);
-webkit-transform:rotateZ(60deg) translate(1em,-9em);
transform:rotateZ(60deg) translate(1em,-9em)
}
}

.mybuttonstyle {
outline: none;
position: relative;
top: -7px;
margin: 10px 0;
overflow: hidden;
box-shadow: 0 4px 0 #e7b642, 0 25px 15px -10px #e3d1a8;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.mybuttonstyle:hover {
background: #ffe828 !important;
}

.mybuttonstyle:active {
background: #fec744 !important;
position: relative;
top: -1px;
box-shadow: none;
}

.mybuttonstyle:before{
content:'';
position:absolute;
top:-50%;
right:-50%;
bottom:-50%;
left:-50%;
background:-webkit-gradient(linear,left top,left bottom,from(#e5ac8e),color-stop(50%,#fff),color-stop(50%,#e5ac8e));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(229,172,142,0)),color-stop(50%,rgba(255,255,255,.7)),color-stop(50%,rgba(229,172,142,0)));
background:linear-gradient(to bottom,rgba(229,172,142,0),rgba(255,255,255,.7) 50%,rgba(229,172,142,0));
-webkit-transform:rotateZ(60deg) translate(-5em,7.5em);
-ms-transform:rotate(60deg) translate(-5em,7.5em);
transform:rotateZ(60deg) translate(-5em,7.5em);
opacity:0;
filter:alpha(opacity=0);
-webkit-animation:sheen 3s infinite;
animation:sheen 3s infinite
}

КАСТОМИЗАЦИЯ ЛК

Делаем слайдер на XL (Slick)

Отзывы наших клиентов