This is a page for styled modules, beginning with the text module.
This is H2 text. Page title above is H1. Search engines expect page titles in H1 and short, descriptive text in H2.
Paul Smith’s styles
For many modules, you can skip the manual design phase by using the following codes. To use a Paul Smith’s style:
» open module settings (gear icon)
» click ‘Advanced’ tab
» paste text below under ‘CSS Class’
Paul Smith's styles – click to expand
Blurb Module
blurb--text-on-image
Blog Module
blog--green – Adds color bar to top of image and colors post title.
blog--navy-blue – Adds color bar to top of image and colors post title.
blog--orange – Adds color bar to top of image and colors post title.
Image Module
image--green
image--navy-blue
image--orange
Email Optin Module
optin--horizontal
Text Module
text--excerpt
text--green
text--navy-blue
text--orange
Section Module
section--dark-background – Darkens background image and makes foreground text white.
section--light-background – Lightens background image and makes foreground text black.
section--full-width-header-primary
Row Module
row--flush-top – Primarily used to make a logo inside a row to be even with the top of another column.
Call To Action Module
cta--button-green – CTA with dark green button styling
Button Module
button--green – Dark green styling for button
Fullwidth Menu Module
menu--force-desktop-view – Forces menu to stay in desktop view on mobile devices.
Samples:
Manual actions:
Title, button text, and body text
blurb--text-on-image
blurb–text-on-image
Manual actions:
Text, body (optional), and image
In Design tab, under Text, center text and select light
Will animate by default; can remove animation in Design tab
Note: max display width is 550 pixels
image–green
Adds green (or other colors in Paul Smith’s styles) bar to image module
Manual actions:
Upload/select image
text–green
text–green
Adds green (or other colors in Paul Smith’s styles) styling to text module
button–green
Manual actions (see examples):
Default
Design tab, center align
Advanced tab, custom CSS, main element: width: 100%;