Back to Documentation
Core Concepts
12 min read

The Builder Interface

A comprehensive guide to the MyFolioHub visual editor and its powerful features.

The MyFolioHub Builder is the heart of our platform. It's a sophisticated, real-time visual editor designed to give you total control over your professional narrative without requiring a single line of code. Built on the principles of "Soft Precision," the interface balances ease of use with powerful customization, ensuring that every portfolio created is both unique and professional.

The Workspace Layout

When you enter the builder, you'll notice a clean, distraction-free environment divided into three primary areas:

  • The Canvas (Center): This is your live preview. Every change you make—whether it's editing text, swapping an image, or changing a color—is reflected here instantly. What you see is exactly what your visitors will see.
  • The Control Sidebar (Left): This is your toolbox. It contains the navigation for different pages, the library of sections you can add, and the global theme settings.
  • The Property Inspector (Right): When you click on a specific element in the canvas (like a heading or a button), this panel appears to let you fine-tune that specific item's properties, such as font size, alignment, and spacing.

Drag-and-Drop Simplicity

Rearranging your portfolio is as simple as moving icons on your phone. Want your "Experience" section above your "Projects"? Just click and hold the drag handle in the sidebar and move it to your desired position. The canvas will smoothly animate the transition, giving you immediate feedback on the new layout.

Real-Time Editing

Gone are the days of "Save and Preview." In MyFolioHub, editing text is as natural as typing in a word processor. Simply click on any text element in the canvas and start typing. You can apply formatting like bold, italics, and links using the floating toolbar that appears above your selection.

Responsive Design Controls

In today's world, your portfolio will be viewed on everything from 30-inch monitors to 5-inch smartphones. At the top of the builder, you'll find the Device Switcher. This allows you to toggle between Desktop, Tablet, and Mobile views. You can even make device-specific adjustments—for example, you might want a larger font size on desktop but a more compact layout on mobile.

Pro Tip: Keyboard Shortcuts

Speed up your workflow with our built-in shortcuts. Use Cmd/Ctrl + Z to undo, Cmd/Ctrl + S to force a save (though we auto-save constantly!), and Esc to deselect the current element.

The "Soft Precision" Philosophy

Our builder isn't just a tool; it's a design partner. We've baked professional design rules into the interface. For instance, our "Smart Spacing" ensures that elements are never too cramped or too far apart, maintaining a perfect visual rhythm. Our "Color Harmony" engine suggests accent colors that complement your primary brand color, ensuring your site always looks cohesive and high-end.

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.

Contact Us
The Builder Interface | Documentation | MyFolioHub