Table of content
BEE was originally created as an email editor and thanks to you we are the number one drag-and-drop email editor in the market. We also know that many of you have requested to add the ability to create landing pages. However, since the BEE editor provides HTML that is targeted toward email clients, these designs weren't always compatible with web hosting services... Until now!
If this issue sounds familiar to you, we are happy to announce that the Pages editor (BETA) is available for all BEE Pro plans, including free trials. This new editor includes special types of content blocks and, upon export, will provide you with an HTML file optimized and intended to be used as a landing page.
If you're looking to simplify your web design workflow, we encourage you to try out this new feature and let us know what you think!
How it works
Starting from the home page, you'll now see the Pages section on the top bar. The first time that you enter this part of your BEE Pro account, you'll see the following message:
When you click on Create New page, you'll be directed to the template catalog. This template catalog will look a bit different when compared to the one you may already have used in the original BEE editor. The Pages catalog will direct you to a section where we have specifically compiled templates that can be used for webpages. You can also select a template from your existing custom templates, or even convert an email template to a page.
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 you've created and saved your design, you'll be redirected to the Details page. You can use this page to export your design or perform a number of other options. More on this below.
From the main Pages BETA dashboard, the Export option is also available if you click the icon in the upper right-hand corner of the design preview on the Pages tab. You'll also see a couple of other familiar options in this menu, such as View details and Copy.
The Details page for the Pages editor has a lot of features you may already be familiar with, such as:
- Edit Page name and description
- Apply tags
- Open in a new tab
- Copy URL
- Open on Mobile (which generates a QR code)
If you're using a Team or Agency plan, you'll also see some additional features that you also have access to in the email editor:
- Collaborate (which launches your design in the Collaboration tool)
- Page history (this works just like the Message history function)
This version of the details page offers two options exclusive to the Pages editor: Title & Meta description and Share.
Title & Meta description
This option allows you to set a title and description that will populate in the URL preview for your design if you share the message 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 Twitter:
For those who are more technically inclined, these options are included as metadata in the head of the HTML document upon export.
If you just 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 and 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 - and you'll find a post, tweet, or message ready to go with your design.
Email vs. Pages
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.
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 5 at the moment).
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).
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. For details, please see: 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.
Since web pages are often viewed on larger displays than an email, you have a greater content area width to work within the Pages editor. Your Pages designs can be as wide as 1440px.
Since the Pages editor does allow a much larger content area width, you can actually minimize the editor sidebar. Whenever your cursor is placed within the space of the editor sidebar, a purple icon will populate to the left of the tabs listed at the top of the sidebar.
If the editor sidebar is minimized, the icon to open it will always be available on the far right corner of the editor stage.
As mentioned above, the Pages article provides 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 message out of the Pages section of your account, you'll see a familiar export options modal. Note that there are no connectors currently compatible with the Pages editor, so this option is unavailable.
Since BEE Pages is in BETA, documentation for it is a work in progress. Stay tuned for more information!