TEMPLATE RESOURCES

A clear hand-off.

Use these notes to replace the sample content, adapt the design and keep the connected layouts working as your website grows.

Start with the foundations

Open the Style Guide for the shared colors, type, spacing and action states. Update the native variables before adding local overrides so the pages keep a consistent visual rhythm.
The Components page demonstrates the reusable sections and forms. Edit a shared component when the change belongs everywhere; use its exposed properties when the route or content should differ on one page.
Duplicate the nearest existing layout for a new page. Keep one main heading, use section headings in order and let text containers grow when the copy becomes longer.

Replace the shared shell

Update the Fourlines logo in Site Navigation and Site Footer. Preserve the logo link to the homepage and give the image your brand name as alternative text.
Navigation destinations are exposed as component properties. Update service, work, network and editorial destinations together with the matching footer links.
Replace the sample social links with the accounts that belong to your business. Keep Style Guide, Instructions, Licenses and Changelog reachable from the utility links.

Edit transport and destination pages

Services introduces Road, Rail, Sea and Air. Each mode has its own detail page with capabilities, planning steps and a useful enquiry route.
Destinations contains eight sample briefs, including Sydney. Edit the city, country, flag, region, introduction, planning sections, questions, photos and SEO in CMS. Four native Collection Lists group the directory by Region and sort by Name. Add or duplicate an item, give it a unique Name and Slug, complete its fields and publish; the matching regional directory updates automatically. Freight Services contains Road, Rail, Sea and Air. Edit their hero, capabilities, route stops, planning steps, questions, photos and SEO in CMS. Set Related Service 1–3 to the other freight items so each page links to the right alternatives. The shared template is at /freight/; destinations use /destination/. Mode Key and Mode Emblem Path preserve each freight mode’s existing selector and native SVG icon. Keep these values unchanged when editing copy or photos. Retain existing wrappers, classes and motion relationships. Use a 1200 × 630 JPEG or PNG for Open Graph Image. The previous duplicate static destination and freight pages and temporary CMS test pages have been removed. Edit destinations and freight services through their CMS collections and shared template pages. All current internal service links use the CMS pages. Native 301 redirects require a hosted site plan; configure redirects when connecting an established business domain. The Network section keeps eight country controls. Update the country, city, accessible label and matching map interaction together when adapting that component.
Figures, transit times, emissions comparisons, capacity statements and testimonials are sample template content. Update the disclosure and the evidence together when replacing them with real business information.

Maintain the editorial CMS

Open the Insights collection to edit article names, summaries, hero images, publication dates, categories and rich-text bodies. The same entries feed Home cards, the Insights index and the CMS article template.
Use the SEO title and SEO description fields for search snippets; the visible headline can be longer than the search title. Add a 1200 × 630 JPEG or PNG in Open Graph image for sharing.
Write Image alt text for the scene or information the hero photo contributes. Do not repeat the headline when a description of the photograph would help a screen-reader user.
Keep essential fields filled, use short descriptive item slugs and preview a long heading and several rich-text elements at phone width. Three to seven realistic sample entries are sufficient to demonstrate the collection.

Choose and replace photographs

The included real stock photographs are reused across transport, destination, customer-story and editorial layouts. Replace images through their native image element or CMS field, keeping the existing wrapper and class. Photographer credits and source links are on Licenses.
Preserve the native image classes and wrappers when replacing an asset. These supply the crop and responsive dimensions. Check the subject at desktop and phone widths after changing a photo.
Use a sharp subject with room around it. The tall phone service cards need a focal point that keeps the truck cab, train front, ship bow or aircraft nose visible. Set the focal point in the native class for the relevant mode.
Compress image files before upload and review any CMS copies after compression. Use eager loading only for the first essential view; leave supporting imagery lazy-loaded. Social preview images are a separate JPEG/PNG family rather than the WebP content photos.

How to Edit GSAP Animations

