This custom page layout is possible, but requires intermediate skill levels with CSS/HTML. Hopefully we can cover these things better in our new X3 docs section coming soon. The www.photo.gallery website includes extensive custom CSS styles, and I can't explain this process in detail, but here is the gist:
1. Set your Page > Context > Width to
WIDE. This is required to create the full-width content layout, where you will add your custom segments inside.
2.A Use the
Foundation GRID (included in X3) to create segments inside your content. For example:
<div class="row">
<div class="small-9 small-centered columns">9 columns centered</div>
</div>
2.B OPTIONALLY, instead of the above, you can create your own HTML/CSS. For example something like this:
<section class="my-section">
<div class="my-inner-section">
BLAH BLAH
</div>
</section>
CSS:
.my-section {
background: #EEE; // background color for the section
padding: 4em 1em 3em; // padding for the section
}
.my-section-inner {
max-width: 850px; // inner section should be max 850px
margin: 0 auto; // center the inner section
}