Propack - Marketing Landing Page Pack with Page Builder

Thanks for your purchase and using Propack - Marketing Landing Page Pack with Page Builder. If you cannot find answers to your questions in this documentation, please contact our technical support, our specialists will definitely solve your issue.

If you have any ideas or you found a mistake, please contact them, we will be very happy to receive any suggestions and your feedback. Also we will be very grateful to you if you evaluate our template, this really will help us determine what you think about our product. For this, go to “Downloads” section on ThemeForest or go through this link https://themeforest.net/downloads and click on the stars opposite to our template.

Thanks!

Page Builder

Requirements

To be able to use HTML Builder, you must have the following:

Installation

Installing the HTML Builder script is simply a matter uploading the contents of the build folder to a server/hosting account. Once uploaded, point your browser to said server/hosting and your script will work.

Drag & Drop

HTML Builder allows users to drag HTML blocks onto a canvas and drop them where they'd like them to appear. Once dropped onto the canvas, the position can be changed by dragging and dropping as well. Blocks can be delete individually or all blocks on the current page can be deleted in one go.

Editing content

The HTML Builder script can also be used to edit written content inside each element. HTML Builder uses a rich text editor, allowing to make changes to the written content. Depending on what type of element you're editing, certain options will be disabled in the editor. Editable text elements will need to be configured through "js/modules/config.js", and depending on the exact configuration, certain text elements might not be editable.

Editing Styles

The HTML Builder script also allows for basic CSS editing. Using the built-in CSS editor, end-users can customize whatever CSS attributes the script's admin has configured. When editing a link, the end-user can point the link to either an internal page or an (external) URL.

Which CSS attributes are active is configured through the config.js module (js/modules/config.js) using the editableItems object.

Linking within a single page

When building a one-page website, you might want to link to sections within a single page rather then to a separate page. To do this, simply edit the link and use the second dropdown to choose the block you'd like to link to. The ID's to which can be linked, have to be configured within the block HTML files, and the ID attribute should be assigned to the first child element of the main container (for an example, please have a look at any of the bundled block files).

Editing Images

The HTML Builder script allows user to edit images as well. To be able to edit images, firstly the image selectors will need to be added to the "editableItems" array in the js/modules/config.js file. When selected, a "image" tab will be visible in the left panel, allowing you to either upload an image or enter a URL manually.

Editing Videos

HTML Builder allows users to edit Youtube and Vimeo videos as well. Click the video you'd want to edit. This will open the left sidebar panel where you can enter a Youtube video ID or a Vimeo video ID. You can alter between these as you please, the application will detect which platform you're using and update the video accordingly.

Icon Editing

The HTML Builder script allows user to edit icons as well (the script allows you to use all icons available in the Font Awesome collection). To be able to edit icons, firstly the icon selectors will need to be added to the "editableItems" array in the js/modules/config.js file. After clicking on an icon on the canvas, a "icon" tab will be visible in the left panel, allowing you to choose any item from the Font Awesome collection.

Cloning Elements

Items which have been setup in the "editableItems" array in js//modules/config.js can be cloned. Select the element which you want to clone and click the clone button in the left panel. Please note that cloned items will be inserted into the canvas right next to the original item.

Multiple Pages

The HTML Builder script allows users to create multiple pages at once. To add a new page, simply click the green button labeled "+ Add" just below the current pages list. You can alter the page names as well (please use names without the .html extension, these are added automatically during the export). When exporting the markup, the pages will use the same names. To delete a page, simply click the little delete icon next to the page you'd like to delete.

Responsive Views

HTML Builder allows users to switch between different view modes, this to ensure the resulting page will look good on mobiles, tablets and desktop screens. To toggle between modes, use the three buttons to the left of the main toolbar.

The screen sizes for the view modes can be configured in the config.js module, by using the "responsiveModes" object.

Exporting a Site

Whenever the user is happy with the final result, the created markup can be exported by clicking the export button. The export feature will grab all the used HTML blocks for each created page and inserts these blocks into a copy of the HTML skeleton file. Once all pages are completed, all the HTML files are bundled into a ZIP archive together with the other external resources like stylesheets, Javascript files and images (as configured through the "save.php" file) which will be downloaded by the end user.

