Hero section — Part 1: Getting started with Bubble (Lesson 1.6)

Step-by-Step Tutorial: Building a Hero Section with Bubble

1. Identify the Hero Section:

   • The hero section is the most important part of your landing page.
   • It is the top section that visitors see when they first land on your domain.

2. Resolve Issues:

   • Click on the three issues pop-up to identify problems with styles.
   • Remove conditions in red for Heading 1, Heading 2, and Heading 3 in the conditions tab.

3. Set Container Layout:

   • Set the container layout to column.
   • Ensure the default builder width is 1400 for responsive design.

4. Create Group Section:

   • Drop a group on the page and name it "Group Section."
   • Set it to span edge to edge and adjust opacity to 10%.

5. Add Text Elements:

   • Add text elements "Discover exciting tech jobs at workplace" and "Your next career awaits" in sentence case.
   • Center align the text and adjust height settings as needed.

6. Adjust Max Width:

   • Set the max width of the Group Content to 768 for responsive design.
   • Align Group Content horizontally to the center.

7. Position Text Elements:

   • Move "Your next career awaits" to the top of Group Content.
   • Adjust the max width of text elements as necessary for layout.

8. Add Link Buttons:

   • Add "Browse jobs" and "Sign up" link elements within Group Content.
   • Style them to look like buttons with a fixed height of 44 pixels.

9. Arrange Link Buttons:

   • Set the link buttons side by side in a row container layout.
   • Adjust padding and text color for consistency.

10. Customize Group Layout:

    • Set gap spacing to 32 on Group Content.
    • Create a new group within Group Content for more precise spacing.

11. Finalize Styling:

    • Customize the Group Subtitle and Title with appropriate spacing.
    • Set colors to match the design theme.

12. Review and Refine:

    • Ensure all elements are aligned and styled correctly.
    • Make any additional adjustments for a polished look.

By following these steps, you can successfully create a visually appealing and functional hero section for your landing page using Bubble.