Spectra

Spectra|Docs/Documentation/Spectra Blocks/General/Spectra Design Library GuideSpectra Design Library GuideWhat is the Spectra Design Library?The Spectra Design Library is a collection of professionally designed patterns built specifically for Spectra blocks. These are complete page sections and layouts that you can import directly into your WordPress site, giving you instant access to beautiful, conversion-focused designs.The Design Library is included in the free version of Spectra. Some patterns are marked Premium and require Starter Templates Pro to import.Design Library vs Individual BlocksIndividual Blocks = Single elements (button, image, text) Design Library Patterns = Complete page sections using Spectra blocks (hero sections, testimonials, pricing tables)Why the Design Library Matters:Access to 100+ professionally designed patternsBuilt specifically for Spectra blocks and featuresConversion-optimized layouts based on best practicesRegular updates with new designsMobile-responsive and performance-optimizedPrerequisiteBefore you begin: Accessing the Design Library requires a free ZipWP account. The first time you open the library, you’ll be prompted to sign in or create one. Without it, patterns cannot be imported.How to Access the Design LibraryMethod 1: Spectra DashboardGo to WordPress Admin → SpectraClick “Design Library” or “Patterns”Browse categories or search for specific designsClick “Import” on any pattern you likeMethod 2: Block Editor IntegrationIn the block editor, look for the Spectra icon in the toolbarClick “Browse Patterns” or “Design Library”Preview and import patterns directly into your pageMethod 3: Spectra PatternsAccess patterns through the Spectra menu in WordPress adminBrowse by categories like Business, Agency, E-commerceUse the search function to find specific pattern typesImport directly into your current page or postDesign Library CategoriesHero SectionsPerfect for: Homepage headers, landing page tops, service introductionsWhat’s included:Large headline textSupporting descriptionCall-to-action buttonsBackground images or videosProfessional spacing and typographyWhen to use: First section visitors see on any important pageTestimonialsPerfect for: Building trust, social proof, customer storiesWhat’s included:Customer quotesProfile imagesNames and titlesStar ratingsMultiple layout options (single, grid, carousel)When to use: After describing your service, before pricing sectionsCall-to-Action (CTA) SectionsPerfect for: Converting visitors, driving specific actionsWhat’s included:Compelling headlinesAction-focused buttonsSupporting textEye-catching backgroundsUrgency elementsWhen to use: End of blog posts, middle of long pages, before footerInfo Boxes/Feature SectionsPerfect for: Explaining services, highlighting benefits, showcasing featuresWhat’s included:Icons or imagesHeadlines and descriptionsMultiple column layoutsConsistent spacingProfessional stylingWhen to use: Homepage services section, about page highlightsHow to Customize Design Library PatternsStep 1: Import Your PatternBrowse the Design LibraryPreview the pattern you wantClick “Import” to add it to your pageThe pattern will be inserted with all Spectra blocksStep 2: Replace ContentText: Click on any text element and replace with your contentImages: Click on images and upload your own from Media LibraryColors: Use Spectra’s color controls to match your brandFonts: Adjust typography using Spectra’s font controlsStep 3: Adjust Layout and SpacingSelect any Spectra container blockUse responsive controls for different screen sizesModify padding, margins, and gapsRearrange sections by dragging blocksStep 4: Apply Brand ConsistencyUse Spectra’s Global Styles for site-wide consistencySet up brand colors and fonts once, apply everywhereSave custom color palettes for quick access[Link to Global Styling Guide]Best Practices for Using Design Library Patterns1. Use Patterns as Starting PointsChoose patterns that match your industry or styleReplace placeholder content with your actual contentCustomize colors and fonts to match your brandDon’t be afraid to modify layouts to fit your needs2. Mix and Match SectionsExample page structure:Hero pattern from Design LibraryFeatures section from another patternTestimonials from a third patternCustom CTA using Spectra blocksFooter pattern3. Maintain Brand ConsistencySet up Global Styles before importing patternsUse consistent color palettes across all imported sectionsKeep typography choices limited (2-3 font families max)Maintain consistent spacing and button styles4. Mobile-First ApproachAlways check how patterns look on mobileAdjust spacing and text sizes for smaller screensTest touch-friendly button sizesEnsure readability on all devicesAvailable Spectra PatternsBlock Patterns (Individual Sections)Hero sections – Homepage headers, landing page bannersFeature sections – Service highlights, product benefitsTestimonial sections – Customer reviews, social proofPricing tables – Subscription plans, service packagesTeam sections – Staff profiles, leadership teamsFAQ sections – Accordion-style questionsCTA sections – Newsletter signups, contact formsAbout sections – Company story, mission statementsContact sections – Forms, location maps, contact infoPage Patterns (Complete Layouts)Homepage patterns – Full homepage designsAbout page patterns – Complete about page layoutsService page patterns – Service showcase pagesContact page patterns – Contact and location pagesLanding page patterns – Conversion-focused layoutsIndustry CategoriesBusiness & Corporate – Professional service layoutsAgency & Creative – Portfolio and creative showcasesE-commerce – Product and shopping layoutsRestaurant & Food – Menu and dining layoutsHealth & Fitness – Wellness and fitness layoutsEducation – Course and learning layoutsTechnology – Tech and software layoutsNon-profit – Charity and organization layoutsWhy Spectra’s Design Library is DifferentProfessional QualityEvery pattern in the Design Library is:Designed by professionals – Not auto-generated or amateur designsConversion-optimized – Based on proven design principlesMobile-first – Responsive and touch-friendlyPerformance-tested – Fast loading and lightweightBuilt for SpectraNative integration – Uses only Spectra blocks and featuresFull customization – Every element can be modifiedGlobal Styles compatible – Works seamlessly with brand stylingRegular updates – New patterns added monthlyTime-Saving BenefitsSkip the design phase – Start with proven layoutsFaster development – Import and customize vs. build from scratchConsistent quality – Professional results every timeReduced costs – No need to hire designers for common layoutsGetting Started TipsFor BeginnersStart with one pattern – Don’t overwhelm yourselfChange text first – Replace placeholder content with yoursAdjust colors – Match your brand colorsPreview often – Check how it looks to visitorsFor Advanced UsersMix and match – Combine elements from different patternsCreate variations – Save your customized patterns for reuseUse Global Styles – Set up brand-wide styling rulesOptimize for speed – Remove unused elementsTroubleshooting Common IssuesPattern Doesn’t Look Right After ImportEnsure you’re using a block-compatible theme (like Astra)Check if other plugins are conflicting with Spectra stylesClear caching plugins after importing patternsTry importing on a clean test page firstMobile Layout ProblemsSwitch to mobile view in the editorAdjust spacing and font sizes specifically for mobileTest on actual mobile devicesCustomization Not WorkingMake sure you’re editing the right block within the patternCheck if Global Styles are overriding your changesTry refreshing the editor if changes don’t appearNext StepsLearn More[Getting Started Guide] – Basic Spectra setup[Global Styling Guide] – Brand-wide styling[Individual Block Guides] – Deep dive into specific blocksGet SupportVisit our documentation siteJoin the community forumContact support for technical issuesThe Spectra Design Library is your shortcut to professional web design. Import a pattern, customize it to match your brand, and launch beautiful websites in minutes instead of hours.Was this doc helpful?Yes NoNeed help?Contact SupportFont ManagementPreview Options (Desktop, Tablet & Mobile)Copyright © 2026 SpectraPowered by Powerful Docs