Webflow

In the left toolbar, click the Assets icon to open the panel.

Familiarize yourself with supported assets: images, documents, audio, and animations.

Click the cloud upload icon, or drag files into the panel to add images, documents, audio, and animations.

Hover the asset, click the more options icon, then Edit Settings. Change the Name, and click Save.

Click New Folder in the Assets panel. Name the folder and press Create. Optionally choose a parent for nesting.

Drag assets into a folder or use Move to… to relocate them.

Hover the asset, More Options > Edit Settings, enter Descriptive Alt Text, and Save. If decorative, mark as Decorative.

Select an image, More Options > Compress, choose AVIF or WebP, then Compress. Repeat for bulk as needed.

Hover the asset, More Options > Replace, select the new file, then Open. Note: the asset URL will change.

For a shared Library asset, hover the asset, More Options > Duplicate to create a local copy.

Hover the asset, More Options > Copy Link to copy the public URL, or Open Link to preview in a new tab.

Use Filter to limit by type or folder, Search to locate by name, and Sort by Newest, Oldest, A-Z, or Z-A.

Drag image or animation onto the canvas to create an image element or Lottie/Rive element.

Select an element, go to the Style panel, and set a background image from Assets.

Open your Webflow project in Designer from the dashboard.

In the right-hand panel, select Style Manager to access global styles.

In Style Manager, define Color Styles for Brand Primary, Brand Secondary, and Neutral colors; use precise hex codes.

Define Type Styles for H1, H2, Body, and Caption; set font-family, size, weight, and line-height.

Convert header, footer, and common cards into Symbols to ensure consistency.

Create Space Styles for margins and paddings (e.g., 8, 12, 16, 24, 32) and apply them consistently.

Add Desktop, Tablet, and Mobile breakpoints and align typography and spacing across them.

In Designer, use the Library panel to publish design tokens and components for the team.

Ensure new components reference existing Color Styles, Type Styles, and Space Styles.

Build a reference page showing color swatches, typography, and components; link to tokens.

Preview pages in Webflow’s Preview mode and test on different device sizes.

Document governance and extension rules for tokens and components to guide future work.

Define the post's purpose and target audience in one sentence.

List 3-6 main topics to cover as H2 sections.

For each H2, add 1-2 H3 subpoints to form a nested outline.

Rename headings to be concise and SEO-friendly.

Write 1-2 sentence descriptions under each heading.

Reorder sections if needed to improve narrative.

Ensure every main topic supports the goal and nothing is missing.

Save the outline in your CMS draft or outline template.

If time allows, share with a teammate for quick feedback.

Open your Webflow project and navigate to the page where you want the portfolio slider.

From the Add Panel on the left, drag a Slider component onto the canvas inside the chosen section. It will stretch to the full width of its parent.

With the Slider selected, press D to open the Element Settings Panel, then click + Add Slide. You can also right-click a slide on the canvas and choose Duplicate.

Alternatively, duplicate an existing slide by right-clicking it in the canvas and selecting Duplicate.

Use the Navigator panel to reorder slides by selecting a slide and dragging it to a new position.

Select a slide and either drag an Image element into it or set a background image on the slide. Create a class and reuse it across slides.

On the slide's class, set Background Size to Contain and Background Position to Center to keep content visible.

Drop a container inside the slide and add a Heading and a Paragraph to describe the piece.

Select the Slider, then press D to open the Settings Panel and review available options.

In Settings Panel, choose an Animation Type (e.g., Slide or Fade) to control how slides move.

In Settings Panel, select an Easing method and set Duration to control transition timing.

In Settings Panel, enable Swipe gestures for touch devices.

In Settings Panel, turn Auto play ON, set the delay for the first slide, and specify how many slides to loop.

In Settings Panel, configure First and Last Slide arrows, and adjust Slide nav controls for spacing, shape, and color.

Select the Slider and adjust its height in the Styles Panel. Consider using vh units for responsiveness.

To change arrow icons, replace the icon inside the left/right arrow elements or add your own images. Apply a dedicated class to target styling.

Adjust dot size and color in the embed CSS for .w-slider-dot and .w-slider-dot.w-active.

To create a 3-slide carousel: assign the same slide class to all slides, set width to 33.33% on desktop and 100% on mobile.

Webflow sliders can't auto-populate with dynamic content. Use a Collection List in each slide and limit to one item; duplicate slides and adjust the start item.

Open the Design Tokens panel. Create tokens for core colors (color-primary, color-background), typography (font-size-base, font-weight-regular), and spacing (space-sm, space-lg). Use a consistent naming convention across colors, typography, and spacing.

Add tokens for light and dark themes. Define semantic tokens like color-background and color-text for each theme. Group them under theme names (theme-light, theme-dark) and test in both modes.

In the Styles area, create global classes (e.g., btn-primary, card-content) and set default tag styles for common elements (h1, p, a). Ensure selectors reference tokens for colors and spacing.

Create components such as Nav, Hero, Card, Button, and Footer. For each, set default properties and connect to tokens and selectors so updates propagate automatically.

For each component, add properties (props) like variant, size, and alignment. Document how changing a property affects multiple instances.

Combine components and tokens into reusable page templates (e.g., Home, Blog, Contact). Ensure templates rely on tokens so site-wide changes propagate.

Publish components, tokens, and templates to the Shared Library. Add this library to all sites in the Workspace for quick access.

Name patterns: Classes (btn-primary, card-content), Variables (color-primary, spacing-lg), Components (Nav-Topbar, Hero-Default). Use this everywhere.

Link tokens to breakpoints and responsive styles. Define how tokens adjust at tablet and mobile sizes; test across screen sizes.

Create a dedicated style guide page or design-system site. Explain tokens, selectors, components, patterns, and usage guidelines.

Assign owners for tokens and components. Establish review cadences and a change-log to track updates.

Schedule regular audits to ensure consistency. Reconcile drift by updating tokens, selectors, and components across templates.