{"id":1463,"date":"2019-01-31T09:20:38","date_gmt":"2019-01-31T09:20:38","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=1463"},"modified":"2023-12-14T11:08:01","modified_gmt":"2023-12-14T11:08:01","slug":"how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/","title":{"rendered":"Portfolio Widget Overview"},"content":{"rendered":"\n

The Portfolio<\/strong> widget of the JetElements<\/em> plugin will be helpful if you need to showcase your creative works. It’s perfect for displaying photos for photographers, models, estate agents, designers, artists, architects, etc.<\/p>\n\n\n\n

\"Portfolio<\/div>\n\n\n\n

Add the Portfolio Widget to the Page<\/h2>\n\n\n\n

Go you your website’s dashboard and find the page where you would like to place a portfolio block. Open it with the Elementor page builder, find the Portfolio<\/strong> widget, and drop it into a new section.<\/p>\n\n\n\n

\"Portfolio<\/div>\n\n\n\n

Add the Images<\/h2>\n\n\n\n

Proceed to the Content<\/strong> tab of the left-side menu and open the Items<\/strong> section. Every item here represents one picture in the portfolio. You can add as many items as you need by clicking the “Add Item<\/strong>” button.<\/p>\n\n\n\n

\"Portfolio<\/div>\n\n\n\n

To upload an image and add some additional features, click on the item. Let’s take a look at the settings here.<\/p>\n\n\n\n

    \n
  • Category<\/strong>. This field helps you to categorize the images. The name of the category you type into this field will be displayed at the top of the portfolio. Once you click any category, the photos are filtered, and only the ones related to the selected category are shown;<\/li>\n\n\n\n
  • Image<\/strong>. Here you can upload the picture to show in your portfolio. You will also be able to choose Image Size<\/strong>;<\/li>\n\n\n\n
  • Title, Description<\/strong>. In these fields, you define the title and the description. Depending on what Preset <\/strong>will be chosen in the Settings <\/strong>section, this text will be shown over the picture on hover or under it;<\/li>\n\n\n\n
  • Link Text, Link URL<\/strong>. If you want to add a button to the portfolio item, you can add the text on the button and a link to these fields. The button will appear only when you add the link; <\/li>\n\n\n\n
  • Image Link<\/strong>. In this drop-down menu, you choose how the link will be opened – in the lightbox or on a separate page.<\/li>\n<\/ul>\n\n\n\n
    \"Portfolio<\/div>\n\n\n\n

    Portfolio Widget Settings Overview<\/h2>\n\n\n\n

    Now navigate to the Settings<\/strong> section. Here you can define the general look of the portfolio grid.<\/p>\n\n\n\n

      \n
    • Layout type<\/strong>. This is the way the items will be placed in the grid. Masonry <\/strong>is a layout where all the pictures have the same width, and their height is changed proportionally. In the Grid <\/strong>layout, all images have the same width and height. If you choose the Justify <\/strong>layout, the pictures will be unified by their height, and the width will be changed proportionally. And the List <\/strong>will place all the images in a list, one under another;<\/li>\n\n\n\n
    • Preset<\/strong>. In this drop-down menu, you choose where the content will be placed. In Type-1<\/strong> the title, description, and button overlay half of the picture on hover. In Type-2<\/strong> all the data is placed under the picture. If you choose Type-3,<\/strong> only the zoom icon will be shown on the overlay. And in Type-4<\/strong> the text information and the button overlays the whole picture on hover;<\/li>\n\n\n\n
    • Columns<\/strong>. In this drop-down, you can select the number of columns from 1 to 6;<\/li>\n\n\n\n
    • Items Gap<\/strong>. You can change the gap between items with the help of the slider and by typing the value into the field;<\/li>\n\n\n\n
    • \u201cAll\u201d Filter Label<\/strong>. The categories you create in the items section are placed at the top of the portfolio and can be used to filter the items. There is also an All <\/strong>filter that shows all the items. In this field, you can rename it;<\/li>\n\n\n\n
    • View More Button<\/strong>. If your portfolio has a large number of pictures in it, it could be convenient to hide them in the unfold and show them only when the user clicks the “Show More<\/strong>” button. This toggle adds such a button when enabled;<\/li>\n\n\n\n
    • Title HTML Tag<\/strong>. here you can set the size of the Title, from H2 to H6.<\/li>\n<\/ul>\n\n\n\n
      \"Portfolio<\/div>\n\n\n\n

      Finally, navigate to the Style<\/strong> tab, where you can style up the filters, the content, the More button, etc. When you finish the customization, don’t forget to click the “Update<\/strong>” button and save the changes.<\/p>\n\n\n\n

      Now you know how to create a portfolio in order to showcase your work with a powerful Portfolio<\/strong> JetElements<\/em> widget.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Discover the process of creating and customizing a portfolio using the Portfolio widget from the JetElements plugin.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[517],"yoast_head":"\nHow to Create a Categorized Portfolio \u2014 JetElements | Crocoblock<\/title>\n<meta name=\"description\" content=\"Check how to style up the Portfolio widget, available in the JetElements plugin. Display your images in the most attractive way with the widget for Elementor on your WordPress website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Categorized Portfolio \u2014 JetElements | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Check how to style up the Portfolio widget, available in the JetElements plugin. Display your images in the most attractive way with the widget for Elementor on your WordPress website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-14T11:08:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/portfolio-example.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/\",\"name\":\"How to Create a Categorized Portfolio \u2014 JetElements | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:20:38+00:00\",\"dateModified\":\"2023-12-14T11:08:01+00:00\",\"description\":\"Check how to style up the Portfolio widget, available in the JetElements plugin. Display your images in the most attractive way with the widget for Elementor on your WordPress website.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Portfolio Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create a Categorized Portfolio \u2014 JetElements | Crocoblock","description":"Check how to style up the Portfolio widget, available in the JetElements plugin. Display your images in the most attractive way with the widget for Elementor on your WordPress website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Categorized Portfolio \u2014 JetElements | Crocoblock","og_description":"Check how to style up the Portfolio widget, available in the JetElements plugin. Display your images in the most attractive way with the widget for Elementor on your WordPress website.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/","og_site_name":"Help Center","article_modified_time":"2023-12-14T11:08:01+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/01\/portfolio-example.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/","name":"How to Create a Categorized Portfolio \u2014 JetElements | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:20:38+00:00","dateModified":"2023-12-14T11:08:01+00:00","description":"Check how to style up the Portfolio widget, available in the JetElements plugin. Display your images in the most attractive way with the widget for Elementor on your WordPress website.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/how-to-showcase-a-categorized-portfolio-using-jetelements-portfolio-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Portfolio Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/1463"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=1463"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=1463"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=1463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}