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 shared colors, type, spacing and action states. Update the shared color and text styles before adding local overrides so the pages keep a consistent visual rhythm.
The Components page documents shared components and native page patterns. Edit a shared component when the change belongs everywhere; use its exposed properties when content or a destination should differ for one instance.
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 Brand component used by Navigation and Footer. Preserve its homepage link. If you replace the native wordmark with an image, give that image your brand name as alternative text.
Review navigation destinations and the matching footer links together. Keep the shared desktop, compact and phone navigation states connected to the same real pages.
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.
The Destinations CMS collection contains seven sample briefs. Edit each city, country, Country Flag, Intro, planning sections and Service comparison option in the CMS. Four native collection lists group the directory by Region, so each card and its detail page use the same record.
To add a brief, duplicate an item, enter a unique Name and Slug, choose its Region and complete the relevant fields before publishing. Sydney is the eighth directory card and remains a separate static example; edit its card and the /destinations-sydney page in Pages.
The seven older /destinations- city addresses redirect to their matching /destination/ CMS pages in this edition. They are not separate editable layout copies. The Network section keeps eight country controls, including Sydney; update country, city, flag, accessible label and matching map state together.
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
Hero and Journey photographs form one four-mode narrative set. Service cards, the customer-story scene and editorial covers use separate images so the same photograph does not repeat throughout Home.
Preserve the native image layers and their containing frames when replacing an asset. These control crop and responsive dimensions. Check the subject at desktop and phone widths after changing a photo.
Use a sharp subject with room around it. Tall phone cards need a focal point that keeps the truck cab, train front, ship bow or aircraft nose visible. Adjust the image Fill position on the relevant native layer and check each breakpoint.
Compress images before upload, retain useful alternative text and review the published crop and image size. Keep JPEG or PNG social previews separate from the content photographs. If an approved source uses an unsupported format, convert that same image without cropping or compositional changes and record its provenance.
Edit native motion in Framer
Motion you can edit in Framer
Use native Effects and component variants to edit Fourlines motion. Select the relevant layer or shared component in the editor and inspect its appear, scroll, ticker or variant settings. This edition does not require a custom GSAP script or code override.
Keep the named frames and their relationships together when changing copy or images. Duplicate a section before redesigning its motion, and check the full published experience after a change.
The home transport story
Edit the Road, Sea, Rail and Air scenes together. The photograph, text and highlighted stage belong to the same narrative. The Services rail exposes the four transport cards.
Keep scene setup, expanding-frame behavior and stage changes aligned. Check desktop, tablet, phone and reduced-motion behavior after changing frame geometry, and keep all four modes reachable without relying on animation alone.
The transport icon headline
The decorative hero icon uses native variant transitions to cycle Road, Air, Sea and Rail. Adjust the sequence and delays in the component, then verify that its timing still fits the heading. Keep the heading message readable and keep the decorative icon from becoming the only label for the service.
Entrances, scroll reveals and hover feedback
The design combines heading entrances, word reveals, transport-card movement and image zooms. Edit the layer that owns an effect rather than applying the same entrance to both a group and every child inside it. Keep important text readable before and after a transition.
Reuse the smaller-screen arrangements and verify reduced-motion behavior on the published site. Buttons, cards and context links should retain subtle hover feedback and a clearly visible keyboard focus state.
Case studies and the network
The reusable case-study controls switch Challenge, Approach and Outcome. Network controls select country states. Update visible labels, accessible names, city captions and any corresponding map highlights together. These controls must stay useful when decorative motion is paused.
Editing icons and the footer ticker
Keep transport symbols consistent and preserve readable labels outside decorative artwork. Reuse the shared symbols rather than mixing unrelated icon styles.
The Footer component contains native Road, Rail, Sea and Air groups and native moving and paused variants. Edit the Ticker settings and its corresponding Pause and Resume variant actions together. Review desktop and phone variants after editing word size, icon size or spacing. No custom footer script is required in this edition.
Forms before your launch
The Contact form uses native Framer inputs, visible labels and required fields. Replace sample contact details and review cargo choices, optional services and feedback messages for your business.
Configure form delivery and spam protection in your own project before launch. A successful layout preview does not confirm email delivery; verify a safe sample submission on your published domain.
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, keyboard focus and every visible control.
Check the published result as well as the editor preview. Keep all important content readable when decorative movement is disabled, and confirm that each transport stage and form field remains reachable.
Native motion layers
Shared navigation and its desktop, compact and phone states
Hero icon, heading, description and image frame
Home section headings, service statement and transport cards
Journey frame and four transport scenes
Brand strip and ticker
Case-study controls and customer-story photograph
Final metric values and any number-reveal layers
Network photograph, country controls and map artwork
Footer ticker, moving/paused variants and panel
Selected subpage introductions and content groups
Inspect native Effects and component variants in Framer. Keep related layers together and verify the result on a published test site after editing. The Framer edition contains no custom GSAP footer-code instructions.
Set up the enquiry form
The cargo enquiry uses native Framer fields for origin, destination, transport mode, packaging, cargo details, optional handling needs and contact information. Keep each field connected to a visible 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.