This topic contains the reference information you need to know when working with components in the Content Management system

CMS Settings Tab

Under the CMS settings tab there are three options:

Structure
Revisions
Page Settings

They are used for the following actions:

Structure

This allows you to see the structure of the CMS page, you can see all the components and see where they appear in the structure. You can click on the component and edit it directly.

Revisions

The revisions tab allows you to find a saved copy of the page that has been worked on and click update, the saved copy can then be edited in the main panel.

Settings

The settings section allows you to update the sites meta information or to set full width mode.

CMS top panel

The top panel is broken into 3 sections: Modes, Views and Save and publish.

Modes

The modes are different settings when you are building a page:

X ray Mode This mode adds in all the invisible structure as tiny grey lines it is useful to check whether components are correctly positions and to check the layout. There is also different colour links to show the columns.
Layout Mode This links to the build layout section so more layouts can be added.
Builder Mode This is the normal mode for creating a page.
Preview Mode This shows the components how they will appear on the front end and removes the padding.

Views

The views show how the page will look on different devices, it can be useful to check for stacking and for mobile images.

Desktop the desktop icon shows what the page will look like on desktop.
Tablet the tablet icon shows what the page will look like on tablet.
Mobile the mobile icon shows what the page will look like on mobile.

Save and publish

This section of the top panel controls the save and publish.

Full screen mode this controls the admin, in Full screen Mode it removes the top admin nav and gives you more room on the editor
Undo This undoes the last change made (circular back arrow)
Clear Revision This clears any revisions made to the page and takes it back to the published version. (dustbin)
Save Revision This Saves the revision and will create a revision that can be accessed for the revisions section in the top tab. This should be done before selecting to publish the page.
Publish Options
Live Preview This shows how the page will look by showing a version on the sites preview site, this is a good check to do before publishing a page.
Publish When a page is new Publish will allow you to set the relative URL and the scheduled go live date, for updating a page, Publish and Go Live will appear and this will update the already live page, sometimes this can take a little while for the changes to pull through if elements of the page are cached.

Basic

Empty block This Component is a placeholder when you need to add additonal padding to a component or put other components within a block

Link Block This component is used if you want to link internal content and add url to something such as an image.

Flex Block This component is available to be added to admins. It allows you to layout the page and center items.

Typography

Text This is used for adding text to a page, this box will accept basic html.

Heading This is used for adding a heading to a page, heading type can be selected from H1 to H6

Markdown This box allows you to use markdown language in it, there is a link to a Markdown cheat sheet in the component.

Text Link This component allows you to add a text link, this can just be text or can be styled like a button that follows your sites css. To change the size of the button make sure the display settings are set to inline block.

Media

Image This component is used to add an image to the page.

You can combine an image with a link block to make the banner link, see this how to video:

Hotspot This component combines links and images. The Hotspot component allows you to select part of an image and link that. The hotspot component can be nested in a link block if you want the background image to link to something else.

Youtube This component is use to embed a Youtube video on the page. This is done by adding the embed code to the code box.

Components

Card This component is allow you to add a card of information to a page

Collapse This is the card component but with the option to collapse the information into the header. There is the option to start the card open or closed.

CSV table This component allows you to add a table to your page.

Carousel This component is how to build a carousel. Drag this component to get all the controls for a carousel. To add content in the carousel, add a carousel slide.

Here is a how to video for the carousel component:

Carousel Slide The carousel slide is for each slide within a carousel. It is a placeholder for you to drag in other components such as an image or a custom banner.

Countdown Timer This component is used to add a countdown timer to the page. You can set an end date then decide whether to show Days, hours, minutes or seconds or a combination.

Overhang Carousel This works the same as a carousel, except the image is designed to half overhang the edge of the page.

Form Components The below form components, can be designed to add a form to the page. Forms need to be added in consultation with your developer to ensure you have a datebase to store form submissions.

Input

Label

First Name

Last Name

Custom Field 1

Custom Field 2

Custom Field 3

Custom Field 4

Custom Field 5

Submit Button

Mobile Number

Custom Components

Custom Banner The custom banner component allows you to combine a linked image banner and live text to create a custom banner. These can be placed alone or used within a carousel slide on a carousel.

Please see the quick how to video for how the custom banner works:

Hero Grid As part of the custom components, there is the option to add a hero grid. This is a type of grid with one large block on one side and double length block on the other then 2 blocks underneath.

Hero Grid

This can be left or right aligned

Video Block This component allows you to add a video from a url without using youtube

Custom Banner Video This component allows you to add a video from a url within a custom banner

Custom banner carousel This is the carousel to use to contain custom banners

Instagram post This component has a box that lets you add instagram embed code, please remove script tags first.

USP Banner This allows you to upload a banner for the USP.

Product Tile The component allows you to add a Product to be displayed on the page, it has a dropdown for product selection

Product Carousel This component allows you to add a product list to be displayed on the page, there is a dropdown list to show which category the products should be pulled from.

Homepage Grid This component allows you to add a grid layout to your page, by specifying the number of items in the grid and the column size. Please see this video on how it works:

Note

If you see a component on the list that you don't see in your Remarkable Commerce admin, please contact us for more information

Generic CMS Components

All of the CMS components are able to be controlled using the following controls. Individual components have options that are specific to them but all will include the following options:

General

cms general

Selectors

In this box you can add classes that are defined elsewhere on the site to a specific page

ID

ID is used to direct user to an element of the page or identify it for future use, so you can link to this aspect of the page

Styles

Styles are used to add a specific style not predefined in a class. You can add style settings which can be applied against any component. Below are a list of styles you can add:

Margin (either just "margin:" or specific sides of a component like "margin-top:" or "margin-left:")
Padding (either just "padding:" or specific sides of a component like "padding-top:" or "padding-left:")
Max Width
Font
Border
ID

Here are some examples:

max-width: 352px!important; margin-bottom: 0 auto; padding-top: 30px;

There are two ways to centre an element using css depending on what it is. To centre an image use margin:auto; to centre text or markdown you can use text-align: center;

To make a component go all the way to the edge of the screen add:

margin-left:-15px;margin-right:-15px

CMS Features

On this page