Webflow Relume Crash Course - How to Build Websites FAST

How to Set Up a Website Quickly Using Reloom

Introduction to Rapid Website Development

• The speaker discusses the urgency of building a responsive website quickly, emphasizing the need for clean layouts and proper spacing.

• Introduction of Reloom, a component library with over 1,000 components designed to expedite website creation.

Utilizing Reloom for Design Conversion

• The speaker outlines their design elements: navbar, hero section, feature section, portfolio section, header, pricing section, and footer.

• Emphasis on the flexibility of Reloom's library; if specific layouts are not available, users can combine different components to match their designs.

Building with AI Site Builder

• Two methods for using Reloom: browsing the component library or utilizing the AI site builder feature for quick assembly.

• The speaker opts for the site builder feature to rapidly compile wireframes without relying heavily on AI prompts.

Step-by-Step Assembly Process

• Initial steps include adding sections like navbar and hero header directly into the project layout.

• After laying out sections according to design specifications, automatic generation of wireframes occurs based on selected components.

Customizing Components

• The speaker customizes each component (e.g., replacing default navbar with a preferred style).

• Specific adjustments made to hero sections and portfolio displays by selecting appropriate layouts from Reloom’s offerings.

Finalizing Layout Adjustments

• Further customization includes deleting unwanted items from components and ensuring alignment with original design intentions.

• Discussion about additional features such as text rephrasing through AI integration within workflow tools.

Style Guide Feature Exploration

• Introduction of a beta version style guide that allows users to add logos, fonts, and colors but is currently not exportable.

Creating a Style Guide with Relume

Cloning the Style Guide

• The process begins by cloning a style guide, specifically the "reloom style guide," to create a new site called "Glimpse."

• After creating the site, the navigator is accessed using the 'Z' key, and unnecessary div blocks are deleted for clarity.

Setting Up Project Structure

• The speaker discusses installing the Wlow app but opts to copy and paste elements directly into their workflow project instead.

• Unwrapping elements is performed to ensure that layout components are correctly placed within the main wrapper.

Styling Components

• The Relume extension is introduced as a tool for synchronizing classes and converting SVG icons efficiently.

• An SVG logo is copied into the project, ensuring it maintains its original size and color settings for easy integration.

Customizing Colors and Typography

• Background colors are adjusted from white to neutral dark, while text colors are set to E5 for consistency across pages.

• Text primary color adjustments are made, including disconnecting variables to ensure proper color representation throughout the design.

Finalizing Layout and Design Elements

• Button styles are refined by removing padding and underlines; typography properties such as letter spacing and font weight are also configured.

• Redundant buttons and margin top div elements are removed, leading to a more streamlined design structure.

Organizing Content in Folders

• The Lumus extension provides shortcuts for folder management within the navigator. A new subfolder named "paragraph layout" is created.

• Flexbox properties are applied to align content effectively within this new layout structure.

Adjusting Text Properties

• Text elements receive maximum width constraints (570px), with further adjustments made to text size (2.5 times larger than standard).

• Letter spacing is standardized across all text elements at -0.04em for uniformity in appearance.

Adding Visual Elements

Designing a Web Project: Background and Layout Adjustments

Setting the Background Image

• The background image for the project is selected from downloads, with adjustments made to ensure it covers the area without tiling.

• A spacing of 24 pixels is applied to enhance visual appeal, aligning with design expectations.

Text Formatting and Structure

• A maximum width of 1084 pixels is set for text elements, though further adjustments are noted as necessary for optimal appearance.

• Font color and size are modified; specifically, a semi-bold font style at a height of 74% is chosen to improve readability.

Margin and Padding Adjustments

• Margins are adjusted to create better alignment with design specifications, including removing unnecessary padding sections.

• Direct padding settings are applied to sections for improved layout consistency, particularly focusing on top and bottom margins.

Font Integration and Responsive Design

Adding Custom Fonts

• The "Instrument Sense" font is integrated into the project, ensuring it aligns with overall design aesthetics.

• Body text across all pages is updated to use this new font, contributing to a cohesive look throughout the site.

Screen Size Considerations

• Adjustments are made based on screen size; reducing dimensions helps maintain visual integrity across devices.

• Paragraph sizes are standardized at heading 3 size (24), ensuring consistent formatting in both mobile and tablet views.

Implementing Grids and Image Handling

Grid Setup for Features Section

• A grid layout is established for feature images; one row contains images sized proportionally (1.5 FR vs. 0.75).

• Images are exported from Figma in high resolution (2x PNG), preserving quality during integration into the web project.

Overflow Management

• Overflow clipping settings are applied to prevent horizontal scrolling issues on narrow screens while maintaining central alignment of content.

Finalizing Feature Sections

Heading Adjustments

• The title "Featured Works" is formatted as an H1 heading with specific styling adjustments (size 80).

Text Alignment Changes

Designing a Web Layout

Initial Design Adjustments

• The speaker discusses adjusting the width and height of design elements, aiming for a medium weight and a height of one to achieve the desired layout.

• They mention adding images from an "Untitled folder" to enhance the design, specifically focusing on lifestyle portraits that can be integrated into a CMS setup.

Layout Configuration

• The speaker identifies an issue with button visibility due to color blending with the background, prompting a review of button group settings.

• A new div block named "portfolio list" is created to organize items in a two-column grid format, emphasizing layout structure.

Image and Text Integration

• The speaker explains how to adjust image ratios for portrait mode by applying specific classes only to relevant images without affecting others.

