Skip to content
Submit a Ticket(opens in a new tab)

Portfolio

The Portfolio widget in Kata for WordPress allows you to showcase a selection of your work on various pages, presenting it as a visual album. This feature operates similarly to posts, enabling you to categorize and tag portfolio items for easy organization and display. Follow the guide below to get started.

  • Go to your WordPress dashboard.
  • In the Portfolio menu, select Portfolio Categories to create new categories for your portfolio items.
  • You can also create tags under Portfolio Tags to label and organize items as needed.
  • In the Portfolio section of your dashboard, click Add Portfolio Item.
  • Fill in the necessary fields for each portfolio item:

WordPress Add New Portfolio Item screen with categories, tags and featured image

  1. Title: Provide a clear title that represents the project or item.
  2. Description: Add any additional information or details about the work.
  3. Category: Assign a category to help organize items within specific types or genres.
  4. Tags: Add tags to further classify the item.
  5. Featured Image: Upload an image that will serve as the item’s visual preview.

Once completed, click Publish to save and publish the item.

Add the Portfolio Widget in Elementor

  • Go to your desired page in Elementor, and in the Element search bar, type “Portfolio.”
  • Drag and drop the Portfolio widget onto your page layout.

Elementor widgets panel with Kata Portfolio widgets highlighted

Select the Content Settings to adjust what content is displayed and how many portfolio items appear per page.

Kata Portfolio widget in Elementor on a construction demo with layout and gap settings highlighted

In the Settings section, you can configure the layout to determine the number of items in each row, adapting to your page design and screen size.

Kata Portfolio widget in Elementor on a construction demo with the columns setting highlighted

Use the Appearance Settings to refine the visual presentation of your portfolio items:

Kata Portfolio masonry widget settings in Elementor with architecture photos

  1. Image Size: Define the resolution for displayed images.
  2. Title: Toggle the display of item titles.
  3. Date: Choose to display the date for each portfolio item.
  4. Category: Show or hide the assigned category.
  5. Category Separator: Customize the separator symbol for categories if multiple is shown.
  6. Excerpt: Display a brief excerpt or description for each item.
  7. Display: Set items to open in a new page or in a modal pop-up.

In the Design section, you can add icons or custom elements, giving the portfolio a personalized touch.

Customize the See More button to control its style, text, icon and behavior, providing viewers a way to explore additional items.

Kata Portfolio widget in Elementor on a construction demo with load more and pagination settings highlighted

Kata provides several layout options for displaying your portfolio. You can select the best style that fits your design needs: Portfolio Masonry or Carousel Portfolio.

The Portfolio Masonry layout arranges items in a dynamic, grid format with staggered rows, creating a visually engaging look.

Elementor widgets panel with an arrow dragging a Kata Portfolio widget onto the page

Kata Portfolio grid of architecture projects with project titles and categories

Select from two pre-designed layouts for Masonry or customize your grid layout further.

Kata Portfolio widget in Elementor on a construction demo with filter and layout settings highlighted

There are few key settings in the Appearance Settings that you need to pay close attention to.

Kata Portfolio widget in Elementor with an architecture project grid

  1. Spacing: Control the space between items.
  2. Filters: Enable filters to allow sorting by category.
  3. Item Title: Toggle the display of item titles.
  4. Date Display: Show or hide item dates.
  5. Category Display: Display or hide categories.
  6. Separator: Choose a category separator symbol.
  7. Excerpt Display: Show or hide item descriptions.
  8. Display: Choose whether items open in a new page or modal pop-up.

Note: Many settings in the Masonry layout are similar to those in the standard Portfolio widget.

Kata Portfolio masonry grid with architecture photos on a construction demo

The Carousel Portfolio layout displays items in a rotating slider, offering a more interactive browsing experience.

Kata Portfolio carousel widget settings in Elementor with project cards

  1. Number of Items: Set how many items display at once.
  2. Carousel Speed: Control the speed of the carousel’s rotation.
  3. Slide Transition Speed: Adjust the transition speed between slides.
  4. Stage Padding: Add padding around items for a balanced look.
  5. Margins: Set spacing between items in the slider.
  6. Navigation Arrows: Enable arrows for easy navigation.
  7. Left/Right Arrow Icons: Customize each arrow’s icon.
  8. Pagination: Add pagination dots for easy navigation between slides.
  9. Looping: Enable continuous looping of items.
  10. Autoplay: Set the carousel to rotate items automatically.

The Tags Portfolio layout offers three distinct styles for displaying portfolio tags: inline, list, and dropdown. You can select any of these options to showcase portfolio tags on your pages.

After completing these settings, preview your portfolio to confirm it matches your design preferences. Make any necessary adjustments, then click Publish to make your portfolio live.

Kata Portfolio carousel with architecture projects on a construction demo

With these steps, your portfolio is now ready to showcase your work in a visually engaging format on your Kata-powered website.

Last updated: