LayoutHub
  • What is LayoutHub?
  • User guides
    • Support
    • Installation
    • Uninstallation
    • Upgrade/Downgrade
    • FAQs
      • How to remove instagram section from Layouthub
      • What is "Pages limit"?
      • When can I "Edit code"?
      • What about "Save section"?
      • What is " Auto save draft"?
      • What is "Integration Services"?
      • How to set the same font between Shopify and LayoutHub?
      • How to custom font and color on LayoutHub?
      • How to set "Page handle or human url"?
      • Connective Button
      • How to save page without publish it
      • How to change the meta SEO for LayoutHub's page
    • Common Issues
    • Layout Management
      • Create Layouts
      • Design Blocks
      • Export & Import
      • Edit Section Code
      • Edit a Layout
      • Assign a Layout
      • Duplicate a Layout
      • Delete a Layout
    • Section builder
    • LayoutHub pages/templates
      • Home Page
        • Create additional Home Page
        • Make an existing page as home page
        • Restore to default Home Page
        • Customize Shopify Home Page
      • Sub-page
        • Contact Form
      • Product Template
        • Product Detail
        • Related Product
      • Collection Template
      • Blog Templates
      • Article Templates
      • Insert section
    • Pricing Plans
    • Settings
      • General
      • Theme Settings
      • Quickview Settings
      • Swatch color settings
      • Third party Apps
        • Product Review
        • Product Wishlist
    • Trash
    • Sale Tools
    • Referrals
    • Integration
      • Add/Edit Profile
      • Add New Contact
      • Export Contact
      • Mailchimp
      • Hubspot
      • ActiveCampaign
      • GetResponse
      • SendGrid
      • Gmail SMTP
      • Google Sheets
      • Omnisend
      • Klaviyo
      • ConvertKit
    • Tracking & Analytics
    • Layouthub & Shopify
    • Translate Apps
    • Recommend apps
      • Avada SEO Optimization
      • Ali Reviews ‑ Product Reviews
      • Ryviu: Product Reviews App UGC
      • Quick View by Secomapp
      • LAI AliExpress Reviews
      • Judge.me Product Reviews
      • Growave - Loyalty, Wishlist, Reviews UGC
      • Opinew Product Reviews
    • Refund Policy
    • Instagram token
  • Development
    • Getting started
    • Tools
      • LayoutHub Kit (for LayoutHub developers only)
      • LayoutHub Kit Extension for Visual Studio Code
    • Layout Structure
    • Reference
      • Engine syntax
        • Deprecated: March 2020
        • Chuẩn template má»›i - LayoutHub Editor V4
      • Create a section
      • Components
      • Liquid in section
      • Javascript in section
      • Register vendors
      • Settings.js
        • Call-to-action
        • Text
        • Textarea
        • Text Editor
        • Dropdown
        • Checkbox list
        • Checkbox radio
        • Toggle
        • Number slider
        • Number
        • Single image
        • Image library
        • Color picker
        • Icon picker
        • Font picker
        • Background
        • Picker
        • Group fields
Powered by GitBook
On this page
  • What is a Block (Section)?
  • How to import a Block?
  • How to configure a Block?
  • Adjust space between blocks
  • How to publish a customized blocks?

Was this helpful?

  1. User guides
  2. Layout Management

Design Blocks

PreviousCreate LayoutsNextExport & Import

Last updated 5 years ago

Was this helpful?

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 170+ 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 .

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

Block example:

  • Collection banner block

  • Instagram Feed 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.

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

Step 2: Click Add section

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

Step 3: 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:

Editing: to change texts, images, colors.

Section: to change entirely the background, section ID, margin and padding of the section.

Adjust space between blocks

Every single 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 Page button.

Enter a Page Title, Page handle, Meta description for this customized Layout and press Publish now.

  • Page Title: Enter your page title. This title will display as a link in search engine results. You can enter up to 55 characters in the title.

  • Page handle or human url: Enter your url, the URL can't contain any spaces.

  • Meta description: Enter a description for the search engine listing. You can enter up to 320 characters in the description.

  • Publish page: When you choose YES on this mode, your page will be publishing, that mean everyone can see your page if they have the link. If NO here the Design is created and achieved in the App Dashboard, you can go there to re-use or edit the layout for the next time.

  • Make as Home page: Choose YES if you want to make default this page to replace your existing home page.

  • "Publish now" button: Click on this button to publish or Save your page.

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
here
Collection Banner block
Instagram Feed block
Product Grid block