404

Overview #

The 404 section is designed to display a message when a page is not found. This section is crucial for guiding users back to the main content of the site when they encounter a broken link or a mistyped URL. The content for this section is managed through the theme's default content editor.

Key components and functionality #

Color settings

Color settings allow you to customize the color scheme to match your site's branding. You can adjust the text and subheading colors to ensure they are visually appealing and accessible.

• Text color: Customize the color of the main text.
• Subheading color: Adjust the color of subheadings for better visual hierarchy.

Padding settings

Padding settings control the space around the content within the section, enhancing readability and layout aesthetics.

• Top padding (desktop): Adjust the top padding for desktop views, ranging from 0 to 120 pixels, with a default of 32px.
• Bottom padding (desktop): Adjust the bottom padding for desktop views, ranging from 0 to 120 pixels, with a default of 32px.
• Top padding (mobile): Adjust the top padding for mobile views, ranging from 0 to 120 pixels, with a default of 16px.
• Bottom padding (mobile): Adjust the bottom padding for mobile views, ranging from 0 to 120 pixels, with a default of 16px.

Background settings

These settings allow you to define the background appearance of the section, including colors, gradients, and media.

• Background color: Set a solid color for the section's background.
• Background gradient: Apply a gradient effect to the background for a dynamic look.
• Overlay color: Add an overlay color to the background for additional styling.
• Overlay gradient: Use a gradient overlay for a more complex background effect.
• Overlay opacity: Control the transparency of the overlay, ranging from 0% to 100%, with a default of 48%.
• Background image: Select an image to use as the section's background.
• Background image (mobile): Choose a different image for mobile views to ensure optimal display.
• Background video: Incorporate a video as the background for an engaging visual experience.
• Background video (mobile): Use a different video for mobile views to maintain performance and aesthetics.

Separator settings

Separator settings allow you to add visual dividers within the section, enhancing content organization.

• Top separator style: Choose from dashed, dotted, line, or none, with a default of none.
• Bottom separator style: Choose from dashed, dotted, line, or none, with a default of none.
• Separator color: Customize the color of the separators to match your theme.

Width settings

These settings determine the width of the content and section, allowing for flexible layout options.

• Content width: Options include using the theme setting, fixed pixel widths (768px, 1024px, 1240px, 1440px, 1600px), or no maximum width, with a default of theme setting.
• Section width: Options include using the theme setting, default content width, full width, or full bleed, with a default of theme setting.

Usage examples #

1. Customizing a 404 page: Use the color settings to match the 404 page with your site's branding. Adjust the padding to ensure the message is centered and easy to read. Add a background image or video to make the page more engaging.

2. Responsive design: Utilize the mobile-specific settings for background images and videos to ensure the 404 page looks great on all devices. Adjust mobile padding to maintain readability on smaller screens.

3. Enhanced user experience: Use separator styles to visually divide content, making it easier for users to navigate back to the main site. Adjust the overlay opacity to ensure text remains legible over background media.

By leveraging these settings, you can create a visually appealing and functional 404 page that aligns with your site's overall design and enhances the user experience.