# Extended Layout

### Extended layout

![](https://460755057-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fl1d49lBAg3jv6axyszMB%2Fuploads%2Ff54AXiumgUFla8fqKzvd%2Fextended_layout.png?alt=media\&token=aa5b7c55-49ec-4031-afd3-a0acb3b461ae)

Follow the below steps to create a extended layout

**Step:1**

Open a text blog

**Step:2**

```html
<div class="col-xs-12 col-md-12 col-lg-12 col-sm-12 simple-layout ext-layout">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12">
<div class="ext-content appedizer-menu">
<div class="page-header">
<h1>Appetizer Menu</h1>
</div>
[product_category category="course" columns="1" per_page="4" order="asc"]

</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12 hidden-xs"><img class="aligncenter wp-image-722 size-full" src="http://yummy_wp.dev/wp-content/uploads/2016/10/main-bg.jpg" alt="main-bg" width="700" height="715" /></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12 hidden-xs"><img class="aligncenter wp-image-721 size-full" src="http://yummy_wp.dev/wp-content/uploads/2016/10/menu-course.jpg" alt="menu-course" width="700" height="715" /></div>
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12">
<div class="ext-content course-menu">
<div class="page-header">
<h1>course Menu</h1>
</div>
[product_category category="course" columns="1" per_page="4" order="asc"]

</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12">
<div class="ext-content desserts-menu">
<div class="page-header">
<h1>Dessert Menu</h1>
</div>
[product_category category="course" columns="1" per_page="4" order="asc"]

</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-6 col-sm-12 hidden-xs"><img class="aligncenter wp-image-720 size-full" src="http://yummy_wp.dev/wp-content/uploads/2016/10/menu-dessert.jpg" alt="menu-dessert" width="700" height="715" /></div>
</div>
</div>
```

Extra class name: ext-menu

and click to update the page