Scroll

Виджеты: Базовые

1. Текст
2. Изображение
3. Кнопка
4. Разделитель
5. Интервал
6. Меню
7. Форма связи

Текст

С помощью данного виджета можно создать текстовый блок на странице сайта. После этого его можно редактировать или удалить.

Высота виджета по умолчанию составляет 30 пикселей. В дальнейшем она будет изменятся в зависимости от высоты текста внутри виджета.

Если в одном контейнере или в ряду находится рядом более одного текстового блока, то активный, в котором проходит работа, будет выделен серым цветом, а неактивный - прозрачным.
text12.png text13.png

При редактировании текстового блока используется CKEditor._____________3.png

Он обладает широкими возможностями при работе с текстом - изменение размера и цвета текста, его положение и др.
Cтили текста - функция, которая дает возможность использовать ранее созданный стиль текста, а не задавать его вручную для каждого текстового блока отдельно.
Форматирование позволяет применять внутри текста стили заголовков. Доступны следующие варианты: Нормальное, Заголовок 1, Заголовок 2, Заголовок 3, Моноширинное. По умолчанию используется значение "Нормальное".
Размер шрифта - определяет размер шрифта.
При необходимости текст можно выровнять. Доступны 4 положения: "Выравнивание по левому краю", "Выравнивание по центру", "Выравнивание по правому краю", "Выравнивание по ширине".text align.png

Чтобы изменить цвет текста, необходимо нажать на кнопку "А".
text9.png

В результате откроется палитра цветов. В ней представлено 25 предустановленных и 5 дополнительных цветов. Любой из них можно заменить, нажав на кнопку "Больше цветов".
____12.png

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

Чтобы создать действие при нажатии на текст, нужно нажать на кнопку "Вставить/Редактировать ссылку". Если нужно избавится от такого действия, то нужно нажать на кнопку "Удалить ссылку".
redirect link.png

Поле "Ссылка" определяет действие, которое будет выполнятся.  Доступны следующие варианты: Открыть страницу, Открыть блог, открыть запись, Открыть URL, Отправить email, Открыть в лайтбоксе, Открыть файл.
Чтобы изменить отступ текста, нужно нажать на соответствующую кнопку.
text14.png

Можно создать два варианта списка - с цифровыми или графическими метками.text15.png

Чтобы полностью избавится от форматирования, необходимо нажать на кнопку "Ax".
text16.png

Раздел Анимация позволяет выбирать различные анимационные эффекты появления для выбранного виджета.

Свойства

"Отступы" регулируют расстояние содержимого от границы виджета с четырех сторон. Доступны 5 вариантов: "Авто", "0", "Маленький", "Средний", "Большой". По умолчанию используется значение "Авто".
____4.png

При нажатии на название типа отступа открывается список с доступными вариантами. Достаточно просто выбрать нужный, кликнув на нем мышкой в списке.
____5.png 

Изображение

С помощью этого виджета можно размещать и использовать на страницах сайта изображения.

_____2.png

Свойства виджета "Изображение" делятся на два раздела - "Настройки" и "Дизайн".
"Настройки" - содержит все основные настройки изображения. К ним относятся "Картинка", "Ссылка", "Заголовок", "Alt текст", "Адаптивность", "Выравнивание""Отступы" и "Анимация".

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

После этого откроется медиатека, где нужно будет повторно указать изображение и нажать на кнопку "Применить".
При добавлении картинки из Медиатеки на страницу сайта Вы можете выбрать необходимый размер картинки (для этого Вам нужно создать виджет "Изображение" на странице сайта, чтобы автоматически открылась нужная секция Медиатеки). Существует 5 размеров картинки: Оригинал, Малый, Средний, Большой, Очень большой (HD) (размер зависит от пропорций каждой отдельной картинки). Вы можете выбрать любой размер картинки, если она отвечает необходимому размеру.
Малый - 125*125рх
Средний - 300*300px
Большой - 1200*1200рх
Очень большой (HD) - 1980*1980px

Следует помнить, что поля "Заголовок"  и "Alt" заполнятся автоматически. Они будут взяты из настроек изображения в Медиатеке.
При помощи выпадающего списка "Ссылка" можно задать действие, которое будет выполнятся при клике мышкой по изображению. Доступны 4 варианта: "Не выбрано", "Открыть страницу", "Открыть URL" и "Отправить email".
"Не выбрано" - действие по клику по изображению выполняться не будет.
_____5.png

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

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

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

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

"Отправить email" - открывает почтовый клиент с открытой формой отправки письма.

"Открыть в лайтбоксе" - предоставляет возможность открыть изображение в своем исходном размере. Для выбора картинки для лайтбокса необходимо нажать на "+" и выбрать необходимую картинку из Медиатеки.

"Открыть файл" - предоставляет возможность открыть файл из Медиатеки при нажатии на ссылку. Для добавления файла необходимо нажать на "+" и выбрать необходимый файл из Медиатеки.

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

