• A
  • A
  • A
  • АБВ
  • АБВ
  • АБВ
  • А
  • А
  • А
  • А
  • А
Обычная версия сайта

Cоставная статическая страница

Составная статическая страница создается в тех случаях, когда требуется сложная верстка. В ином случае рекомендуется использовать формат простой страницы. 

Для создания составной статической страницы необходимо проделать все те же шаги, что и для создания простой статической страницы. После заполнения основных полей переходим к полю "Вид страницы" (расположено над полем "Текст"). По умолчанию флажок установлен в положение "Простая". Кликаем на него и выбираем "Составная":

Слева расположены виджеты, отвечающие за формат размещения информации в том или ином блоке: текст, фото, видео... Справа — непосредственно поле для размещения виджетов и, соответственно, информации.

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

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

После размещения необходимой информации нажимаем "Сохранить" и обязательно проверяем, что получилось!

ВИДЖЕТЫ:

Текст

Для размещения текста нужно выбрать виджет "Фрагмент текста с заголовком".

После вставки текста его нужно обязательно выделить и нажать на панели инструментов кнопку Tx для очистки лишнего кода. Далее необходимо разбить текст на абзацы, для этого можно использовать клавишу Enter. В остальном принципы оформления текста те же, что и на простой статической странице.

Изображения

Вы можете разместить как одиночное изображение, так и фотогалерею.

При загрузке изображений обязательно помните, что сначала их необходимо оптимизировать

Видео

Видео сначала необходимо разместить на Youtube. Затем выбираете виджет "Видео", ставите галочку "Стороннее видео", в поле URL проставляете ссылку вида: https://www.youtube.com/embed/pWeQh4ocVUk/. Чтобы получить такую ссылку, находясь непосредственно на Youtube, нажимаете на кнопку «Поделиться» (она располагается под видео). Выбираете самый первый вариант – «Встроить». У вас откроется окно, где слева будет видео, а справа – встраиваемый код. Копируете оттуда значение c embed и вставляете эту ссылку в виджет. Если необходимо, можно добавить заголовок.

Якорь

