# PixFort Help Center

Advice and answers from the PixFort Team

Welcome to PixFort Help Center, the new PixFort Page Builder represents the next generation of HTML website creation tools. It introduces a revolutionary new way to build your website without writing a single line of code.

If you are new to PixFort, get started with the following guide:

{% content-ref url="/pages/-LWmrNs3WkjzsLDLtnsa" %}
[Getting started](/getting-started-1)
{% endcontent-ref %}

If you are looking to learn how to create a project and start using the builder you can start here:

{% content-ref url="/pages/-LmlOEUjDe3Rw5ii20cg" %}
[Create your first project](/creating-projects/create-your-first-project)
{% endcontent-ref %}

You can also check our FAQ from here:

{% content-ref url="/pages/-LWmseoUo3YPbRXsohx-" %}
[FAQ](/faq)
{% endcontent-ref %}


# Getting started

Start using PixFort now.

{% content-ref url="/pages/-LmhHCJJh9j7R7JGvz2t" %}
[How it works in 3 easy steps](/getting-started-1/how-it-works-in-3-easy-steps)
{% endcontent-ref %}

{% content-ref url="/pages/-LmhIcJ6yR-WLksK7z1P" %}
[How to create a PixFort account](/getting-started-1/how-to-create-a-pixfort-account)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlRfd4yCdJKrNEgdMT" %}
[Synchronize your account with envato market account](/getting-started-1/synchronize-your-account-with-envato-market-account)
{% endcontent-ref %}


# How it works in 3 easy steps

Start building in less than 5 minutes!

**Welcome on board!** start building awesome pages by following these 3 easy steps. It won't take more than 5 minutes to start :)

<div align="left"><img src="/files/-LmhM7UoahNGV4xufDCM" alt=""></div>

### 1. Purchase a license from [themeforest](https://1.envato.market/MEGAPACK)&#x20;

*(If you already have a license you can skip this step)*

