Design B2B & B2C Sales Page with Ready Made Proven Templates

Course overview on the content structure and outcome

Brief walk through on this course section 3 to section 6. And quick overview on B2B and B2C sales funnel concept

1. Setup free host server, domain and WordPress platform

2. Understand the limited features provided by free host server. Hence it is best to create only one (1) sales page per host server account. This is an optimized zero cost method to present your design portfolio to potential clients or for your own practice.

3. Install main plugin, Free Version Elementor and addon plugins

4. Basic settings on Elementor plugin

Download the sales page template in this lecture. And:

1. Import the page template into WordPress platform via Elementor library

2. How to access to the template and transfer it to WordPress pages from Elementor library

3. Publish the page or edit the page as a draft

Understand Elementor page general settings, and how to access to elements, column, section and using Navigator.

Understand how Elementor help you design page in different view ports (Desktop, Tablet and Mobile) and what are the loopholes and tricks to optimize page responsiveness.

Personal trick to optimize page responsiveness when designing in different view ports (Desktop, Tablet and Mobile)

How to do layout alignment and arrangement with section, column, inner section and elements. And also on margin and padding space.

Redesign, modify and re-purpose the First Impression Part of the sales page. The detailed tutorials are listed below in sequence:

1. Quick recap on B2B sales page of Private/Master Label Rights

2. Quick explanation on the page’s first impression part

3. Edit Heading element with HTML Editor Tool

4. Add text shadow on Heading element

5. Use Icon List element with HTML Editor Tool

6. Align Icon List with padding or margin

7. Edit Inner Section’s columns width to responsiveness

8. Edit Button element

9. Change the Section background colour

10. Importance of colour grading of your page presentation

Redesign, modify and re-purpose the Product Component sections. The detailed tutorials are listed below in sequence:

1. Recap on technique on selling such as resonate with audience

2. Edit Image Box element

3. Change background picture and settings

4. Create nice Heading with padding and shape divider

5. Edit product component section with Heading, Image, Icon List and Toggle

6. Create border on the product component with padding

7. Learn the duplicate or copy & paste technique to fasten up process

Redesign, modify and re-purpose the How To Do It Component section. The detailed tutorials are listed below in sequence:

1. Essential of providing value added package

2. How to duplicate or copy & paste ready made Button element

3. How to create broad audience with How To Do It section

4. Put in sequenced Entrance Animation

5. Download GIF icon for Free (link provided)

Redesign, modify and re-purpose the Bonus Offer Component section. The detailed tutorials are listed below in sequence:

1. Essential of providing Extra Value Added services or package as bonus

2. Show bonuses in different presentation

3. Enhance presentation in mobile friendly way

Redesign, modify and re-purpose the Summary Offer Component section. The detailed tutorials are listed below in sequence:

1. Input Menu Anchor navigation onto summary offer component

2. Download animated GIF arrow (pointer)

3. Present Summary Offer Component in an effective way

4. Enhance presentation in mobile friendly way

Download the sales page template in this lecture. And:

1. Import the page template into WordPress platform via Elementor library

2. How to access to the template and transfer it to WordPress pages from Elementor library

3. Publish the page or edit the page as a draft

Redesign, modify and re-purpose the First Impression Part of the sales page. The detailed tutorials are listed below in sequence:

1. Quick recap on B2B sales page of Commercial Software

2. Edit section Background Picture & Background Overlay

3. Edit section Background Shape Divider

4. Optimize section to fit different screen sizes with similar Elements

5. Learn to overlap section with section to enhance background effect

6. Edit Video element with border on normal and hover mode

7. Learn to use Spacer element to add (horizontal) space between elements

8. Add border at the bottom of the section

Redesign, modify and re-purpose the Feature Section with Testimonial of the sales page. The detailed tutorials are listed below in sequence:

1. Importance of Feature Section that ends with Testimonial

2. Edit section Image Box

3. Writing powerful lines

4. Edit Testimonial section

5. Adjust CSS filter of the background overlay

6. Finalizing Testimonial Section with alignment

7. Add border at the top and bottom of the section

8. Add border at the bottom of the section

Redesign, modify and re-purpose the Feature Section with Background Presentation of the sales page. The detailed tutorials are listed below in sequence:

1. Importance of Feature Section with Background Image (or GIF) or Video

2. Put in Background Image with Background Overlay with Hover Mode

3. Put in Background Image with Video

4. How to do background presentation in section with minimum height adjustment or Spacer element

5. Finalize the section with templates showcase