"Alt текст" - это еще один важный параметр изображения. У него две роли. Во-первых, это один из метатегов изображения (наряду с с заголовком). Во-вторых, если в браузере отключен просмотр изображений и других медиафайлов, то на месте изображения будет отображаться именно текст из этого поля.  Alt индексируется поисковыми роботами.
_____9.png

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

"Выравнивание" - параметр, который позволяет определить положение изображения в контейнере или ряду. Доступны 3 варианта - "Справа", "Слева" и "Центрировать".

"Отступы" регулируют расстояние содержимого от границы виджета с четырех сторон. Доступны 5 вариантов: "Авто", "0", "Маленький", "Средний", "Большой". По умолчанию используется значение "Авто".
____4.png

При нажатии на название типа отступа открывается список с доступными вариантами. Достаточно просто выбрать нужный, кликнув на нем мышкой в списке.
____5.png

Раздел Анимация позволяет выбирать различные анимационные эффекты появления для выбранного виджета.

Раздел "Дизайн" содержит настройки внешнего вида виджета.
"Пресет"  - список созданных ранее настроек. Подробнее об этом можно прочитать в этой статье.
 

Кнопка

"Кнопка" - это виджет, который позволит создать кнопку на сайте. Его свойства делятся на два раздела - "Настройки" и "Дизайн".

Раздлел "Настройки" содержит основные настройки кнопки. К ним относятся "Ссылка", "Размер", "Отступы", "Адаптивность""Выравнивание" и "Анимация".
При помощи выпадающего списка "Действие" можно задать действие, которое будет выполнятся при нажатии на кнопку. Доступны такие варианты: "Не выбрано", "Открыть страницу", "Открыть блог", "Открыть запис""Открыть URL""Отправить email", "Открыть в лайтбоксе" и "Открыть файл".
"Не выбрано" - действие при нажатии на кнопку выполняться не будет.
_____5.png

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

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

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

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

"Отправить email" - открывает почтовый клиент с открытой формой отправки письма.

"Открыть в лайтбоксе" - предоставляет возможность открыть изображение в своем исходном размере. Для выбора картинки для лайтбокса необходимо нажать на "+" и выбрать необходимую картинку из Медиатеки.

"Открыть файл" - предоставляет возможность открыть файл из Медиатеки при нажатии на ссылку. Для добавления файла необходимо нажать на "+" и выбрать необходимый файл из Медиатеки.

"Размер" - параметр, который позволит задать размер кнопки. Доступно 3 варианта - "Большой", "Средний" и "Маленький". По умолчанию используется вариант "Средний". Размер шрифта определяется автоматически при изменении размера кнопки. Пример можно увидеть ниже.

"Отступы" регулируют расстояние содержимого от границы виджета с четырех сторон. Доступны 5 вариантов: "Авто", "Нет", "Мало", "Средне", "Много". По умолчанию используется значение "Авто".
____4.png

При нажатии на название типа отступа открывается список с доступными вариантами. Достаточно просто выбрать нужный, кликнув на нем мышкой в списке.
____5.png

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

"Выравнивание" - параметр, который позволяет определить положение изображения в контейнере или ряду. Доступны 3 варианта - "Справа", "Слева" и "Центрировать".
_______3.png

Раздел Анимация позволяет выбирать различные анимационные эффекты появления для выбранного виджета.

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

Разделитель

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

Свойства виджета "Разделитель" делятся на два раздела - "Настройки" и "Дизайн".
Раздел "Настройки" включает в себя следующие настройки: "Ширина", "Адаптивность""Выравнивание""Отступы", "Выравнивание" и "Анимация".
"Ширина" - параметр, отвечающий за ширину разделителя. Его размер задается в процентном соотношении (по отношению к ширине ряда или контейнера). По умолчанию используется 100% (т.е. линия расположена по всей длине элемента структуры).
div_3.png

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

"Выравнивание" - параметр, который позволяет определить положение изображения в контейнере или ряду. Доступны 3 варианта - "Справа", "Слева" и "Центрировать".
div_4.png

"Отступы" регулируют расстояние содержимого от границы виджета с четырех сторон. Доступны 5 вариантов: "Авто", "0", "Маленький", "Средний", "Большой". По умолчанию используется значение "Авто".
____4.png

При нажатии на название типа отступа открывается список с доступными вариантами. Достаточно просто выбрать нужный, кликнув на нем мышкой в списке.
____5.png

Раздел Анимация позволяет выбирать различные анимационные эффекты появления для выбранного виджета.

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

Интервал

Данный виджет позволяет создавать интервал между объектами на странице сайта.

Свойство Высота позволяет настроить высоту виджета (от 10 до 999px).

"Отступы" регулируют расстояние содержимого от границы виджета с четырех сторон. Доступны 5 вариантов: "Авто", "0", "Маленький", "Средний", "Большой". По умолчанию используется значение "Авто".
____4.png

