Chap
Composites

Chap comes with loads of built-in shortcodes that can be used to build UI. Typing the shortcodes out manually can be tedious. For that reason there are also composites which are combinations of various shortcodes to produce a good-looking UI element or a whole page.

Classic editor

If you have the “Chap Shortcodes” plugin installed, then you should see some additional buttons above the WordPress Classic editor:

The Shortcode button allows to insert any shortcode.

The Composite button allows to insert a whole collection of shortcodes. The composites come with image previews.

Tip
If you would like to keep the indentation of the shortcodes in the editor, then avoid switching to the Visual editor mode.
You can also disable the Visual editor entirely in your user settings:
Block editor

When using the new Block editor (Gutenberg) then composites can be inserted as shortcodes by adding the Composite block:

Alternatively the composite presets are also available in block form, by adding the Landing page preset or Content preset blocks:

Available composites
Page composites

Page composites are designed to be a layout and UI elements for a full page. Some of the composites come with a mix of multiple different UI elements that could display similar content, so preferred style can be chosen and rest discarded.

Slide composites

Slide composites are designed as slides for the Chap main slider, responsive down to mobile screen size (assuming default slider dimension settings).

Front page composites

Composites listed under the Front page tab can be used to create user interface for landing pages. They are designed to be used on a pages with Full width page template, which can be chosen on the right, from the Page Attributes metabox.

Vertical stripe segment

Front page composites are typically wrapped in an .ui.vertical.stripe.segment, as well as .ui.container to contain the contents to a reasonable maximum width (since a Full width page template does not do that automatically, to allow the background color of stripe segments to span the entire width of the page).

Vertical stripe segments provide increased font size, background, padding as well as a border separating them from each other.

Vertical stripe segments
Vertical stripe segment
Vertical stripe segment with contained content
Alternate vertical stripe segment has an alternate background color
[segment vertical stripe]Vertical stripe segment[/segment]
[segment vertical stripe]
  [container]Vertical stripe segment with contained content[/container]
[/segment]
[segment alternate vertical stripe]
  [container]Alternate vertical stripe segment has an alternate background color[/container]
[/segment]
Vertical stripe segment padding
Very tight vertical stripe segment
Tight vertical stripe segment
Regular vertical stripe segment
Padded vertical stripe segment
Very padded vertical stripe segment
[segment very tight vertical stripe]
  [container]Very tight vertical stripe segment[/container]
[/segment]
[segment tight alternate vertical stripe]
  [container]Tight vertical stripe segment[/container]
[/segment]
[segment vertical stripe]
  [container]Regular vertical stripe segment[/container]
[/segment]
[segment padded alternate vertical stripe]
  [container]Padded vertical stripe segment[/container]
[/segment]
[segment very padded vertical stripe]
  [container]Very padded vertical stripe segment[/container]
[/segment]
Notes
Vertical stripe segment's padding can be modified using very tight, tight, padded and very padded keyword classes.
Vertical stripe segment border
Borderless vertical stripe segment
Alternate borderless vertical stripe segment
Borderless vertical stripe segment
[segment borderless vertical stripe]
  [container]Borderless vertical stripe segment[/container]
[/segment]
[segment alternate borderless vertical stripe]
  [container]Alternate borderless vertical stripe segment[/container]
[/segment]
[segment borderless vertical stripe]
  [container]Borderless vertical stripe segment[/container]
[/segment]
Notes
Vertical stripe segment's separating border can be omitted by using the borderless class.
Vertical stripe segment size modifiers
Tiny vertical stripe segment
Medium vertical stripe segment
Big vertical stripe segment
[segment tiny vertical stripe]
  [container]Tiny vertical stripe segment[/container]
[/segment]
[segment alternate vertical stripe]
  [container]Medium vertical stripe segment[/container]
[/segment]
[segment big vertical stripe]
  [container]Big vertical stripe segment[/container]
[/segment]
Notes
Standard segment size modifiers, such as mini, tiny, small, medium, large, bug, huge and massive can be applied.
Vertical stripe segment colors
Inverted vertical stripe segment
Secondary vertical stripe segment
Inverted blue vertical stripe segment
Tertiary vertical stripe segment
[segment inverted vertical stripe]
  [container]Inverted vertical stripe segment[/container]
[/segment]
[segment secondary vertical stripe]
  [container]Secondary vertical stripe segment[/container]
[/segment]
[segment inverted blue vertical stripe]
  [container]Inverted blue vertical stripe segment[/container]
[/segment]
[segment tertiary vertical stripe]
  [container]Tertiary vertical stripe segment[/container]
[/segment]
Notes
Standard segment color modifiers can be used.