Redesign, modify and re-purpose the Feature Section with Image Box Presentation of the sales page. The detailed tutorials are listed below in sequence:

1. Importance of Video element on showcasing your product

2. Edit Image Box presentation with column background color hover change

3. Use Divider element to draw line or decorate

4. Add new Image Box section with copy & paste section and columns arrangement

5. Importance of testimonial section when comes to sales pitching

6. Re-design and re-purpose testimonial section with columns arrangement and content alignment

Redesign, modify and re-purpose the Upsell Your Product Section of the sales page. The detailed tutorials are listed below in sequence:

1. Sale pitching goes with up-selling two (2) different pricing packages

2. Up-sell the first product / package with testimonial alongside

3. Down-sell another package

4. Importance of guarantee or risk free pitching section after up-selling

Redesign, modify and re-purpose the Different Packages or Deals Offer of the sales page. The detailed tutorials are listed below in sequence:

1. Recap on presenting different packages offer in the pricing tables with up-selling technique

2. Quick recap on how to use Menu Anchor element to navigate visitors easily to pricing tables

3. Edit the tables with Inner Section, Button, Heading and Icon List elements

4. Create a box border at the Heading element

5. Present package's features with Icon List element for different tables.

6. Create hover color changes on the table (column)

7. Create margin space in between the pricing tables

Redesign, modify and re-purpose the Questions and Answer Section of the sales page and Finalize the Sales Page. The detailed tutorials are listed below in sequence:

1. Explaining the structures of Q & A Section

2. How to embed Facebook Messenger Chat Link onto image

3. Edit Image Box element and present it as Q & A

4. How to insert lines with Column Border and Divider element

5. How to add more Q & A

6. End the Q & A Section with Button element

7. Quick overview on Footer Section that is created from scratch

8. Create lines to present Footer Section better in mobile screen size

9. Quick overview of the sales page in different screen sizes

Download the sales page template in this lecture. And:

1. Import the page template into WordPress platform via Elementor library

2. How to access to the template and transfer it to WordPress pages from Elementor library

3. Publish the page or edit the page as a draft

Redesign, modify and re-purpose the First Impression Part of the sales page. The detailed tutorials are listed below in sequence:

1. Quick recap on B2B sales page of Online Course or Training

2. Power of call-to-action to generate interest or intrigue visitors

3. Reminder to install all relevant Free add-on plugins for Elementor

4. Overall understanding of the First Impression Part section structure

5. Edit Icon element and tagline

6. Edit Divider element

Insert a Powerful Sticky Video Sales Letter at First Impression Part of the sales page. The detailed tutorials are listed below in sequence:

1. Introduction of new add-on plugin element, EA Sticky Video

2. Why sticky video is important for a sales page

3. Edit the element EA Sticky Video

4. How to position and arrange the EA Sticky Video

Create Brush Art Title at First Impression Part of the sales page. The detailed tutorials are listed below in sequence:

1. Introduction of new add-on plugin element, Premium Dual Heading

2. Edit the element Premium Dual Heading

3. Download Transparent Background Brush Art for Free and Commercial Usage

4. Settings needed to put the transparent background brush art

5. Use Text Shadow emphasize on the word or title.

Create Contact Form at First Impression Part of the sales page to Generate Leads. The detailed tutorials are listed below in sequence:

1. Recap of importance of creating leads with Contact Form.

2. Install and activate the WordPress Plugin (Free) Contact Form 7 from Takayuki Miyoshi

3. Create a raw contact form template

4. Download my contact form template

5. Create text field, email field, drop-down, text area (message) and submit button at the contact form

6. How to retrieve the visitors' information (name & email address) via completed contact form.

7. Insert or integrate the contact form into your sales page using Elementor

8. Re-design your contact form in terms of spacing, colour, size and etc. with Elementor

9. Quick test on the contact form submission and check the recipient email to see whether visitors information are being captured or not.

Redesign, modify and re-purpose the Information Preview with Art and Animation of the sales page. The detailed tutorials are listed below in sequence:

1. Importance of Information Preview Section in a B2C sales page

2. Edit & redesign Premium Dual Heading element easily

3. Edit the section minimum height to add padding at the top and bottom of the content

4. Edit Image element with CSS filter on normal and hover mode, and with grow animation

5. Write powerful words with brush art with Premium Dual Heading element and Heading element

6. Adjust margins to align the powerful words in vertical position

7. Edit Button element

Redesign, modify and re-purpose the Animated Image Box Information of the sales page. The detailed tutorials are listed below in sequence:

