Design Blocks

What is a Block (Section)?

Block means section, a certain area with images and texts. There are many styles of section/blocks‌. Design Blocks is the element constitute a Layout/Template

With LayoutHub, you instantly have access to 60+ built-in content blocks available out of the library. Each of content block has been carefully crafted by web design professionals and offers multiple options which are enough to build any layout you can think of. Literally, within minutes you can build complex layouts on the basis of our content elements and without touching a single line of code. And if you think that it’s not enough you should try now here

All you have to do is just select values, check boxes, drag and drop and and you are ready to launch your shiny Shopify website.

Block example:

  • Collection banner block

Collection Banner block
  • Instagram Feed block

Instagram Feed block
  • Product Grid block

Product Grid block

How to import a Block?

If you don't want to use our available fully-made Layout samples, you can add one by one section to mix and match an unique layout

Select a Page > Click Customize. I suppose I would like to design for my Homepage using pre-built blocks from our library‌

Step 2: Click Add Layout

Our App have many types of Block(Section) that you can choose from categories widget

Click Import button to import blocks

How to configure a Block?

Layout Hub gives you two different tabs to edit individual texts and images. While the specific options that you’ll see in each tab depend on the exact texts, images that you’re editing, the general division of options is the same no matter what:

Editting
Editting

Editting: to change texts, images, colors

Section
Section

Section: to change entirely the background of the section

Adjust space between blocks

Every singe one of Block has a Section tab to adjust the space and gaps between sections. Directly type a number of pixel (negative number acepted) to the corresponding Margin values here as the size of the gaps.

Result:

How to publish a customized blocks?

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 that mean you want this Design replace the live design on your store front

If you don't slide this button, the Design is created and achieved in the App Dashboard

Let's add more blocks to build a finished page. You can add many blocks onto a page

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?

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

Go back to Layout Hub dashboard--> Publish the Shopify Default template not the one Homepage Layout new 1 you had created

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