Wissen
Semrush App Center
Landing Page Builder
Adding and Editing Template Elements

Adding and Editing Template Elements

In this article, we’ll look closely at Template Elements in the Landing Page Builder app’s editor.

When you’re editing a template, on the left sidebar, you’ll find a variety of options for drag-and-drop page elements.

The left sidebar contains customizable page elements, including sections, text, forms, buttons, counters, images, icons, videos, boxes, and custom HTML. To use any of them, drag them onto your landing page.

To add any of these elements, simply click on them, drag them onto the screen, and place them where you want them. After adding, you may edit at any time by clicking on it. 

If you click on a page element, a variety edit options will appear around it, depending on its type.

Several options will appear, including:

  • Change: If it’s an image element, this option enables you to choose a new image to replace it
  • Duplicate: Make a copy of that element to place somewhere else on the page
  • Change layer: Moves the element forward or backward in view (for example, if you have a text box placed over an image, changing the layer of the text box would place the image on top of the text, covering it)
  • Remove: Deletes the element from the page

Additional editing options are available in the menu on the right. These options will vary depending on the type of element you are editing and will be described below.

See all of the Template Elements currently available below:

When you add a section to your landing page, this window will appear:

The Add a Section menu contains a variety of section templates.

Here, you can choose a section template, choose one of your own designs, or add a “Smart section.”

Template options are organized by function, and include:

  • Hero (e.g., a hero image and introductory text)
  • About 
  • Benefits 
  • Services
  • Numbers (e.g., statistics)
  • Portfolio
  • Testimonials
  • Form
  • Header
  • Footer
  • Contact

The “My Designs” tab contains any editable section designs you have previously saved.

Smart sections are custom, un-editable sections. Use these for content that needs to be uniform wherever it appears.

This option enables you to drag and drop a text box onto your landing page:

Dragging the text element onto your landing page creates a customizable text box.

Double-click on the text to change it according to your preferences. You can also edit its appearance using the text editor on the right, as described above.

Additionally, you can create AI-generated texts for the landing page based on your product/company name, its description, and the goal of the landing page. Just click the Generate with AI button and add the details in the pop-up window:

Fill in the fields in the Generate with AI pop-up window and the tool will created the requested pieces of text.

By default, if you drag and drop a form onto your landing page, it will contain an email field and a “send” button.

The form element, which by default contains only an email field and a "send" button.

To build your form, click the settings button at the top of the widget. Then, the “Form settings” window will appear. If you need to access this screen later, you may do so via the “Form settings” button in the right menu.

The Form Settings menu enables you to build out more complex forms.

The first tab, “Form fields,” allows you to add and modify fields to your form. To add a new field, click “Add element.” A drop-down menu will appear, containing all of the field types you could add to the form.

In Form Settings, the "add element" button triggers a drop down menu, listing every available form element.

These include:

  • Name
  • Email
  • Phone
  • Checkbox
  • Radio button
  • Website
  • Title
  • Company
  • PESEL
  • Address
  • reCAPTCHA
  • Single line text
  • Multi line text
  • Numbers
  • Drop-down list
  • Country select
  • Marketing information
  • Date
  • File
  • Hidden field

Once you add a field, on the right, you can set a label, placeholder text, and denote whether that field is required.

To remove a field, click the trash icon.

Next, the Integrations tab allows you to send form submission data to another platform, such as a marketing platform, CRM, or task manager.

The integrations tab in form settings enables you to send form submissions to your tool of choice.

Many different integrations are available for tools such as Salesforce, Constant Contact, Adobe Marketo Engage, and more. 

The “Next action” tab denotes what will happen upon form submission. 

The Next action tab in Form Settings, which determines what happens after a form is submitted, from the user perspective.

Options include:

  • Go to the default landing page
  • Go to another landing page (e.g., one created using Landing Page Builder)
  • Redirect to another URL (e.g., another page on your site, unrelated to Landing Page Builder)

On the “Autoresponder” tab, you can specify whether you’d like to send a follow-up email automatically.

The Form Settings Autoresponder tab enables you to send a custom follow-up email automatically.

If you enable this option, you’ll need to enter a title or subject line, sender name, sender email, and email text. A red dot will appear beside the tab name if this option is activated.

On the additional settings page, you can add conversion tracking tags.

