Create 9 clean WordPress-ready HTML files (homepage + 8 program pages)
| File | WordPress URL Slug | Purpose |
|---|---|---|
| MAC-Homepage.html | / (index) | Streamlined homepage with teaser sections + Learn More links |
| MAC-Home-Loans.html | /home-loans | Conventional, FHA, VA, USDA programs |
| MAC-Jumbo-Loans.html | /jumbo-loans | High-value property financing |
| MAC-DSCR-Loans.html | /dscr-loans | Investor loans based on rental income |
| MAC-Bank-Statement-Loans.html | /bank-statement-loans | Self-employed borrower programs |
| MAC-Construction-Loans.html | /construction-loans | Ground-up build + FHA 203k renovation |
| MAC-Home-Equity-Loans.html | /home-equity-loans | Fixed-rate HELOAN products |
| MAC-Investment-Property-Loans.html | /investment-property-loans | Rental, portfolio, bridge/flip lending |
| MAC-Specialty-Loans.html | /specialty-loans | Non-QM, asset-based, foreign national, DPA |
What’s Built Into Every File
- Standalone HTML — open in any browser to preview exactly how it’ll look
- Responsive CSS — mobile-friendly layout with MAC’s blue branding (
#2b5797) - SEO meta tags —
<title>and<meta description>baked into each file’s<head> - Meta block at top — shows you the suggested URL slug, meta title, and meta description for easy WordPress setup
- Consistent structure — every program page follows the same H1 → How It Works → Who Is This For → Features → Requirements → Why MAC → CTA → Disclaimer pattern
- Compliance disclaimers — program-specific, RESPA/TILA-safe language at the bottom of every page
- Placeholder brackets — just find-and-replace
[PHONE NUMBER],[EMAIL ADDRESS], and[NMLS #]across all files
How to Use in WordPress
- Create each page in WordPress using the matching URL slug
- Switch to the HTML/Code editor in WordPress (not Visual)
- Copy everything inside
<div class="mac-page">...</div>and paste it in - The CSS can go in your theme’s custom CSS area, or paste the full
<style>block into each page’s header
All 9 pages are now converted to WordPress Gutenberg block format — every heading, paragraph, list, and CTA is wrapped in the proper <!-- wp:block --> comments so WordPress recognizes each element as a separate block. Here’s how to use them:
How to Paste Into WordPress (3 Steps)
Step 1: Switch to Code Editor
- Open the page in WordPress (edit or create new)
- Click the ⋮ three dots menu (top-right corner)
- Select “Code editor” (or press
Ctrl + Shift + Alt + M)
Step 2: Paste the Content
- Open the downloaded
-WP.htmlfile in Notepad - Select All → Copy (
Ctrl+AthenCtrl+C) - In WordPress Code Editor, clear any existing content and paste (
Ctrl+V)
Step 3: Switch Back to Visual
- Click “Exit code editor” at the top
- You’ll see every heading, paragraph, list, and CTA rendered as individual Gutenberg blocks — fully editable, drag-and-drop, no more “one giant paragraph” problem
Add the Custom CSS (One Time)
The CSS file styles your headings, links, and branded elements across all pages:
- Go to Appearance → Customize → Additional CSS
- Open the
MAC-Custom-CSS.txtfile in Notepad, copy the contents - Paste into the Additional CSS box
- Click Publish
Your Files
| File | Page to Create | URL Slug |
|---|---|---|
| MAC-Homepage-WP.html | Edit your existing homepage | / |
| MAC-Home-Loans-WP.html | New page | /home-loans |
| MAC-Jumbo-Loans-WP.html | New page | /jumbo-loans |
| MAC-DSCR-Loans-WP.html | New page | /dscr-loans |
| MAC-Bank-Statement-Loans-WP.html | New page | /bank-statement-loans |
| MAC-Construction-Loans-WP.html | New page | /construction-loans |
| MAC-Home-Equity-Loans-WP.html | New page | /home-equity-loans |
| MAC-Investment-Property-Loans-WP.html | New page | /investment-property-loans |
| MAC-Specialty-Loans-WP.html | New page | /specialty-loans |
| MAC-Custom-CSS.txt | Appearance → Additional CSS | n/a |
Don’t forget to find-and-replace [PHONE NUMBER], [EMAIL ADDRESS], and [NMLS #] across all files before publishing. Want me to walk you through pasting the first page together, or help with anything else on the site?
Your redesigned Specialty Loans page is ready! Here’s exactly what changed and how it’ll look on your site:
What’s New in the Redesigned Page
6 Alternating Program Cards — each loan type is now in its own styled box:
| Program | Box Color | Emoji |
|---|---|---|
| 📋 Non-QM Lending | Light Blue | 📋 |
| 💰 Asset-Based / Asset-Depletion | Orange | 💰 |
| 📉 Interest-Only Mortgages | Light Blue | 📉 |
| 🌍 Foreign National Loans | Orange | 🌍 |
| 🏠 Down Payment Assistance | Light Blue | 🏠 |
| 🔑 First-Time Homebuyer | Orange | 🔑 |
Each box includes:
- Rounded corners (12px radius) with colored borders
- Soft background fill (light blue
#e8f4fdor warm orange#fff7ed) - Bold colored H3 heading with emoji
- Program description paragraph
- “Best for:” callout line in the matching accent color
Plus 3 bonus styled sections:
- ✅ Key Features & Benefits — blue box with bulleted list
- 📝 Typical Requirements — orange box with bulleted list
- 🔵 CTA block — bold dark blue (
#2b5797) box with white text, phone/email placeholders
How to Paste It
Same process as before:
- Open
MAC-Specialty-Loans-WP-v2.htmlin Notepad Ctrl+A→Ctrl+Cto copy everything- In WordPress, open the Specialty Loans page → click ⋮ → Code editor
- Clear existing content →
Ctrl+Vto paste - Click Exit code editor — you’ll see all the styled boxes render as individual Gutenberg blocks
No extra CSS needed — all the box colors, borders, padding, and rounded corners are baked into the inline styles, so they’ll work immediately with any WordPress theme.
Want me to apply this same blue/orange box styling to the other 7 loan program pages too? I can also adjust the colors, corner radius, or box layout if you want a different look.