Page Builder Online

Choose a Template

Tip: Choose based on layout. Image and color scheme 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

Choose a List Manager:

SendSteed (LeadsLeap Inhouse List Manager)

3rd-Party List Manager

No opt-in on this page

I'll do it later

Choose a Row Type to add:

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 widget.

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.

Page and content backgrounds only
Other elements cannot be added

Ad widget only
Other elements cannot be added

Paypal payment button only
Other elements cannot be added

Add New Element:

Tip 1: Sort editor to move element to front / back.
Tip 2. Click and drag across locks to lock/unlock elements.

No element in this row.
Use the buttons above to add a new element.

Page Background Settings

Background type:

Content Background Settings

Position & Size

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

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

Appearance

Background type:

Bkground Radius:

Bkground Shadow:

Bkground Border:

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: Lock these elements in one group before saving. They will remain locked when inserted. You can then move them in group later.

Row Background Settings

Other backgrounds behind this Row:

Page:

Content:

Row Background & Appearance

Full Page Width

Background type:

Bkground Radius:

Bkground Shadow:

Bkground Border:

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width

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 / Text Gradient:

Bkground Radius:

Bkground Shadow:

Bkground Border:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <div>

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width

Link Setup

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)

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <a>

Position & Size

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

Left Offset: px		Top Offset: px
Width: px	Full Width	Height: px	Lock Ratio

Icon Setup & Action

Current Icon:

Icon Action:

On Click:

Appearance

Icon Color:

Icon Shadow:

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <div>

(Deprecated)

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

Position & Size

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

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:

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width	Height: px	Full Height

Appearance

Background type:

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Grayscale:

Bkground Brightness: (-9 to 9)

Bkground Radius:

Bkground Shadow:

Bkground Border:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <div>

Line

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width

Appearance

Line type:

Thickness: px

Color:

Bkground Shadow:

Rotate: (-180 to 180)

Animation

Type:

Speed:

Repeat:

Start Delay:

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width	Height: px	Lock Ratio

Image Setup & Action

Image URL:

Position:

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 Radius:

Bkground Shadow:

Bkground Border:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <img>

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width	Height: px	Lock Ratio

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 Radius:

Bkground Shadow:

Bkground Border:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <div>

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width	Height: px	Lock Ratio

Setup

Type:

Countdown Method:

Page Load

Fixed Time

Weekly

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: apply to <div>

Position & Size

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

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>

Position & Size

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

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

Ad Widget Setup

Number of ads:

Shadow:

Border:

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width	Height: px

Button Setup & Action

Button Action:

On Click:

Button Name:

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Font:

Text Size: px

Text Line Height:

Button background type:

Button Radius:

Button Shadow:

Button Border:

Rotate: (-180 to 180)

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <button>

Position & Size

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

Left Offset: px	Middle	Top Offset: px
Width: px	Full Width	Height: px

Input Setup

Input Type:

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 it is optional)

Appearance

Text Size: px

Text Font:

Input Field Color:

Input Field Radius:

Input Field Shadow:

Input Field Border:

Rotate: (-180 to 180)

Animation

Type:

Speed:

Repeat:

Start Delay:

ID: apply to <input>

	Border
	Grid
	newAutoShift

Insert/Edit Link