- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
Cherry Framework 4. Как использовать шорткоды сетки (колонок)
Август 21, 2015
Из этого туториала Вы узнаете, как использовать шорткоды сетки (Grid Shortcodes) в Cherry Framework 4.
Cherry Framework 4. Как использовать шорткоды сетки (колонок)
Шорткоды сетки позволяют распределить содержимое сайта в ряды и колонки.
-
Для того чтобы вставить шорткод в страницу, используйте кнопку Вставить шорткод (Insert Shortcode) в редакторе Страницы (Page) или Записи (Post) в админ панели WordPress (WordPress Dashboard):
Выберите «Сетка» (Grid) в фильтре по типу:
-
Для того чтобы отобразить колонки в одной строке, их нужно обернуть в шорткод Строка (Row):
Этот шорткод включает следующие настройки:
-
Тип ширины: выберите фиксированную или полную ширину для отображения содержимого;
-
Якорная ссылка: (Anchor) позволяет создать якорь-ссылку для содержимого, которое отображено при помощи определённого шорткода;
-
Класс: создайте пользовательский класс css для шорткода и задайте для него пользовательские правила css;
-
Доступные стили: (Styling preset) – выберите один из доступных стилей;
-
Тип фона (Background Type) — эта опция добавляет цветовой фон, фоновое видео или изображение;
-
Цвет фона (Background Color) – задаёт цвет фона, если эта настройка выбрана в опции «Тип фона»;
-
Изображение фона (Background Image) — задаёт изображение фона, если эта настройка выбрана в опции «Тип фона»;
-
Позиция фонового изображения — наследует настройки css свойства «позиция фона» (background-position);
-
Повторение фонового изображения (Background image repeat) – наследует настройки css свойства «повторение фона» (background-repeat);
-
Тип добавления фонового изображения (Background image attachment) — задаёт, является ли позиция фонового изображения фиксированной, или оно прокручивается вниз вместе со страницей;
-
Содержимое: (Content) – введите содержимое, которое Вы хотели бы отображать в шорткоде Box;
-
Предпросмотр (Live preview) покажет, как содержимое будет выглядеть на вашем сайте, то есть Вы всегда можете отредактировать внешний вид шорткода перед публикацией;
-
Предустановка (Preset) – позволяет сохранить пользовательские настройки шорткода для содержимого. Вы можете сохранить текущие настройки шорткода в этой опции.
-
-
Шорткод Внутренняя строка (Row Inner) позволяет создать вложенные строки на странице. Настройки шорткода для вложенной строки аналогичны настройкам для шорткода строки.
-
Шорткод Колонка (Column) используется для построения макета страницы с несколькими колонками в строке. Для данного шорткода доступны следующие настройки:
-
Размер (Size) – задаёт ширину колонок для разных разрешений экрана. Настройка «Размер» использует систему сетки (grid): Вы можете выбрать размер элемента в пределах от 1 до 12;
-
Отступ (Offset) – определяет левое поле колонок;
-
Опция перетягивания элементов (Pull and Push ) задаёт порядок колонок;
-
Сбросить (Collapse) отступы колонок — эта настройка сбросит отступы колонок;
-
Класс: (Class) – назначьте пользовательский класс css для шорткода и задайте для него пользовательское правило css;
-
Тип фона (Background Type) — эта опция добавляет цветовой фон, фоновое видео или изображение;
-
Доступные стили: (Styling preset) – выберите один из доступных стилей;
-
Цвет фона (Background Color) – задаёт цвет фона, если эта настройка выбрана в опции «Тип фона»;
-
Изображение фона (Background Image) — задаёт изображение фона, если эта настройка выбрана в опции «Тип фона»;
-
Позиция фонового изображения (Background image position)- наследует настройки css свойства «позиция фона» (background-position);
-
Повторение фонового изображения (Background image repeat) – наследует настройки css свойства «повторение фона» (background-repeat);
-
Тип добавления фонового изображеиня (Background image attachment) — задаёт, является ли позиция фонового изображения фиксированной, или оно прокручивается вниз вместе со страницей;
-
Содержимое: (Content) – введите содержимое, которое Вы хотели бы отображать в шорткоде "Блок" (Box);
-
Предпросмотр (Live preview) — покажет, как содержимое будет выглядеть на вашем сайте, то есть Вы всегда можете отредактировать внешний вид шорткода перед публикацией;
-
Предустановка (Preset) – позволяет сохранить пользовательские настройки шорткода для содержимого. Вы можете сохранить текущие настройки шорткода в этой опции.
-
-
Шорткод Вложенная колонка (Column inner) позволяет строить вложенные колонки при помощи шорткодов. Настройки шорткода Вложенная колонка (Column Inner) аналогичны настройкам шорткода Колонка (Column).
-
Шорткод Очистить (Clear) сбрасывает позиционирование (float) элементов. В результате этого следующий за колонкой блок содержимого отобразится под колонкой.
Вы можете также назначить пользовательский класс для этого шорткода. -
Шорткод «Блок» (Box) оформят часть контента на странице в блок:
-
Доступные стили блока: (Box styling preset) – выберите один из доступных стилей;
-
Тип фона (Background Type) — эта опция добавляет цветовой фон, фоновое видео или изображение;
-
Цвет фона (Background Color) – задаёт цвет фона, если эта настройка выбрана в опции «Тип фона»;
-
Изображение фона (Background Image) — задаёт изображение фона, если эта настройка выбрана в опции «Тип фона»;
-
Позиция фонового изображения — наследует настройки css свойства «позиция фона» (background-position);
-
Повторение фонового изображения (Background image repeat) – наследует настройки css свойства «повторение фона» (background-repeat);
-
Тип добавления фонового изображения (Background image attachment) — задаёт, является ли позиция фонового изображения фиксированной, или оно прокручивается вниз вместе со страницей;
-
Заполнение (Fill) – задаёт размер равный родительскому элементу, который содержит блок;
-
Содержимое: (Content) – введите содержимое, которое Вы хотели бы отображать в шорткоде Box;
-
Класс: (Class) – назначьте пользовательский класс css для шорткода и задайте для него пользовательское правило css;
-
Предпросмотр (Live preview) покажет, как содержимое будет выглядеть на вашем сайте, то есть Вы всегда можете отредактировать внешний вид шорткода перед публикацией;
-
Предустановка (Preset) – позволяет сохранить пользовательские настройки шорткода для содержимого. Вы можете сохранить текущие настройки шорткода в этой опции.
-
-
Шорткод «Вложенный блок» (Box Inner) позволит Вам добавить вложенное содержимое в блоки. Настройки данного шорткода аналогичны настройкам шорткода «Блок» Box.
-
Шорткод Пробел (Space) используется для создания дополнительного вертикального отступа между блоками.
Вы можете также ознакомиться с детальным видел-туториалом ниже:
Cherry Framework 4. Как использовать шорткоды сетки (колонок)