• Learn how to create awesome sites with Artisteer!

How to create a paneled layout in Artisteer

Like flat design, paneled layouts are all the rage these days, due to the increasing usage of tablets and smart phones.

If you’re not familiar with what paneled layouts are, a paneled layout is a website with panels of alternating colors, which makes the site experience a little more fun and encourages scrolling.

In today’s video, I am going to show you how you can build a paneled layout with Artisteer!

In the video, I mentioned some CSS that you can copy & paste. Here it is:

.art-content-layout-wrapper .art-content-layout, .art-header {
padding:0 15%;

.art-nav {

.art-content-layout-wrapper {
margin: 0 -22%;

.art-post {
padding: 0 15%;

.art-content .art-postcontent .art-content-layout-wrapper {

23 Responses to How to create a paneled layout in Artisteer

  • can I update the image in slideshow autmatically from folder this mean when I add new image in this folder this added image show in slideshow and when I remove image from this folder it also remove from slideshow

  • Stephen says:

    Great stuff, just what i was hoping to do. However when i have tried it and create a two column row, the 10% margin is added to the inside rows when i just need them added to the outside rows. Anyway round this? using arsiteer 4

  • Tom says:


    I have tried but failed (artisteer 4.2). Where can I find your theme for download purpose so that I can just modify that one?

    Many thanks

    • Henri S says:

      Has anyone been able adat this to Artisteer 4.2? Apparently class names are different and/or structure has been changed. For example art-content-layout-wrapper has been obsoleted.

        • Usep says:

          Movies that could be considered for Movie Club:Quentin Tarrentino Pulp Fiction, Reservoir Dogs, Kill Bill-2Martin Scorsese Good Fellas, The Departed, Gangs of New York, Taxi Driver, The Raging BullRob Reiner The Bucket ListFrank Darabont The Shawshank RedemptionDarren Aronofsky The Black SwanTony Kaye American History X

        • Jaco Mare says:


          I managed to fix this for Artisteer 4.2.

          Simply remove the CSS above as none of those classes exists anymore and add the following CSS:

          article .art-content-layout .art-content-layout-row .art-layout-cell {
          padding-left: 10% !important;
          padding-right: 10% !important;
          width: inherit !important;

          article h2 {
          padding-left: 10%;
          padding-right: 10%;

  • Mike S says:

    Hey Zach, you made me a mess of work. ;-) Now I had to do a refresher on Photoshop just to keep up with you. Great tutorial. You could rename it: How to force Artisteer to be something it is not. But seriously, it proves how a bit if CSS can fix it up. Your teaching style is awesome.


  • Jim Dupree says:

    This looks like the foundation for “single-page” web sites! I’ll experiment to see if adding TEXT ANCHORS will allow you to jump around the page! Great job – if anybody could figure this out, I knew it would be YOU!!! Thanks!

      • April says:

        Meet Agora. A responsive eCommerce theme pewored by the incredible WooCommerce engine. Sell your products in style. We love it. You’ll love it. best wordpress themes Agora | The Best Free and Premium WordPress Themes For Download best wordpress themes Meet Agora. best wordpress themes Agora | The Best Free and Premium WordPress Themes For Download

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Free Artisteer Video Training Course

Want to learn how to create great websites with Artisteer?

Then you MUST see this training!

It's simple, step-by-step, and will turn you into an Artisteer pro!

Sign up for free below. 

New Graphic

We respect your email privacy

Recent Comments