Categories

Новые шаблоны

Cherry Framework 4. Как использовать шорткоды сетки (колонок)

Stacy Martin Август 21, 2015
Rating: 4.7/5. From 3 votes.
Please wait...

Из этого туториала Вы узнаете, как использовать шорткоды сетки (Grid Shortcodes) в Cherry Framework 4.

Cherry Framework 4. Как использовать шорткоды сетки (колонок)

Шорткоды сетки позволяют распределить содержимое сайта в ряды и колонки.

  1. Для того чтобы вставить шорткод в страницу, используйте кнопку Вставить шорткод (Insert Shortcode) в редакторе Страницы (Page) или Записи (Post) в админ панели WordPress (WordPress Dashboard):

    Cherry Framework 4. How to use grid (columns) shortcodes-1

    Выберите «Сетка» (Grid) в фильтре по типу:

    Cherry Framework 4. How to use grid (columns) shortcodes-2

  2. Для того чтобы отобразить колонки в одной строке, их нужно обернуть в шорткод Строка (Row):

    Cherry Framework 4. How to use grid (columns) shortcodes-3

    Этот шорткод включает следующие настройки:

    • Тип ширины: выберите фиксированную или полную ширину для отображения содержимого;

    • Якорная ссылка: (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) – позволяет сохранить пользовательские настройки шорткода для содержимого. Вы можете сохранить текущие настройки шорткода в этой опции.

  3. Шорткод Внутренняя строка (Row Inner) позволяет создать вложенные строки на странице. Настройки шорткода для вложенной строки аналогичны настройкам для шорткода строки.

  4. Шорткод Колонка (Column) используется для построения макета страницы с несколькими колонками в строке. Для данного шорткода доступны следующие настройки:

    Cherry Framework 4. How to use grid (columns) shortcodes-4

    • Размер (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) – позволяет сохранить пользовательские настройки шорткода для содержимого. Вы можете сохранить текущие настройки шорткода в этой опции.

  5. Шорткод Вложенная колонка (Column inner) позволяет строить вложенные колонки при помощи шорткодов. Настройки шорткода Вложенная колонка (Column Inner) аналогичны настройкам шорткода Колонка (Column).

  6. Шорткод Очистить (Clear) сбрасывает позиционирование (float) элементов. В результате этого следующий за колонкой блок содержимого отобразится под колонкой.
    Вы можете также назначить пользовательский класс для этого шорткода.

  7. Шорткод «Блок» (Box) оформят часть контента на странице в блок:

    Cherry Framework 4. How to use grid (columns) shortcodes-5

    • Доступные стили блока: (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) – позволяет сохранить пользовательские настройки шорткода для содержимого. Вы можете сохранить текущие настройки шорткода в этой опции.

  8. Шорткод «Вложенный блок» (Box Inner) позволит Вам добавить вложенное содержимое в блоки. Настройки данного шорткода аналогичны настройкам шорткода «Блок» Box.

  9. Шорткод Пробел (Space) используется для создания дополнительного вертикального отступа между блоками.

Вы можете также ознакомиться с детальным видел-туториалом ниже:

Cherry Framework 4. Как использовать шорткоды сетки (колонок)

Темы для Вордпресс
Эта запись была размещена в Monstroid туториалы, WordPress туториалы и помечена как CherryFramework4, column, grid, shortcode. Добавьте в закладки постоянную ссылку.

Submit a ticket

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