Configuring the upload script (build/_upload.php)

To be able to upload images from the HTML Builder script, you'll need to set two variables in "build/_upload.php". The first one, $uploads_dir specifies the folder in which uploaded files are stored (make sure this folder is writable!). The second variable $relative_path specified the relative path between your block files and the upload folder (this path is used to load the image in the HTML Builder interface after uploading a file).

Elements

Content Style 4

Tag <a> with the class of .btn-popover-mobile is a button for changing slides on mobile devices. In this tag, it is necessary to add a unique class of .btn-popover-mobile-[*] и href="#map-one" also with unique identifier.

							
								<a class="btn-popover-mobile btn-popover-mobile-1" href="#map-one"></a>
							
						

Block with a class of .item is a slide on mobile devices, and at the same time it is a cover for popover, you need to add an attribute of data-hash="map-one" to it with an identifier that was specified in the tag above, and a unique class of .wrap-popover-[*].

							
								<div class="item wrap-popover wrap-popover-1" data-hash="map-one">
									...
								</div>
							
						

Inside the block of .item there is a tag <a> which is a button for expansion of popover, you need to add an attribute of data-toggle="popover-[*]" to it with a unique identifier.

							
								<a data-toggle="popover-1"></a>
							
						

Then there is the block with the identifier of id="popover-[*]" which was indicated above in the tag <a>. Inside this block there is another tag <a> with a class of .popover-dismiss which is a button for closing popover, also with an identifier in the attribute of data-toggle="popover-[*]" which was indicated above.

							
								<div id="popover-1" class="popover popover-style-1">
									<a class="popover-dismiss popover-dismiss-directoire-blue bindtoggle" data-toggle="popover-1" href=""></a>
									...
								</div>
							
						

An example of the code can be seen below:

							
								<div class="main-popovers col-md-offset-1 col-md-10">
									<div class="main-popovers-img">
										<a class="btn-popover btn-popover-mobile btn-popover-mobile-1 btn-popover-directoire-blue" href="#map-one"></a>
									</div>
									<div class="popovers owl-theme owl-directoire-blue">
										<div class="item wrap-popover wrap-popover-1" data-hash="map-one">
											<a class="btn-popover btn-popover-directoire-blue bindtoggle" data-toggle="popover-1" href=""></a>
											<div id="popover-1" class="popover popover-style-1">
												<a class="popover-dismiss popover-dismiss-directoire-blue bindtoggle" data-toggle="popover-1" href=""></a>
												...
											</div>
										</div>
									</div>
								</div>
							
						

In CSS, it is necessary to add the location coordinates of the buttons for popover expansion with classes of .wrap-popover-[*] and .btn-popover-mobile-[*]. Coordinates change by properties of top and left in percentage ratio.

An example of the code can be seen below:

							
								.wrap-popover-1, .btn-popover-mobile-1 {
								  top: 25%;
								  left: 45%;
								}
							
						

Content Style 10

In the tag <ul> add a new tag of <li> inside of which there should be a tag <a> which will be a button for the tab expansion, with an attribute of href="#tabs-[*]" and a unique identifier. Then there comes the block in which there will be a content with the identifier of id="tabs-[*]" which was listed above in the <a>.

An example of the code can be seen below:

							
								<li>
									<a href="#tabs-1"></a>
									<div id="tabs-1">
										...
									</div>
								</li>
							
						

Countdown Timer

For creation of a countdown timer in HTML, add a block of <div> with a unique class then in main.js дadd the following script:

							
								$('.sale-countdown').countdown('2018/09/31 00:00:00').on('update.countdown', function(event) {
									var $this = $(this).html(event.strftime(''
										+ '<div class="number">%-D<span>Day%!D</span></div>'
										+ '<div class="number">%-H<span>Hour%!H</span></div>'
										+ '<div class="number">%-M<span>Minute%!M</span></div>'
										+ '<div class="number">%-S<span>Second%!S</span></div>'));
								});
							
						

