Reduce Bounce Rates, Increase Clicks and Convert More Visitors with Homepage CTAs

Introduction (00:00:00)

• The topic of discussion is including additional call to action (CTAs) to the homepage hero section, which was teased in the Facebook group about a month ago (00:00:09)
• With the update, there are new spots where custom content of any kind can be added to the hero section, such as a little piece of text, extra information, or additional calls to action (00:00:17)
• The discussion will cover the hero section, show some use cases, and provide custom code that can be copied and pasted into a website to add custom and additional calls to action to the hero section (00:00:35)
• The goal is to enable users to start adding custom content to their hero section immediately, and the topic of the hero section was previously covered (00:00:46)

What Is a Homepage Hero Section? (00:00:49)

• A hero section is typically the most prominent section on a home page, used to grab a new visitor’s attention and communicate the main purpose, message, and value proposition of the website (00:01:18).
• The hero section usually includes a large, full-width, high-quality image, sometimes an embedded video, a tagline, title, subtitle text, and a call to action, such as a forum submission or search form (00:01:44).
• The call to action in the hero section depends on the goal of the website, for example, a local business directory might have a simple search form, while other websites might have buttons linking to other areas (00:02:09).
• The hero section should use a high-quality image and taglines or text that grab a visitor’s attention, letting them know what the website is for and encouraging them to click around and use the site immediately (00:02:32).
• It is generally recommended to keep the hero section simple, nice, and tidy, without too much clutter, but there are areas where additional elements, such as a testimonial, can be added to enhance the section (00:02:47).
• The hero section should also spark an emotional connection with the visitor by using high-quality images that portray the mood of the brand and the experience it will deliver, as well as images that reflect the persona of the visitor (00:03:13).
• The goal is to make visitors feel like they belong on the website and encourage them to continue exploring the internal pages (00:03:33).

Goal of Homepage CTAs (00:03:43)

• The homepage hero section, including the call to action, should help brand new visitors understand the website’s purpose through the image, title, and subtitle, and push them to conduct a desired action on the website (00:03:43).
• The calls to action should be relevant and help minimize bounce rate by encouraging visitors to click and explore the website, presenting the brand as high quality and credible (00:03:55).
• A simple, high-quality image, such as one with a smiling face, can help present the brand as credible, and small details like icons or badges can add to the brand’s credibility (00:04:22).
• The featured tutors button, with a small icon of a ribbon or badge, can make visitors think that the website has a vetting process for tutors, adding credibility to the brand (00:04:42).
• The overall goal is to keep the hero section and calls to action simple, focused, and clutter-free, with a clear purpose that aligns with the website’s overall purpose (00:05:07).
• The hero section and calls to action should work together to reduce bounce rate and encourage visitors to explore additional pages on the website (00:04:10).

Default Hero Section Functionality (00:05:23)

• The hero section on the home page has default design settings that allow for the addition of several elements, including a background image, main title text, and subtitle text to provide additional information (00:05:23).
• A primary search box or other call to action can be chosen to be added to the hero section, with alternative call to action options including a couple of buttons that link to other pages on the website (00:05:40).
• The design settings for the home page hero section provide flexibility in customizing the content and layout, allowing for the option to not have a search box and instead use other call to action elements (00:05:56).

Add Custom Content & CTAs to Hero Section (00:06:01)

• A new update has introduced two new widgets that can be edited, one above and one below the search box or call to action, allowing users to add custom code and expand the usefulness of the hero section (00:06:02).
• Some popular use cases for these new widgets include adding additional supportive text to complement the main title or subtitle, creating a Tag cloud of popular searches to suggest options to users, and adding additional calls to action, such as a button to join a membership (00:06:19).
• Users can also add custom images, banner ads, or testimonials to the hero section using this method, with the testimonial being a particularly useful example that will be explored in more detail (00:07:07).
• Before diving into the specifics of how to add these popular use cases, it is necessary to have a basic understanding of simple coding, and users will be shown how to add one or all of these examples to their site (00:07:25).
• The goal is to elegantly display one or two of these use cases on the site, as using too many could result in clutter, and users will be shown how to implement these examples on a sample site (00:07:54).
• The sample site will be used to demonstrate how to add these custom elements to the hero section, starting with the home page, and users will be provided with the code needed to edit and implement these changes (00:08:05).

Customizing Hero Section without Custom Code (00:08:11)

• The design settings can be used to customize the hero section of a website without requiring custom code, starting with the search box or call to action, where custom content can be added using a text editor that supports images, videos, and pre-made elements (00:08:17).
• Custom content can include text, buttons, images, and videos, and can be used to introduce visitors to the site, provide a call to action, or offer a search function, with the option to add multiple buttons and links to registration pages, search pages, or events (00:08:40).
• An alternative to custom content is the display button links option, which allows up to three buttons to be displayed, centered, and linked to various pages or actions, such as registration, search, or events (00:09:50).
• The goal of the hero section is to reduce bounce rates and guide visitors to internal pages of the website, by presenting a clear and simple pathway, and avoiding clutter, with the option to use keyword and location search or custom content (00:10:25).
• The keyword and location search option can be used to create a typical search function, similar to a default directory site, and can be customized further, such as by left-aligning the content, to enhance the user experience (00:11:08).
• The text editor and design settings provide a range of options for customizing the hero section, including adjusting the title text, alignment, and spacing, to create a clean and tidy design, with the option to add custom content, CTAs, and other elements (00:12:06).

Adding Custom Code to Homepage Hero Section (00:12:17)

• To find and edit the widgets, click on the orange “visit website” button, which will display the admin bar in the sidebar, and then click on “show widgets” to view all the modular components that make up the page (00:12:18).
• The two new widgets are “bootstrap stream Home Page search extra content above” and “bootstraps theme Home Page search extra content below”, and a Google doc has been created to show examples and the widgets to edit (00:12:41).
• The widgets can be customized by clicking on them and making changes, and some custom modules have already been created for the home page, including a main title and five components (00:13:11).
• The five components include a snippet of paragraph text, a button, popular searches, a testimonial or blurb, and a banner ad spot, which can be used for various purposes such as showcasing social proof or selling ad space to members (00:13:34).
• The popular searches component can be used to link to specific categories that people search on the site, which works well for regionally specific or niche websites (00:13:56).
• The testimonial or blurb component can be used to show social proof and build trust with visitors, and can include images such as stars from a review site (00:14:32).
• The banner ad spot can be used to sell ad space to members or self-promote events and activities, and can include embedded Google ad code or custom images (00:14:58).
• The extra content above section includes two sections, a snippet of text and a button, which can be customized using the Google doc as a guide (00:15:35).

Additional Supportive Text (00:16:01)

• The additional supportive text is a paragraph of text that can be added below the title, and it is visible in the dock, thanks to Dave for putting this together (00:16:03).
• This text can be copied and pasted into the bootstrap theme Home Page search extra content above widget, allowing users to effectively have a paragraph of text that can be replaced with custom text (00:16:17).
• Users who are familiar with HTML and CSS can edit the additional supportive text further, but those who just want to use it as is can simply edit the black text and copy and paste it into the widget (00:16:39).
• The text can be enhanced with a little bit of HTML coding for users who are familiar with it, and this can be done in addition to simply editing the text itself (00:16:54).
• The button is another element that can be customized, and it is mentioned after discussing the additional supportive text (00:17:01).

Additional CTA Button (00:17:02)

• To add a custom call-to-action (CTA) button to the homepage hero section, it is suggested to use it as a member sign up or a lister company, especially for members-only websites where users need to create an account for access to premium content (00:17:05).
• The button link URL can be replaced by modifying the href, which currently links to the forward slash join page of the website, and can be changed to link directly to a checkout page for quick registrations (00:17:25).
• The link to the sign up page can be copied from the finance section and utilized in the href, and the text of the button can be modified to display the desired message (00:17:52).
• Adding a custom CTA button above the search bar can encourage user registration and sign up, and it is considered an elegant and non-busy way to invite users to sign up to the site (00:18:17).
• The simplest way to add a custom CTA is by using a paragraph of text and a button, which can be easily implemented and is considered an effective way to promote user sign up (00:18:37).

Tag Cloud of Popular Searches (00:18:46)