Якорем называется закладка на определенном месте страницы, предназначенная для создания перехода к ней по ссылке. Чтобы создать якорь, необходимо переместить виджет "Якорь" в нужное место и прописать в нем латинскими буквами "имя якоря" (напр: anchor). В ссылке, по которой пользователь будет переходить в опеределенное место страницы, в поле "адрес" нужно прописать ссылку на страницу плюс имя якоря с символом решетки (#) впереди (напр: https://portal.hse.ru/#anchor).

Цветные блоки

Для оформления контента в виде цветных блоков нужно выбрать одноименный виджет. Регулируете количество блоков в строке – их может быть 2 или 3, нажимаете на кнопку "добавить", открывается окно, в котором вы прописывает заголовок, ссылку, боковое меню (если нужно), а также загружаете фоновую фотографию.

Пример:

Связанные материалы

Если нужно вынести на главную страницу материалы, которые связаны между собой какой-то общей темой, вы можете воспользоваться виджетом "Связанные материалы".

Например, у вас есть несколько интервью выпускников или студентов, вы ставите их фотографии (предварительно вырезав), подписи (ФИО, м.б. также краткий заголовок интервью) и ссылку.

Пример:

Список персон

Информацию о персонах можно представить на странице разными способами.

Горизонтальный список

Перемещаете виджет "Список персон". Заполняете поле "Заголовок". Выбираете вид "Список". Нажимаете "Добавить персону". Если персона из ВШЭ, то вводите ФИО, нажимаете "Найти" и выбираете нужного сотрудника из базы. Должность можно ввести вручную или выбрать из предлагаемого списка должностей. Фото и ссылка на личную страницу подтягиваются автоматически.

Если персона не из ВШЭ, то вы меняете положение «Из ВШЭ» на "Не из ВШЭ". Вручную вписываете фио и должность. Загружаете фото. После заливки фото обязательно нажимаете "Вырезать", чтобы выбрать область фотографии, которая будет показываться на странице. Это необходимо сделать, чтобы показывалось именно круглое фото, а не овальное. Если необходимо поставить ссылку с ФИО, вы ставите ее в поле URL

Пример:

Вертикальный список

Перемещаете виджет "Список персон". Заполняете поле "Заголовок". Выбираете вид "Список". Проставляете галочку "Отображать вертикальным списком". Нажимаете "Добавить персону". Если персона из ВШЭ, то вы вводите ФИО, нажимаете "Найти" и выбираете нужного сотрудника из базы. Должность можно ввести вручную или выбрать из предлагаемого списка должностей. В поле "Описание/контакты" добавляете необходимую информацию. Фото и ссылка на личную страницу подтягиваются автоматически.

Если персона не из ВШЭ, то вы меняете положение "Из ВШЭ" на "Не из ВШЭ". Вручную вписываете фио и должность. Загружаете фото. После заливки фото обязательно нажимаете "Вырезать", чтобы выбрать область фотографии, которая будет показываться на странице. Это необходимо сделать, чтобы показывалось именно круглое фото, а не овальное. В поле "Описание/контакты" добавляете необходимую информацию. Если необходимо поставить ссылку с ФИО, вы ставите ее в поле URL

Пример:

Одиночное круглое большое фото

Если вам нужно разместить одиночное большое фото с подписью и текстом, вы выбираете виджет "Список персон", заполняете поле "Заголовок", далее выбираете вид "Одиночный", стиль "Большое фото".

Если персона из ВШЭ, то вы вводите ФИО, нажимаете "Найти" и выбираете нужного сотрудника из базы. Должность можно ввести вручную или выбрать из предлагаемого списка должностей. В поле "Описание/контакты" добавляете необходимую информацию. Фото и ссылка на личную страницу подтягиваются автоматически.

Если персона не из ВШЭ, то вы меняете положение "Из ВШЭ" на "Не из ВШЭ". Вручную вписываете фио и должность. Загружаете фото. После заливки фото обязательно нажимаете "Вырезать", чтобы выбрать область фотографии, которая будет показываться на странице. В поле "Описание/контакты" добавляете необходимую информацию. Если необходимо поставить ссылку с ФИО, вы ставите ее в поле URL.

Пример:

Круглое большое фото в колонках

Если вы хотите разместить несколько подряд круглых фото в колонке, то перемещаете сначала виджет "Строка с колонками", а потом непосредственного в него добавляете виджет "Список персон". Выставляете ширину колонки "4", если вы хотите 3 персоны в ряд. Выставляете ширину колонки "3", если вы хотите 4 персоны в ряд. В сумме ширина всех колонок должна быть равна числу "12". Остальные действия – те же, что при размещении одиночного круглого фото.

Пример:

Карусель

Если у вас много персон, и вы хотите, чтобы они выстраивались в один ряд, то выбираете виджет "Список персон", заполняете поле "Заголовок", далее выбираете вид "Карусель". Нажимаете "Добавить персону". Если персона из ВШЭ, то вы вводите ФИО, нажимаете "Найти" и выбираете нужного сотрудника из базы. Должность можно ввести вручную или выбрать из предлагаемого списка должностей. Фото и ссылка на личную страницу подтягиваются автоматически.

Если персона не из ВШЭ, то вы меняете положение "Из ВШЭ" на "Не из ВШЭ". Вручную вписываете фио и должность. Загружаете фото. После заливки фото обязательно нажимаете "Вырезать", чтобы выбрать область фотографии, которая будет показываться на странице. Если необходимо поставить ссылку с ФИО, вы ставите ее в поле URL

Пример:

Хронология

С помощью виджета "Хронология" можно создать таймлайн или пошаговую инструкцию. Перемещаете из левой колонки виджет "Хронология". Если нужно сделать пошаговую инструкцию, то ставите галочку возле слова "Нумерация". Выбираете цвет, далее нажимаете "Добавить запись". В появившемся окне вписываете заголовок и текст, далее нажимаете опять "Добавить запись" за пределами окна. Если вам нужно добавить плашки (они выстраиваются в колонки), то нажимаете "Добавить запись" внутри окна.

Пример:



Партнеры

Чтобы разместить логотипы партнеров, нужно переместить из левой колонки виджет "Партнеры", заполнить поле "Заголовок", загрузить логотип, поставить ссылку и написать название компании-партнера. Логотипы встают в колонки по 4 в строке.

Пример:

Колонки

Если нужно разместить информацию в колонки, пожалуйста, не создавайте таблицу, пользуйтесь виджетом "Строка с колонками". У колонки нужно задать ширину. В сумме ширина всех колонок должна быть равна числу "12". Далее внутрь этого виджета нужно вставить другой виджет, в который вы будете непосредственно размещать информацию. Например, виджет "Фрагмент текста с заголовком".

Пример:

Соцсети

Если необходимо разместить иконки социальных сетей, нужно переместить из левой колонки виджет "Соцсети", нажать "Добавить запись", заполнить поле "Заголовок", поставить ссылку на соцсеть, а также выбрать из перечня нужную вам иконку. При необходимости иконки можно расположить по центру, поставив соответствующую галочку.

Пример:

Плашка

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

Пример:

Можно сделать плашки без цифры, тогда вы не ставите галочку около "Нумерация".

Пример:

Плашки можно поставить в колонки. Тогда предварительно нужно переместить виджет "Строка с колонками" (о том, как это сделать смотрите выше), а потом в него переместить виджет "Плашка с цифрой".

Пример:

Даты

Когда нужно красиво оформить даты мероприятия, воспользуйтесь виджетом "Связанные события". После того как вы переместили виджет, нажимаете "Добавить запись", далее заполняете поля "Число", "Месяц" и "Текст". Если вы хотите, чтобы между датами стояли стрелки, ставите галочку "Показывать стрелку".

Пример:

Цифра

Если в тексте нужно разместить блок со значимыми цифрами, то вы выбираете виджет "Цифра дня", перемещаете его, выбираете цвет цифры и текста и заполняете необходимые поля.

Пример:

Выпадайки

Если нужно разместить раскрывающийся цветной блок, то вы выбираете виджет "Набор с выпадайками". Нажимаете кнопку "Добавить блок", проставляете заголовок, в поле "Описание" ставите текст, который будет показываться до скрытого текста, в поле "Открывающийся текст" вписываете текст, который будет открываться по клику. Далее выбираете цвет блока.

Пример:

Если вам нужно просто сделать выпадающий список, то вы выбираете виджет "Набор с выпадайками 2". Нажимаете кнопку "Добавить блок", в поле "Заголовок" вписываете текст, по которому будут кликать, в поле "Открывающийся текст" вписываете текст, который будет открываться по клику.

Пример:

Кнопка

Если вам нужно создать кнопку, например "Регистрация", вы выбираете виджет "Декоратор", выбираете опцию "Кнопка", размещаете название кнопки и ссылку на страницу, на которую кнопка должна вести.

Пример:

Часто задаваемые вопросы

 

Чтобы разместить все вопросы на странице, надо выбрать виджет "Вопросы и ответы (FAQ)", нажать "Добавить вопрос" и заполнить поля "Вопрос" и "Ответ".

Пример: