How to create a portfolio website with Elementor

Decide which pages you need before opening Elementor. A useful starting point is Home, Portfolio, About and Contact. Give every project a consistent name, category, featured image, short summary and longer description.

Use WordPress Pages for a small, fixed portfolio. Use Posts or a custom post type when you expect to add projects regularly and want categories, tags or a dynamic grid. Elementor's Portfolio widget works with posts, pages and custom post types, not ordinary image galleries.

Go to Pages > Add New and create one page for each project, or create posts if you want category-based filtering. Add the project title, client or role, services, results, description and a featured image. Keep image dimensions and naming consistent so the grid looks orderly.

If you use a custom post type, make sure it has an archive enabled before trying to design its archive in Elementor. Otherwise, the archive template may have nowhere to display.

Create a page called Portfolio, click Edit with Elementor, and add a container for the project cards. For a small site, use Image, Heading, Text Editor and Button widgets, then link each card to its project page. Set equal image ratios, consistent spacing and a clear hover state.

This manual route is fine when you have only a few projects. Its drawback is maintenance: every new project requires another card, and there is no automatic category filter unless you add a suitable dynamic widget or plugin.

For a larger portfolio, add Elementor Pro's Portfolio widget or build a Loop Grid. Choose the content source, set the number of columns and posts, select an image resolution, and order items by date, title or menu order. Turn on the filter bar when visitors need to browse by category or another taxonomy. Featured images must be assigned for images to appear.

If you use the newer Taxonomy Filter with a Loop Grid, define the grid's query directly. The filter does not work with a Loop Grid using the Current Query option on an archive page, which is a common reason the filter appears but does nothing.

With Elementor Pro, use Templates > Theme Builder to create a Single Post template. Add dynamic widgets such as the post title, featured image, post content and taxonomy information, then set display conditions for your project content. This lets you edit project details in WordPress without rebuilding the design each time.

Do not put the project description directly into a reusable template when it should vary from project to project. Use the post content area or dynamic fields instead. Also check that project pages use the Default page layout; Canvas or Full Width layouts can prevent a single template from applying.

Create a WordPress menu containing Home, Portfolio, About and Contact, then add it to your Elementor header. If you build a global header in Theme Builder, publish it and set its display condition to Entire Site. A missing header is usually caused by an unpublished template, incorrect conditions, caching or a page using Canvas.

Switch Elementor's responsive preview to desktop, tablet and mobile. Reduce heading sizes, adjust image ratios, stack columns and hide decorative elements where necessary. Responsive values are inherited from wider screens, so a desktop setting can carry into mobile unless you override it. Check the live site on a real phone as well as in the editor.

If you want the portfolio structure without designing every grid, hover state and project page from scratch, use a portfolio-focused Elementor theme such as Asli. It provides pre-designed portfolio layouts, showcase sliders, AJAX portfolio loading, responsive styling and Elementor customisation, so you can import a starting design and replace the demo content.

Even with a ready-made theme, review every imported project, menu link, image and display condition before launch. Remove unused demo content, compress large images and test filters, sliders and project pages on mobile.