Image-to-Layout

What’s “Image-to-Layout”?

Image-to-Layout is an AI-powered conversion that transforms image and website URL layout references into detailed layout representations. GemPages takes advantage of advanced AI capabilities to transform your web design workflow. By effortlessly uploading an image or inputting a website URL, this GemPages AI feature will seamlessly detect sections and elements in the layout reference and convert it into a detailed layout representation, eliminating the need for manual deconstruction.

How to use the “Image-to-Layout” feature

1. Access the Image-to-Layout feature

To begin creating a new page in the GemPages’ Dashboard with “Image-to-Layout”, simply click on the “Create new page” button. Please note that this feature is exclusively available for GemPages Editor v7.

Create a new page from scratch by clicking on the “Start from scratch” button.

Upon accessing the Editor, you will find the option to convert a URL or an image to a page layout.

Alternatively, if you have already created a page, you can also access the Image-to-Layout feature by clicking on the AI icon on the left sidebar of your Editor. 

2. Upload and Analyze

At this point, you will have two options:

• Paste an URL to create a layout: Input the URL into the box.
• Upload Image: Click on the text and select an image from your device to upload. 

When finished, hit “Generate”. 

After that, the system will start the process of analyzing data, detecting sections, and generating content. 

3. Select and add a section to your page

After the system has detected the sections from the image or URL, the result will be presented in the right column. You will need to select the sections you want to insert into your page. By default, the system will select all sections. Uncheck the section you don’t want on your page. 

After that, click on “Generate” to start generating content. 

4. Customize the section

Feel free to click on the element on the layout to customize the content as you wish. If you want to add more sections to your page, you can drag and drop the element from the left sidebar without any problem. 

FAQ

1. Are there any requirements for uploading reference images and URLs?

Here are the image and URL requirements for the best result with GemPages’ Image-to-Layout.

Image:

• Maximum file size: 20MB
• No minimum file size requirement
• Minimum Width: 1440px
• Maximum Height: 20000px
• Supported formats: png, jpg, jpeg

When you begin uploading your image, you’ll notice these outlined conditions. Additionally, if your chosen image doesn’t meet these conditions, GemPages will alert you about the unmet requirement. For instance:

URL:

• No specific requirements
• Accepts all types of websites. 

2. How do I access GemPages’ Image-to-Layout feature?

Image-to-Layout is accessible via GemPages version 7 – which means:

1. If you currently use GemPages version 6 and wish to access GemPages Image-to-Layout, please contact our customer support team for assistance with the upgrade process. Some conditions may apply when upgrading.
2. If you’re new to GemPages, just install GemPages in the Shopify app store.

3. Can I use GemPages’ Image-to-Layout to create layouts from pages generated by other page builders?

Yes. You can use GemPages’ Image-to-Layout feature to create layouts from pages generated by GemPages or any other page builders than GemPages.
Please ensure that the URL is publicly accessible – which means the site should not be blocked by any form of authentication (e.g., password) or only open to a specific location or targeted visitors.