Page Builder Online

Select a template

Choose based on layout. (Image, text and color can be changed easily.)

Blank Page

Start from scratch

Opt-in page

Thank you page

Review page

Sales page

Download page

Single Column

Simple layouts that remain in a single column on every device.

Full width row

Full width video row

Video page background

Canvas left offset

Canvas right offset

Canvas top offset

Canvas no top offset

Frosted canvas background

Full width top bar

Beyond the Canvas

Feature Based

Single column layouts with powerful elements that boost engagement.

With video

With ads

With count down

With animation

With table

With FAQ

Survey optin

Multi Column

2- or 3-column layouts that stack automatically on smaller screens.

Header + 2-Column Content

2-Column, with Ad

2-column, (60-40)

2-column, (60-40) + video

2-column, (40-60)

2 & 3-column, full width

Select a list manager

Connect a manager to collect emails (or disable opt-in).

SendSteed

LeadsLeap in-house List Manager.

3rd-Party List Manager

Use an external autoresponder.

No opt-in

This page will not collect emails.

No list manager is selected now

To collect emails, you must connect this form to a List Manager. You can change the List Manager anytime.

Select a Row type to add

If unsure, choose 1-column Row.

1-Column Row

2-Column Row

50-50

Left on top

Right on top

40-60

Left on top

Right on top

60-40

Left on top

Right on top

3-Column Row

Dedicated Row For Ad Widget

Copy and paste the HTML opt-in form code provided by your autoresponder provider here. The system will merge it into this form.

Note: The form code should start with <form ...> and end with </form>. You should copy everything, starting from <form ...> including and until </form>. Everything before and after should be ignored.

Paste your HTML and CSS code below. The system will attempt to convert it into compatible Page Builder elements. (A 100% match may not be possible. Some manual adjustment may be needed.)

Note: You can include CSS inside <style>...</style>, use inline CSS, or include external stylesheets.

Tip #1: Check that the current Canvas width matches the intended width of the code you are importing.

Tip #2: If your code is responsive on mobile, you can import the same code again with the Canvas width set to 400px to create a mobile design.

How to assign Class to an Element?

1) Click the Element to open its Editor. For example, if you want to assign a Class to an image, click the image to open its Editor.

2) Scroll to the bottom section of the Editor. You’ll see something like this:

3) Click 'ID & Class +' to expand the options.

4) Enter your Class name in the Class input field.

5) A quick view of the assigned Class will appear at the top-right corner of the Editor.

Note: You can assign the same Class to multiple Elements. This lets you show/hide multiple Elements together.

How to hide an Element?

Before showing Element(s) by Class, you must first hide them.

To hide an Element, go to its Editor and click this

How to assign ID to an Element?

1) Click the Element to open its Editor. For example, if you want to assign a ID to an image, click the image to open its Editor.

2) Scroll to the bottom section of the Editor. You’ll see something like this:

3) Click 'ID & Class +' to expand the options.

4) Enter your ID in the ID input field.

5) A quick view of the assigned ID will appear at the top-left corner of the Editor.

Note: An ID must be unique, unlike a Class.

Page and Canvas Settings

Ad widget setting
Other elements cannot be added

Paypal payment button setting
Other elements cannot be added

Add New Element:

Tip 1: Dragto move elements forward/backward.

Tip 2: Swipe across to group/ungroup elements.

The elements in this row cannot be edited. Only the Share Code provider can modify this content.

Page Settings

Scrollable

BG Color

Image/Video

Position

Crop

Fade

Flip

Grayscale

Opacity

Blur

(0 - 20)

Brightness

(-9 to 9)

Canvas Settings

Position & Size

Width px	Height Auto
Top Offset px	Bottom Offset px
Left Offset px	Right Offset px

Appearance

Box Style

BG Color

Frosted

Border

Radius

Shadow

Save elements as a set

You’re about to save the element design in the selected row or column as a set.

To proceed, enter a name, then click Save.

Tip: Group related elements before saving. They will remain grouped when inserted, making them easier to move and edit.

What is a Set?

A Set is a reusable collection of elements from a row or column. Use it to quickly insert the same design into other rows or columns.

Examples

• An opt-in form you commonly use.

• A standard header, footer, button group or image layout

How it works

1. Select the row or column you want to save.

2. Enter a name and click Save Set.

To reuse it later, click My Sets and select the Set.

Row Background Settings

Behind this row

Canvas

➜

Page

Transparent areas of this row will show these backgrounds.

Position & Size

Full Page Width

Height

Bottom Margin

Appearance / Background

Image/Video

Position

Crop

Fade

Flip

Grayscale

Opacity

Blur

(0 - 20)

Brightness

(-9 to 9)

Box Style

BG Color

Frosted

Border

Radius

Shadow

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Appearance / Text Edit

Click text • Hover here

Text

Color

Alignment

Font

Case

— AA aa Aa

Size

Line Height

Spacing

Shadow

Opacity

Bullet

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Action

✓

