Contents

How to Design a Welcome Page

  1. Open your experience in Passport Builder and navigate to the Welcome Page.
  2. Click Add Block or select an existing welcome block.
  3. Upload a hero background image using the media library.
  4. Set the image fit and position (cover, contain, or custom).
  5. Add a logo image element and position it at the top.
  6. Upload or select the brand logo from the asset library.
  7. Add a headline text element and enter the welcome message.
  8. Set the font family, size, and weight for the headline.
  9. Adjust the text color for contrast.
  10. Add a subheading text element below the headline.
  11. Configure the subheading typography settings.
  12. Add a call-to-action button element.
  13. Label the button and set its action destination.
  14. Style the button with brand colors and border radius.
  15. Add spacing between elements using the padding controls.
  16. Group elements into a content stack for alignment.
  17. Align the stack horizontally and vertically within the page.
  18. Add a color overlay to the background image for readability.
  19. Set the overlay opacity and color.
  20. Preview the welcome page at desktop size.
  21. Switch to tablet view and adjust layouts.
  22. Switch to mobile view and check element stacking.
  23. Adjust font sizes for mobile if necessary.
  24. Adjust button size for touch targets on mobile.
  25. Re-check the logo size on small screens.
  26. Enable any animation or fade-in effects on page load.
  27. Set the page background color as a fallback for slow image loads.
  28. Review overall visual hierarchy — headline should dominate.
  29. Check that all text is readable at all breakpoints.
  30. Test the CTA button action in preview mode.
  31. Make final adjustments to spacing and colors.
  32. Review the complete page one more time.
  33. Click Save to publish the welcome page design.
Created 2026-03-25 Last updated 2026-04-09

Was this page helpful?

Related articles

Language
Theme
Legal