• The popular searches feature is a customizable option that can be added to a website’s homepage, allowing users to easily access frequently searched categories, and it has several moving parts but is not too complicated with HTML (00:18:47).
• The feature can be edited to include custom links and text, such as “popular searches”, “top searches”, or “quick search”, and users can choose to display it above or below other content (00:19:06).
• The links in the popular searches feature can be limited to a certain number, such as three to six, depending on the desired amount of space, and each link can be customized to point to a specific search results page (00:19:46).
• To find a search results page for a category, users can perform a keyword search or use the browse categories feature in the footer, and then copy the link to the category page (00:20:08).
• The link to a category page can be found by clicking on the “view all” button for a category, such as “auto services”, and then copying the URL, which can be used in the popular searches feature (00:20:21).
• Alternatively, the link to a category page can be found in the member categories section, where users can click on a category and copy the URL, and then use it in the popular searches feature (00:21:18).
• The popular searches feature can be customized using HTML code, but users who are beginners or novices can follow simple steps to add custom links and text without needing to be experts in HTML (00:21:59).
• The customized popular searches feature can be tested by saving the changes and viewing the homepage, where the new links and text should be visible and functional (00:20:55).
• The hero section of a home page is designed to encourage users to take action, such as conducting a search or reading the content, and quick SLATES can be an effective way to achieve this by adding a sense of intrigue and convenience to the page (00:22:22).
• The quick search links can be customized to direct users to specific search results or pages, such as a directory of restaurants or other businesses, and can be organized using bootstrap columns to create a visually appealing layout (00:23:20).
• The size of the quick search links can be adjusted by changing the column size, for example, from 6 to 10 or 12, to accommodate more links or to make the existing links more prominent (00:23:24).
• The quick search links can also be used to target specific areas, such as cities or states, by creating links to search results for those areas, and can be used in conjunction with other post types, such as events or coupons (00:23:42).
• To create a link to a specific search result, such as a search for Los Angeles, the URL can be copied and used as the href code, or a canonical URL can be used, which is a user-friendly URL that is optimized for SEO (00:24:10).
• The canonical URL can be used to create a clean and simple link, such as /Los Angeles, which can be used to direct users to the search results page for that area (00:25:09).
• The quick SLATES can be used to direct users to other parts of the site, such as events or coupons, and can be customized to fit the specific needs of the site and its users (00:26:00).
• The different post types, such as events or coupons, can be used to create quick search links that direct users to specific types of content, and can be used to create a more focused and user-friendly search experience (00:26:05).
• Custom CTAs and content can be added to the homepage hero section, with examples including links to specific regions, such as Los Angeles, to provide relevant information to users in that area (00:26:12).
• Having a link to events can make sense if the business is already serving a specific region, as it allows users to see events in their local area, such as Los Angeles events (00:26:15).
• The link can be to a post type’s URL, and the categories for the link can be more than one, including specific locations, post types, or a combination of all those (00:26:28).
• The possibilities for custom CTAs and content are varied and can be tailored to the business’s needs, allowing for flexibility in the types of links and information provided to users (00:26:32).
• The process of adding custom CTAs and content involves considering the business’s target region and the types of information that would be most relevant to users in that area, such as events or specific post types (00:26:34).

Testimonial Blurb (00:26:40)

• A testimonial blurb can be added to a website’s home page to establish credibility and trust with visitors, and it can include an image and text, such as a member’s testimonial or a badge from an industry-specific organization, to serve as social proof (00:26:42).
• The testimonial blurb has two main components: the testimonial image and the testimonial text, and the image can be uploaded to the media manager and its URL can be copied and pasted into the widget (00:27:40).
• To get the full URL of an image in the media manager, users can right-click on the image and select “copy URL”, and then paste it into the desired location, such as the testimonial widget (00:28:15).
• The testimonial text can include a quote, the person’s name, and other styling elements, such as a small tag to make the name appear smaller, and users can customize the text to fit their needs (00:29:16).
• The placement of the testimonial blurb on the home page can be flexible, and it can be placed above or below a sign-up button, or used as a featured ad space to sell to members (00:29:44).
• Users can get creative with the testimonial blurb by modifying the code to feature specific members or sell ad space, and they can use a photo of a member as the main hero image and add additional information as text (00:30:17).
• The testimonial blurb can be used to sell ad space on the website, and offering the first spot for free can create excitement among members and encourage them to pay for the service (00:31:06).
• The testimonial blurb can be customized to match the background image and the testimonial text or sponsorship text on the home page, and it can be used to create a takeover of the home page (00:30:51).

Sponsored Banner Ad or Promotion (00:31:33)

• A sponsored banner ad or promotion can be added to the homepage, which can be an image created to showcase a service being offered, and it can be an internal banner ad that promotes one of the services or an affiliate link to something else, with the choice of what to put being up to the customer (00:31:36).
• The banner ad can be linked to a specific page, such as the join page, and an image can be uploaded to the media manager and referenced in the code, with the image source and URL being added to the code (00:31:56).
• The process of adding a banner ad is relatively simple, with the option to add a link to the banner ad, and the image source being referenced in the code, making it easy to customize and add content to the homepage (00:32:00).
• Some users, such as web designers, may want to add more complex customizations to their homepage, such as tabbed content, which can be achieved with a bit more intermediate-level coding, but the updated system makes it easier to add custom content to the homepage (00:33:01).
• Examples of customizations can be seen in other users’ homepages, such as Corey Barnes, who has done some good customizations on his homepage, and the updated system will make it less cumbersome and simpler to have tabbed home pages and other custom content (00:33:16).
• The system also allows for point-and-click settings, which can be used to add custom content to the homepage, such as text and links, and the available text editor can be used to add custom content to the homepage, making it easier for users to customize their homepage (00:33:50).