Go To

Placeholder: ~source~

Link Target

Link Title

Appearance / Text Edit

Click text • Hover here

Text

Color

Alignment

Font

Case

— AA aa Aa

Size

Line Height

Spacing

Shadow

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Appearance / Text Edit

Click text • Hover here

Text

Color

Font

Size

Line Height

Spacing

Shadow

Bullet

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Action

✓

On Click

Appearance / Icon Edit

Icon

Color

Crop

Flip

Rotate

Skew

Box Style

BG Color

Border

Radius

Padding

Shadow

Opacity

Blur

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Input Setting

Input Type

Input Name

Do Not Submit

Required Field (Uncheck if optional)

Action

✓

On Select

Appearance / Text Edit

Click text • Hover here

Text

Color

Font

Size

Line Height

Spacing

Shadow

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Font Icon element is now deprecated. Please replace this element with element ASAP.

Warning: This element is outside its row/column. It may not be visible on small browsers.

Position & Size

Left Offset px	Top Offset px
Icon Size px

Appearance

Icon

Icon Color

Icon Shadow

Icon Action

On Click

Animation

Type

Speed

Repeat

Start Delay

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Appearance

Background

Image

Position

Crop

Fade

Flip

Grayscale

Opacity

Blur

(0 - 20)

Brightness

(-9 to 9)

Box Style

BG Color

Frosted

Border

Radius

Shadow

Rotate

Skew

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Appearance

Table Structure

Number of Columns

Number of Rows

Header

Background color

Height

Content

Background color

Height

Footer

Background color

Height

Box Style

Outer Border

Inner Border

Radius

Padding

Shadow

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Line

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Appearance

Line type

Thickness

Color

Rotate

(-180 to 180)

Shadow

Animation

Type

Speed

Repeat

Start Delay

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Action

✓

On Click

Appearance / Image Edit

Image

Position

Crop

Fade

Flip

Grayscale:

Opacity

Blur

Brightness

Box Style

Border

Radius

Shadow

Rotate

Skew

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px
	Auto-expand height

HTML / Video Code

Paste HTML / Video code or insert a sample.

Insert sample

Playback Settings

For Youtube and Vimeo,

mute = 1 or 0 muted for Vimeo autoplay = 1 or 0 loop = 1 or 0

For MP4:

Insert or remove mute, autoplay and loop as needed

Browsers usually block autoplay with sound. If you set autoplay=1, you should also set mute=1.

Appearance

Box Style

Border

Radius

Shadow

Rotate

(-180 to 180)

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Setting

Type

Countdown Method

Page Load

Fixed Time

Weekly

Options

Days

Hide

Hours

Hide

Minutes

Seconds

Strict Mode

When countdown ends, go to
(Leave blank to stay)

Placeholder: ~source~

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <div>

Class apply to <div>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Paypal Payment Button Code

==Replace with your code from Paypal==

<div id="smart-button-container">
	<div style="text-align: center;">
		<div id="paypal-button-container"></div>
	</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=AQBqCFwcJA9_zIqwbCv9wK1jmd5HGZVIR9ss_1VWo3ZgFS44-zP-trtNttPKZzw7l9lOZaJlVaINY2RD&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>
<script>
	function initPayPalButton() {
		paypal.Buttons({
			style: {
				shape: 'rect',
				color: 'gold',
				layout: 'vertical',
				label: 'paypal',
				
			},

			createOrder: function(data, actions) {
				return actions.order.create({
					purchase_units: [{"amount":{"currency_code":"USD","value":1}}]
				});
			},

			onApprove: function(data, actions) {
				return actions.order.capture().then(function(orderData) {
					
					// Full available details
					//console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

					// Show a success message within this page, e.g.
					const element = document.getElementById('paypal-button-container');
					element.innerHTML = '';
					element.innerHTML = '<h3>Thank you for your payment!</h3>';

					// Or go to another URL  actions.redirect('thank_you.html');
					
				});
			},

			onError: function(err) {
				//console.log(err);
			}
		}).render('#paypal-button-container');
	}
	initPayPalButton();
</script>

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto px

Ad Widget Setting

Ads

Border

Shadow

Show My Pro Ads ONLY

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Action

✓

On Click

Appearance / Text Edit

Click text • Hover here

Text

Color

Alignment

Font

Case

— AA aa Aa

Size

Line Height

Spacing

Box Style

BG Color

Image

Position

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <button>

Class apply to <div>

Name

Out of alignment: This element is outside its row/column. Mobile layout may be inconsistent.

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Input Setting

Input Name

Incorrect Input Name will break your opt-in form. Make sure it is correct.

For SendSteed, please use these:

To Collect:	Use Input Name:
Email First name Last name Other custom fields	email name lastname any1word (e.g. tel)

Input Placeholder

Required Field

Appearance

Text

Color

Font

Size

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

Animation

Type

Speed

Repeat

Start Delay

ID & Class

ID apply to <input>

Class apply to <div>

Preview