• They copy text elements for aesthetic consistency across sections while preparing overlays for images that may require hover effects.

Section Margins and Typography

• Discussion about default padding values leads to adjustments in section margins, ensuring uniformity throughout the design.

• The speaker copies existing styled headings and adjusts typography sizes and weights for clarity in presentation.

Button Creation and Functionality

• A new button labeled "make an offer" is designed using SVG icons, ensuring it aligns visually with previous designs while maintaining functional spacing.

Pricing Section Development

Structural Changes

• The pricing section undergoes significant changes; existing styles are reused for consistency while adapting layouts for better user experience.

• Plans are made to implement sticky functionality within this section, allowing it to remain visible during scrolling.

Sticky Header and Layout Adjustments

Implementing Sticky Header

• The speaker discusses setting a sticky header for the home pricing component, ensuring it remains visible while scrolling by adjusting its position to "sticky" with a top offset of zero.

Title and Paragraph Styling

• A title is created with a font size of 40 pixels, followed by a paragraph set at 16 pixels. The speaker emphasizes the importance of maintaining consistent styling across components.

Grid and Spacing Adjustments

• The layout is adjusted using grid settings, establishing minimum widths (720 pixels) to ensure proper alignment. Spacers are utilized for consistent spacing between headings.

Text Alignment Issues

• The speaker addresses text alignment issues, suggesting adjustments to minimum widths (750 pixels) to ensure that text appears correctly in two lines across sections.

Color Customization

• A faded color (hex code #666) is applied to paragraph text for visual consistency. The heading style is modified to be all caps with a dot at the end for emphasis.

Pricing Section Design

Pricing Div Configuration

• Discussion on configuring the pricing div includes setting it to 100% width and applying a white border instead of a solid background color for better aesthetics.

Limited Time Offer Feature

• The limited time offer section is structured with titles and features organized in a vertical flex layout, enhancing readability and user engagement.

Text Size Specifications

• Text sizes are specified: headings at 40 pixels and subtext at 24 pixels. Color fading is consistently applied across elements for uniformity in design.

Finalizing Layout Elements

Spacer Utilization

• Emphasis on using spacers effectively reduces CSS complexity. Specific spacer sizes are chosen based on desired gaps between elements (e.g., small or medium).

Content Duplication Strategy

• Content duplication techniques are discussed as an efficient way to maintain layout integrity while minimizing manual adjustments during design iterations.

Features Section Refinement

Margin Adjustments

• Attention is drawn to excessive margins within the features section; these are reduced or removed entirely to streamline the overall appearance of the component.

Icon and Layout Adjustments

Icon Implementation

• The speaker discusses copying an icon as SVG, setting its dimensions to 20x20 pixels for a square shape.

• The layout is adjusted to create a grid with two columns and one row, ensuring uniformity in text size (set to 1rem).

Footer Design

• The footer includes copyright information, social links, and a logo. The speaker emphasizes the need for proper padding and spacing adjustments.

• A new div block is created for the footer component wrapper, incorporating a neutral base color line at the top.

Spacing and Button Functionality

Spacing Adjustments

• Focus on refining spacing rather than content; padding is set to small values for better aesthetics.

• A "Back to Top" button is added with functionality intended for scrolling back up the page.

Section ID Assignment

• An ID of "top header" is assigned to facilitate smooth scrolling back to the top of the page.

SVG Integration Techniques

SVG Import Methodology

• Introduction of an app called SVG import that allows easy integration of SVG elements into web pages without custom coding.

• Demonstrates how attributes can manipulate SVG elements directly on the page.

Reviewing Tablet Mode Adjustments

Logo Resizing

• Review of logo size adjustments in the navigation bar after previous modifications affected its appearance.

Span Height Adjustment

• The height of span elements is reduced to 80% while maintaining full width, improving overall design coherence.

Final Touches on Mobile View

Text Size Optimization

• Further reductions in text size are made for tablet view; spans are converted into block elements with centered text alignment.

Overall Design Consistency

• Emphasis on ensuring all text aligns well within their respective sections while maintaining appropriate spacing between elements.

Concluding Layout Enhancements

Animation Considerations

Website Development Process

Class Name Adjustments

• The speaker discusses modifying class names obtained from a site builder, emphasizing the importance of renaming elements for clarity and organization in the code.

• Instead of renaming directly, the speaker retrieves section names from existing code to maintain consistency and improve readability.

Grid Layout Implementation

• A grid layout is introduced by removing margins and adjusting feature images to enhance visual structure, allowing for better mobile manipulation.

• The speaker mentions splitting featured works into one column while ensuring that image ratios are set correctly for both desktop and mobile views.

Text Styling and Centering

• Adjustments are made to text styles, specifically changing heading sizes to ensure uniformity across sections.

• The content is centered using a combo class from the style guide, enhancing overall alignment on the page.

Pricing Section Adjustments

• The pricing section's position is changed to static to prevent overlap with other content, ensuring a clean layout.

• Elements within this section are aligned left or centered as needed, contributing to a cohesive design.

Final Touches and Testing

• A "back to top" button is redesigned into a three-column grid layout for improved navigation.

• Background colors of buttons are adjusted for transparency; issues with centering on mobile versus desktop views are addressed.

Performance Review

• After completing adjustments, the website is published as clonable for others to explore.

• A performance test using Google Lighthouse reveals good scores but highlights minor accessibility issues related to contrast ratios and link naming conventions.