Craft Your Online Presence: Build a Multi-Page Portfolio Website with Astra & Elementor

Posted by: Collins

Please notice: On STARTMAKINGWEBSITES we try to deliver the best content for our readers. When you purchase through referral links on our site, we earn a commission. Affiliate commissions are vital to keep this site free and our business running. Read More

Preface

Are you ready to showcase your skills and projects to the world? A well-crafted portfolio website is your digital handshake, and it’s essential for landing that dream job or attracting new clients. In this comprehensive guide, we’ll walk you through building a stunning multi-page portfolio website using two powerful and user-friendly tools: Astra and Elementor. Whether you’re a seasoned web developer or just starting, this tutorial will equip you with the knowledge and confidence to create a professional online portfolio that truly stands out.

Hint: Before you begin, make sure you have WordPress installed and running. If not, many hosting providers like HostGator, DreamHost, Bluehost offer straightforward WordPress installation options. 

Why Astra and Elementor?

Before we dive in, let’s understand why we’ve chosen Astra and Elementor for this project.

  • Astra: A lightweight and highly customizable WordPress theme designed for speed and performance. Astra offers a wide range of customization options and seamless integration with Elementor, making it an excellent choice for building any website.
  • Elementor: A drag-and-drop page builder plugin that simplifies web design. With Elementor, you can create stunning layouts without writing a single line of code. Its intuitive interface and extensive library of templates and widgets make it perfect for beginners and experienced designers alike.

Info: Need help installing plugins? Check out this helpful guide: How to Install WordPress Plugins.

Step 1: Installing Astra and Elementor

  1. Install Astra:

    • From your WordPress dashboard, go to Appearance > Themes > Add New.
    • Search for “Astra” and click Install, then Activate.
  2. Install Elementor:

    • Go to Plugins > Add New.
    • Search for “Elementor” and click Install, then Activate.

Step 2: Setting Up Astra

Astra offers a wealth of customization options within the WordPress Customizer (Appearance > Customize). Let’s configure a few basic settings:

  • Global Colors & Typography: Choose your brand colors and fonts to create a consistent look and feel across your website. You should defnitely read up on this helpful guide How to Choose the Right Fonts for Your Website. Also make sure to check out this article: Top 10 Free Best Google Fonts for Your Website

  • Header & Footer: Customize your header and footer layouts, including logo placement, navigation menus, and copyright information.

  • Blog Layout: Configure the appearance of your blog posts (if you plan to have a blog section in your portfolio).

Step 3: Planning Your Portfolio Website Structure

Before you start building, it’s crucial to plan your website’s structure. A typical portfolio website includes these pages:

  • Homepage: Your introduction, highlighting your skills and experience.
  • About: A page dedicated to telling your story and showcasing your personality.
  • Portfolio/Projects: The core of your website, showcasing your best work.
  • Services (Optional): If you offer services, describe them in detail.
  • Contact: A page with a contact form and your contact information.

Step 4: Creating Your Pages with Elementor

Now let’s create the pages using Elementor.

  1. Create a New Page:

    • Go to Pages > Add New.
    • Give your page a title (e.g., “Homepage”) and click “Edit with Elementor.”
  2. Designing Your Homepage:

    • Header: Use Elementor‘s Heading widget to add your name or website title. Add a brief description of what you do using the Text Editor widget.

      <h1>Jane Doe</h1>

<p>A passionate web developer with a love for creating beautiful and functional websites.</p>

*   **Hero Image:** Add a visually appealing image or video using <a href='/go/elementor-pro' target='_blank' rel='noopener noreferrer'>Elementor</a>'s Image or Video widget. Ensure the image is high-quality and relevant to your brand. For inspiration checkout this articles: <a href='https://www.startmakingwebsites.com/inspirational-showcase-of-beautiful-websites-built-with-elementor-1/' target='_blank' rel='noopener noreferrer'>Inspirational Showcase of Beautiful Websites Built with Elementor 1</a>, <a href='https://www.startmakingwebsites.com/inspirational-showcase-of-beautiful-websites-built-with-elementor-2/' target='_blank' rel='noopener noreferrer'>Inspirational Showcase of Beautiful Websites Built with Elementor 2</a>
*   **Call to Action:**  Use Button widgets to guide visitors to your portfolio or contact page. Customize the buttons with compelling text and visually appealing styles.

    <pre class='EnlighterJSRAW' data-enlighter-language='html'>&lt;a href='/portfolio'&gt;View My Work&lt;/a&gt;

