Each one of these boxes is optional
Imray nautical charts and books
Here is a primary page title banner
We've been busy giving Imray.com a redesign and a rebuild ready for the 2023 sailing season. This page introduces you to the CMS components you need to create your pages.
Example component
Pilot books, almanacs and cruising guides.
Example component
Plan your summer trip and share your adventure.
One COlumn one image component
This component looks great as a page header banner.
There are a few different options enabled with this component. This is an example of a primary banner. You can chose whether you want this component to have buttons or not, along with chosing the button class.
"I'm the same as the component above, but I look different."
tempm
18th August 2022 | h
Here is a full width text box with left aligned text.
This component is great for grabbing attention and circulating user traffic.
You might be highlight a new product update or a completely new digital product you want users to go and explore. Including buttons will help to keep their attention and push them to content they might not have otherwised discovered.
weqdwrd
Testing line breaks in this component. Does it work? Here is another line, will it be maintained?
qwdweded
Using the component CSS Class input.
By default each component will have a container (width) and a margin applied to it - to arrange each component on the page.
Cms component margins can be controlled by entering one the follwing into the 'CSS Class' input in the editor panel for the selected component;
- 'no-margin-top' if you want to remove the margin completely
- 'margin-top-8' for a small 8px margin or 'margin-top-72' for a big margin
- There's also these values in between, 16, 24 and 48.
- The same logic applies for the margin below the component.
You can also control the width of the container that the component sits in. By default, most components will have a maxium container width of 1366px applied to them - which for (most) laptop, tablet and mobile screens means these components will appear full width.
You can control this by entering either 'narrow-column' or 'super-narrow-column'. The super-narrow-column option is best used for long text sections, such as blog articles as this offers better readability and scanning for users.
This block of text doesn't have 'narrow-column' or 'super-narrow-column' applied.
Here is the component title
Here is the component body text
This cms component is called One Column Content with the 'narrow-column' class applied via the component editor panel. This text block also includes a rich text editor.
H1, H2 and H3 tags will all share this styling.
You can also add links to other pages in this text block too, they'll look like this.
This secction of text has the 'super-narrow-column' class applied.
This is much better for longer sections of text which the user will want to read, such as an information, policy page or blog article page. Narrow blocks of text are much better for visual scanning and readability when using larger devices.
The rich text editor allows you to change for text styling (Bold, Italic and Underline). You can also left, center or right align all or selected sections of text.
- You can also add lists inside these text blocks.
- Like this
The CMS component below is called the 'Three Column Container with Image'.
klhjbkhljb
khbhj
ljkkl;j
Encourage purchasing by highlighting a discount code or offer.
Create discount codes (SUMMER20) or offers and make them visible to users.
Three Column Container with Image
Let your users know what to expect with delivery.
With customers all over the world it's helpful to provide an average delivery time.
Three Column Container with Image
Reasure your users with information about support links.
A new site can feel like a big change for some users, and they may need your help.
Three Column Container with Image
