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 (которые в Геткурсе подключены всегда)!

Понравилось? Поддержите статью кнопочкой «Мне нравится» и сохраняйте в закладки. А если вдруг вам нужна помощь с созданием страниц на Геткурсе, просто пишите в сообщения сообщества (такая услуга у нас есть). Творческих взлетов!

Источник