How to Use the Website Builder 3.0 Tool to Create Stunning Landing and Content Pages

Step 2: Create or Edit a Landing Page

Click 'Create New Landing Page' to start a new page, or click 'More' > 'Edit' to modify an existing one.

Step 3: Select a Template

Pick a landing page template and click 'Start Building'.

Step 4: Enter Your Page Name

Enter your desired 'Page Name' and click 'Continue.'

Step 5: Add Content Blocks

Step 6: View Components

1. Go to 'Components'.
2. Search the Components in the specified area.
3. Click the dropdown list to view each component.

Step 7: Use Base Components

Step 8: Customize Images

Click on the image block, then select 'Set Image' on the left panel. You can adjust width, height, alignment, alt text, and add links.

Step 9: Upload Files

1. To upload a file, choose 'Upload File'. 
2. Then, click on 'Choose files' and select an image that is less than 1 MB (or) use the Existing Image. 
3. Click on 'Add selected'. 
   

Step 10: Generate AI Text

Click the AI icon to generate smart, contextual text.

Step 11: Rewrite Text with AI

Use the 'AI Rewrite' button to improve or regenerate content.

Step 12: Format Text

To change the size of the text, click on the text that has to be changed. The size of the text can be changed

1. Customize your Heading Tags; By Following Features: Bold, Italic, Underline, Strikeout, Text Align, Create Link, Text Color, Font Size, Font Family.

2. Under 'Content', click on the dropdown box next to 'Size' and choose the preferred 'Heading Tags'. 

Step 13: Customize Buttons

Select the 'CTA button' and choose a theme from the dropdown.

Step 14: Enable Code Editing

Click the 'Code Editor (\</>)' icon to view/edit the HTML code of the block.

Step 15: Insert/Edit HTML Code

Use the Code Editor to customize text, buttons, and other elements. Click 'Save Changes'.

Step 16: Edit Full Site in Code Mode

1. In Top of the Site Builder, Choose 'Code Editor' to Customize your Entire Site through Coding.
2. You can 'Undo & Redo' the changes.
3. More Features like 'Designer Mode' (Free Draging), 'Preview the Page', 'Fullscreen the Site' (Use Shortcut Key F11).

Step 17: Add New Site Elements

Click the '(+)' icon to insert new blocks or components.

Step 18: Insert Blocks

To view all block types, click the '(-)' Icon in the 'Search Blocks' section on the site builder.

Step 19: Select Components

Go to 'Components', use the dropdown to add elements.

Features that are available in the Components:

Base: 

1. Heading
2. Image
3. Horizontal Rule
4. Form
5. Input
6. Text Area
7. Select Input
8. Checkbox
9. Radio Button
10. Link
11. Html Button
12. Paragraph
13. Blockquote
14. List
15. Table
16. Preformatted
17. Audio
18. Video
19. Iframe

Elements: 

1. Font Icon
2. Carousel
3. Gallery
4. Slider
5. Tabs
6. Accordeon
7. Flip box
8. Counter
9. Svg Icon
10. Figure
11. Social icons
12. Code
13. Image Compare

   Widgets:

1. Google Maps
2. Embed Video
3. Chart.js
4. Lottie
5. Paypal
6. Twitter
7. Open Street Map

   Embeds:

1. Embed
2. youtube
3. vimeo
4. dailymotion
5. flickr
6. smugmug
7. scribd
8. twitter
9. soundcloud
10. slideshare
11. spotify
12. imgur
13. issuu
14. mixcloud
15. ted
16. animoto
17. tumblr
18. kickstarter
19. reverbnation
20. reddit
21. speakerdeck
22. screencast
23. amazon
24. someecards
25. tiktok
26. pinterest
27. wolfram
28. anghami

Step 20: Add Forms

Click on the '(+)' icon to access 'Form.'

Step 21: Open Form

Click on the 'Form' button.

Step 22: Add Form

 Select the desired form from the list and click 'Add'.

Refer to our KB on creating forms - How to Create, Customize, and Manage Forms Using Form Builder

Step 23: Style Display Properties

1. Navigate to 'Properties', Select 'Style' 
2. Edit your Display, Position, Top, Left, Bottom, Right, Float (Align Content), Opacity, Select your Background and Text Color.

Step 24: Animate Your Site

   1. To animate text, select the text and find 'Animate on scroll' under 'Advanced'.

   2. Now, click on the drop-down box parallel to 'Animation type', select the type of animation, and click on 'Play animation' to view it.

Step 25: Resize Icons

1. Tap any Icon in site template, Select any 'Font Icon' in the left side site builder.
2. Click Dropdown List in the desired box, Choose the 'Size' of your Font Icon.

Step 26: Manage Text Elements

1. Single click any 'Text Element', click 'Clone Element' to duplicate the Element, and select 'Remove Element' to delete.
2. Use Option (2) to Drag Element, Select Parent, Move Element up, Move Element Down.

Step 27: Add Internal Links

1. To Add Internal Links in your site, choose a word in your site content.
2. Select 'Create Link' icon.

Step 28: Paste the URL

Insert internal link in the left panel’s 'URL' field.

Step 29: Enable Dark Mode

1. Select Theme mode to change 'Dark Mode' 
2. Edit your Site with Mobile Responsive, Mobile View, Tablet View, and Zoom in/Out.
3. Then, Click 'Save Page'. Your Landing Page has been Successfully Created. Then Click 'Exit'.

Content Pages Setup

Step 30: Access Content Pages

Click on 'Sales & Marketing'. Select 'Website' from the dropdown list.

1. Go to Content Pages.
2. Choose 'Add New Content Page'.
3. Click 'Options' to Edit your Existing Content Pages.

Step 31: Set Up Page Details

1. Insert 'Title' of your Content Page.
2. Write 'SEO Page Description' to get better Rankings in SERP.
3. Add 'Page Keywords' in the required area to attract Organic Traffic to your Website. 
4. To create your Basic Page, using HTML editor is enabled as default. Create a Page using the given options like Edit with HTML, Format, Bold, Italic, Strikethrough, Lists, Image, Table, Link. 
5. Enable the 'Advanced page using Site Builder' Option to edit content pages in the site builder, then click 'Save'.

Step 32: Structure the Page

Use drag-and-drop blocks to structure and edit the content. Click 'Save Page'.

Landing Page Review

Step 33: Preview and Edit 

Navigate to 'Landing Pages'

  1.  Click 'Preview' to View your Site how it looks.

  2. Select 'Link' to Copy Page URL icon to paste the URL on the Landing Page.

  3. By Clicking 'Live' below the status to Proceed Unpublish your Site.

  4. Next, Click 'Options Icon' and Select 'Edit'.

Step 34: Add or Rename Header

Select the top menu header → Double click to rename → Paste the content page URL in the left menu.

Step 35: Link Pages in Footer

Add the created content pages in the footer Section and insert the content page URLs in the left-side menu for website navigation. Click 'Save Page'. 

You’ve now built and connected powerful landing and content pages in BrainCert using the Website Builder 3.0. Ensure your landing pages reflect your brand for the best customer experience.

Hope this article was helpful!