1. Animated Image Box Information to present services provided

2. Edit section Shape Divider with space

3. Edit Image Box element

4. Edit Image element with CSS filter on normal and hover mode

5. Edit Icon List element

6. Edit and re-design column box Border in normal and hover mode

7. How to effectively add more column to present more information. and modify them in different screen sizes (Tablet and Mobile)

Redesign, modify and re-purpose the Showcase Section with Video Background of the sales page. The detailed tutorials are listed below in sequence:

1. Importance on putting in Video Presentation (from YouTube)

2. Put in the background video with link and specify start and end time

3. Put in background image fallback if video cannot be loaded properly

4. Edit minimum height of the section to showcase the background video

5. Adjust column position to bottom, middle or top to present the title and content.

6. Edit Premium Dual Heading element in different screen sizes (Tablet and Mobile mode)

7. Edit Divider element with social network icon

8. Edit Button element to redirect visitors to your social platform (by opening into a new window)

9. Have a quick overall preview of the sales page in different screen sizes.

Redesign, modify and re-purpose the Expertise Section with Tool Top and Modal Box Feature Section of the sales page. The detailed tutorials are listed below in sequence:

1. Introduction of add-on plugins elements such as EA Tooltip and Premium Modal Box

2. Adjust minimum height of the section

3. Adjust background gradient color of the section

4. Edit and re-design EA Tooltip element

5. Edit Toggle element to simplify presentation, and why

6. Adjust background color and radius on each of the column inside the section.

7. Edit and re-design Premium Modal Box element

8. Insert YouTube Embedded Codes into the Premium Modal Box element to showcase the video

9. Adjust margin space between columns

10. Quick live overview on the section, showing you how responsive the section is in different screen sizes

Redesign, modify and re-purpose the Featured Gallery & Responsive Testimonial of the sales page. The detailed tutorials are listed below in sequence:

1. Quick overview of the responsive section that present the gallery and testimonial

2. Edit Premium Dual Heading element with block display

3. Edit Social Icons element

4. Edit EA testimonial element with words only

5. Edit and re-design EA Filterable Gallery element

6. Showcase the EA filterable Gallery element (showing you different website that present this element)

7. Arrange all the elements vertically via layout's widgets space (px)

8. Edit and re-design EA Tooltip element

9. Edit Premium Progress Bar element as testimonial rating or score bar

10. Edit EA Testimonial element with star ratings

11. Optimize the testimonial presentation in different screen sizes

Redesign, modify and re-purpose the Question & Answer Section with Accordion Features of the sales page. The detailed tutorials are listed below in sequence:

1. Show you how an Accordion Feature looks like.

2. Importance accordion on Q & A section in a B2C sales page

3. Edit a section above the Q & A section with EA Filterable Gallery element.

4. Edit the Q &A section with columns' padding and margin

5. Edit the Image element and put in Facebook Messenger Icon

6. Edit EA Advanced Accordion element on the Support Team column

7. Edit EA Advanced Accordion element on the Question & Answer column and present it in different way with padding and etc.

8. Use column's widget space to arrange elements vertically

9. Edit EA Content Ticker element to present blog posts or articles in your website

10. Quick rap up on the importance on Accordion Feature in a Q & A section

Redesign, modify and re-purpose the Location & Call-To-Action Section of the sales page. The detailed tutorials are listed below in sequence:

1. Duplicate ready-made contact form with EA Contact Form 7 element and make minor modification

2. Use Button element to create anchor navigation

3. Edit Google Maps element and showcase with height (px) in different screen sizes

Redesign, modify and re-purpose the Footer Section with Feature Gallery and Social Links of the sales page. The detailed tutorials are listed below in sequence:

1. Importance of a Footer Section in a sales page

2. Use EA Filterable Gallery element to present your popular videos in different style

3. Optimize company logo and tagline responsiveness with two different Inner Section elements, in order to present them appropriately in different screen sizes

4. Edit the company all rights reserved words with Heading element

5. Edit Social Icons element

6. Edit Icon List element

7. Use Icon element as anchor navigation to bring visitors to the top page in split second

8. Show you how Inner Section elements can help contain page contents, and allowing your page to be well readable in mobile screen size

9. Have an overall preview on the finished B2C sales page and show how responsive the page in different screen sizes

Download four (4) sales page templates in this lecture. There is one (1) main page template and three (3) other sub-page templates. These sub-page templates supposed to be integrated into the main page template via Advanced Tab element, please refer to tutorial 38 to learn more. These are the things you'll learn:

1. Import the page templates into WordPress platform via Elementor library

2. Do minor modification on the imported page templates

3. How to access to these templates and transfer them to WordPress pages from Elementor library

4. Publish the page or edit the page as a draft

Recap on creating the First Impression Part of this Amazing B2C Sales Page that offer membership or different packages product. The detailed tutorials are listed below in sequence:

1. Recap on important elements to create first impression part of this B2C sales page

2. Show you what are the Free add-on Elementor plugins required to design and create this complicated sales page

3. Quick tour on the sales page sections such as features, lead generation, testimonial, different packages offer.

Redesign, modify and re-purpose the First Impression Part - Sales Copy Writing of the sales page. The detailed tutorials are listed below in sequence:

1. Secrets of sales copy writing and how to write

2. Edit the main section background gradient colour

3. How to use Navigator to navigate yourself to a particular section, inner section and column

4. Edit Info Box element

5. Edit Heading element

6. Edit Premium Fancy Text element

7. Create responsive Premium Fancy Text element

8. Edit Text Editor element and how to write effectively to resonate with potential clients

9. Add Padding (left) on the inner section to enhance content presentation and etc.

Redesign, modify and re-purpose the First Impression Part - Flip Box Feature of the sales page. The detailed tutorials are listed below in sequence:

1. Overview of Flip Box Features as guided navigation with menu anchor

2. Put the Flip Box features inside an Inner Section element

3. Edit and redesign EAE - Flip Box element

4. Put in Menu Anchor element at particular part of the sales page, to be sync with the EAE - Flip Box element, to help visitors navigate themselves

5. Edit the Inner Section element (that has the EAE - Flip Box element) column width (in percentage), to be responsive in different screen sizes

Redesign, modify and re-purpose the First Impression Part - Responsive Portrait Background of the sales page. The detailed tutorials are listed below in sequence:

1. Download three (3) samples of cropped (portrait / person) image with transparent background under "Resources" tab in this lecture

2. In order to learn how to crop image with transparent background with Free tool or software, please go to
   [Section: Free Commercial Tool > Lecture: "Crop Picture with Transparent Background"]

3. Insert the portrait image at the section's column background overlay

4. Adjust the size of the image in different viewing modes (desktop, tablet and mobile)

5. Optimize the image responsiveness using Spacer element

6. Website reference to crop picture for Free. (Source: remove.bg)

7. Quick preview of the First Impression Part and showing how responsive the section is under different screen sizes

Redesign, modify and re-purpose the Display Partnership & Collaboration Section of the sales page. The detailed tutorials are listed below in sequence:

1. Display past clients or collaborated companies

2. Quick overview of the section background colour

3.  Quick edit of the main Heading element on text colour and suggested font family

4. Edit Image Carousel element to display all the logos effectively

Redesign, modify and re-purpose the Service Features and Perks Section of the sales page. The detailed tutorials are listed below in sequence:

1. Important methods to present services' attributes, benefits and perks when offering different packages or plans

2. How to present attributes or features in sequence with Icon List element

3. Edit and use Menu Anchor element to navigate visitors easily

4. Edit Heading elements

5. Edit Icon List element

6. Edit Text Editor element

7. Edit and use Premium Image Separator element (with another section)

8. Edit the related section shape divider to enhance Premium Image Separator element presentation

9. Begin to design the main attribute or feature of your services in section:

   • Start with brand new section with background colour

   • Set content width of the section

   • Understanding column's width distribution in percentage (in different screen sizes)

   • Use and edit Heading, Divider, Text Editor and Icon List in the first column

   • Edit the second column on the background colour and border

   • Use and edit Premium Dual Heading and Testimonial elements in the second column

   • How to present attribute or feature sections in background shape divider

   • Carry on with other attribute or feature sections

   • How to present these sections in responsive way (to fit into mobile screen size)

10. Some sample images to be download and use onto your website. They are in the Resources" tab in this lecture

Redesign, modify and re-purpose the Responsive Lead Generation Section of the sales page. The detailed tutorials are listed below in sequence:

1. Start with a call-to-action button right below the Services Features and Perks section

2. Carry on with Responsive Lead Generation Section, and quick overview on how important this section is

3. Edit the section background colour

4. Edit and use Menu Anchor element to navigate visitors easily

5. Edit and use Heading elements

6. Edit and use Text Editor element

7. Edit and use Premium Modal Box element to create a signup form in a popup or popup form

