Skip to content

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.

Create Portfolio Categories and Items

Define Categories and Tags:

  • 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.

Add a New Portfolio Item:

  • 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

Search for the Portfolio Widget:

  • 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

Configure Content Settings:

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

Settings Options:

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

Customize Appearance Settings

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.

Design Customization:

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

See More Button Settings:

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

Masonry Portfolio Layout

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

Content Settings:

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

Appearance Settings:

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

Carousel Portfolio Layout

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

Carousel Settings:

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.

Portfolio Tags Layout

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.

Final View

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.

Share this article:

Kata WordPress Theme Helpdesk

Need Assistance? We can help!

Our responsive customer support team boasts a high customer satisfaction rating. Should you have any issues with the plugin, do not hesitate to contact us and remember we are always here to help.