Canvas - full width content block
Canvas - full width content block
Would be great with some more details of exactly what this should include?
John Bolton commented
Would really like to see this happen! It seems to be a really common design trend amongst web designers at the moment so would be great to be able to implement it with a shortcode like how Drew McManus described below!
It's like having fluid rows which we can add a background image or color. Like my site, http://magiclouieservices.com/ . I used canvas for that but I still need to edit the template php file.
As you can see, I have fluid rows (layers)
Matthew Keath commented
Yes, Yes, Yes!!
Drew McManus commented
The homepage at WPEngine.com is a good example.
The best solution is a new shortcode that applies the full width content to a new full width #content layout for the entire site (not just header and footers).
The shortcode popup would be pretty simple in that it is two simple fields for setting BG color or uploading a BG image (and related repeat settings). So you end up with something like:
[full_width bg="#000000"]Full width content goes here.[full_width]
Other Shortcodes would need to work inside it and a shortcode version would be nice becasue by nature it will provide advanced users with everything needed to modify with custom CSS (margins, padding, etc.) but simple enough for new and mid level users to make good use of (not unlike the column shortcodes).
Hope that helps.
Us a CSS hack until Woo wakes up..: http://jsfiddle.net/fKJa9/
I would love to see this feature as well!!!!! I am looking to do this with my site and hate the thought of changing themes!
The content BLOCK should allow you to have multiple blocks one after another.
Each block can be a WIDGET with independent background color/image, margins/padding, font colors, hyperlink colors which are LOCAL to that block. For example: Thus a first block can have a red background with white text and a background image. The block following it can have a white background with blue text and a sliding image.
The CONTENT of the block widget is basically pulled from text in the widget, a page or post.
There can be three kinds of content blocks widgets: one column, two column, three column. In the 2 and 3 column widgets will pull from 2 or 3 posts/pages.
Please take a look at this page: http://www.shopify.com/
They use 100% width wrapper, with a content div of 1020px. We really need to be able to make the same type of backgrounds - the coloured background boxes that are 100% width :)
YES, please! From a design standpoint, I cannot think of a more important feature. Go team Woo!
I hope this moves forward.
I want to use Canvas with content blocks as described here too.
Similar to The One Pager but that theme has many quirks w/ no resolutions in the forum.
I think the Divi theme from Elegant Themes will give you a good idea of different content blocks. It allows you to add a different color, a photo background or a slider image to any area of a site.
Would love to know how to create a full width div in the content, to create sections with different full width background color
Personally would rather the FW Content block be a shortcode (I'd use it as a div manually anyway) without the extra Parallax code most of these have (plenty of code and plugins for that if people want that) - just some options to add colour IMHO would keep it inline with the lighter goals of Canvas.
Some may not agree so YMMV!
like second comment bikeboyblue, I would like to alternate background color on full-width sections of a page.
a shortcore like [full_width color=#f6f6f6]asdf[/full_width]
I would use this maybe only on the homepage
Some kind of shortcode to allow for the full width content area as you go down the page would be fantastic for canvas. Something like this: http://demo2.woothemes.com/?name=hub
Tevya Washburn commented
Magnus, I think the idea is that elements in the "full-width" mode of Canvas, need a full-width background. For example, I can't make the background color of the breadcrumb go the full width. Even when using the boxed layout, it's completely contained inside other elements, so it's background won't even reach the edges of the boxed layout. The same goes for quotes, callouts, and other content blocks. To make these work with the flat designs of today, they need an option where their background can go the full width of the browser, or the boxed area, when using the boxed layout. That's what they're talking about. Currently only a few elements can be given this effect: the header area, main menu bar, the new full-width slider, and the footer. But everything in-between is very much limited and contained so that it's background can't be extended to the full width of the boxed layout or browser (full-width layout).
Full width= 1280 px page width that is responsive
I think that you should be able to include a class .fullblock or whatever it is. This class is a wrapper you can put around any element within your content id which will allow you to put a background image or assign a color that is 100% width.
John R Crowley Jr commented
Enrico comment shares what I was looking for Canvas to be able to do (scroll down the home page to see the sections): http://www.kriesi.at/themes/enfold/