OK, so:
- Menu bar at the top
- Then a content area with an image as the background and content over it
- Then the regular page content with 3 columns
Note that the next version (v3) that is in the works will actually make it easier, and yes Plus would also make it easier as we could use the “Post Header” Insertion area on just the home page with a Custom Field, but ther are alternate solutions with the base version of Xtreme, so lets proceed anyway.
1- For your Menu:
Set your Custom Menu in Appearance > Menus to be your Secondary Menu bar, so that it will be at the top.
2- For the Large image with content below the menu:
You can use the Header Widget Area with a single widget to hold the background image and content over it.
Because you only want that content to be on the Home page, you will place it inside a [show_if ] shortcode (Check the Add-ons page for the detailed help on this)
So in Appearance > Widgets, drop a text widget in the Header Widget Area.
Inside that text widget, put the HTML Content that will be over the large image, but in a [show_if] shortcode so it only shows on the home page. Given your home page has the ID 76 it will look like.
[show_if post_id=76] Place here all the content that will be over the image [/show_if]
Then in Main Options > Fonts & Custom > Custom CSS Rule box, put the following CSS to add the image as the background of the header widget area on the home page
.home #header-widget-area {background:url(ImageURL) no-repeat;background-size:cover;}
That will take care of the area under the menu bar.
If you need to create space above and below the content in the widget area, add top and bottom padding to the rule above
.home #header-widget-area {background:url(ImageURL) no-repeat;background-size:cover;padding-top:3em;padding-bottom:3em;}
For the padding values, in order to not waste space on smaller devices you can either use:
px (absolute will be the same on any browser
em (will depend on the browser font size)
% (it will scale with the browser)
3- For the content area with 3 Columns:
Assuming this is regular content, not posts, to create the 3 columns, do not use the Column option at the top of the page as it does not offer much control.
Instead, use HTML with the built in Xtreme column classes as explained in the tutorial below
http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5
So put the following HTML in the Content editor in Text mode.
<div>
<div class=”content-3-col”>First column content</div>
<div class=”content-3-col”>Second column content</div>
<div class=”content-3-col”>Third column content</div>
</div>
<div style=”clear:both;”></div>
For each column content, insert the image using the Add Media button, and select Center for the image alignment
That should get it close to what you want, we can tweak further once in place