Real-time page editor

You can change various pages, such as the registration and confirmation page, to your own style in the convenient real-time page editor.

Dina avatar
Written by Dina
Updated over a week ago

You can edit various pages, such as the registration page, confirmation page, sales page, and others to your own style using our real-time page editor.

As soon as you start editing a page, you’ll enter the real-time editor.

On the left, you’ll find the content and the elements you’ll be able to edit. By hovering your mouse over an element, a blue line will appear around it (this only happens when you’re in editor mode).

Some elements have extra options; click on the gear icon for these options, such as 'Edit image', 'Change color', or 'Hide selected element'.

Changes are saved automatically. Click on 'Close editor' on the top right to close the editor.

The webinarGeek page editor

Changing text color

To change the text color you can follow the following steps:

  1. Navigate to the page you would like to edit.

  2. Click on 'Styling' on the left-hand side to change certain text colors at once.

  3. Change the text color by filling in the color code, or using the color picker.

  4. The changes are saved automatically. Click on 'Close editor' in the top right to close the editor.

You can also give certain text elements another color. Select the text section you’d like to edit, and an option will appear above the section to change the color.

Change header button color

The color of the header button can be changed to suit your branding or background. Click 'Styling' and choose or enter your preferred color.

Choosing a header button color

Changing fonts

Go to the editor of the page you’d like to customize. You can edit the font for the registration page, embed form, confirmation page and sales page.

To change the font of the entire page, click on 'Style' on the left-hand side and select the font you’d like to use. The elements you cannot individually edit will now also be changed.

You can also give certain text elements a different font. Select a text element you’d like to change, and an option will appear above the section to change the font.

Changes will be saved automatically. Click on 'Close editor' on the top right to close the editor.

Changing font size in the page editor

Adjust font size

Select the text that you want to change, you will see the option to adjust the font size on the top of the page.

Editing an image

To edit an image you can follow the following steps:

  1. Navigate to the page you would like to edit.

  2. Hower your mouse over the image you'd like to edit and click on the gear icon in the top right of the image.

  3. Click on 'Edit image' and select another image or upload a new one.

  4. Click on 'Save'. The new image will now be shown.

Changes will be saved automatically. Click on 'Close editor' on the top right to close the editor.

Adding video

Want to share a video on the registration page or confirmation page? No problem. Feel free to use a testimonial, introduction or mini demo video! To do this follow the following steps:

  1. Navigate to the page you would like to add the video on.

  2. Make sure the element 'Image - Left' is visible.

  3. Hover the mouse over the image and click on the gear icon.

  4. Click on 'Video' and paste the corresponding YouTube URL.

Adding a video to the registration page

There won’t be a preview of the video, but on the 'Image left' a play button will appear that says 'Watch video'. To make things easier, you’re also able to edit the 'Image left'! You can, for example, use a screenshot of the video.

Adding a video to the registration page

As soon as you click 'Watch video', the video will be opened in a pop-up and it'll be possible to play it.

Watching the video on the registration page

Changes will be saved automatically. Click on 'Close editor' on the top right to close the editor.

Discover more of our sales-based features here to collect and convert leads!

Editing texts

Go to the editor of the page you’d like to customize. Click on a text element to modify it. You'll immediately be able to start changing the text.

We have 13 options for editing text elements. These will appear at the top of the page after selecting a text element.

Below are some explanations for the different options:

Editing texts

1. Paste as plain text. Sometimes your browser will not allow you to use this option. Use Ctrl+Shift+V instead.

2. Bold text. Select the text you’d like to bold and click on the symbol.

3. Cursive text. Select the text you’d like in cursive and click on the symbol.

4. Change text color. Select the text you’d like to change the color of. Click on the symbol and on a color to change the text color.

Changing text color in the page editor

5. Remove text formatting. Select the text for which you want to remove the formatting and click the icon. All text formatting will be removed and the text will be reverted to standard settings.

6. Change font size.

7. Change font.

8. Align the text to the left.

9. Center the text.


10. Align the text to the right.


11. Add numbered list.


12. Add bulleted list.


13. Add or change link. Select the text you’d like to add a link to and press 'OK'.

Adding hyperlinks in the page editor

14. Remove link. Click on the text you’d like to remove the link from and click on the symbol.

Changes will be saved automatically. Click on 'Close editor' on the top right to close the editor.

Closing the real-time page editor

Image reference sizes

This is a list of image sizes for the different types of standard images within the WebinarGeek platform. Only use the sizes as a reference. It’s possible to divert from the reference, however you will ideally want to keep the same aspect ratio (especially for images such as presentation slides) or keep at least one of the two dimensions (such as height). The maximum file size is 5 Mb.

Please note! The standard dimensions are only an indication, you may deviate from these. The images are 'responsive', which means that the image adapts to the size of the window to a degree. Therefore, it may be that pieces of the image are sometimes cut off or that an image is stretched a bit.

Registration page, confirmation page and countdown page

  • Upper image block: max. height: 800 pixels X

    minimum width: 2480 pixels

  • Bottom left block: 470 x 170 pixels

  • Bottom right block: 386 x 123 pixels

Image

Size in pixels (indication)

Upper image block

Maximum height: 800 pixels X minimum width: 2480 pixels

Bottom left block

470 x 170

Bottom right block

386 x 123

Tip! For the background image it is recommended to use a simple image without text. This way you prevent important parts from disappearing on smaller screens.

This is an example of the image for the upper image block:

Example banner

Webinar and start/end slide

For (presentation) slides we recommend a 16 x 9 aspect ratio (e.g.: 1920 x 1080 px).

Sales page

Image

Size in pixels (indication)

"Large" image

210 x 212

"Small" image

78 x 87

Infobox or Call to action image

96 x 81

Interactions

Image

Size in pixels (indication)

Infobox or Call to action image

96 x 81

Emails

Image

Size in pixels (indication)

Logo

E.g. 62 px in height (in addition the default WebinarGeek logo has a width of 179 px)

Images in text

280 x 140p

Please note! The standard dimensions are only an indication, you may deviate from these. The images are 'responsive', which means that the image adapts to the size of the window to a degree. Therefore, it may be that pieces of the image are sometimes cut off or that an image is stretched a bit.

Keywords: header, design, dimensions

Did this answer your question?