Page Layouts

The Templates that helps you speed up your design process by: Importing pre-made templates from the developer (or third-party), Saving your own designs as templates to reuse later

What is a Page Layout?

Page Layout is a template that includes pre-built elements such as sections, blocks, texts, images, sliders,.. etc. They are combined to each other to construct a spectacular structure in various styles

We offer 3 types of Page Layout. They are Homepage, Product Page, Sub page

Moreover, every Page Layout showcased will have high-quality free stock images as placeholders. Our design team has crafted each and every piece of an individual template to ensure it is unique and easily modified to adapt to your unique needs.

With LayoutHub, you don’t have to be a developer to create a page. With LayoutHub you don’t have to be designer either.

Amazing features included in a Page Layout:

  • Section element to combine several rows;

  • Color Picker

  • Text Translation

  • Extended CSS box

  • Options to save section and row as templates

  • Remove at one click without loading process

How to import a Page Layout from Layout Hub

Select a Page–> Click Customize. I suppose I would like to design for my Homepage. (You can also design for the Sub pages such as Product page, Contact Us page, About Us page, ..etc)

Step 2: Click Add Layout

Section means theses area, there are many styles of section/blocks

  • Product Grid section

  • Collection with Banner section

  • Instagram Feed section

Next, you select a DESIGN BLOCKS/ PAGE LAYOUTS from our library

Page Layout is a cluster of blocks

Click Install/ Preview button to import design to your store.

Searching for your designs quickly by clicking Filter By at the right top, or the Categories Menu on the left side.

Select any Layouts and click Install button. Then you start customizing the Layout as you desire

How to configure a Page layout

Now you get the Homepage Layout sample imported to your store.

Only the body of Homepage imported. The Header and Footer section are fixed and initial from your current theme

LayoutHub offers all the controls you need to work with content elements – change, edit, duplicate, remove, preview or create presets for your elements whenever you wish with just single click.Configure your Shopify site layout like never before.

On this content of the Layout, you can changed everything by using the sidebar Editor. But It’s just a preview. You can customize this preview like customizing a Shopify Theme, they are very simple and user-friendly

There are 2 tabs that you can switch over them to make changes: Sections + Theme Settings

Layout Hub gives you 2 different tabs to edit individual sections/blocks. While the specific options that you’ll see in each tab depend on the exact section/block that you’re editing

  • Section: include settings of each blocks: ex) Slide block, Collection block,...

  • Theme settings: include settings of global, apply a color or gap at once time onto all the pages.

All websites are different! Use Primary color to make a perfect match with your corporate and brand identity. You can change visual appearance literally in seconds and determine which color, font you want to affect – combine your design with your brand as a unique design.

*Adding Custom CSS

If you’re a casual user, you might not ever need to use custom CSS in your page builder designs. But for more advanced users, the ability to add custom CSS is a great way to get more control over your page layouts.

How to publish your customized Layout

Finally, after you had completed customizing your Layout, you can click Publish button

Enter a name for this customized Layout

If you slide Make Default button that mean you want this Design replace your live Homepage

If you don't slide, the Design is created and achieved in the App Dashboard. You can go there to re-use the layout for the next time.

Result: please go to your store front- Landing page, it's replaced by the new layout

Before

After

How to revert changes after clicked Publish button?

In the case you want to revert all the changes, back to your Original design

Go back to Layout Hub dashboard--> Select exactly the Shopify Default template not the other customized layouts > Click Restore default template button

If you love LayoutHub, could you consider posting an review? That would be awesome and really help us to grow our business, here is the link