Each license you purchase from [**themeforest**](https://1.envato.market/MEGAPACK) is considered as a project in [**PixFort**](https://builder.pixfort.com/) platform. Please verify that the template you purchase is made for PixFort platform, currently there is only [**MEGAPACK**](https://1.envato.market/MEGAPACK) template on themeforest.\
​​​

<div align="left"><img src="/files/-LmhM7Un2ZEkQavld9xf" alt=""></div>

### 2. Create a PixFort account and synchronize it with Envato Market

In order to use PixFort Builder you will need to create an account on PixFort platform (creating an account is totally free and easy). [**Create an Account​**](https://builder.pixfort.com/register)

{% hint style="info" %}
**Note:** you should synchronize the Envato account you purchased the license with.
{% endhint %}

&#x20;After creating your account you will need to synchronize your PixFort account with your account on Envato Market to verify your purchased licenses. To synchronize your account with Envato Market just click on the green synchronization button that appears in your PixFort account after verifying your email.\
​​​

<div align="left"><img src="/files/-LmhM7Ul6f-Hj2rdouXP" alt=""></div>

### 3. Your license(s) are verified! Now you can start building awesome websites!

Once you finish the synchronization of your account you can start creating PixFort projects **:)**

{% hint style="info" %}
**Each license** you purchase is considered as a project in PixFort platform.
{% endhint %}


# How to create a PixFort account

Easy steps to create your account on PixFort Platform

Welcome to PixFort platform, creating an account is very easy and it won't take more that 5 minutes, please follow these steps:

### 1. Go to [register page](https://builder.pixfort.com/register)

Complete the form with your information (name, username, email, password), a confirmation email will be sent to you after submitting the form.

![](/files/-LmlP00wSw3oScpxisfu)

### 2. Verify your account

After signing up you will receive a verification email, just click on the button in the email to verify your account.\
If you didn't receive your verification email you can resend it by clicking on the yellow button that shows in your PixFort account, or you can send us an email.

![](/files/-LmlP5rKt7Do5EkbnvMR)

### 3. Synchronize your account with envato market

**Note:** you should synchronize the Envato account you purchased the licences with.​​

![](/files/-LmlPAsnml_PU4Np0Xx-)

### 4. Done! Now you can start building awesome websites :)

Next, you can check this article to learn more about creating your first project​

{% content-ref url="/pages/-LmlOEUjDe3Rw5ii20cg" %}
[Create your first project](/creating-projects/create-your-first-project)
{% endcontent-ref %}

![](/files/-LmlOTU-kSN4hGUWvXBQ)

​


# Synchronize your account with envato market account

After creating your account you will need to synchronize your PixFort account with your account on Envato Market to verify your purchased licences. To synchronize your account with Envato Market just click on the green synchronization button that appears in your PixFort account after verifying your email.

![](/files/-LmlPAsnml_PU4Np0Xx-)

{% hint style="info" %}
**Note:** you should synchronize the Envato account you purchased the licences with.
{% endhint %}

You can mange your envato account api from:\
<https://build.envato.com/my-apps/>


# Creating Projects

learn how to create a new project

## Getting started

{% content-ref url="/pages/-LmlOEUjDe3Rw5ii20cg" %}
[Create your first project](/creating-projects/create-your-first-project)
{% endcontent-ref %}

## Miscellaneous

{% content-ref url="/pages/-LmlOaf7Z222jhIIJ0VY" %}
[Delete your project](/creating-projects/delete-your-project)
{% endcontent-ref %}


# Create your first project

Start building your first project in PixFort

To create your first project just click on the green button that appears after you connect your PixFort account with Envato Market and choose a name for your project.\
That's it!

![](/files/-LmlOTU-kSN4hGUWvXBQ)

**Next**, learn about Using PixFort Builder

{% content-ref url="/pages/-LmlHYkOQBf\_2ECdB\_Sc" %}
[Using PixFort builder](/using-pixfort-builder)
{% endcontent-ref %}


# Delete your project

learn how to delete you project

You can delete your project from **Project's settings page > Advanced tab > then click on the red Delete button.**

{% hint style="info" %}
Please note that this action is irreversible and you will not be able to restore the deleted project.&#x20;
{% endhint %}

{% hint style="danger" %}
**If you're looking to create a new project this requires a new license since each license can be used for 1 end product.**\
For more information you can check the Themeforest Licenses from here:\
<https://themeforest.net/licenses/standard>
{% endhint %}


# Using PixFort builder

Everything related to PixFort builder fonctionalities

## Introduction to PixFort Builder

{% content-ref url="/pages/-LmlHmQe3nEaID5sBN6R" %}
[Introduction to PixFort Builder](/using-pixfort-builder/introduction-to-pixfort-builder)
{% endcontent-ref %}

## Page builder

{% content-ref url="/pages/-LmlHwQbXr0E-6bfD0oX" %}
[Building pages using Page Builder](/using-pixfort-builder/building-pages-using-page-builder)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlIUAlEUffXyYUa69G" %}
[Change page width](/using-pixfort-builder/untitled)
{% endcontent-ref %}

## Form builder

{% content-ref url="/pages/-LmlIxL6uZ-iMYodEv1q" %}
[Create fully working forms using Form Builder](/using-pixfort-builder/create-fully-working-forms-using-form-builder)
{% endcontent-ref %}

## Popup builder

{% content-ref url="/pages/-LmlJMtoyzgjEwub2HZF" %}
[Introduction to popups](/using-pixfort-builder/introduction-to-popups)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlJpsZfP1gYoeEB74s" %}
[Automatic Popups](/using-pixfort-builder/automatic-popups)
{% endcontent-ref %}

## Menu builder

{% content-ref url="/pages/-LmlK6HARQ-kjjpeD0TW" %}
[How to edit menu](/using-pixfort-builder/how-to-edit-menu)
{% endcontent-ref %}

## Miscellaneous

{% content-ref url="/pages/-LmlKPeCCzn3363xeYgk" %}
[How to edit maps in builder?](/using-pixfort-builder/how-to-edit-maps-in-builder)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlKzUfxxx-GlIp6c71" %}
[How to change a video](/using-pixfort-builder/how-to-change-a-video)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlLPXDgE5kkuSy5fS-" %}
[Changing Background image of Sections](/using-pixfort-builder/changing-background-image-of-sections)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlLtEwbwUcaH9dHzlA" %}
[Add Google Analytics](/using-pixfort-builder/add-google-analytics)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlMFkOt7Lk5jMFL59P" %}
[Button customizer](/using-pixfort-builder/button-customizer)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlMTDGSbJ21zL73aRd" %}
[Changing Links in your page](/using-pixfort-builder/changing-links-in-your-page)
{% endcontent-ref %}

{% content-ref url="/pages/-LmlNTNc89jYU5U9HSW0" %}
[Change & upload images](/using-pixfort-builder/change-and-upload-images)
{% endcontent-ref %}


# Introduction to PixFort Builder

Learn the basics of PixFort Builder

PixFort builder is a HTML Grid System Based Page Builder,  it includes a lot of powerful functionalities that allow you to create advanced website in minutes!

### Learn more about each feature in PixFort Builder  <a href="#learn-more-about-each-feature-in-pixfort-builder" id="learn-more-about-each-feature-in-pixfort-builder"></a>

1. [Building pages using Page Builder](/using-pixfort-builder/building-pages-using-page-builder).
2. [Create fully working forms using Form Builder](/using-pixfort-builder/create-fully-working-forms-using-form-builder).
3. [Introduction to popups](/using-pixfort-builder/introduction-to-popups).
4. [How to edit menu](/using-pixfort-builder/how-to-edit-menu).


# Building pages using Page Builder

Learn the basics of PixFort page builder

First it is good to know that:&#x20;

* Each **Page** contains **Sections.**
* Each **Section** contains **Elements**.
* An **Element** contains components.

### 1. Pages <a href="#id-1-pages" id="id-1-pages"></a>

To start building your page, you can choose between 2 ways:

* Start with sections.
* Start with templates.

![](/files/-LmlI8KFqlGP1l0JhEh5)

\
To add or delete pages to your project, you can open **Pages manger** from left bar

![](/files/-LmlIByssBkwUvhSzHSC)

### 2. Sections <a href="#id-2-sections" id="id-2-sections"></a>

Pages in PixFort builder are composed of sections, you can create any order you want with these sections, and each section has its own settings (background, padding...), you can access to it by clicking on the **Settings icon** in the dark box on the left of each section.

![](/files/-LmlIEoGlJvkzkciLCjM)

### 3. Elements <a href="#id-3-elements" id="id-3-elements"></a>

Sections in PixFort builder are composed of elements. These elements contain all different components in your page (title, text, image, form, video...), and the element could contain more than one component (i.e. icon + title + text).

![](/files/-LmlIH-bUVDK2hmfLP_c)

The pages in PixFort builder are based on Bootstrap grid-system (12 columns), that means each element in the page has a specific size based on its columns, this size can be changed by adding or removing columns from the elements **(click on - or + icon in element's bar)**.\
\
The image below shows you the same element with different sizes (columns)

![](/files/-LmlIJuJV9fw1yH-p_Dg)

From the **Blue bar** of each element you can:

* Change element's position by continuous-clicking on **Move icon** (first icon).
* Change element's size **( - or + icons)**.
* Access to **element's settings** (background, animation, padding...etc).
* **Duplicate** element.
* **Delete** element.

To edit the components of an element:

* **Text:** just click on the text and start writing.
* **Image:** right-click.
* **Button:** right-click.
* **Font icon:** right-click.
* Special components like **forms**, **videos**.. can be edited via element's blue bar.


# Change page width

Learn how to change the page width

To change page width you can insert this snippet code in the CSS editor inside the builder:

```
@media (min-width: 1200px) {
    .container{
        width: 1170px;
        max-width: 100%;
    }
}
```


# Create fully working forms using Form Builder

How to edit forms and add new fields

Editing forms via Form Builder is very simple and easy, to edit a form in your page just click on the **Message icon** in element's blue bar which contains the form.\
&#x20;

![](/files/-LmlJ6tc3v2L5nrz3uoX)

Then the settings panel will appear on the right of screen, the settings contains:

* **Fields:** from this tab you can drag and drop new fields to your form.
* **Settings:**  from this tab you can choose a confirmation popup, add a redirect link, choose form type **(custom email or a specific email marketing service)** and enter list ID.

If you choose to add an email marketing service to your form (via settings tab), don't forget also to setup the integration from your **project's settings page**.\
\
You can check this article [**How to configure an integration**](/integrations/how-to-configure-an-integration)\
\
To see the options of a field in your form, just put the mouse on the fields and the options will appear:

![](/files/-LmlJAw0X9NI4YR9tMM-)

With these options you can:

* Change field order.
* Edit field's parameter (name, placeholder, required...).
* Delete the field.


# Introduction to popups

Learn how to add popups to your page

Adding popups via popup builder is very easy, to select a popup click on the **Popups button** in the bottom bar of the builder

![](/files/-LmlJhltZNLiOpuXPZW7)

Then the popups window will appear and you can choose which popup you want to add to you page

![](/files/-LmlJjhnL8JrwXfKI4b5)

After adding a popup you can via the **Popups button:**

* Open the popup by clicking on it.
* access to its settings by click in **settings icon.**
* Delete the popup.
* You can also add new popups to your page!

![](/files/-LmlJlfHhgs5DsQzC5Hd)


# Automatic Popups

Learn how to set automatic popups

To set a popup to appears automatically after loading the page, open popup **settings** then choose **Advanced** tab, then choose the duration from **Automatic Popup** option.

![](/files/-LmlJya1Eb60c_vIqaow)


# How to edit menu

Learn how to create your custom menu

To open menu settings, click on **header's settings icon**, then from the settings panel **(menu tab)** you can customize and modify the links in your menu.

![](/files/-LmlKE7GUv0PT_jelWRF)

Now from the settings panel you can add, edit and reorder the links in the menu, you can also access to header settings via the tabs **Style** and **Advanced**.

![](/files/-LmlKFmvHKJmgrCTE--W)


# How to edit maps in builder?

Learn how to add your own google map embed code

To edit the map element in your page, click on the Earth icon in the blue settings bar.

![](/files/-LmlKwCOhvxd5N9XdANJ)

Then from the right sidebar you can replace the embed code with your own code.

To get the embed code of your map:

1. Open [**Google Maps**](https://www.google.com/maps).
2. Make sure the map, Street View image, or directions you'd like to embed shows up on the map.
3. In the top left corner, click the Menu .
4. Click Share or Embed map.
5. At the top of the box that appears, choose Embed map.
6. Copy the HTML embed code and paste it into the embed code field and click apply.

![](/files/-LmlKyb8GB91RmIcE-a0)


# How to change a video

Learn how to change a video inside PixFort builder

To change a video just click on the **globe icon** in the blue bar then from the right sidebar you can change the embed code with your own one.

![](/files/-LmlLP2C6nDClCAct88r)


# Changing Background image of Sections

How to change background image

Pages in PixFort builder are composed of sections, you can create any order you want with these sections, and each section has its own settings (background, padding...), you can access to it by clicking on the **Settings icon** in the dark box on the left of each section.

![](/files/-LmlLrHVZhZSbRAAZ00N)

To change the background image click on "Change" button, then you can choose an image from the gallery or upload new one.

![](/files/-LmlLsk3EdQXohSO3okI)


# Add Google Analytics

Learn how to add Google analytics to your project

![](/files/-LmlMCTvLvx8L9nhChdK)

To add Google Analytics to your project you just need to add your Google Analytics tracking ID in the SEO panel of the page (Google Analytics field).<br>

![](/files/-LmlME6wIjo7j153Gz9Y)

To find your Google Analytics tracking ID:

1. Sign in to [your Analytics account](https://analytics.google.com/).
2. Click [Admin](https://support.google.com/analytics/answer/6132368).
3. Select an account from the menu in the ACCOUNT column.
4. Select a property from the menu in the PROPERTY column.
5. Under PROPERTY, click Tracking Info > Tracking Code. Your [tracking ID](https://support.google.com/analytics/answer/7372977) is displayed at the top of the page.


# Button customizer

Create custom buttons via button customizer tool

#### To edit the text of the button&#x20;

Just click on the button's text and then you can edit it, for example:

![](/files/Syi3CXJn2n5CFiQLLkql)

#### To edit the button link or style in your page:

**1. Right-click on the button and choose edit link.**

![Right-click on the button and choose Edit link](/files/-LmlMPnq0yU8N8y0dFXr)

**2. Now from the Settings panel in right sidebar you can customize your button as you want!**

![Choose the Style tab to customize the button](/files/-LmlMRbhGgDjmrvPyAw8)


# Edit Sliders

Create custom sliders using the Slider Builder

To edit a slider, just open the Slider Settings where you can add or remove slides and edit the title and content for each slide, for example:

![](/files/CyBNgQbLVeoxmcQU9xKE)

To edit the image of each slide, just **Right-click** on the slide image and select , for example:

![](/files/BN20TpQ6LS9xfHGh702c)

To edit the text of the button in the slide, just click on the button's text and then you can edit it, for example:

![](/files/l3GccXCAv0eegJ1OmHgp)


# Changing Links in your page

How to change links of buttons and social icons

To add your page link to any button or social icon just right click on the link and choose "**Edit link**".

![Right-click on the button and choose Edit link](/files/-LmlMPnq0yU8N8y0dFXr)

### You can choose between multiple link types: <a href="#you-can-choose-between-multiple-link-types" id="you-can-choose-between-multiple-link-types"></a>

* **Link:** input your page URL in the "Link" field.
* **Page:** select a page in your project.
* **Section:** select a section in the current page.
* **Popup:** select a popup in your project.

Then click on the green button to apply the changes.

![Example of adding a Link](/files/-LmlMttG7qrtfgpOq6y1)


# Change & upload images

Learn how to change and upload new images

To change an image in your page you just need to **Right-click** on the image and choose **Change Image**

![](/files/-LmlNdl-mD7p8q0x6LDc)

Then choose **Upload image tab to** upload your own image.

![](/files/-LmlNfZJxtjD9Z5lbokD)


# Integrations

Everything about integrating your project with 3rd party services


# How to configure an integration

Learn how to setup an integration

Setting up an integration in PixFort is very easy, to do that:

1. Go to **Project's settings page**.
2. Choose **Forms** tab.
3. Now choose which integration you want to use, and scroll down to fill up the required information, then click the save button. That's it!

{% hint style="info" %}
**Note:** don't forget to change also the form type inside the builder (to do this click on the envelope icon in the blue bar above the form element, then click on Settings tab from the right sidebar and change the form type).
{% endhint %}


# SMTP emails

How to configure SMTP emails (phpMailer)

![Project settings](/files/-LmlCRhJxxho4V0njyFQ)

To send the submitted data to your custom email (via SMTP) you should open the **settings of the project** and then open the "**Forms**" tab, then choose the first two boxes under Custom Email:

![The first box is for custom email, the second one is for SMTP](/files/-LmlCWzKZdWHkHZyv2Nc)

Then input your email address, the subject of the email and SMTP configuration (Host, username and password) in the corresponding fields at the end of the page.

![Fill up your Custom email & SMTP information](/files/-LmlCvhpqPBnGSu6oX_H)

After that you should open your project inside the builder and click on the "Form Settings" button in the settings of the column which contains the form, then from the right sidebar open the "Settings" tab and choose "Custom Email (SMTP)" (you can keep list id field empty).

![To open the form settings click on the "Envelope icon" in the top blue bar of the form](/files/-LmlD9jA3mrmc2mxRPHZ)

To change field's name simply hover on the field inside the builder and click on the **EDIT** button on it, the from the popup you can change field's name, placeholder and set if it's required or not.

![](/files/-LmlDVt5zAlW7FtncN4e)

{% hint style="info" %}
**Note:** the integration will not work in page preview and will only work after exporting the project.
{% endhint %}


# Custom emails

How to configure Custom emails

![Project settings](/files/-LmlCRhJxxho4V0njyFQ)

To send the submitted data to your custom email (via the default php mail function) you should open the **settings of the project** and then open the "**Forms**" tab, then choose the first box under Custom Email:

![The first box is for custom email](/files/-LmlEGog9Au_xShpYcRX)

Then input your email address and the subject of the email in the corresponding fields at the end of the page.

![Fill up your Custom email information](/files/-LmlEK61x0LnMJcCjfCw)

After that you should open your project inside the builder and click on the "Form Settings" button in the settings of the column which contains the form, then from the right sidebar open the "Settings" tab and choose "Custom Email" (you can keep list id field empty).

![To open the form settings click on the "Envelope icon" in the top blue bar of the form](/files/-LmlEQjkvhRbMtV5hKUy)

To change field's name simply hover on the field inside the builder and click on the **EDIT** button on it, the from the popup you can change field's name, placeholder and set if it's required or not.

![](/files/-LmlDVt5zAlW7FtncN4e)

{% hint style="info" %}
**Note:** the integration will not work in page preview and will only work after exporting the project.
{% endhint %}


# MailChimp Integration

Learn how to set up MailChimp integration

To send the submitted date to your MailChimp account you should have the following information:

* Your API key from here - <http://admin.mailchimp.com/account/api>&#x20;
* List unique id from here - <http://admin.mailchimp.com/lists/>&#x20;

First you should open the settings of the project and then open the "Forms" tab, then choose MailChimp and input the API key in the corresponding field at the end of the page.

After that you should open your project inside the builder and click on the "Form Settings" button in the settings of the column which contains the form, then from the right sidebar open the "Settings" tab and choose "MailChimp" as form type and input the list id in the "List ID" field.\
\
And you should make sure that each field of the form has the same name in your MailChimp account, to change field's name simply hover on the field inside the builder and click on the settings button on it, the from the popup you can change field's name, placeholder and set if it's required or not.

{% hint style="info" %}
**Note:** the integration will not work in page preview and will only work after exporting the project.
{% endhint %}


# GetResponse‎ Integration

How to configure GetResponse‎ integration

To send the submitted date to your GetResponse‎ account you should have the following information:

* Your API key from here - [app.getresponse.com/my\_api\_key.html](https://app.getresponse.com/my_api_key.html)
* List unique id from here - [app.getresponse.com/campaign\_list.html](https://app.getresponse.com/campaign_list.html)

First you should open the settings of the project and then open the "Forms" tab, then choose GetResponse‎ and input the API key in the corresponding field at the end of the page.

After that you should open your project inside the builder and click on the "Form Settings" button in the settings of the column which contains the form, then from the right sidebar open the "Settings" tab and choose "GetResponse‎" as form type and input the list id in the "List ID" field.\
\
And you should make sure that each field of the form has the same name in your Mailerlite account, to change field's name simply hover on the field inside the builder and click on the settings button on it, the from the popup you can change field's name, placeholder and set if it's required or not.

{% hint style="info" %}
**Note:** the integration will not work in page preview and will only work after exporting the project.
{% endhint %}


# Mailerlite Integration

How to configure Mailerlite integration

To send the submitted date to your Mailerlite account you should have the following information:

* Your API key from here - <https://app.mailerlite.com/integrations/api/>
* List unique id from here - <https://app.mailerlite.com/integrations/api/>

First you should open the settings of the project and then open the "Forms" tab, then choose Mailerlite and input the API key in the corresponding field at the end of the page.

After that you should open your project inside the builder and click on the "Form Settings" button in the settings of the column which contains the form, then from the right sidebar open the "Settings" tab and choose "Mailerlite" as form type and input the list id in the "List ID" field.

You can find the List ID (Group ID) in your Mailerlite account from here:\
MAILERLITE - Profile > Integrations->Developer API->Subscriber Groups\
\
And you should make sure that each field of the form has the same name in your Mailerlite account, to change field's name simply hover on the field inside the builder and click on the settings button on it, the from the popup you can change field's name, placeholder and set if it's required or not.

{% hint style="info" %}
**Note:** the integration will not work in page preview and will only work after exporting the project.
{% endhint %}


# AWeber Integration

How to configure AWeber integration

To send the submitted date to your AWeber account you should have the following information:

* Your API key from here - <https://auth.aweber.com/1.0/oauth/authorize_app/647b2efd>
* List unique id from here - <https://www.aweber.com/users/autoresponder/manage>

First you should open the settings of the project and then open the "Forms" tab, then choose AWeber and input the API key in the corresponding field at the end of the page.

After that you should open your project inside the builder and click on the "Form Settings" button in the settings of the column which contains the form, then from the right sidebar open the "Settings" tab and choose "AWeber" as form type and input the list id in the "List ID" field.\
\
And you should make sure that each field of the form has the same name in your AWeber account, to change field's name simply hover on the field inside the builder and click on the settings button on it, the from the popup you can change field's name, placeholder and set if it's required or not.

{% hint style="info" %}
**Note:** the integration will not work in page preview and will only work after exporting the project.
{% endhint %}


# MailWizz Integration

How to setup MailWizz integration with PixFort forms

To send the submitted data to your MailWizz account you should have the following information:

* Your API URL: this should be the URL of your MailWizz website followed by "/api/index.php", for example:

```
http://www.yourdomain.com/api/index.php
```

* Your public API key: You can create and find your API keys from MailWizz left sidebar.
* Your private API key.
* List unique id: can be found in the lists page.

First you should open the settings of the project and then open the "Forms" tab, then choose MailWizz and input the API URL and keys in the corresponding field at the end of the page.

After that you should open your project inside the builder and click on the "Form Settings" button in the settings of the column which contains the form, then from the right sidebar open the "Settings" tab and choose "MailWizz" as form type and input the list id in the "List ID" field.\
\
And you should make sure that each field of the form has the same name in your MailChimp account, to change field's name simply hover on the field inside the builder and click on the settings button on it, the from the popup you can change field's name, placeholder and set if it's required or not.

{% hint style="info" %}
**Note:** the integration will not work in page preview and will only work after exporting the project.
{% endhint %}


# Changing Forms feedback messages

The messages that appear after submitting the forms **(success, error,...)** can be changed after exporting the project.

You can do this by modifying the file **`/pix_mail/messages.php`**.


# Setup reCAPTCHA in forms

### Step 1 <a href="#step-1" id="step-1"></a>

First, we need an API key, so head on over to [**https://www.google.com/recaptcha/admin**](https://www.google.com/recaptcha/admin). To gain access to this page you’ll need to be logged into a Google account.

You’ll be asked to register your website, so give it a suitable name, then list domains (for example example.com) where this particular reCAPTCHA will be used. Subdomains (such as landing.example.com and code.example.com) are automatically taken into account.<br>

### Step 2 <a href="#step-2" id="step-2"></a>

With that done you’ll be given a site key and its partner secret key:<br>

![](/files/-LmlH0QbXuGui5ydPqx7)

Open the settings of your project from the dashboard in your account at [**builder.pixfort.com**](https://builder.pixfort.com/) and switch to the **Forms** tab, then select reCaptcha box and copy the reCaptcha secret key and paste it in the corresponding field at the bottom of the page and click the save button:<br>

![](/files/-LmlH2UASzGDj8VmaPbr)

### Step 3 <a href="#step-3" id="step-3"></a>

Open the builder and open the settings of the form (click the "**Form Settings**" icon from the blue bar above the form), then drag and drop the reCAPTCHA element from the right sidebar.\
After that, click on the "**Settings**" button on the right of the reCAPTCHA elements inside the form and fill in your "Site key" that you obtained in **Step 2**.

After that, save the project and the reCAPTCHA will be ready to use.

![](/files/-LmlH4Gmoe7i_OnBkqBK)

{% hint style="info" %}
**Note:** the reCaptcha widget will only show up after exporting the project (the reCAPTCHA element inside the builder is a placeholder image).
{% endhint %}


# Configure the Integrations Manually

You can configure the Integrations manually (Without configuring them inside your project on pixfort.com platform) by editing the file `"/pix_mail/config.php"`.

You can set the default form type from the line:

```
$mail_type = "ce";
```

Where `"ce"` is "Custom email" Type, for other types you can use:

* `"smtp"` for **SMTP** custom email type.
* `"mc"` for **mailchimp**.
* `"cm"` for **Campaign monitor**.
* `"gr"` for **GetResponse**.
* `"aw"` for **AWeber**.
* `"ac"` for **ActiveCampaign**.
* `"ml"` for **MailerLite**.
* `"fm"` for **FreshMail**.
* `"mw"` for **MailWizz**.
* `"sendy"` for **Sendy**.
* `"hs"` for **Hubspot**.
* `"ic"` for **iContact**.

After that you can fill in the other options, for example your **email address** and the **Subject** in the fields:

```
$to_Email       = "your_email@domain.com"; //Replace with recipient email address
$subject        = "Lead email subject here"; //Subject line for emails
```

If you are using **SMTP** form type, you should input the following SMTP configurations:

```
// SMTP Settings
    define('SMTP_HOST', 'smtp.domain.com');
    define('SMTP_USER', 'your_email@domain.com');
    define('SMTP_PASS', 'your_password');
```

For the other integrations you should input the **API key** for any used integration in its corresponding fields:

```
/* Mailchimp setting. */
define('MC_APIKEY', ''); // Your API key from here - http://admin.mailchimp.com/account/api

/* Campaign Monitor setting. */
define('CM_APIKEY', ''); // Your APIKEY from here - https://pixfort.createsend.com/admin/account/

/* GetResponse setting. */
define('GR_APIKEY', ''); // Your API key from here - https://app.getresponse.com/my_api_key.html

/* AWeber setting */
define('AW_AUTHCODE', ''); // Your Authcode from here - https://auth.aweber.com/1.0/oauth/authorize_app/647b2efd

/* ActiveCampaign setting */
define("ACTIVECAMPAIGN_URL", ""); // API_URL : Go to My Settings - > Developers
define("ACTIVECAMPAIGN_API_KEY", ""); // API_KEY : Go to My Settings - > Developers

/* MailerLite setting */
define("MailerLite_API_KEY", ""); // API Key: Go to https://app.mailerlite.com/integrations/api/

/* FreshMail setting */
define ( 'FM_API_KEY', '' ); // API Key: Go to https://app.freshmail.com/en/settings/integration/
define ( 'FM_API_SECRET', '' ); // API Secret: Go to https://app.freshmail.com/en/settings/integration/

/* Sendloop setting */
define("Sendloop_API3_KEY", ''); // API Key
define("Sendloop_SUBDOMAIN", ''); // LIST ID (GroupID)


/* MailWizz setting */
define("Mailwizz_apiUrl", ''); // API URL, Should be http://www.yourdomain.com/api/index.php (where MailWizz is installed)
define("Mailwizz_publicKey", ''); // Public Key: Go to "Api Keys" and create new key
define("Mailwizz_privateKey", ''); // Private Key: Go to "Api Keys" and get the private key

/* Sendy setting */
define("Sendy_URL", ''); // Your Sendy installation URL (without trailing slash).
define("Sendy_apikey", ''); // Your API key. Available in Sendy Settings.

/* Hubspot setting */
define("Hubspot_api", '');

/* iContact setting */
define("iContact_appId", '');
define("iContact_apiPassword", '');
define("iContact_apiUsername", '');
```


# Exporting your project

Learn how to export your project in different easy ways

### Download project as .zip file

{% content-ref url="/pages/-LmlB8k66zM9Wj69U4es" %}
[Export your Project as .zip file](/exporting-your-project/export-your-project-as-.zip-file)
{% endcontent-ref %}

### FTP integration

{% content-ref url="/pages/-LmlBHmnX0aMieCC5hVN" %}
[Publish project via FTP](/exporting-your-project/publish-project-via-ftp)
{% endcontent-ref %}


# Export your Project as .zip file

That Includes all images, html, css and JavaScript files

You can publish your project to your server by exporting it from PixFort Platform and then upload it to your website. \
To do that:&#x20;

1. **Click on your Project's Export Button from the dashboard.**
2. **Click on "Export Project" button to start downloading the .zip file.**

To upload the project to your website, first you should extract the .zip file on your computer and then upload all the files inside the extracted file to your server (via FTP).\
When you finish uploading the files open the browser to your domain name and the website will be ready to use.

You can check this article to learn how to upload project files to your hosting

{% content-ref url="/pages/-LmlAf4Ilsc8h6b3ryos" %}
[Uploading project files to my hosting](/upload-project-to-server/uploading-project-files-to-my-hosting)
{% endcontent-ref %}


# Publish project via FTP

Transfer your project directly to your server

You can publish your project directly to your server via the FTP integration in PixFort Platform. To do that:&#x20;

1. **click on your Project's Export Button.**
2. **Choose Publish via FTP tab.**
3. **Fill up the form with your FTP login credentials.**

!["Export Project" page in your PixFort account](/files/-LmlBT9eNIOYnZsLdXQt)

{% hint style="info" %}
When you finish uploading the files open the browser to your domain name and the website will be ready to use.
{% endhint %}


# Upload project to server

Setting up your exported project on your server

{% content-ref url="/pages/-LmlAf4Ilsc8h6b3ryos" %}
[Uploading project files to my hosting](/upload-project-to-server/uploading-project-files-to-my-hosting)
{% endcontent-ref %}


# Uploading project files to my hosting

Learn how to upload the exported files via FTP to your hosting

**FTP - File Transfer Protocol** lets you upload your website's files to your hosting account (or download those files from your hosting account to your computer). By doing this, you're publishing your site to the internet to make it visible to visitors.\
\
To use FTP, you'll need an FTP client. There are many different clients you can use, we recommend you to use [**FileZilla**](https://filezilla-project.org/)\
After exporting your project as .zip file you can upload it to your hosting via FTP.&#x20;

**To upload your website files to your online server please follow these steps:**

1. Download, install, and launch [**FileZilla**](https://filezilla-project.org/)
2. Enter your FTP credentials in FileZilla **(Host, Username and Password)**, and then click **Quick connect**
3. Unzip your website .zip file, then upload its content via FilleZilla to the desired directory on your server.


# Your account

General information about your account

{% content-ref url="/pages/-LmlAGLRJNa---20PeQP" %}
[Add another Envato account](/your-account/add-another-envato-account)
{% endcontent-ref %}


# Add another Envato account

Synchronise your PixFort with another Envato account

If you want to connect another Envato account with your PixFort account please:

1. Open Envato API page and sign out from current account.\
   <https://build.envato.com/api/>
2. Then open the settings page in your PixFort account and add your another Envato account:\
   <https://builder.pixfort.com/user/settings>


# FAQ

Frequently asked questions

## Can I create multiple forms in a row?

Yes, in fact there are many possibilities to create multiple forms in a row like:

* After submitting the first form you can **redirect the user to another page which contains the second form.**
* After submitting the first form you can **set a popup to appear with the second form.**

It's also possible to repeat the same process to create more than 2 forms in a row.

## What is the difference between megapack and flatpack?

Both are HTML templates available for sale on themeforest, [**FLATPACK**](https://1.envato.market/FLATPACK) includes a front-end builder which you need to install it on your server, whereas [**MEGAPACK**](https://1.envato.market/MEGAPACK) comes with our new online builder which is available on [**PixFort**](https://builder.pixfort.com/) platform and you can access it directly using envato account.

## Do I have to pay a monthly subscription?

Absolutely not, you only need to purchase a licence in order to use PixFort platform, and there is no limit to your access as long as you have a valid license.

## How many projects can I create?

You can create projects as many as licences you have. i.e. if you purchased 2 licences you can create 2 projects (each project requires 1 licence).

You can check this article to learn more about Licences & Projects.

{% content-ref url="/pages/-LWmpq-TbMNC2Savxl7f" %}
[Licenses & Projects explained](/pricing-licenses-and-terms/getting-started)
{% endcontent-ref %}

## How to speed up your website?

Website loading speed is a priority for the overall user experience, and it’s also one of the hundreds of SEO ranking factors. Page speed may depends on many different factors, however, following the essential recommended tips will make a significant difference on page loading speed. Here you will find a list of best practices to follow when creating and optimising your website:

{% tabs %}
{% tab title="1. Reduce image sizes" %}
Images can play a major role in your site speed. They’re often very large files, which can slow down page load times.\
We highly recommend using appropriately sized images and make sure to compress the large images before uploading them into the page, you can use a tool like [tinypng.com](https://tinypng.com/) where you can upload your images to be compressed the download the compressed version which can you upload and use into your website.

![tinypng.com](/files/-Lml7l5tkZ1U5LOFRE4V)
{% endtab %}

{% tab title="2. Enable gzip compression" %}
The smaller your files, the faster your pages will load. Compression files is one of the easiest ways to reduce load times, and today, enabling compression with [Gzip](https://www.gnu.org/software/gzip/) is considered standard practice.

Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller.

Gzip will reduce the size of files sent from your server to increase the speed to which they are transferred to the browser.

* Reduce sizes of pages by up to 70%
* Increase page speed
* Cost-benefit ratio: high
* Access needed to the .htaccess files or server administration files

This works well with CSS and HTML, because these files typically have repeated code and whitespace.

{% hint style="info" %}
If you’re not sure if your site has Gzip enabled, you can use [checkgzipcompression.com](https://checkgzipcompression.com/) to check. Just enter your site’s URL, and if you have Gzip enabled, you’ll see something like the image below:
{% endhint %}

![checkgzipcompression.com](/files/-Lml7yJFkkf0MTp3S9HI)

If you don’t have Gzip enabled, however, you’ll want to fix this as soon as possible.

Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache you will need to add the following lines to your .htaccess file:

```
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>
```

To enable compression in NGINX you will need to add the following code to your config file:

```
gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;
```

{% endtab %}

{% tab title="3. Enable browser caching" %}
Page load times can be significantly improved by asking visitors to save and reuse the files included in your website.

* Reduces page load times for repeat visitors
* Particularly effective on websites where users regularly re-visit the same areas of the website
* Benefit-cost ratio: high
* Access needed

You can enable caching on your Apache server by adding these lines to your .htaccess file:

```
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
```

{% endtab %}
{% endtabs %}

## Forms

### Can I add multiple emails in custom email forms?

**Yes**, to do this you just need to separate the email addresses with a comma, for example:\
**`first.email@pixfort.com, second.email@pixfort.com`**


# Pricing, Licenses & Terms

Learn how PixFort products are priced

{% content-ref url="/pages/-LWmpq-TbMNC2Savxl7f" %}
[Licenses & Projects explained](/pricing-licenses-and-terms/getting-started)
{% endcontent-ref %}

{% content-ref url="/pages/-LmhHcl80PkgcNWlysTd" %}
[Refund Policy](/pricing-licenses-and-terms/refund-policy)
{% endcontent-ref %}


# Licenses & Projects explained

How PixFort platform works

**First, what is a PixFort project?** \
PixFort platform allows you to create projects in your account based on how many licenses you have. In each project you will be able to create and organize multiple pages using PixFort builder to create multiple landing pages, website...etc.

**How many projects I can create per license?**\
To make it simple, for each regular license you purchase from themeforest you can create one project in [PixFort](https://builder.pixfort.com/) platform, so if you purchased 2 licenses of a template from themeforest you will be able to create 2 projects using that template.\
\
For more information you can check Themeforest's licenses from here:\
<https://themeforest.net/licenses/standard>

**Note:** in each project you will be able to create multiple pages and the project could be used as long as you use it for the same end product.

**Example:** if you want to build multiple landing pages for your company or client, one regular license will be sufficient, however, each license can be used on a single domain (subdomains are included as long as they belong to the same End Product).

![](/files/-LmhGmpWyJ9gJxSeGIEv)

Want more details? check what you can do when you purchase a license:

* You can create one project with multiple pages (i.e. landing pages, website with multiple pages, one page website... etc).
* You will be able to download all your project's source files (HTML) anytime you want without any extra fees.
* You have access to all integrations (including FTP publish) without any extra fees.
* And you get awesome support from our friendly team!

\
Note: when you purchase more than one license you just need to re-synchronize your account with Envato Market to verify your new license, to do this just go to your [Account Settings](https://builder.pixfort.com/user/settings) page and click on the green synchronization icon.

Please verify that the template you purchase is made for PixFort platform, currently there is only [**MEGAPACK**](https://1.envato.market/MEGAPACK) template on themeforest.


# Refund Policy

Envato Market Refund Rules

For more information about the refund policy please check Envato Market Refund Rules from the link below:\
<https://themeforest.net/page/customer_refund_policy>


