Broken Heart v1.0 Portfolio Pro Theme - Customization Guide
Welcome to your new Portfolio Pro theme!
The best part about this theme is that you do not need to be a developer to customize the homepage. All the key sections (Hero, About, Services, etc.) are built as standard "Gadgets" or "Widgets" that you can edit directly from your Blogger Dashboard.
🚀 Getting Started
Log in to your Blogger Dashboard.
Click on Layout in the left-hand menu.
Scroll down to the "Main" section. You will see several boxes with names like "Hero Content", "About Section", "Services Grid", etc.
To edit a section, simply click the Edit (Pencil Icon) on that box.
📝 How to Edit Each Section
When you open a widget, you will see some code. Don't panic! You only need to replace the specific text or links. Leave the weird symbols (like <div...> or </div>) alone.
1. Hero Section (Top Banner)
Widget Name: Hero Content
What to change:
Headline: Find the text inside
<h1>...</h1>.Example: Change
Creative Strategist &<br/>Digital Designerto your own title.
Description: Find the text inside
<p class="hero-desc">...</p>.Buttons: Look for
Get in TouchandView Workto change the button labels.
2. About Me Section
Widget Name: About Section
How to change your photo:
Find the code:
<img src="https://..." ... />Replace the link inside
src="..."with a link to your own photo.Tip: You can upload your photo to a draft blog post, right-click it to "Copy Image Address," and paste it here.
Bio Text: Simply replace the paragraphs starting with "I'm a multidisciplinary designer..." with your own bio.
3. Services Section
Widget Name: Services Grid
How to change icons:
We use emojis for simplicity! Look for the lines like:
<div class="service-icon">🎨</div>.Just delete the 🎨 and paste any emoji you want (like 💻, 📷, ✍️).
Text: Replace "UI/UX Design" and the description text below it with your own services.
4. Featured Projects (Important!)
Widget Name: Featured Projects
How to add your projects:
Image: Replace the
src="..."link with a screenshot of your project.Category: Find
<div class="project-meta">Mobile App • EdTech</div>and change the text.Title: Change "EduSpace Learning Platform" to your project name.
Stats: Look for
<span>🚀 25% Engagement</span>. You can change the emoji and the text to highlight your results.Link: Find
<a href="#".... Replace the#with the link to your full case study or live project.
5. Skills Section
Widget Name: Skills List
How to change the progress bars:
Skill Name: Change "Figma" or "HTML/CSS" to your skills.
Percentage Text: Change the text
95%to your number.Bar Visual: Important! Look for
style="width:95%". Change that number (95%) to match your skill level (e.g.,width:50%for half full).
6. Testimonials
Widget Name: Testimonials
What to change:
Replace the text inside
<p class="quote-text">...</p>with the testimonial.Update the
<strong>Name</strong>and<span>Company</span>.
7. Contact Section
Widget Name: Contact CTA
How to link your email:
Find this code:
<a href="mailto:hello@example.com"...Replace
hello@example.comwith your actual email address.
📸 Image Tips
Dimensions: For the best look, try to use horizontal images (landscape) for Projects and square images for your Profile.
Hosting: Since Blogger doesn't have a "Media Library" in the Layout tab, the easiest way to get image links is:
Create a New Post.
Upload your images there.
Right-click the image and select "Copy Image Address".
Discard the post (you don't need to publish it).
Paste that link into your widget code.
⚠️ Troubleshooting
"I deleted something and it looks broken!"
If a section looks messy, you might have accidentally deleted a closing tag like
</div>.Don't worry! You can just ask for the original code for that specific section again, and paste it back in.