Docs

[romanobstuder]

Hi all
I am looking for some design advice.
I have a photoshop layout that I want to implement. (See attached file.)

I am a newby to X. I purchased the template 3 days ago and have done h of playing.
Not sure if I understand the connection between Section, Row and Column yet.

Is it possible to have Sections next to each other? At this point I think they must be stacked.
Is it then possible to have Rows next to each other (Inside a section)?

Is it at all possible to have many parts (columns) next to each other.

I am looking at X because it promises huge flexibility.
Realising this does not mean every and any design can be implemented. But maybe mine can.

So if any of you have lots of experience with X and can have a quick look at the layout I would very much appreciate your input. And I rather have a NO at this point then spending many more h.

Thank you all
Romano

[romanobstuder]

Here is that layout again…

[Lely]

Hello Romano,

Thanks for posting in.
Please check our Knowledge Based for some guidance:https://community.theme.co/kb/
We can have multiple sections. Each section can have one or multiple rows. Each row can have one or multiple columns. Section are the main block containers and it is always stacked. It’s the columns that can be side by side. See this image below.

Hope this helps.

[romanobstuder]

Hi Lely

Thank you for you response.

Can you confirm this for me:
Only the Section can hold a background image.
Row and Column can not hold a background image.
Rows can have Columns, the smallest fraction is 1/5 of the Row. (I tried many other numbers but could not make it work.)

If you look at my layout I will need a big Section (1170px wide) for my backdrop.
Next to that a small Section (110px wide) for the logo.

If I can not place sections next to each other (I think that is now established) I will need to try this with a Row containing 2 Columns (1170px, 110px). But I could not find a way to place a background image in that.

There will be more complexions but I would like to get this basic stuff out of the way first.

Regards
Romano

[Lely]

Hello Romano,

1.) Section can hold background image by default.
2.) Background image for ROWS and COLUMNS is not possible by default. We can achieve this by using custom CSS. For example, we can add class custom-row on the row class field and then custom-column on the column class field then we can define it’s background like this:

.custom-row{
background-image: url(http://virtualhost.dev/background.jpg);
background-size: cover;
    background-repeat: no-repeat;
}
.custom-column{
background-image: url(http://virtualhost.dev/background.jpg);
background-size: cover;
    background-repeat: no-repeat;
}

Maximum number of columns in Cornerstone is six.
Under Column Layout, select custom then add this:
1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6

Yes you can use 2 Columns (1170px, 110px) then check my suggestion on how to add background image.

Hope this helps.

[romanobstuder]

Hi Lely

Thank you again for your response.

I keep on playing with setting up my layout. So far I can not see a solution…
If I understand correctly, only Columns can be next to each other.
With the CSS you have suggested I could then place my backdrops. Col 01 (1170px) Col 02 (110px).
I does not look like I can then drag a Row into Col 01 to then subdivide this into my content and menu panels (see my layout)…

Also I can only see the settings to 1/2 the Col 01 and Col 02, there is no field for explicit px measures.

Regards
Romano

[Rue Nel]

Hey Romano,

Please be advised that in Cornerstone preview, the columns can be divided up to 5 columns. It will also support 6 columns. You can even have 5/6 + 1/6 column width with custom column settings. Please see this screenshot: http://prntscr.com/b18vkl

If you are trying to sub divide columns, perhaps this video tutorial may help you:

Please let us know how it goes.

[Author]

Posts