8. Show how to insert signup form short code into the content. To know more on how to do email marketing with WordPress and Elementor, please refer to my other course titled "Lead Generation Masterclass: Create Web-pages with Elementor". I will explain a bit on the course structures, especially on how to carry out email marketing campaign

9. Present your "lead magnet" blueprint covers with Inner Section and Image elements.

   • In order to learn how to design covers, banners and image with Free tool or software, please go to
     [Section: Free Commercial Tool > Lecture: "Crop Picture with Transparent Background"]

10. Edit and use Image Carousel element to present the image covers in different screen sizes

11. Quick preview of the Lead Generation Section and show you how responsive the section is under different screen sizes

Redesign, modify and re-purpose the Amazing Testimonial Section of the sales page. The detailed tutorials are listed below in sequence:

1. Edit and use Menu Anchor element to navigate visitors easily

2. Edit and use Heading elements

3. Create another brand new section (with 3 columns) with preset content width (px), to present the testimonials

4. How to access to the elements with Navigator Tab

5. Insert the client image under Inner Section element inside the column

6. Edit Spacer elements to show the client image and background shape divider

7. Edit space divider with entrance animation

8. Edit Premium Dual Heading element to display client written feedback

9. Put in arrow with shape divider

10. Create and edit similar testimonial section to display in mobile screen size

Redesign, modify and re-purpose the How Does It Work Section of the sales page. The detailed tutorials are listed below in sequence:

1. Overview of a How Does It Work Section in a sales page

2. Edit Heading and Text Editor elements to write on how does your product or service works

3. Edit Inner Section element columns gap

4. Edit and design Icon Box element to present the process

5. Enable and design entrance animations of these Icon Box elements

Redesign, modify and re-purpose the Offer Different Packages or Plans With Advanced Tabs of the sales page. The detailed tutorials are listed below in sequence:

1. Overview of the Advanced Tabs element as a function to present different packages or plans

2. Edit and use Menu Anchor element to navigate visitors easily

3. Edit Heading and Text Editor elements to pitch your product or service

4. Put out an overall feedback or rating with Inner Section, Star Rating and Progress Bar elements

5. Put out another Inner Section with preset content width, as to present the pricing tables

6. Edit and design Advanced Tabs element to present different page template type in one page:

   • Integrate imported page template from Elementor library into the Advanced Tabs element's tab

   • Normal, hover and active presentation in colour and border

   • And other settings (general, caret, etc.)

7. Show you the imported page templates that have the package or plan pricing table such as:

   • Premium lifetime

   • Premium monthly

   • Takeaway materials

   • The page templates as above are as described inside this tutorial (yours will be different)

8. Design the page template (pricing table) with elements or features as below:

   1. Section content width (important)

   2. Edit Heading and Dual Premium Heading elements to display the price or cost

   3. Edit Button element to enable payment link

   4. Edit Icon List or Icon elements to display the features

   5. Learn how to Copy & Paste Elements among different page templates

   6. Readjust the Margin and Spacing to be responsive in different screen sizes

9. Put in background picture into the section with CSS Filters under normal and hover mode. This is to enhance visual effects and presentation. The background image is available to be download and use onto your website. The sample image is in the Resources" tab in this lecture

Redesign, modify and re-purpose the Advanced Accordion Q&A Section of the sales page. The detailed tutorials are listed below in sequence:

1. Overview of the Advanced Accordion Question and Answer Section section

2. Edit Heading to put out the title

3. Edit Inner Section to put out the Advanced Accordion element with content width adjustment

4. Edit and design Advanced Accordion element with different features

Redesign, modify and re-purpose the final section which is Talk To Us Section of the sales page. The detailed tutorials are listed below in sequence:

1. Quick edit on the section with copy and paste method on the similar elements such as:

   • Image Carousel

   • Icon Box

2. Final preview of this B2B sales page and quick test on the page responsiveness and rapping up

1. Introduction of HubSpot as client relationship management (CRM) Tool.

2. Showing you how it can help you capture and manage lead and client.

3. Register Free account on HubSpot

4. Sync HubSpot with email account

5. Connect HubSpot to Facebook Messenger under inbox settings

6. Integrate HubSpot onto WordPress and sync with website

How HubSpot manages lead generation (contacts) in the connected WordPress website:

1. Signup Form

2. Contact Form

3. Unassigned Conversation

Create a live chat onto the connected WordPress website, and design an auto bot chat flow to capture lead with basic information such as name, email address and inquiries.