Prelaunch page builder guidlines

Here is Detailed guidelines for each block of the prelaunch.com builder, including technical documentation and recommendations.

Prelaunch Page builder is the place where you can create your project with the easy to use interface in a minutes. For concept and price validation you needs to create 2 separate pagesMain Page and resrvation page.

Top Section

Top Section is above the fold section that can’t be removed or rearranged. It is the same for all projects. Top Section contains

  • Image Slider (you can put a YouTube link for the video)
  • Logo
  • Headline
  • Description
  • Form

Image Slider

The recommended size for each image is 514 X 340 px. The first picture must be clear without noisy background: make sure to keep the main photo item centred to avoid crop in the mobile version.

The item is not centred: Not Good 😞
‍
The item is centred: Good πŸ™‚

‍

Noisy background: Extremely not Good 😞

‍

Clean background: Good πŸ™‚

‍

You can add a video to the slider by putting a link from youtube, the video will always take a place at the end of the slider

Logo

The ratio of the logo should be rectangular, recommended size is 128 x 40 px. Square or vertical logos are not acceptable, try to keep the minimum height of the logo 24-30px:

Good πŸ™‚

‍

‍

An almost square logo: Not Good 😞

‍

Headline

The maximum number of characters in Headline is 50.The headline should have this structure: name: the main benefit.

E.g. ECONIC: TECH MEETS POWER & VERSATILITY ON ANY ROD

Product Section

This section is the most commonly used. It has 3 different variations:

Variation 1

The recommended image size is 512X512px. The width of the image is fixed, which means you can only upload images with a width of 512px and a minimum height of 108px:

The recommended ratio is still 1X1 (512x512):

‍

‍

The placement of the text and image can be rearranged by clicking on the toolbar:

Variation 2

Includes video with the recommended size of 514x290px, max size 5MB

Better to upload only short animations

Variation 3

Same as the first variation but the image has no bottom margin:

Icons Section

This block allows users to upload icons in jpg. or png. format to showcase the main features or benefits of the product.

Variation 1

Max. 4 icons with the recommended size of 135x80px, do not upload icons with a ratio of 1x1 (square)

1x1 image: Not good 😞
135x80px: Good πŸ™‚

‍

If the user removes one of the icons the whole layout will automatically move to the centre:

Variation 2

Max. 4 icons next to each other

The recommended ratio is 1x1 (square) ****or 106x106px

Variation 3

Max. 3 icons inside the boxes

The recommended ratio is 1x1 (square) ****or 80x80px

Variation 4

Max. 4 icons with fixed sizes of boxes / 2 rows and 2 columns

The recommended ratio is 1x1 (square) or 48x48px

Variation 5

Max. 4 icons with fixed sizes of boxes / 2 rows and 2 columns

The recommended ratio is 1x1 (square) or 48x48px

It’s possible to upload a separate image in this variation. The recommended image size is 512X512px

Variation 6

Max. 4 icons next to each other

The recommended ratio is 1x1 (square) or 48x48px

Full Screen Section

The full-screen section allows users to upload images that take the whole screen with 100% viewport height.

The recommended image/video should be as follows:

  • the main object should be centred and have empty spaces around itself to automatically adjust well in the mobile version
Not good 😞
Good πŸ™‚

‍

Setting a color overlay on an image is the perfect way to neutralize a busy imageIt blocks out all the different colors, making the image monotone.

Not good 😞
Good πŸ™‚ text is readable

Also, you can change the text position to avoid covering the product with text

Not good 😞 text overlapping with the image
Good πŸ™‚

‍

Gallery

The gallery allows users to create different layouts of images to show the use cases or features of the product

Variation 1

Max. 4 images next to each other. The recommended size is 268x231px

Only this variation rearranges the images in 2 columns in the mobile version

Variation 2

Max. 3 images next to each other. The recommended size is 350x360px

Variation 3

Max. 4 images in 2 rows and 2 columns. The recommended size is 514x514px

Variation 4

1 image with a fixed width of 1140px and auto height:

The maximal limit of height is 1140px

Reservation Page

This section allows the users to show the discount they offer for their product. The process goes as follows:

  • The consumers click on the β€œReserve” button and get redirected to the Stripe page for checkout.

Users cannot add or remove any blocks on the reservation page, there's only one static block.

The offered discount will automatically be calculated once the β€œDeposit Priceβ€œ, β€œRegular Price” and β€œDiscounted Priceβ€œ sections are filled.

At the moment it’s not recommended to edit the text in the Paragraph section.

‍

Good luck with you creation process :)