In the script, you can change the ending date and time of the countdown.

Note: Note: The Countdown Timer must not be changed in the Visual Page Builder, since it is a dynamic content and it needs to be changed in JavaScript.

Forms

The main function of Propack is a capability of receiving applications from your landing page. There are also feedback forms and a subscription to your news thanks to the MailChimp service.

Feedback Form

In order to customize the receipt of letters from the feedback form, it is necessary to indicate the E-mail address, which you want to receive emails to. For this, go to the folder mailer open the file config.php and indicate your E-mail address.

							
								'base' => array(
								    'admin_email'   => 'example@domain.com',
								    'use_mailchimp' => true,
								),
							
						

After this it is necessary to customize the SMTP server in the config.php file

							
								'smtp' => array(
								    "host"     => 'ssl://smtp.gmail.com',
								    "auth"     => true,
								    "port"     => '465',
								    "username" => 'example@domain.com',
								    "password" => '*********',
								    "secure"   => 'ssl',
								),
							
						

If you are going to use Gmail for sending emails, read this article: https://support.google.com/a/answer/176600

And also it is necessary to provide access to unsafe applications through this link: https://myaccount.google.com/lesssecureapps

You can also change the form itself and data you want to receive. For this, at first edit the HTML code. Add a new field, for example <input> and specify a unique attribute name

							
								<form class="form-amber js_form js_form-contact">
									<div class="form-group">
										<input class="form-amber" type="text" placeholder="Phone" name="phone">
									</div>
									...
								</form>
							
						

After this, add the field in the file send.php which is located in the folder mailer

							
								$phpmailer->Body = $twig->render(
								    'contact.twig', 
								    array(
								      'name'    => isset($_POST['name'])    ? strip_tags($_POST['name'])    : '', 
								      'phone'   => isset($_POST['phone'])   ? strip_tags($_POST['phone'])   : '', 
								      'email'   => isset($_POST['email'])   ? strip_tags($_POST['email'])   : ''
								    )
								  );
							
						

Also, if it is needed to have the field be required for filling, add the following code to the file of mailer.js which is located in the folder js

							
								$('.js_form-contact').validate({
								  rules: {
								    name: 'required',
								    phone: 'required',
								    ...
								  }
								});
							
						

Then it is necessary to add this field to the letter template contact.twig which is in the folder of mailer\templates

An example of the code can be seen below:

							
								<table class="message__table">
									...
								    <tr>
								    	<td><b>Phone:</b></td>
								    	<td>{{ phone }}</td>
									</tr>
									...
								</table>
							
						

Subscribe

“Subscribe” can be customized in two ways: in the first, the mail indicated by the user in the field for subscription will come to your E-mail address that you indicated in the file of config.php The second method is to set up subscription with the help of MailChimp.

The first method: indicate your E-mail address in the file config.php and in 'use_mailchimp' set a value of 'false' Now letters with E-mail addresses will come to your email.

							
								'base' => array(
								    'admin_email'   => 'example@domain.com',
								    'use_mailchimp' => false,
								),
							
						

The second method: in order configure MailChimp, you need to register in this service, for this, go through this link: https://login.mailchimp.com/signup/ then you need to get the API Key and indicate it in the file of config.phpwhich is also in the mailer folder. You can read about how to get the API Key here: https://mailchimp.com/help/about-api-keys/ also you need to create a new List and indicate its ID in the file config.php For getting the List ID, read this article https://mailchimp.com/help/find-your-list-id/.

							
								'mailchimp' => array(
								    'api_key'  => '6b0443c0c6ca65ed28b306256***5caf-us18',
								    'api_list' => '40d0***b6a'
								)
							
						

In 'use_mailchimp' there must be set a value of 'true'

							
								'base' => array(
								    'admin_email'   => 'example@domain.com',
								    'use_mailchimp' => true,
								),
							
						

Credits

Our theme turned out to be the way it is, thanks to these services and tools. We are grateful that we are capable of using them in our product.