The Additional Settings tab in Form Settings  is where you can add your conversion tracking tags.

When you drag a button onto your landing page, by default, it will only be a visual element—the button shape, color, and label text.

The button element, by default, is a blue square with a label until you customize it.

To customize the button design or associate an action with a button click, you’ll need to use the right sidebar.

The Counter widget counts the remaining days, hours, minutes and seconds until a designated date—for example, an event, contest or product release. By default, it looks like this:

The counter widget, counting down days, hours, minutes and seconds.

To set the counter or personalize its appearance, click Settings above the widget or in the menu on the right.

The Counter Settings menu lets you determine when your counter will expire.

In the “Counter settings” menu, you can choose between two counter types:

  • Date counter: Counts down to a specific date and time (e.g., counting down to an event)
  • Evergreen counter: The counter allows each user the same amount of time no matter when they open the page (for example, to limit the amount of time a user has to complete an action)

In addition to setting the exploration date or time, you can also specify what happens when the timer reaches zero:

  • Don’t do anything
  • Redirect to a URL

Once you’re happy with your timer, click “Save & close” to apply your changes.

Clicking and dragging an image onto your landing page will automatically prompt the image selection window to appear.

The image library, containing a variety of free-to-use images from Unsplash.

The image selection window contains two tabs:

  • My images: Images you’ve already used
  • Unsplash: A library of free-to-use images

The “My images” tab has a few unique options. You can:

  • Upload new images
  • Sort images into folders
  • Edit images

To edit an image, first click on the thumbnail. Then, click the three dots icon to expand the menu.

Access the image editor by clicking an image on your page, selecting the "three dots" icon, and clicking "edit image."

Clicking “Edit image” launches the image editor window.

The image editor window. Edit options are along the bottom of the image.

Image editing tools include:

  • Crop
  • Rotate
  • Enhance
  • Sharpen
  • Grayscale
  • Mirror
  • Flip
  • Invert

“Remove background” automatically removes the background of an image, making it transparent. As such, for images without a clear subject or background, this tool may not work.

Once a background has been removed, you will be directed to the image editor window as described above.

If you need a new image, search the Unsplash tab by keyword, or filter by image category. Click on any image, and then click “Save & close” to add it to your landing page, wherever you initially dragged and dropped the widget.

Icons are vector designs (e.g., symbols or simple logos). 

Dragging and dropping the icon widget onto the page will open the “Vector icons” menu.

The Vector Icons library has an array of customizable graphic elements for your page.

Search for your preferred icon by keyword, or choose a category and style filter to narrow down your options.

Once you select an icon, click “Edit color” to modify it as needed.

The Edit Color menu allows you to re-color your selected vector.

Then, click “Save & close” to add it to your page.

To add a video to your landing page, click and drag the widget into position. This will add the container where your video will appeaThe Add Video widget appears as a placeholder box, showing where your video will be embedded. You'll need to preview or publish your page to see the embedded video.

To add the video itself, use the right sidebar.

The right sidebar, as it appears when you've selected a video element.

In the “Video settings” section, first paste the URL of your video.

Then, using the check boxes, customize how your video will appear:

  • Autoplay
  • Related videos: Show additional, similar videos after this one has ended
  • Loop: Start playing again once it has finished
  • Title: Display the video title
  • Controls: Show video controls like play, pause, and volume control
  • Mute: Automatically silence the video
  • Show subtitles: Automatically show subtitles, if any were added to the video

The “Box” element creates a simple colored block.

When you place it on the page, by default, it appears as a small gray square:

The box element, which by default looks like a simple gray square.

Click and drag on the side or corner to resize. To further customize, use the right sidebar. Additional customization options include:

  • Changing the fill color and style
  • Adding and modifying borders
  • Adding rounded corners
  • Placing a shadow behind the box

If the above page elements don’t suit your needs, the HTML element enables you to code one for yourself. 

First, drag and drop the element onto the page. This box will determine how much space it will occupy in action.

The custom HTML element appears as a placeholder box until you publish your page.

Double click to open the HTML editor.

The Custom HTML editor. Copy and paste your code here to create a custom landing page element.

Here, you can write or paste your custom HTML. Then, click “Save & close” to add it to your landing page.

Please note that you will need to publish your page to see the completed code.

Anleitung
  • Adding and Editing Template Elements
Mehr anzeigen