Page Builder Online

Select a template

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

Opt-in page

Thank you page

Review page

Sales page

Download page

Blank page

Full content width

Content left offset

Content right offset

1-column with header

1-column with no top margin

1-column, no content background

1-column with full-width top bar

with video

with ad

with count down

with animation

out-of-the-box design

2-column with header

2-column with ad

2-column, 60-40 ratio, with video

2-column, 60-40 ratio

2-column, 40-60 ratio

2-column, full content 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.

✖

Popup CampaignID is set up in the Page Manager.

Go back to Page Manager (should be opened already in another tab), click 1, click 2, select the Popup. Then click Save.

Please note that the Popup CampaignID in this setting will only be updated after reloading.

✖

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 content backgrounds settings

Ad widget setting
Other elements cannot be added

Paypal payment button setting
Other elements cannot be added

Add New Element:

Tip 1: Sort editor to move element to front / back.
Tip 2. Click and swipe over to group/ungroup elements.

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

Page Background Settings

Background Color:

Background Image/Video:

Image/Video URL

Position:

Grayscale:

Blur: (0 - 20)

Brightness: (-9 to 9)

Content Background Settings

Position & Size

Width: px	Top/Bottom Offset: vw
Left Offset: px	Right Offset: px

Appearance

Background Color:

Bkground Shadow:

Bkground Border:

Bkground Radius:

You're about to save the design in the selected Row/Column as a Set.

To proceed, enter a name for this Set for your reference.

Tip: Group these elements in one group before saving. They will remain grouped when inserted. It's easier to move them in a group later.

Row Background Settings

Other backgrounds behind this Row:

Page:

Content:

Row Background & Appearance

Full Page Width

Background Color:

Background Image/Video:

Image/Video URL

Position:

Grayscale:

Blur: (0 - 20)

Brightness: (-9 to 9)

Bkground Shadow:

Bkground Border:

Bkground Radius:

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Default Alignment:

Text Font:

Text Size: px

Text Line Height:

Text Shadow:

Bullet Point:

Rotate: (-180 to 180)

Background Color:

Bkground Shadow:

Bkground Border:

Bkground Radius:

Bkground Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px

Link Setting

Link URL:

Placeholder: ~source~

Link Target:

Link Title:

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Default Alignment:

Text Font:

Text Size: px

Text Line Height:

Text Shadow:

Rotate: (-180 to 180)

Background Color:

Bkground Shadow:

Bkground Border:

Bkground Radius:

Bkground Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Font:

Text Size: px

Text Line Height:

Text Shadow:

Bullet Point:

Rotate: (-180 to 180)

Background Color:

Bkground Shadow:

Bkground Border:

Bkground Radius:

Bkground Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Icon Setting

Current Icon:

Crop Icon:

Action

On Click:

Appearance

Color:

Shadow:

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Background Color:

Bkground Border:

Bkground Radius:

Bkground Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px

Input Setting

Input Type:

Input Name:

Do Not Submit:

Required Field: (Uncheck if optional)

Action

On Select:

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Font:

Text Size: px

Text Line Height:

Text Shadow:

Rotate: (-180 to 180)

Background Color:

Bkground Shadow:

Bkground Border:

Bkground Radius:

Bkground Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

(Deprecated)

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:

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Appearance

Background Color:

Background Image:

Image URL

Position:

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Grayscale:

Bkground Brightness: (-9 to 9)

Bkground Shadow:

Bkground Border:

Bkground Radius:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Appearance

Number of Columns:

Number of Rows:

Background Color:

Outer Border:

Inner Border:

Border Radius:

Bkground Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Line

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px

Appearance

Line type:

Thickness: px

Color:

Bkground Shadow:

Rotate: (-180 to 180)

Animation

Type:

Speed:

Repeat:

Start Delay:

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Image Setting

Image URL:

Position:

Crop Image:

Action

On Click:

Appearance

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Grayscale:

Bkground Brightness: (-9 to 9)

Bkground Shadow:

Bkground Border:

Bkground Radius:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

HTML / Video Code

Paste your custom HTML code here, or click the button below to insert a sample.

Mute, Autoplay, Loop Settings:

By default, we activate mute, autoplay and loop. To turn any variable off, in the HTML Code above, find mute=1 (or autoplay=1 or loop=1) and change 1 to 0 (for Youtube and Vimeo) or delete the variable (for mp4).

Please note that browsers do not allow autoplay with sound. If you want the video to autoplay, mute must be on. If you want sound, autoplay must be off.

Appearance

Rotate: (-180 to 180)

Bkground Shadow:

Bkground Border:

Bkground Radius:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Warning: This element is outside its row/column. It may lead to unintended effects.

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>

Warning: This element is outside its row/column. It may lead to unintended effects.

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>

Warning: This element is outside its row/column. It may lead to unintended effects.

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Action

On Click:

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Default Alignment:

Text Font:

Text Size: px

Text Line Height:

Button Color:

Button Image:

Image URL

Position:

Rotate: (-180 to 180)

Button Shadow:

Button Border:

Button Radius:

Button Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <button>

Class: apply to <div>

Button Name:

Warning: This element is outside its row/column. It may lead to unintended effects.

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: (Uncheck if optional)

Appearance

Text Size: px

Text Font:

Rotate: (-180 to 180)

Input Field Color:

Input Field Shadow:

Input Field Border:

Input Field Radius:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <input>

Class: apply to <div>

Note: This visual crop expands and hides parts of the image to achieve cropping effect. For image, final view is dependent on the image's Position setting.

Crop Top:

Crop Left:

Crop Right:

Crop Bottom:

Linked

Reset

Click to apply the font.

Anton

Hammersmith One

Audiowide

Oswald

Fjalla One

Cabin

Nunito

Poppins

Roboto

Inter

Courier Prime

DM Serif Text

Abhaya Libre

Cutive Mono

Acme

Ranchers

Permanent Marker

Allura

Caveat

Caveat Brush

Kalam

Insert/Edit Link