Motion you can edit in Webflow Fourlines uses Webflow’s native GSAP Interactions for entrances, the home transport story, the hero icon cycle, case study, network and footer marquee. Open the Interactions panel to edit these timelines. No custom animation JavaScript is required. Keep the existing motion classes, element relationships and data attributes when changing copy or images. Duplicate a section before redesigning its animation. Changing or deleting a targeted class can disconnect the effect.
The home transport story On desktop with normal motion enabled, the journey moves through Road, Sea, Rail and Air as visitors scroll. Each image, text panel and highlighted stage work as one sequence. The services section also uses a desktop horizontal story to expose four transport cards. The scene setup and opening-frame interactions control layout as well as appearance. Keep these together with the image and active-stage interactions. On phones and when reduced motion is enabled, the journey becomes a normal sequence of readable panels and the services remain accessible without the desktop scroll effect. Test both modes after editing scene geometry.
The transport icon headline The decorative hero icon automatically cycles Road, Air, Sea and Rail over 16 seconds. Edit this native timeline in Webflow’s Interactions panel. With reduced motion enabled, the icon stays on Road and the headline remains readable. The SVG icon is decorative; the heading’s accessible text should continue to describe the brand message.
Entrances, scroll reveals and hover feedback The home page combines floating headline entrances, a staggered word reveal, transport-card movement and photograph parallax. The journey opens as a smaller frame and expands before its transport stages change. The network, enquiry and footer panels have their own scroll zooms. The three customer metrics roll into their final values. The inner-page entrance and section interactions use quieter movement and are scoped to selected pages. When adding a new page, add it to those interaction scopes and keep one main heading. Do not apply an entrance to both a parent group and the text or cards nested inside it. Preserve the existing small-screen and reduced-motion fallbacks when editing. Buttons, cards and context links have subtle hover feedback. Keep a clearly visible keyboard focus state when changing their styles.
Case studies and the network The case-study tabs switch the challenge, approach and outcome text. The network’s country buttons highlight the corresponding map point. These are functional controls and continue working with reduced motion enabled. When renaming a network destination, update its visible label, accessible name, city caption, destination link and matching map interaction together. Keep the country button and the correct map point connected.
Editing icons and the footer marquee The transport symbols are native SVG elements. Preserve their viewBox and decorative accessibility attributes when replacing paths. Keep a consistent style and keep readable labels outside the decorative SVG. The footer marquee contains native, editable Road, Rail, Sea and Air text. Update both .footer-freight-group copies and the .footer-freight-static fallback together. Keep the two animated groups identical in width so the loop stays seamless. Its separate native Pause and Resume buttons support pointer, keyboard and touch activation.
Forms before your launch The shipment forms use native Webflow inputs, visible labels, required fields and custom success and error messages. Replace sample contact details and review the labels, optional services and cargo options for your business. Before launching your own site, configure form delivery, notification recipients and spam protection in Webflow. A successful template layout check does not confirm email delivery. Test with safe sample information and avoid entering sensitive shipment or personal data during setup.
After changing motion Publish to your test domain and check the complete page at desktop, tablet and phone widths. Test normal and reduced motion, scrolling forward and backward, resizing between modes, keyboard focus and every visible control. Check the actual published result rather than relying only on Designer preview. Keep all important content readable with motion disabled, and confirm that every transport stage and form field can still be reached.
Native motion targets Shared navigation pill and its desktop/mobile scroll states Hero heading icon, copy and image mask Home headline, supporting copy and staggered service-statement words Journey scene, expanding visual frame and four synchronized transport states Services stage, track, four service cards and their photographs Brand strip and its moving track Case-study photograph and Challenge / Approach / Outcome states Three rolling metrics, their final values and reel overlays Network photograph, country buttons and corresponding map points Enquiry panel and footer panel Footer transport text track and its Pause / Resume buttons Selected inner-page heading and section groups Use the Interactions panel to inspect these native timelines. The navigation contracts during the first 240px of scrolling; its desktop and mobile timelines preserve normal text and touch sizes. Reduced motion leaves the pill in its resting state. Footer text loop Open Site Footer and select “Loop and pause the footer transport lines” in Interactions. Its “Continuous 32 second footer text loop” timeline moves .footer-freight-track from 0% to −50%, uses linear easing and repeats indefinitely. Change the 32-second duration to 48 seconds for a slower loop. Keep the two text groups identical and retain the −50% endpoint. The same timeline reveals the moving track and its controls while hiding [data-footer-static]. Reduced motion disables the timeline, leaving the native static four-word row visible. The separate Pause and Resume buttons control this steady loop. Hover and scrolling do not override a user pause. If you change your system motion preference while the page is open, reload to apply the new initial playback state. To remove only the marquee motion, disable or delete this interaction in Webflow. The static row remains visible because the moving track and controls are hidden in their resting styles. The separate “Settle the footer panel” interaction controls the footer zoom. There is no footer animation script to edit or remove.

Set up the enquiry form

The cargo enquiry uses native Webflow fields for origin, destination, transport mode, packaging, cargo details, optional handling needs and contact information. Keep each input inside its label or linked to its label.
Replace the sample success/error copy and configure delivery or integrations in your own site settings before collecting enquiries. Test a safe sample submission on your published domain.
The template preview is a demonstration. Do not enter personal or sensitive cargo information while testing. No shipment is booked and no freight quote is calculated automatically.

Before your business site goes live

Replace all sample names, claims, quotes and editorial scenarios. Review logo links, social accounts, field labels and destination routes. Add the privacy and legal information that accurately describes your own business.
Check page titles, descriptions and social previews, including CMS entries. Test the custom 404, every main CTA, long content and the enquiry form at desktop, tablet and phone widths.
Keep the included asset sources with the Licenses page and add documentation for anything you install later.