css коды для геткурса
Вставка
В разделе «Вставка» есть следующие элементы:
Обратите внимание: проверять работу сторонних скриптов всегда рекомендуется на отдельной, тестовой странице.
Подробнее об основах CSS для GetCourse — в следующей статье.
В настройках страницы есть возможность удалить блок с добавленным сторонним кодом, если он нарушил работу страницы.
С помощью элемента «Другая страница» можно вставить в выбранное место любую другую страницу. При просмотре она будет отображаться целиком.
С помощью блока «Несколько вложенных страниц» можно вставить в выбранное место несколько страниц.
В настройках вы можете указать фильтр по тегам страниц для вставки:
Вы можете включить функцию «Автоматически дополнять фильтр тегами с просматриваемой страницы». Это позволит к фильтру тегов, добавить теги, указанные у страницы, на которой добавлен блок «Несколько вложенных страниц»:
Настройка «Использование тегов из фильтров» позволяет выбрать:
Также вы можете указать выбор страниц только в конкретной папке:
Далее необходимо указать количество мест для вывода. Блок ищет страницы по параметрам и выводит столько страниц, сколько указано мест:
В поле «Сортировка» выберите способ по которому будут выводиться страницы:
С помощью блока «Несколько вложенных страниц» вы можете создать на вашей странице блок с баннерами, которые в случайном порядке будут отображаться на странице каждый раз, когда пользователь заходит на нее.
Для этого необходимо создать папку с нескольким страницами. Каждая страница будет являться баннером.
В разделе «Страницы» добавьте папку и создайте в ней страницы, на которых будут расположены баннеры.
Затем добавьте блок «Несколько вложенных страниц» на нужную страницу, выберите папку, укажите 1 место и сортировку в случайном порядке:
Когда пользователь зайдет на страницу, будет отображаться одна случайная страница из папки. При повторном посещении страницы будет показана другая случайная страница и так далее:
Несколько полезных приемов СSS для блоков конструктора страниц
В этой статье рассмотрим несколько простых приемов использования CSS в стандартных блоках конструктора страниц Getcourse.
Код из примеров достаточно просто скопировать и вставить в редактор стилей.
I. Заголовки
1. Меняем размер шрифта.
Бывают случаи, когда стандартные размеры шрифтов заголовков не подходят. Это легко исправить.
В примере выбран стандартный заголовок размером – 52.
2. Меняем толщину шрифта.
3. Меняем расстояние между символами.
4. Выделить слово
a) Можно через стандартный тег mark
б) Или с использованием класса.
Для этого в редакторе текста переходим в режим HTML и оборачиваем нужное слово или фразу в тег c классом “marked”
Удобный ресурс для генерации тени https://tamali.net/instrument/html-css/css-box-shadow/
Такое выделение можно использовать для любого текста, не только в заголовках.
5. Подчеркнуть слово
Для этого в редакторе текста переходим в режим HTML и оборачиваем нужное слово или фразу в тег c классом “underlined”
Такое подчеркивание можно использовать для любого текста, не только в заголовках.
6. Пометить заголовок слева
II. Текстовые блоки
1. Пометить блок с текстом слева
2. Скругляем углы
Задаем в настройках свойства для границы блока и дописываем в стили для скругления нужных углов.
3. Эффект при наведении
Задаем в настройках свойства для границы блока и фона блока, дописываем в стили эффекты при наведении.
4. Несколько разделенных текстовых блоков с общей обложкой
5. Разделитель в тексте
Можно интересно использовать стандартный разделитель
6. Задать свой цвет и размер галочке в списке (или поменять символ)
Или можно легко поменять символ списка на другой.
Символ можно выбрать на сайте https://unicode-table.com/
В строке поиска вводим искомый символ. Например “Роза” и копируем код css.
III. Кнопки и формы
1. Выделение кнопки при наведении.
Размер, скругление углов, цвет текста задается в стандартных настройках кнопки.
В стилях прописываем цвет границы (= цвету текста).
2. Скругление полей формы. Толщина и цвет границы.
3. Форма с 2 предложениями.
Хотите стать крутым специалистом по Геткурс? Ждём вас на нашем онлайн-курсе “Укротитель Геткурс”.
Css коды для геткурса
🚀 Бесплатно зарегистрируйте GetCourse
на 30 дней! 😃
Магазин скриптов для GetCourse
Внимание! Данные скрипты не работают в мобильном приложении Чатиум.
Кнопки WhatsApp и Viber в карточке пользователя
Стилизация вебинарной комнаты
Модуль премодерации сообщений в чате вебинара на GetCourse
Прогресс-бар этапа обучения
Импорт/экспорт страниц и уроков целиком
Показ в форме ближайшего потока со свободными местами
Превью файлов в Файловом хранилище
Персональная переадресация пользователей
Показ страницы оплаты сразу под формой (для вебинара)
Прогресс-бар с количеством пройденных уроков
Отображение результатов после тестирования
Кнопка для связи по WhatsApp для сайта
Ограничение выбора предложений в форме
Виджет GC-чата для любого сайта
Скрипт для кнопки:
Добавляет событие в календарь Google
Скрипт для проверки заполненности полей Виджета
Диаграмма отражающая количество пройденных уроков
Диаграмма отражающая кол-во оставшихся дней доступа к тренингу
1290
Прогресс-бар для тренинга с редактируемыми этапами
1490
Передача GET параметров из URL в поля формы
1490
Доступ в урок по паролю
Автоматическая смена даты старта вебинара/потока/продаж, которые проходят по определённым дням недели
Навигация (меню) в уроках тренинга на геткурс
В своих курсах мы применяем меню, чтобы пользователям было удобнее перемещаться между уроками.
Как делать подобную навигацию, опишем в этой статье.
I. Создаём и стилизуем меню.
В этой статье работаем с уроком, созданным в “Визуальном конструкторе”.
1. Создаём меню.
В режиме редактирования урока добавляем блок “Заголовок с раскрывающимся текстом”.
2. Редактируем блок.
Пишем заголовок и пункты меню.
К пунктам меню добавляем ссылки на уроки тренинга.
В стиле блока выставляем настройки как на картинке ниже. И задаём css-класс блока «menu»
На данном этапе наше меню выглядит так:
Пока всё тривиально и просто)
3. Стилизуем блок с меню.
Теперь немного украсим нашу навигацию, добавим css-стили.
Добавим к уроку блок «css-код» и запишем в него следующие стили.
Чтобы всё заработало как надо, добавим нужные классы к элементам.
К заголовку меню в режиме редактирования кода добавим код
Это будет иконка Открыть-Закрыть
А к списку пунктов меню класс «menu-list» и к активному пункту меню класс «active»
Теперь осталось только оживить нашу иконку “Открыть-закрыть”.
4. Добавляем скрипт.
Если вы всё сделали правильно, то у вас должно получиться так:
В таком варианте и в Chatium оно отображается корректно.
P.S. Можно сделать и так, чтобы меню открывалось поверх содержания урока. Если это интересно, то напишите об этом в комментариях к статье. Сделать это не сложно, но есть некоторые нюансы) Если будет запрос, то напишу об этом в отдельной статье.
II. Переносим меню в правую колонку.
Сделать вторую колонку в старом редакторе не представляло сложностей. Но сейчас этот способ редактирования уроков, увы, не доступен. Прибегнем для создания второй колонки к небольшой хитрости.)
1. Предварительная настройка
В режиме редактирования добавим в самом конце урока “Пустой блок”.
Зададим ему css-класс sidebar
Теперь преобразуем наше уже готовое меню. В стилях раздвинем блок на полную ширину.
2. Добавляем css-стили
В ранее созданный блок со стилями добавим в конец код для корректного отображения колонок.
Класс «center-block» – это класс блока, в котором находится основное содержимое урока.
До ширины экрана в 900 пикселей будет отображаться 2 колонки. Ширина центральной колонки – 70%, боковой – 30%.
Для более узких экранов вторая колонка отображаться не будет. Оба блока займут ширину в 100%.
3. Перемещаем меню в правую колонку.
Без скрипта здесь не обойтись) Поэтому добавляем ещё один блок для js кода или дописываем в уже созданный. Ниже сам скрипт.
Что делает этот код.
Во-первых, проверяет ширину экрана. Для ширины меньшей 900 пикселей скрипт дальше отрабатывать не будет. Это важно в том числе для корректной работы в Chatium.
Во второй части скрипта – вставляет блок с меню внутрь блока с классом “sidebar”. Затем добавляем этот блок после блока с классом “center-block”.
Резонен вопрос – зачем нужен этот промежуточный блок “sidebar”, если можно сразу использовать блок с меню.
Но, возможно, что вы захотите кроме меню добавить ещё какие-то блоки в правую колонку. Поэтому делать так будет правильнее. То есть, по аналогии – создаёте нужные блоки, добавляете их к блоку sidebar, а затем уже всё это перемещаете в правую колонку.
В итоге всех наших преобразований имеем следующую картину:
Универсальный скрипт переключения видимости блоков по таймеру для GetCourse
Делюсь еще один скриптом для таймеров в GetCourse. Выглядит он вот так:
Эта кроха позволяет вам единожды прописать себя в соответствующем поле таймера. После чего вы сможете легко управлять видимостью любого блока при помощи всего 2-х CSS классов (параметр есть в каждом блоке или элементе конструктора).
1) 
Чтобы таймер переключал видимость для блока, пропишите ему класс: skyjoom
2) Чтобы блок по умолчанию был спрятан, а по истечению времени показывался,
пропишите ему класс: hide
Вот и все. 
Дальше остается только управлять параметрами конструктора Геткурса, к которым вы привыкли.
Если вы не поняли хотя бы слово из того, что было написано выше, обязательно посмотрите видео. Я там все наглядно показываю!
Это нормально, что после того, как вы пропишите класс «hide», блок исчезнет. Поэтому перед тем как это делать, обязательно настройте блок до конца.
И еще! 
Скрипт может не подойти для других конструкторов, потому что использует библиотеки Bootstrap и jQuery (которые в Геткурсе подключены всегда)!
Понравилось? Поддержите статью кнопочкой 
«Мне нравится» и сохраняйте в закладки. А если вдруг вам нужна помощь с созданием страниц на Геткурсе, просто пишите в сообщения сообщества (такая услуга у нас есть). Творческих взлетов!