Hello CordiS!!!

Desktop Ad
CordiS © cordis is CordiSIt's Section #5!
Section 5

Setting up your Runner's design

{}!!!Included Posts #1
  • cordissy-001 (0 stars)
    Cordis Sy-001 (0 stars)
Included Posts #1
  • cordissy-001 (0 stars)
    Cordis Sy-001 (0 stars)

So now that you're familiar with our entry editor's functionalities, I'm sure you're eager to style your runner with your preferred colors, fonts and logo.

For that, you need to go to the Layout & Design tool.
You will find it in the left nav, right below 'Stats'.

Click that, and it will take you to the amazing template builder that will allow you to customize your site to your liking!

So, we're here. Now what?

The Global Settings

This is the first screen you'll see when entering the Layout & Design tool.
The Global Settings page is where you get to set up the default colors, font family and font size.
Everything on your runner will follow the fonts and color palette you establish here. You can later customize styles per-element, but this is your default style sheet.

For a more details on what each Global Setting establishes, please see our guide here [[LINK TO JOAN'S PDF]]

And now, the basic buttons

The next page you have in the tool is the Homepage. Of course you know what this sets up: the home for your runner.

The first thing you'll notice are the buttons at the top; we have them on every page and they will be what you use to navigate through the Layout & Design tool. Here's a breakdown:

Devices: you can see how your template adapts to different devices by clicking on them - mobile, tablet, desktop are displayed.

Undo / Redo: this two arrows allow you to undo or redo changes very easily and quickly.

Save button: click it to save all your changes and display them on the actual site.

Plus sign (+) button: this button right here, we use it to add what we call elements to the rows and columns.

Elements: Rows and Columns, the key to unlocking runner flexibility

The runner layout & design tool is set up in rows and columns, a grid like pattern. This allows the user to have a lot of flexibility regarding what type of template they want to create.

All columns can be set to be full width, half width, one third, two thirds or one quarter:

This is how you start to set up your grid.

To these rows and columns, we add the aforementioned elements:

The elements we offer are several:

Row - These are horizontal areas which you can combine with Columns to define your grid.
Column - These are horizontal areas which you can combine with Rows to define your grid.
Posts - A zone on the page populated with posts from a section. This is what fills the page with posts.
Text - Add any text you'd like to a zone on your site.
Image - Add any image you'd like to a zone on your site.
Heading - Choose a title for a zone on your site. Start delimiting spaces for your content.
Links list - Create a list of important links for your site. For example: a link list of your legal disclaimers for your footer.
Social links - Link out to your social media pages to expand your online presence.
Custom HTML - Insert any custom HTML to your site and embed creative new assets. For example: want to embed a YouTube video in the Home Page? This makes it possible.
Newsletter - Offer your readers a way of getting periodic updates through email.
Subscription widget - Offer your readers a way to stay connected.
Header code - Add code throughout the site with a simple header code element.
Ad header code - A simple way of adding header code required for some ad placements.
Ad tag - Add advertisements to your site with this element. You can enter a code for each device type.
Facebook widget - Give visitors quick access to your FB page with a Facebook widget.
Content (in the Post Page) - Add content to your posts: the author and date, share buttons, body text, similar article links, tags and comments.

These are your main tools for creating an amazing site!

Setting up a Page

First we add a column:

Next we add a row:

Then you choose the width and add whichever elements you want!

Merry designing!

Paywall works!
The Conversation

Read Also