Sections & Blocks
Understanding the modular architecture that powers your portfolio.
MyFolioHub uses a modular architecture based on Sections and Blocks. This system provides the perfect balance between structured design and creative flexibility, allowing you to build complex layouts by simply stacking and configuring pre-built modules.
What are Sections?
Sections are the primary horizontal containers of your page. Think of them as the "chapters" of your professional story. Each section is designed for a specific purpose:
- Hero Sections: The first thing visitors see. Designed to make a bold statement with a headline, subheadline, and a clear Call to Action (CTA).
- Content Sections: Versatile areas for text, images, and videos. Perfect for "About Me" or "Process" descriptions.
- Data Sections: Specialized modules for structured data, such as your Experience timeline, Skills cloud, or Education history.
- Project Grids: Dynamic galleries that showcase your work samples with beautiful hover effects and filtering options.
The Power of Blocks
Inside every section are Blocks. Blocks are the individual atoms of your design—headings, paragraphs, images, buttons, icons, and more. You can add, remove, and reorder blocks within a section to customize its internal layout.
Section Settings vs. Block Settings
It's important to understand the difference between these two levels of control:
- Section Settings: Control the "big picture"—background colors, vertical padding, full-width vs. contained layouts, and entrance animations.
- Block Settings: Control the "fine details"—typography, text alignment, button styles, and specific image properties like border-radius or shadows.
Using the Section Library
You don't have to start from scratch. Our Section Library contains dozens of professionally designed layouts for every use case. Simply browse the library, find a layout you like, and click "Add to Page." You can then customize the content and styling to match your brand.
Dynamic Sections
Some sections are "Dynamic," meaning they automatically pull data from your profile. For example, if you add a "Skills Section," it will automatically display the skills you've listed in your account settings. If you update your skills later, the section will update across your entire portfolio automatically.
Best Practices for Layout
To create a professional-looking page, we recommend following these simple rules:
- Alternate Backgrounds: Use a light background for one section and a slightly darker or colored background for the next to create visual separation.
- Consistent Padding: Keep your vertical spacing consistent between sections to maintain a professional rhythm.
- Limit CTAs: Don't overwhelm your visitors. Each page should have one primary goal, with clear but sparse buttons.
Was this article helpful?
Help us improve our documentation for everyone.
Share this guide
Help your colleagues learn too.
Still need help?
Our support team is here for you.