<a href=’/contact’>Get in Touch</a>

*   **About Section:** Briefly introduce yourself and link to your About page for more details. Use the Image Box widget to display your photo along with a short bio.
  1. Designing Your About Page:

    • Headline: Use a Heading widget to create an engaging headline, such as “About Me” or “My Story.”
    • Biography: Share your background, skills, and experience using the Text Editor widget. Be authentic and let your personality shine.
    • Skills Section: Showcase your key skills using Icon List or Progress Bar widgets. Quantify your expertise whenever possible (e.g., “5+ years of experience in web development”).
  2. Designing Your Portfolio/Projects Page:

    • Portfolio Grid: Use Elementor‘s Portfolio widget to display your projects in a visually appealing grid layout. You can use basic gride layouts or you can use some fancy css tricks you learned in this article here: WordPress Style CSS: What it is and where to find it
    • Project Details: For each project, provide a title, a brief description, and a featured image. Link each project to a dedicated page with more details.
    • Project Pages: Create individual pages for each project with detailed descriptions, screenshots, and testimonials (if available).
  3. Designing Your Contact Page:

    • Contact Form: Use Elementor‘s Form widget to create a contact form where visitors can send you messages. Collect essential information like name, email, and message.
    • Contact Information: Display your email address, phone number, and social media links using Icon Box widgets. Make it easy for visitors to get in touch.

Step 5: Creating a Navigation Menu

To allow visitors to navigate your website, you need to create a navigation menu.

  1. Create a New Menu:

    • Go to Appearance > Menus.
    • Give your menu a name (e.g., “Main Menu”) and click “Create Menu.”
  2. Add Pages to Your Menu:

    • Select the pages you want to include in your menu from the “Pages” section on the left.
    • Click “Add to Menu.”
  3. Arrange Your Menu Items:

    • Drag and drop the menu items to arrange them in the desired order.
  4. Assign Your Menu:

    • Select the “Primary” checkbox under “Menu Settings” to assign your menu to the main navigation area of your website.
  5. Save Your Menu:

    • Click “Save Menu.”

Step 6: Optimizing Your Website for SEO

To attract more visitors, it’s essential to optimize your website for search engines like Google. Here are a few key SEO tips:

  • Keyword Research: Identify the keywords your target audience is using to search for portfolio websites. Incorporate those keywords naturally into your page titles, headings, and content.
  • Meta Descriptions: Write compelling meta descriptions for each page to encourage clicks from search engine results pages (SERPs). You can use Yoast SEO or Rank Math Top 10 Valuable AI Plugins for WordPress to Boost Your Blog to help with SEO tasks.
  • Image Optimization: Compress your images to reduce file sizes and improve page load speed. Use descriptive alt tags for your images to improve accessibility and SEO. Get to know how to quickly make high-resolution screenshots in base 64 here:How to Quickly Make High-Resolution Screenshots in Base 64
  • Mobile-Friendliness: Ensure your website is responsive and looks great on all devices (desktops, tablets, and smartphones). Elementor makes it easy to create mobile-responsive designs. Check out this article on how to optimize your website for SEO: How to Optimize Your Website for SEO: A Quickstart Guide for WordPress

Hint: Do you want to know how to add a favicon to your website? Here’s an article for you: How to Add a Favicon to Your WordPress Website

Step 7: Launching Your Website

Once you’re happy with your website, it’s time to launch it to the world.

  1. Choose a Domain Name: Select a domain name that reflects your brand and is easy to remember. You can purchase a domain name from registrars like GoDaddy or Namecheap.
  2. Choose a Hosting Provider: Select a reliable hosting provider to host your website. Consider factors like server uptime, customer support, and pricing. Many hosting providers like HostGator, DreamHost, Bluehost and GoDaddy offer WordPress-optimized hosting plans.
  3. Connect Your Domain and Hosting: Point your domain name to your hosting server by updating your DNS records. Your hosting provider can provide instructions on how to do this.
  4. Back Up Your Website: Before launching, create a backup of your website in case anything goes wrong. You can use a WordPress backup plugin like UpdraftPlus or BackupBuddy.

Conclusion

Congratulations! You’ve successfully built a multi-page portfolio website using Astra and Elementor. With a well-designed portfolio website, you’re now equipped to showcase your skills, attract new clients, and take your career to the next level. Remember, your portfolio is a living document, so continue to update it with your latest projects and achievements. Good luck, and happy website building!

Leave a Comment