Hero section — Part 1: Getting started with Bubble (Lesson 1.6)
2 min read
4 months ago
Published on May 08, 2024
This response is partially generated with the help of AI. It may contain inaccuracies.
Table of Contents
Step-by-Step Tutorial: Building a Hero Section with Bubble
-
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.
-
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.
-
Set Container Layout:
- Set the container layout to column.
- Ensure the default builder width is 1400 for responsive design.
-
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%.
-
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.
-
Adjust Max Width:
- Set the max width of the Group Content to 768 for responsive design.
- Align Group Content horizontally to the center.
-
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.
-
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.
-
Arrange Link Buttons:
- Set the link buttons side by side in a row container layout.
- Adjust padding and text color for consistency.
-
Customize Group Layout:
- Set gap spacing to 32 on Group Content.
- Create a new group within Group Content for more precise spacing.
-
Finalize Styling:
- Customize the Group Subtitle and Title with appropriate spacing.
- Set colors to match the design theme.
-
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.