SBARRORM / SETUP GUIDE
Make the system your own.Make the system your own.
A practical guide to your brand, shared components, CMS, images, forms, motion, languages and publishing.
SBARRORM / SETUP GUIDE
Make the system your own.Make the system your own.
A practical guide to your brand, shared components, CMS, images, forms, motion, languages and publishing.
SBARRORM / SETUP GUIDE
Make the system your own.Make the system your own.
A practical guide to your brand, shared components, CMS, images, forms, motion, languages and publishing.
Jump to a chapter.Jump to a chapter.
Choose a topic to reach its instructions. Each chapter stays editable in the shared system.
Jump to a chapter.Jump to a chapter.
Choose a topic to reach its instructions. Each chapter stays editable in the shared system.
Jump to a chapter.Jump to a chapter.
Choose a topic to reach its instructions. Each chapter stays editable in the shared system.
Start with your brandStart with your brand
Replace the shared Wordmark, studio name, introduction, footer note and social imagery. Use your own contact and operator details. The demonstration projects are concept studies, not commissioned client work. Replace or describe them accurately. Keep headings concise, then test longer names and mixed-language text at phone, tablet and desktop sizes. For linked canvas colors, edit the shared Color Styles named Ink, Ivory, Signal Lime and Vermilion. Code components also expose their own Color controls for backgrounds, accents, image shades, cursors, focus and form feedback. Those controls can require separate changes. Edit the owning shared definition, preserve useful transparency and check every instance and interaction state. To change the Hero headline font or Card Media label font, enable Custom Font in that code component, then choose Headline Font or Label Font. With Custom Font off, the original demonstration typography is preserved. Use the separate scale control for text size: use Headline Scale or Label Scale, default 1 and range 0.5 to 1.5, to scale the existing responsive sizes. Other shared headings retain their own Font and breakpoint controls. After a palette or font change, review contrast, long text, image crops, hover, focus, reduced motion and every breakpoint. For Arabic content, select a supporting font and verify joined letters and mixed-language text in the native locale before publishing it.
Start with your brandStart with your brand
Replace the shared Wordmark, studio name, introduction, footer note and social imagery. Use your own contact and operator details. The demonstration projects are concept studies, not commissioned client work. Replace or describe them accurately. Keep headings concise, then test longer names and mixed-language text at phone, tablet and desktop sizes. For linked canvas colors, edit the shared Color Styles named Ink, Ivory, Signal Lime and Vermilion. Code components also expose their own Color controls for backgrounds, accents, image shades, cursors, focus and form feedback. Those controls can require separate changes. Edit the owning shared definition, preserve useful transparency and check every instance and interaction state. To change the Hero headline font or Card Media label font, enable Custom Font in that code component, then choose Headline Font or Label Font. With Custom Font off, the original demonstration typography is preserved. Use the separate scale control for text size: use Headline Scale or Label Scale, default 1 and range 0.5 to 1.5, to scale the existing responsive sizes. Other shared headings retain their own Font and breakpoint controls. After a palette or font change, review contrast, long text, image crops, hover, focus, reduced motion and every breakpoint. For Arabic content, select a supporting font and verify joined letters and mixed-language text in the native locale before publishing it.
Start with your brandStart with your brand
Replace the shared Wordmark, studio name, introduction, footer note and social imagery. Use your own contact and operator details. The demonstration projects are concept studies, not commissioned client work. Replace or describe them accurately. Keep headings concise, then test longer names and mixed-language text at phone, tablet and desktop sizes. For linked canvas colors, edit the shared Color Styles named Ink, Ivory, Signal Lime and Vermilion. Code components also expose their own Color controls for backgrounds, accents, image shades, cursors, focus and form feedback. Those controls can require separate changes. Edit the owning shared definition, preserve useful transparency and check every instance and interaction state. To change the Hero headline font or Card Media label font, enable Custom Font in that code component, then choose Headline Font or Label Font. With Custom Font off, the original demonstration typography is preserved. Use the separate scale control for text size: use Headline Scale or Label Scale, default 1 and range 0.5 to 1.5, to scale the existing responsive sizes. Other shared headings retain their own Font and breakpoint controls. After a palette or font change, review contrast, long text, image crops, hover, focus, reduced motion and every breakpoint. For Arabic content, select a supporting font and verify joined letters and mixed-language text in the native locale before publishing it.
Edit the shared definitionsEdit the shared definitions
Action/Pill Button owns linked primary actions; Forms/Submit Button uses its shared surface. Navigation/Section Link owns navigation and utility links. Edit radius, padding, typography and interaction in their definitions, then inspect all instances. Page Introduction uses Heading, Text Motion and Text Response. Editorial Copy uses Title, Body, Heading Motion and Heading Response. Keep variant selection appropriate to the breakpoint. Migrated animated headings use their shared Font, breakpoint scale, leading and tracking controls; later native text-preset edits do not automatically update these code headings. Adjust the shared definition and verify every breakpoint. Card controls belong to their shared definitions: inspect image, title, description, destination, image ratio and silhouette before replacing content. Preserve the configured defaults unless the composition needs an intentional change. Project Card exposes Show Badge, Shape, Project Link and Motion. Current Home and Work instances use Image Ratio 1.45; the code insertion default is 1.15. Check new instances rather than assuming the configured demo ratio. Guide Chapter Index exposes each chapter’s Label, Link and Visible controls. Keep its destinations matched to the registered chapter anchors.
Edit the shared definitionsEdit the shared definitions
Action/Pill Button owns linked primary actions; Forms/Submit Button uses its shared surface. Navigation/Section Link owns navigation and utility links. Edit radius, padding, typography and interaction in their definitions, then inspect all instances. Page Introduction uses Heading, Text Motion and Text Response. Editorial Copy uses Title, Body, Heading Motion and Heading Response. Keep variant selection appropriate to the breakpoint. Migrated animated headings use their shared Font, breakpoint scale, leading and tracking controls; later native text-preset edits do not automatically update these code headings. Adjust the shared definition and verify every breakpoint. Card controls belong to their shared definitions: inspect image, title, description, destination, image ratio and silhouette before replacing content. Preserve the configured defaults unless the composition needs an intentional change. Project Card exposes Show Badge, Shape, Project Link and Motion. Current Home and Work instances use Image Ratio 1.45; the code insertion default is 1.15. Check new instances rather than assuming the configured demo ratio. Guide Chapter Index exposes each chapter’s Label, Link and Visible controls. Keep its destinations matched to the registered chapter anchors.
Edit the shared definitionsEdit the shared definitions
Action/Pill Button owns linked primary actions; Forms/Submit Button uses its shared surface. Navigation/Section Link owns navigation and utility links. Edit radius, padding, typography and interaction in their definitions, then inspect all instances. Page Introduction uses Heading, Text Motion and Text Response. Editorial Copy uses Title, Body, Heading Motion and Heading Response. Keep variant selection appropriate to the breakpoint. Migrated animated headings use their shared Font, breakpoint scale, leading and tracking controls; later native text-preset edits do not automatically update these code headings. Adjust the shared definition and verify every breakpoint. Card controls belong to their shared definitions: inspect image, title, description, destination, image ratio and silhouette before replacing content. Preserve the configured defaults unless the composition needs an intentional change. Project Card exposes Show Badge, Shape, Project Link and Motion. Current Home and Work instances use Image Ratio 1.45; the code insertion default is 1.15. Check new instances rather than assuming the configured demo ratio. Guide Chapter Index exposes each chapter’s Label, Link and Visible controls. Keep its destinations matched to the registered chapter anchors.
Keep the CMS connectedKeep the CMS connected
Open Work, Services or Journal in Framer CMS. Replace a demonstration record or add your own, then fill its title, summary, prose, images, image descriptions and metadata. Preserve valid slugs and collection relationships used by related work and Next Concept. Preview the list, click through to the detail, load the detail URL directly and verify browser Back. Review empty relationships and draft records before publishing. Relationships are optional only where the layout supports an empty state; do not add placeholder relationships solely to conceal empty output. Journal records must remain draft until their writing, rights, images, metadata and complete detail layout are reviewed. Work Related Services is required. Services Related Work, Work Next Project and Journal Related Work/Related Article are optional; verify their empty states and hide unavailable related actions. Enable Journal controls navigation visibility; editorial approval, indexing and record publication are separate checks. Until enabled and editorially approved, keep Journal unlinked and noindex. Set actual publication dates and a responsible editorial owner.
Keep the CMS connectedKeep the CMS connected
Open Work, Services or Journal in Framer CMS. Replace a demonstration record or add your own, then fill its title, summary, prose, images, image descriptions and metadata. Preserve valid slugs and collection relationships used by related work and Next Concept. Preview the list, click through to the detail, load the detail URL directly and verify browser Back. Review empty relationships and draft records before publishing. Relationships are optional only where the layout supports an empty state; do not add placeholder relationships solely to conceal empty output. Journal records must remain draft until their writing, rights, images, metadata and complete detail layout are reviewed. Work Related Services is required. Services Related Work, Work Next Project and Journal Related Work/Related Article are optional; verify their empty states and hide unavailable related actions. Enable Journal controls navigation visibility; editorial approval, indexing and record publication are separate checks. Until enabled and editorially approved, keep Journal unlinked and noindex. Set actual publication dates and a responsible editorial owner.
Keep the CMS connectedKeep the CMS connected
Open Work, Services or Journal in Framer CMS. Replace a demonstration record or add your own, then fill its title, summary, prose, images, image descriptions and metadata. Preserve valid slugs and collection relationships used by related work and Next Concept. Preview the list, click through to the detail, load the detail URL directly and verify browser Back. Review empty relationships and draft records before publishing. Relationships are optional only where the layout supports an empty state; do not add placeholder relationships solely to conceal empty output. Journal records must remain draft until their writing, rights, images, metadata and complete detail layout are reviewed. Work Related Services is required. Services Related Work, Work Next Project and Journal Related Work/Related Article are optional; verify their empty states and hide unavailable related actions. Enable Journal controls navigation visibility; editorial approval, indexing and record publication are separate checks. Until enabled and editorially approved, keep Journal unlinked and noindex. Set actual publication dates and a responsible editorial owner.
Prepare images for their placePrepare images for their place
Replace media through the existing image controls. Keep the Facet, Arch and Notch family and check the crop, image ratio and label safe area at every size. Use clear alternative text for meaningful images. Keep original masters separately, upload suitably compressed delivery files and inspect the published responsive image selected on phone and desktop. Avoid placing a full-resolution master where a smaller image is sufficient.
Prepare images for their placePrepare images for their place
Replace media through the existing image controls. Keep the Facet, Arch and Notch family and check the crop, image ratio and label safe area at every size. Use clear alternative text for meaningful images. Keep original masters separately, upload suitably compressed delivery files and inspect the published responsive image selected on phone and desktop. Avoid placing a full-resolution master where a smaller image is sufficient.
Prepare images for their placePrepare images for their place
Replace media through the existing image controls. Keep the Facet, Arch and Notch family and check the crop, image ratio and label safe area at every size. Use clear alternative text for meaningful images. Keep original masters separately, upload suitably compressed delivery files and inspect the published responsive image selected on phone and desktop. Avoid placing a full-resolution master where a smaller image is sufficient.
Connect your enquiry destinationConnect your enquiry destination
The demonstration fields are enabled. Configure your own email or webhook destination in the native form settings before accepting enquiries. Update labels, choices, privacy text, Whitespace Error and feedback messages for your operation and languages. Email and select fields retain native browser/device behavior. Check required, whitespace-only and malformed input, keyboard focus, touch, success and controlled failure using a destination you own. Validation alone does not prove delivery; no test submissions were sent to this demonstration. No receiving destination or delivered-message verification is established for the demo.
Connect your enquiry destinationConnect your enquiry destination
The demonstration fields are enabled. Configure your own email or webhook destination in the native form settings before accepting enquiries. Update labels, choices, privacy text, Whitespace Error and feedback messages for your operation and languages. Email and select fields retain native browser/device behavior. Check required, whitespace-only and malformed input, keyboard focus, touch, success and controlled failure using a destination you own. Validation alone does not prove delivery; no test submissions were sent to this demonstration. No receiving destination or delivered-message verification is established for the demo.
Connect your enquiry destinationConnect your enquiry destination
The demonstration fields are enabled. Configure your own email or webhook destination in the native form settings before accepting enquiries. Update labels, choices, privacy text, Whitespace Error and feedback messages for your operation and languages. Email and select fields retain native browser/device behavior. Check required, whitespace-only and malformed input, keyboard focus, touch, success and controlled failure using a destination you own. Validation alone does not prove delivery; no test submissions were sent to this demonstration. No receiving destination or delivered-message verification is established for the demo.
Choose your motion balanceChoose your motion balance
Text Motion and Text Response adjust shared headings. English reacts per character and Arabic per complete word. Hero image gestures stay in the image area. The Hero has one base slide and up to five Extra Slides. Match Hero’s Slide Group to each selector’s Group. Set selector Mode to Slide and provide a meaningful Slide Label. Use a one-based Slide index for every selector and keep selector count matched to total slides. Slide Controls chooses the internal controls. Slide Duration ranges from 5 to 20 seconds, with an insertion default of 8 seconds. The configured demonstration and current Hero insertion default both have autoplay off. Enable it deliberately only when your content benefits from timed slides. Use Static or lower intensity where appropriate and test reduced motion. Required content and actions remain usable without hover.
Choose your motion balanceChoose your motion balance
Text Motion and Text Response adjust shared headings. English reacts per character and Arabic per complete word. Hero image gestures stay in the image area. The Hero has one base slide and up to five Extra Slides. Match Hero’s Slide Group to each selector’s Group. Set selector Mode to Slide and provide a meaningful Slide Label. Use a one-based Slide index for every selector and keep selector count matched to total slides. Slide Controls chooses the internal controls. Slide Duration ranges from 5 to 20 seconds, with an insertion default of 8 seconds. The configured demonstration and current Hero insertion default both have autoplay off. Enable it deliberately only when your content benefits from timed slides. Use Static or lower intensity where appropriate and test reduced motion. Required content and actions remain usable without hover.
Choose your motion balanceChoose your motion balance
Text Motion and Text Response adjust shared headings. English reacts per character and Arabic per complete word. Hero image gestures stay in the image area. The Hero has one base slide and up to five Extra Slides. Match Hero’s Slide Group to each selector’s Group. Set selector Mode to Slide and provide a meaningful Slide Label. Use a one-based Slide index for every selector and keep selector count matched to total slides. Slide Controls chooses the internal controls. Slide Duration ranges from 5 to 20 seconds, with an insertion default of 8 seconds. The configured demonstration and current Hero insertion default both have autoplay off. Enable it deliberately only when your content benefits from timed slides. Use Static or lower intensity where appropriate and test reduced motion. Required content and actions remain usable without hover.
Review Arabic and RTL togetherReview Arabic and RTL together
Keep English and use native Framer Localization for Arabic. Translate visible text, menu names, CMS prose, form choices and messages, alternative text and page metadata. Select a font that supports Arabic, use joined whole-word title motion and review leading and wrapping. Configure Reverse layout in site Settings, General, Layout direction, then review affected native stacks and grids; keep email and URL input readable LTR. Review arrows by purpose. Test language-preserving navigation, direct detail routes and mixed scripts. The demonstration Arabic locale is currently draft and is not yet a verified public language.
Review Arabic and RTL togetherReview Arabic and RTL together
Keep English and use native Framer Localization for Arabic. Translate visible text, menu names, CMS prose, form choices and messages, alternative text and page metadata. Select a font that supports Arabic, use joined whole-word title motion and review leading and wrapping. Configure Reverse layout in site Settings, General, Layout direction, then review affected native stacks and grids; keep email and URL input readable LTR. Review arrows by purpose. Test language-preserving navigation, direct detail routes and mixed scripts. The demonstration Arabic locale is currently draft and is not yet a verified public language.
Review Arabic and RTL togetherReview Arabic and RTL together
Keep English and use native Framer Localization for Arabic. Translate visible text, menu names, CMS prose, form choices and messages, alternative text and page metadata. Select a font that supports Arabic, use joined whole-word title motion and review leading and wrapping. Configure Reverse layout in site Settings, General, Layout direction, then review affected native stacks and grids; keep email and URL input readable LTR. Review arrows by purpose. Test language-preserving navigation, direct detail routes and mixed scripts. The demonstration Arabic locale is currently draft and is not yet a verified public language.
Check every content shapeCheck every content shape
Inspect phone, tablet, desktop and widths between breakpoints. Try long titles, longer descriptions, empty relations and missing optional media. Check readable text, image crops, navigation, form labels and action spacing. Use keyboard Tab, Enter and Escape, browser Back/Forward and large-text settings. Shared changes need review in every consumer. Framer’s fixed branding badge can overlap lower phone content at some scroll positions; this is an unresolved phone hit obstruction. Scrolling is a temporary workaround and does not establish responsive acceptance.
Check every content shapeCheck every content shape
Inspect phone, tablet, desktop and widths between breakpoints. Try long titles, longer descriptions, empty relations and missing optional media. Check readable text, image crops, navigation, form labels and action spacing. Use keyboard Tab, Enter and Escape, browser Back/Forward and large-text settings. Shared changes need review in every consumer. Framer’s fixed branding badge can overlap lower phone content at some scroll positions; this is an unresolved phone hit obstruction. Scrolling is a temporary workaround and does not establish responsive acceptance.
Check every content shapeCheck every content shape
Inspect phone, tablet, desktop and widths between breakpoints. Try long titles, longer descriptions, empty relations and missing optional media. Check readable text, image crops, navigation, form labels and action spacing. Use keyboard Tab, Enter and Escape, browser Back/Forward and large-text settings. Shared changes need review in every consumer. Framer’s fixed branding badge can overlap lower phone content at some scroll positions; this is an unresolved phone hit obstruction. Scrolling is a temporary workaround and does not establish responsive acceptance.
Set SEO for your real contentSet SEO for your real content
Replace page and CMS titles, descriptions and social images. Review one descriptive H1, meaningful headings, crawlable links, canonical URLs, indexing choices, sitemap and robots output. Translate metadata for every published locale. Check both initial HTML and the rendered page after publication. Image optimization and metadata help the site, but this template does not promise a benchmark score or search ranking.
Set SEO for your real contentSet SEO for your real content
Replace page and CMS titles, descriptions and social images. Review one descriptive H1, meaningful headings, crawlable links, canonical URLs, indexing choices, sitemap and robots output. Translate metadata for every published locale. Check both initial HTML and the rendered page after publication. Image optimization and metadata help the site, but this template does not promise a benchmark score or search ranking.
Set SEO for your real contentSet SEO for your real content
Replace page and CMS titles, descriptions and social images. Review one descriptive H1, meaningful headings, crawlable links, canonical URLs, indexing choices, sitemap and robots output. Translate metadata for every published locale. Check both initial HTML and the rendered page after publication. Image optimization and metadata help the site, but this template does not promise a benchmark score or search ranking.
Use the original form libraryUse the original form library
Use a small selection from the 80-form library that supports your composition. Rotations and export sizes do not increase the number of distinct forms. Choose the starter for all editable scenes and 640px web images. Choose a complete family for its PNG masters and every WebP size. The eight complete family packs contain the full collection. Extract each ZIP fully and keep its buyer-guide and assets folders together. A Remix copies the Framer project. Download these resources separately using the verified links below. No generator scripts are included.
Use the original form libraryUse the original form library
Use a small selection from the 80-form library that supports your composition. Rotations and export sizes do not increase the number of distinct forms. Choose the starter for all editable scenes and 640px web images. Choose a complete family for its PNG masters and every WebP size. The eight complete family packs contain the full collection. Extract each ZIP fully and keep its buyer-guide and assets folders together. A Remix copies the Framer project. Download these resources separately using the verified links below. No generator scripts are included.
Use the original form libraryUse the original form library
Use a small selection from the 80-form library that supports your composition. Rotations and export sizes do not increase the number of distinct forms. Choose the starter for all editable scenes and 640px web images. Choose a complete family for its PNG masters and every WebP size. The eight complete family packs contain the full collection. Extract each ZIP fully and keep its buyer-guide and assets folders together. A Remix copies the Framer project. Download these resources separately using the verified links below. No generator scripts are included.
Download the forms.Download the forms.
The starter contains all 80 editable Blender scenes and 80 WebP images at 640px. Each complete family pack contains 10 scenes, 10 transparent PNG masters and 30 WebP images at 320, 640 and 1280px. Download all eight families for the complete library. Every original asset is unchanged. Extract a ZIP fully and keep its folders together to use the offline browser. Personal, commercial and client-project use is free under the included license. These files are downloaded separately from the Framer template.
Download the forms.Download the forms.
The starter contains all 80 editable Blender scenes and 80 WebP images at 640px. Each complete family pack contains 10 scenes, 10 transparent PNG masters and 30 WebP images at 320, 640 and 1280px. Download all eight families for the complete library. Every original asset is unchanged. Extract a ZIP fully and keep its folders together to use the offline browser. Personal, commercial and client-project use is free under the included license. These files are downloaded separately from the Framer template.
Download the forms.Download the forms.
The starter contains all 80 editable Blender scenes and 80 WebP images at 640px. Each complete family pack contains 10 scenes, 10 transparent PNG masters and 30 WebP images at 320, 640 and 1280px. Download all eight families for the complete library. Every original asset is unchanged. Extract a ZIP fully and keep its folders together to use the offline browser. Personal, commercial and client-project use is free under the included license. These files are downloaded separately from the Framer template.
Know your free-use termsKnow your free-use terms
Personal, commercial and client-project use of the delivered template is allowed. You may charge for customization services and deliver a completed client site. You may not resell the template itself as a template product, even with a changed name or superficial edits. The SBARRORM brand is not transferred. Third-party fonts, software and assets retain their licenses; standalone resource-package terms are separate. The free price does not include Framer services or a support response-time commitment. No ongoing updates or support response time is promised. The demo enquiry form is not an established support mailbox.
Know your free-use termsKnow your free-use terms
Personal, commercial and client-project use of the delivered template is allowed. You may charge for customization services and deliver a completed client site. You may not resell the template itself as a template product, even with a changed name or superficial edits. The SBARRORM brand is not transferred. Third-party fonts, software and assets retain their licenses; standalone resource-package terms are separate. The free price does not include Framer services or a support response-time commitment. No ongoing updates or support response time is promised. The demo enquiry form is not an established support mailbox.
Know your free-use termsKnow your free-use terms
Personal, commercial and client-project use of the delivered template is allowed. You may charge for customization services and deliver a completed client site. You may not resell the template itself as a template product, even with a changed name or superficial edits. The SBARRORM brand is not transferred. Third-party fonts, software and assets retain their licenses; standalone resource-package terms are separate. The free price does not include Framer services or a support response-time commitment. No ongoing updates or support response time is promised. The demo enquiry form is not an established support mailbox.
Publish, then verify againPublish, then verify again
Replace all demonstration and operator text, configure receiving settings and verify links and responsive layouts before publishing. Choose the Framer plan your site needs without assuming the template price includes hosting or localization. After publication, inspect the exact public routes and images and review form operation with your own approved destination. Keep native version history and a concise changelog. Current English updates include footer and navigation order repairs, shared actions, title gestures, lighter images, dot controls and corrected project/service presentation.
Publish, then verify againPublish, then verify again
Replace all demonstration and operator text, configure receiving settings and verify links and responsive layouts before publishing. Choose the Framer plan your site needs without assuming the template price includes hosting or localization. After publication, inspect the exact public routes and images and review form operation with your own approved destination. Keep native version history and a concise changelog. Current English updates include footer and navigation order repairs, shared actions, title gestures, lighter images, dot controls and corrected project/service presentation.
Publish, then verify againPublish, then verify again
Replace all demonstration and operator text, configure receiving settings and verify links and responsive layouts before publishing. Choose the Framer plan your site needs without assuming the template price includes hosting or localization. After publication, inspect the exact public routes and images and review form operation with your own approved destination. Keep native version history and a concise changelog. Current English updates include footer and navigation order repairs, shared actions, title gestures, lighter images, dot controls and corrected project/service presentation.