How to Create a Landing Page

You can create a landing page with a well-thought-out user-friendly design using a website builder without coding skills. Choose premade templates that suit your business, customize them or create your own from scratch.

With our suite builder, you only need to select an element from the panel, drag it to the work area, and edit the style for your business. In addition to text and media blocks, you can connect payment options, add subscription forms to email campaigns or chatbots, add an image gallery, and show links to your page on social networks or your blog to attract and convert visitors to customers.

To create a page, go to the “Sites” tab and click Create Site.

Then, click +New page.

You can also go to the "Templates" tab, select a premade template, and then click on "Edit" in the drop-down list.

General Page Style

Before you start adding elements, create the page style you want. By default, the color scheme and text style you select will be applied to all of the elements you use. You can also set or change the general style of your page after it is created.

You can find the page style palette icon in the upper left corner of the top bar.

Click on the palette icon and select "Customize" next to the desired item.

Color Palette

You can choose a preset color scheme.

Or customize the color scheme of each element individually:

Content background is the default color for all elements except the “Cover” element.

Page background is the color of the page space outside of all elements.

Text is the color of the text for the "Text" element and other elements containing text (labels, radio buttons, checkboxes) in the "Subscription form."

Primary color is the background color in the “Cover” element, the background color of the button with the “Primary” style, and the color for the line of the button with the “Secondary” style.

Secondary color is the color of the "Line" element and the background color of the button with the "Secondary" style.

Text Styles

You can choose from preset font pairs or customize fonts for paragraphs and headings to match the style of your site and maintain design integrity.

To customize fonts for paragraphs and headings separately, go to settings.

Button Styles

You can select one of the styles from the preset list of button styles.

You can also customize your style for both kinds of buttons:

“Primary” is used for priority call-to-action buttons that need more attention.

Secondary is used for less important buttons; the default color of this button is paler.

Page Background

Also, in the general settings, you can set a background image for the entire page:

Content width

You can set the size of the site width. The minimum value is 420 px, the maximum is 780 px. When you set up the maximum width for the desktop version of your site, it also adapts for mobile devices.

Adding Elements

Choose an element in the left pane and drag it into the work area for further customization.

To return to setting a specific element, click on it, and the item settings will appear on the right.

Cover

Use the cover as a top block or header on your site to display a company logo or a profile avatar.

By default, the cover consists of an avatar, short text, and a background.

For the cover, you can pull up an avatar image from a social network or upload an image yourself.

Then proceed to customize the display of the avatar — select the alignment and specify the size.

To edit the text, click on it, and the text editing panel will open.

Within each element, you can customize the background, padding from the element to the page border, shadow, and round the corners of a given element.

Text

Used to add a text element to the page.

To change the formatting, click on the text itself, and the text editing panel will open. Change the color and font for a specific part of your text to highlight keywords and headings.

To change the location and add a background, click on the settings on the right.

Gallery: Images, Videos, and Carousels

With the "Gallery" element, you can add multimedia elements to your page: images, carousels of images, and video. Using additional media enhances the effect of your text.

If you want to add a video, you must first upload it to YouTube, and then insert a link to it into the editor.

A carousel is suitable for displaying products in the form of cards with a description, image, and link.

You can set the carousel to auto-scroll and adjust the scrolling speed, or leave the option to manually scroll through the carousel.

Enter a name for the button. Select its type: link to a website, phone number, or email address, and then insert the data.

Choose a button style. By default, styles are pulled from the general page style. You can also create a unique style for each button separately — for this, select the "Custom" option.

If you want to give users a hint or provide additional information, add a description for your button.

Socials

You can add a social media link to invite a user to your page or your company page.

To add a new social network, click Add. Then click on the edit icon, select a social network and enter a link to it.

Customize the appearance of the element: display your link as a button or icon, and choose a size and style.

Separators: indents and lines

Use indentation and line to visually organize white space and meaningfully separate blocks on the page.

For the "Divider" element, you can select its color, thickness, shadow, and type.

Subscription Form

Collect site visitors’ data and let them subscribe to your campaigns using the subscription form.

Select the mailing list where you want to transfer your subscribers.

You can add additional fields to your form. Select the preset fields and specify which variable you want to save them in. Add a field name, hint text in the placeholder, and indicate whether the field is required or or not.

Customize the text style of the field names or hide them with the toggle switch.

Enter your text and select a style for the confirm and send button. You can also enable double opt-in — a subscription method in which the user is added to the mailing list only after they confirms their subscription via email.

You can also automatically create a CRM deal from your landing page. To do this, activate the "Create a deal in CRM" option, enter a name, and select a pipeline and stage for the deal you want to create.

If you are saving a deal or contact in CRM, you can associate a form field with contact and deal variables.

Chatbots

You can add a button to a chatbot to subscribe a user for further chatbot communication and launch the desired flow — a welcome flow or your custom flow for a specific request.

Choose the appearance — "Icon + Text" or simply "Icon" — and the style of the button. Then add a new element or edit an existing one with a social network.

If you have a chatbot created in SendPulse, the builder will pull up the data — you just have to choose your bot and a flow that will be launched after subscribing. If you have created a chatbot in another service, add a link to it.

Countdown

You can add a “Countdown” element to set a countdown until the start of an event or the end of a promotion.

Pick up the end date and time and the message after completion. You can set the date options by specifying days, hours, minutes and seconds.

You can also customize the countdown appearance: add separators, change the size, text color and block style.

FAQ

Use an “FAQ” element to add detailed answers to frequently asked questions from your users in a structured way. On the site page, an FAQ section looks like a list of questions. By clicking on a question, a user can expand the question to see the answer.

In the element editing panel, you can add a new question and move the variations from top to bottom. You can change the style of the icon: select the icon, its location, and color. You can also add or remove the divider and select its color.

To change the content and text formatting, click on the text or the heading, and the text editing panel will open. You can change the color and font for a specific part of your text, add a link, or create a list.

Preview, Save, and Publish

To see how the page looks to site visitors, click Preview in the upper right corner of the design panel.

When you've finished creating your site, click Save and Exit. “Save and Publish” in the builder directly is available for re-editing.

After saving, you will be redirected to a page, where you can click "Publish" to publish your landing page. You can return to the builder by clicking on “Edit.”

You can change the sire address, name, and favicon of your site, add SEO elements and connect Google Analytics and Yandex.Metrica. To do this, click Site Settings.

Here you can also monitor the statistics of visits to your site.

You can get inspired by examples of creating one-page sites on our blog.

Rate this article about "How to Create a Landing Page"

User Rating: 5 / 5 (4)

    Other useful articles

    Popular in Our Blog

    Try SendPulse today for free