Steps to Set up your Site Builder 2.0

Log in to 'BrainCert LMS' and Click on 'Sales & Marketing'. Select 'Website' from the dropdown list and open 'Landing Pages'.

Step 2: Create or Edit a Landing Pages 

Click on the 'Create New Landing Page' to start a new page (or) click on 'More' and select 'Edit' from drop-down box to edit the existing page.

Step 3: Choose Landing Page Templates

Select any 'Landing Page Template' as your choice. Then, click 'Start Building'. For Now we choose 'Language Training'.

Step 4: Enter Your Page Name

Step 5: Adding Blocks Types in the Site Builder

Step 6: Accessing and Viewing Components

1. Go to 'Components'.
2. Search the Components in the specified area.
3. Click the dropdown list to View each mentioned components.

Step 7: Using Base Components

Step 8: Change the Main Image

To Insert/change the Main image by clicking on the 'Image Content'. On the Left site builder, click on 'Set Image' to set/change the Main Image. 

Step 9: Upload Files

1. To upload a file, choose 'Upload New 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: Adjusting Text Size and Formatting

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 11: Customizing Buttons

Select 'CTA Button'. To Change your Button Background, Click dropdown list and Select theme of your button. 

We Selected 'Success' that replicates Green in Color.

Step 12: New Code Editing Feature

A new Code Editing feature has been added. Click on Angle Brackets Icon (Code Editor) as shown in the image to view/edit the HTML code.

Step 13: Edit Site with HTML Code

Here the Code Editor Page appears, Insert your code to change the Heading, Paragraph, Buttons and more. Click 'Save Changes'.

Step 14: Site Customization with Code Editor

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 15: Adding Site Elements

Select '(+)' Icon, To Add Elements for your site.

Step 16: Inserting Blocks

Then Blocks were Popup. To view all block types, click '(-)' Icon in the 'Search Blocks' section on the site builder. We Select 'About us 1' and Simply Drag & Drop those blocks into the site.

Step 17: Select Components

   1. Navigate to 'Components'.

   2. View Dropdown List; Select your Required Components.

Features that 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 18: Customizing 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 19: 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 20: Customize Site Styles Via Variables

1. Navigate to 'Styles'.
2. Select 'Variables'.
3. Click Dropdown to view the Variables features: Fonts, Color, Dimensions and Edit as your Preferred Style.

Step 21: Customize Site Appearance using CSS

1. In 'Styles' Tab. Navigate to 'Css'. Customize your Site Font, Color, Theme through Coding.

Step 22: Select/Resize Font 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 23: Manage Text Elements

1. Single Click any 'Text Element', Click 'Clone Element' to Duplicate Element and Select 'Remove Element' to Delete.
2. Use Option (2) to Drag Element, Select Parent, Move Element up, Move Element Down.

Step 24: Add Internal Links

1. To Add Internal Links in your site, Choose a word in your site content.
2. Select 'Create Link' in Top Menu.
3. In the Left side menu, Insert your Internal Links in the 'URL'. 

Step 25: Configure 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'.

Step 26: Add 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 27: Setup Content Pages

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 given Option 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 28: Structure Content Pages

Once the Content Page displays, select your Blocks, drag and drop them, and edit your Content as previously instructed. Click 'Save page.'

Step 29: Preview and Edit Your Landing Pages

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 30: Add and Rename Header

Then Existing Landing Page appears, Select Top Menu (Header) to add Content Pages in your Site. Then, Double tap the Header and Rename it. In the Left Side Menu, Paste the Content Page URL.

Step 31: Integrate Content 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'. 

Finally, You have Successfully Integrated the content page with the landing pages.

For the best customer experience, ensure that the landing page content reflects the brand identity.

Hope this article is useful!