При нажатии на название типа отступа открывается список с доступными вариантами. Достаточно просто выбрать нужный, кликнув на нем мышкой в списке.
____5.png 

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

Чтобы использовать меню на странице, необходимо предварительно разместить на ней "Контейнер" или "Ряд", в который и нужно будет перетащить "Меню".
"Меню" - это виджет, который позволит создать кнопку на сайте. Его свойства делятся на два раздела - "Настройки" и "Дизайн".
В разделе "Настройки" содержится два параметра - "Все меню", "Адаптивность", "Выравнивание""Отступы" и "Анимация".

"Все меню" - выпадающий список, в котором можно выбрать содержимое меню. Чтобы приступить к его редактированию, следует нажать на соответствующую кнопку "Редактировать".

"Отступы" регулируют расстояние содержимого от границы виджета с четырех сторон. Доступны 5 вариантов: "Авто", "0", "Маленький", "Средний", "Большой". По умолчанию используется значение "Авто".
____4.png

При нажатии на название типа отступа открывается список с доступными вариантами. Достаточно просто выбрать нужный, кликнув на нем мышкой в списке.
____5.png

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


"Выравнивание" - параметр, который позволяет определить положение изображения в контейнере или ряду. Доступны 3 варианта - "Справа", "Слева" и "Центрировать".

Раздел Анимация позволяет выбирать различные анимационные эффекты появления для выбранного виджета.

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

Чтобы создать новое меню, необходимо нажать на кнопку "Создать новое меню".

Далее необходимо будет указать имя для меню, а затем нажать кнопку "Добавить".

ВАЖНО: стандартное меню можно только дублировать, удалить его не получится.
Чтобы продублировать меню, необходимо нажать на кнопку "Дублировать".
duplicate.png

Продублированное или новое меню можно удалить или продублировать.
Чтобы удалить меню, необходимо нажать кнопку "Удалить".
remove.png

Чтобы добавить новый пункт меню, необходимо нажать кнопку "Добавить новый пункт меню".

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

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

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

"Открыть URL" - действие, которое позволит реализовать при клике мышкой по изображению переход по ссылке. Ссылку необходимо указать дополнительно в поле "URL".

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

"Открыть в лайтбоксе" - предоставляет возможность открыть изображение в своем исходном размере. Для выбора картинки для лайтбокса необходимо нажать на "+" и выбрать необходимую картинку из Медиатеки.

"Открыть файл" - предоставляет возможность открыть файл из Медиатеки при нажатии на ссылку. Для добавления файла необходимо нажать на "+" и выбрать необходимый файл из Медиатеки.

"Введите якорь" - позволяет автоматически перенаправлять пользователя в нужное место на странице при нажатии на ссылку с якорем страницы.
Чтобы добавить пункт меню, необходимо нажать кнопку "Добавить".

Чтобы отредактировать пункт меню, необходимо нажать на кнопку "Редактировать".
45.png

Чтобы удалить пункт меню, необходимо нажать кнопку "Удалить".
remove.png

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

Если переместить пункт меню, то все его пункты подменю переместятся вместе с ним.
13.png
Пункт подменю можно поднять на уровень выше, для этого необходимо зажать его левой кнопкой мышки и перетащить в нужное место.
14.png 

Форма связи

Данный виджет позволяет Вам получать письма на личную электронную почту от посетителей сайта.

Форма обратной связи разделена на две основные категори: Настройки и Дизайн.
 

Отправлять к - в данном поле необходимо указать email, куда будут отправляться письма. Если поле пустое, то письма будут отправляться на почтовый ящик, который указан в профиле пользователя.

"Отступы" регулируют расстояние содержимого от границы виджета с четырех сторон. Доступны 5 вариантов: "Авто", "0", "Маленький", "Средний", "Большой". По умолчанию используется значение "Авто".
____4.png

При нажатии на название типа отступа открывается список с доступными вариантами. Достаточно просто выбрать нужный, кликнув на нем мышкой в списке.
____5.png

Раздел Анимация позволяет выбирать различные анимационные эффекты появления для выбранного виджета.

Форма обратной связи разделена на 6 основных полей: Имя, Email, Телефон, Адрес, Тема, Прикрепить файл и Сообщение. Вы можете сделать поле обязательным для заполнения, нажав на звездочку в правой верхней части поля.

Настройки формы позволяют редактировать статус сообщения. На данный момент представлены такие поля: Отправить, Сообщение отправлено, Ошибка отправки, Сообщение при ошибке в обязательном поле и Некорректный email.

Дизайн

Данная секция позволяет выбрать различный набор настроек, который влияет на стиль оформления формы обратной связи, а также возможность выбора стиля, размера и расположения кнопок формы. Набор настроек зависит от выбранной Темы.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 1 из 2
Еще есть вопросы? Отправить запрос

Комментарии