Composites

Chap comes with loads of built-in shortcodes to use. But typing the shortcodes out manually can be tedious or you may not know how to properly combine them. For that reason there are also composites which are combinations of various shortcodes to produce a good-looking UI element or a whole page.

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

Insert composite button

The Shortcode button allows to insert any shortcode. Some of them also have presets.

The Composite button allows to insert a whole collection of shortcodes. The composites come with descriptive pictures so you know what you’re getting.

Inserting a composite

If you would like to keep the indentation of the shortcodes in the editor, then avoid switching to the Visual editor.

WordPress editor text mode

You can also disable the Visual editor entirely in your user settings:

WordPress administrator dashboard Your Profile
Disabling visual editor in WordPress admin dashboard Profile options
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.

page-about
page-contact
page-faq
page-plans
page-portfolio
page-services
page-team
page-team-2
page-testimonials
Slide composites

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

slide-basic
slide-call-to-action
slide-form
slide-jumbotron-long
slide-jumbotron-short
slide-newsletter-signup
slide-piled-segment
slide-product
slide-search
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.

action-image-segment
available-features
call-to-action
call-to-action-2
call-to-action-row
feature-columns
feature-columns-2
hero-1
info-sections
horizontal-gallery
jumbotron-text-image
newsletter-signup
newsletter-signup-2
paragraph-grid
paragraph-grid-2
paragraph-grid-3
stacked-paragraphs
statistics
woocommerce-products
woocommerce-products-2
app-hero
icon-feature-segments
post-cards
trial-form

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.

One response to “Composites

Leave a comment

Your email address will not be published. Required fields are marked *