Pages
This article applies to the Page builder in all BEE Pro plans. However, some features may be limited or unavailable on the Free plan.
Overview
BEE was originally created as an email builder, and thanks to you, we are the number one drag-and-drop email builder in the market. We also know that many of you have requested to add the ability to create landing pages. However, since the BEE builder provides HTML that is targeted toward email clients, these designs weren't always compatible with web hosting services... Until now!
The Page builder includes special types of content blocks. Upon exporting a page, you receive an HTML file optimized and intended to be used as a landing page. You can also host your pages on BEE Pro.
How it works
Starting from the Projects area, use the + Create new button to start designing a page. A modal opens and prompts you to choose between a new page or an email.
If using the + Create new button outside of a project folder, you may also see the option to create a new folder.
By selecting Create a new page, you'll be directed to the Template catalog.
We've created a catalog of templates specifically for pages. You can start designing from scratch, select the perfect template for your idea, convert an email template to a page, or opt to use one of your templates (My templates).
“Convert an email template” is very useful. For example, you may want to convert a newsletter you have previously created so that it can also be used as a landing page on your website. The Pages template catalog will allow you to convert the design into a page.
After selecting your preferred template, you’re ready to create your page. For more info about the main differences between the email builder and the page builder, go to Emails vs Pages.
From your design list, you can view details, copy, move, export or delete your page. More on this below.
View details
The View details section for pages is similar to the one for emails, but it has a few different options.
On the left, you see the page preview and three icons:
-
“Open in a new tab”, so you can see the preview in a new tab of your browser;
-
“Copy URL” to share the page and get some feedback. Would you like to have a cute URL, remember to title your page and publish it!
-
“Open on your smartphone” to get a QR code and preview the page on your mobile phone.
On the right side, you have two sections: Page Details and Page History.
The page history tab shows who did each change, and when. View & restore a previous version of a design.
Page Details shows you when the last edit was made, who performed it, the Edit page, and Export buttons. Let's take a closer look at the options here that are specific to Pages.
Publish option
You will find the new Publish feature with a corresponding toggle switch and instantly publish or unpublish your page when you are ready.
We provide you with a specific link for your page like this one- e.g. https://46y5k5e0v9.postedstuff.com/V2-SGFl-f9Cn-FSwW-bwR2/well-timed-calls/, which is composed of:
-
46y5k5e0v9.postedstuff.com, the main domain;
-
V2-SGFl-f9Cn-FSwW-bwR2, a random ID;
-
well-timed-calls, a specific name, which is the title you enter in “Title & Meta description”.
If you have an Enterprise account, you can use the Publish toggle to host your page with a custom domain.
This page also includes options for Title & Meta description and Share. All of these are unique to Pages.
Title & Meta description
This option allows you to set a title and description. This information will populate in the page URL and in its preview if you share the page on social media. In this case, the description might be also described as preview text.
So, for example, if you insert the following:
The page will populate like this if shared on Facebook:
For those who are more technically inclined, these options are included as metadata in the head of the HTML document upon export.
Share
If you can't wait to start showing off your new page, you're in luck! Using the share button, you can easily share your design on social media with a click of a button.
Just click the share button. If your page is not yet published, a modal will prompt you to proceed to publish it before sharing.
Then select the social media platform you want to use.
In a new tab, you'll be redirected to the platform you selected. You might need to log in. Once logged in, you'll find a post, tweet, or message ready to go with your design.
Generate email
Have you ever wanted to create pages and emails with the same design in a click? What an amazing breakthrough for your marketing campaign, don’t you think? Well, now you have this option!
Generate email creates an email on BEE Pro with the same design and content of your page. You immediately get redirected to the email builder to start modifying your design.
Hosted image delivery
If you're hosting images for your pages on BEE Pro, this counts toward your monthly data transfer allowance. You can find more info about the storage and delivery of hosted images on pages following this link: Hosted image delivery in BEE Pro.
Email vs. Pages
Content
What are the main differences between the email builder and the page builder? When using the Page builder, you can take advantage of a very useful tool which is the Form builder.
Forms
Designing a form
When you design a page with BEE Pro, you can add forms to it. Drag & drop the Form content block to the page, and the panel on the right will show you 4 sections:
- Manage fields
- Label options
- Field options
- Button options
The Manage fields option allows you to adjust the positions of your fields. You can also edit, delete or add more of them (note that they are limited to 10 at the moment).
When you edit a field, it is possible to modify the label name, select the type among several options, set it as required or read-only.
For each field, you can also change the type associated:
The Label option is useful when you want to change the text color, the label position, or the width (this is available only when you choose the 'Side' in the label position).
Example:
In the Field section, you can customize the look of your form even more by adding the background color to your fields.
The Button field is giving you the chance to edit the background color, edit the letter-spacing and change the font color in order to catch the attention of your readers.
Handling form submissions
What happens when the form is submitted depends on whether you download the page and host it on your Web site, or decide to host it directly with BEE Pro.
- If the page is hosted by BEE Pro, you can have BEE Pro handle form submissions. You can receive the data via email or save it somewhere else. Saving form data to a spreadsheet, a database, an email list, or other apps.
- If the page is hosted elsewhere (e.g. on your Web site), you will need to edit the HTML document and add an action to the form when you download the page from BEE Pro. The action specifies what happens to the form data when the form is submitted.
Settings
Since web pages are often viewed on larger displays than an email, you have a greater content area width to work within the Pages builder. Your Pages designs can be as wide as 1440px.
Since the Pages builder does allow a much larger content area width, you can minimize the sidebar. Whenever your cursor hovers over the sidebar, a purple icon will populate to the left of the tabs listed at the top.
If the sidebar is minimized, the icon to open it will always be available on the far right corner of the builder stage.
Also, now the favicon option in BEE Pro is available in the Settings tab. Its main purpose is to help visitors locate the page easier when they have multiple tabs open.
By clicking “Add favicon”, it’s possible to upload or import the favicon that has to be PNG, JPEG, or GIF source images.
Export output
This feature is limited in the Free BEE Pro plan. See below for further details.
As mentioned above, the Pages article provides a different HTML output upon export. The main difference here is that the export file will not include conditional comments that we use to target email clients such as Outlook. However, the export file will likely include a lot more internal CSS, as web browsers have more support than email clients for this syntax method.
When exporting a design out of the Pages section of your account, you'll see a familiar export options modal. We've also just released our first connector for Pages! Now you can easily push your pages to HubSpot.
The HubSpot Pages connector and PDF exports are only available in Team and Enterprise plans.
If you have any questions, feel free to contact us.
Comments
4 comments
I am loving Pages so far - it's truly helped my workflow so much. And I understand that, as with the original email product, designing it must be a tension between simplicity / ease of use and depth of the feature set.
Still, I must say that I'm already butting up against the need to more carefully tweak my Pages, especially the styles. Similar to how we're able to insert code, it would be amazing if there was a CSS editor of some sort to edit the "global" (internal) CSS for the page, or the ability to edit individual elements' styles. Right now, I'm trying to design a page in Pages that will have another page embedded in it, and matching the style of the embedded page in my BeeFree page is nigh impossible with the style options available to us now.
With that being said, again, thanks for this great beta product, and keep up the great work, please!
Hello! Thank you for your feedback. We really appreciate it! We are still working on the Pages feature so we are forwarding your feedback to our Product Team. Best.
The article says, "
You will find the new Publish feature with a corresponding toggle switch and instantly publish or unpublish your page when you are ready.
We provide you with a specific link for your page like this one- e.g. https://46y5k5e0v9.postedstuff.com/V2-SGFl-f9Cn-FSwW-bwR2/well-timed-calls/, which is composed of:
46y5k5e0v9.postedstuff.com, the main domain;
V2-SGFl-f9Cn-FSwW-bwR2, a random ID"
I don't see any of that at all when I toggle "Publish". How do I hook this to a GoDaddy account? Or is there a better way to get this seen online? What is the best /easiest way to do that?
Hello! You should see those elements in the Page Details area. If you need further assistance, please open a ticket using the widget in your BEE Pro account. Thanks!
Please sign in to leave a comment.