Innovation editing

Permalink
Hello all,

First time Concrete5 user here. I have experience in css and html pages however this is my first stint at a CMS.

I have just installed the theme "Innovation"
http://www.rynomediaonline.com/concrete5/innovation...

I am a bit unsure when it comes to creating the areas for adding content. For example, with the theme installed it is obviously a blank canvas, no content etc.

In the theme demo, there is the area where there is an image slider, with text content to the right. In the theme installed on a blank canvas C5, the blue area is empty as shown in my attached image.

How would I create this box/div or whatever it is called in C5 to looked like the demo version?

And the news area columns below this, how would these be created? Through blocks, our layouts?

I apologise, I find moving to a CMS confusing even if C5 is nice and easy.

Thank you.

1 Attachment

 
irsah replied on at Permalink Reply
irsah
Hi Maritime bob,

I'm not sure about innovation theme but basically when you click edit on a page (logged-in) You will have certain area/s to "play Around". You can click on an area, an a tool tip will appear. Choose blocks, and upon installation, c5 have already installed a few add-ons (blocks) for you to work with.

For the example given, it seems like the sample theme is using;
1. Pagelist with thumbnails (block or template) add-on -> sidebar
2. pagelist/description (block/or template)for content.
3. a slide show (maybe) or a slider add-on from marketplace
4. A content block as write up beside slideshow (possible).

If you have an area, you can divide the area into several columns by clicking Area > tooltip > layout > add required columns to that area> add some spacing > save > and c5 will generate the columns for you. Then in edit mode you can insert block ie content block for writing stuffs, image block to insert images ct. Use the block tooltip to move your blocks to desire/preferred layout.

I suggest you read a few of c5 basics docs (understanding the fundamentals and workflow ie sitemap, add pages, default pagetypes etc) and also how tos before diving in as it might save you more time and getting your website designs towards the right directions.

By understanding what blocks are, what templates are (etc...), how to create a pagetype, safe template overrides, will save you time as most of websites will have repetitive contents which you can plan on your initial design and work on thru.

Add-ons and block are useful tools which will help you in organizing your website's contents (data and how it will be displayed) and obviously extends your website and dashboard functionality a step further.

The div's like you mention are created as areas, each block has a div preassigned to it (well some are). By adding blocks you are safe to move it around but bare in mind on the page area limitations (ie Global area, Add Area, Allowed 1 block area etc.)

You can also use other functionality like Stacks (in Dashboard) to provide you with a Global like feature which you can call the stacks you've installed/include in any pagetype with an editing area interface with the edit area > tooltip > Stacks > and the name of your stack will be listed there.

When you add this, whenever you want to change the stacks contents you've included, it can be accessed in the Dashboard > Stacks area without going to the pages you have installed the stacks with. Change there and it will automatically update on the respective pages.

Well I think this is way too long and feel free to drop by ask qna and the community will surely help out.

BTW, if you want more detail on the theme (and add-ons) you have downloaded, in Marketplace for a certain theme, there is a forum link dedicated for theme author (in sidebar). Click that link and you can asked questions directly to the theme author themselves.

Hope it helps,
irsah.

p/s: Don't forget useful tips from c5 Totally Random channel/YT tutorials on this web. I find it very useful in figuring out what is what working with c5??...
mhawke replied on at Permalink Reply
mhawke
Hey maritimesbob... Cape Bretoner here!

@irsah... If you take the time to actually look at the demo and then look at the screenshot it is clear that the layout in the screenshot is 'Right Sidebar' but the front page of the demo is something completely different.

@maritimesbob... To answer your specific question, try hovering over the Edit button and choose 'Design'. Then pick a different page type. The details on Ryno's demo say that there are only 2 page types, 'Full' and 'Right Sidebar' so I would try choosing 'Full' and then when you put that page in Edit Mode, see if there are the appropriate areas to fill with blocks like in the demo.
irsah replied on at Permalink Reply
irsah
HEy Mhawke.. thanks for the heads up.. I had a look but possible I head to another direction.. Thats' when the elaborated on the small details of pages and pagetype editing and blablabla... It's good too you pinned point on something... cheers
mhawke replied on at Permalink Reply
mhawke
I downloaded the theme and there are several additional page types than what is mentioned on the demo page. The proper page type to assign to the home page is... wait for it... 'Home'.

The 'Home' page type will give you the same editable areas as displayed on the demo but of course they're empty.
maritimesbob replied on at Permalink Reply
Thanks for the help, very useful info there.

When working with the "inline" editor, some editable portions are marked with a white box, some with a red box. What do the white and red boxes represent?
irsah replied on at Permalink Reply
irsah
Hi,

If a page in edit mode, the white box is an editable area for an assigned page > click it, it will show you editing feature for the specified area aka add blocks, add a specific design for the area, add a layout (build columns) etc.

The red box would be indicators of a block that has been inserted within an editable area (the white box). clik it, it will allow you to add more block, copy, edit, set prmissions, move existing block as preferred etc.

On hover, once the boxes bg tints, and the cursor changes, it selects the boxes and clicking on it will extends more functionality/tools for you to customize with (within a page).

p/s - Themes were design with various editing areas for you to work with. On a page clik edit > design > and select a theme (or leave it to choose the installed theme) and below would be the pagetype layouts. This will only customize the page your on and not the whole website. You can find the right editable area accordingly to work with like explained by Mhawke above. Hope it helps.