Building a Fully Custom Page

What is the Custom Page Builder?

In addition to ResiPage's 10 pre-built templates, every member can switch to the Custom Page Builder — a drag-and-drop editor that lets you design your resume layout from scratch. You control the number of columns, which content blocks appear and in what order, every color, font, and spacing setting, and even the full-page background image. The result is a completely unique resume page that no one else has.

Enabling the Custom Editor

1. Go to Dashboard → Theme.
2. At the top of the page you will see a Template / Custom toggle. Click Custom.
3. A "Custom Layout" card appears. Click Open Custom Editor.

The editor opens full-screen. Your changes auto-save every two seconds. When you are ready to make the custom layout live, click Publish in the top-right corner.

Choosing a Column Layout

Click the Layout button in the top toolbar to open the Layout Preset picker. Four presets are available:

• 1 Column — a single centred column, ideal for minimalist resumes.
• 2 Columns — Left Sidebar — a narrow left sidebar beside a wider main column. Great for skills, languages, and certifications on the left and experience on the right.
• 2 Columns — Right Sidebar — the same two-column split with the sidebar on the right.
• 3 Columns — a left sidebar, main content column, and right sidebar. Best for dense resumes with many sections.

For the two- and three-column layouts you can drag the grab bars between columns to resize them — for example, giving the sidebar 30 % and the main column 70 %.

Adding and Arranging Blocks

The left side of the editor is the Block Palette. It contains every content block available:

• About — your bio / summary paragraph.
• Experience — work history with company, role, dates, and description.
• Education — schools, degrees, and field of study.
• Skills — progress bars, pill badges, or a plain list.
• Languages — languages with proficiency levels.
• Certifications — credentials and professional certificates.
• Portfolio — project cards with images, links, and tags.
• References — professional references.
• Social Links — links to LinkedIn, GitHub, personal site, etc.
• Contact Form — a "Message me" button that opens a contact modal.
• Divider — a horizontal rule to separate sections visually.
• Spacer — empty vertical space for fine-tuning layout.

To add a block, drag it from the palette and drop it into any column. A blue drop indicator shows exactly where it will land. You can also drag blocks between columns or up and down within a column to reorder them.

Per-Block Controls

Every block in the canvas has four controls on hover:

• Drag handle (left edge) — drag to reorder or move to another column.
• Eye icon — toggle visibility. Hidden blocks remain in the layout but render nothing on the live page, so you can easily show them again later.
• Settings (sliders) icon — opens a Block Settings panel where you can override the section heading label, background color, padding, border radius, accent color, and type-specific options (e.g., Skills display style: bars, pills, or list).
• Delete (×) icon — removes the block from the column entirely.

Customizing the Header

Click Header in the toolbar (or click the header preview at the top of the canvas) to open the Header Settings panel. Options include:

• Layout — Left-aligned, Centered, or Split (name/title on the left, contact on the right).
• Avatar — show or hide your profile photo, and choose Circle, Rounded, or Square shape.
• Visibility toggles — independently show or hide your name, job title, contact details, and social links.
• Colors — header background color, text color, and accent color.
• Padding — controls the inner spacing of the header area.

Global Styles

Click Styles in the toolbar to open the Global Styles panel. Settings here apply to the entire page (unless overridden at the block level):

• Colors — page background color, content background, heading color, body text color, and accent color.
• Container — rounded corners (0–32 px), drop shadow (None / Subtle / Medium / Large / Dramatic), and border width + color.
• Background Image — upload a full-page background image (up to 8 MB). See the section below.

Click Typography in the toolbar to control the font family (a curated list of Google Fonts), base body font size, section heading size, and line height.

Adding a Background Image

In the Styles panel → Background Image section you can upload a photo or graphic that fills the entire page behind the content container. After uploading you can configure:

• Fit — Cover (fills the area, crops if needed), Fit (shows the whole image, may letterbox), Stretch (forces the image to fill exactly, may distort), Tile (repeats the image), or Original (natural size, centered).
• Position — where the image is anchored: Center, Top, Bottom, Left, or Right.
• Scroll Behavior — Scroll (image moves with the page) or Fixed / Parallax (image stays locked to the viewport as the visitor scrolls, creating a depth effect). Note that Fixed is not supported on iOS Safari.
• Opacity — slide from 0 % (invisible) to 100 % (full). Lower opacity lets your background show through subtly without overwhelming the text.

Preview and Publishing

Click Preview in the toolbar at any time to see exactly how your page will look to visitors — including the background image and all color settings. Click Exit Preview to return to editing.

When you are happy with the result, click Publish. This saves your layout and sets it live on your public ResiPage URL. Visitors will immediately see the custom layout instead of your previous template.

To switch back to a template at any time, go to Dashboard → Theme, toggle back to Template, and click any template to make it live. Your custom layout is saved and can be re-enabled again at any time.