top of page
Search

How to create a portfolio website using Elementor page builder on WordPress

  • Writer: falgun baroi
    falgun baroi
  • May 5
  • 2 min read

🧰 Prerequisites

Before you begin, make sure you have:

  • A domain name and hosting (e.g., Bluehost, Hostinger)

  • WordPress installed on your hosting

  • Elementor plugin (free or Pro) installed and activated


🚀 Step-by-Step: Create a Portfolio Website with Elementor


1. Install a Lightweight Theme

  • Go to Appearance > Themes > Add New

  • Choose Hello Elementor (minimal and fast) or Astra

  • Click Install and then Activate


2. Install and Activate Elementor

  • Go to Plugins > Add New

  • Search for Elementor Website Builder

  • Click Install Now and then Activate

(Optional): Install Elementor Pro for advanced features like the Portfolio widget and Theme Builder.


3. Create Core Pages

Go to Pages > Add New, and create the following:

  • Home

  • Portfolio

  • About

  • Contact

Click “Edit with Elementor” on each to start designing.


4. Design Pages Using Elementor

🏠 Home Page:

  • Add a Hero Section with your image, title (e.g., "Hi, I'm Falcon — Web Designer"), and a CTA button ("View Portfolio").

  • Add a Services Section using Icon Boxes

  • Add Recent Projects using Image Boxes or the Portfolio widget (Pro)

🖼 Portfolio Page:

  • Use the Portfolio widget (Pro) or use Image Gallery or custom Columns + Images + Text for each project.

  • Each item can link to a detailed case study page (optional).

👤 About Page:

  • Use two columns: Photo + bio/intro

  • Include a timeline or skill progress bars

📬 Contact Page:

  • Add a Contact Form (use WPForms or Elementor’s Form widget)

  • Include social links, map, and email


5. Make it Mobile Friendly

  • Click the Responsive Mode in Elementor

  • Adjust spacing, font sizes, and layout for tablet and mobile


6. Add a Menu & Header

  • Go to Appearance > Menus to create a menu with your pages

  • If using Elementor Pro, use Theme Builder to create a custom header and footer


7. Optimize and Launch

  • Install Rank Math SEO or Yoast to handle SEO

  • Compress images (use TinyPNG or ShortPixel plugin)

  • Test forms and all links

  • Publish the site!


✅ Bonus Tips:

  • Use consistent fonts and color palette (match your personal brand)

  • Use animations or hover effects sparingly to enhance interactivity

  • Include a downloadable resume and testimonials

 
 
 

Comentários

bottom of page