{"id":2948,"date":"2021-06-23T07:36:06","date_gmt":"2021-06-23T07:36:06","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2948"},"modified":"2023-02-21T10:52:28","modified_gmt":"2023-02-21T10:52:28","slug":"how-to-make-a-portfolio-website-in-wordpress-with-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/","title":{"rendered":"How to Make a Portfolio Website in WordPress with Elementor"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2948\" class=\"elementor elementor-2948\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b070d2d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b070d2d\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7cf3e80c\" data-id=\"7cf3e80c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-391e68a9 elementor-widget elementor-widget-video\" data-id=\"391e68a9\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=W8Bpez7SVdg&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-518ade52 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"518ade52\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-21b30d17\" data-id=\"21b30d17\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7aa0d20d elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"7aa0d20d\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2051\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2051\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2052\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2052\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2051\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2051\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2051\" tabindex=\"0\" hidden=\"false\"><p>Learn how to make a portfolio website in WordPress with Elementor&#8217;s drag-and-drop website builder.<\/p><p>Display your portfolio projects, or any other custom post types, in a unique and visual way that will impress your site visitors. This is a really fun and useful widget, that is great for high-end designed websites.<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2052\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2052\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2052\" tabindex=\"0\" hidden=\"hidden\"><p>&#8211; [Instructor] Hey everyone,<br \/>this is Noah from Elementor.<br \/>Today I&#8217;ll be teaching you<br \/>about our portfolio widgets.<br \/>This widget combines<br \/>practical with incredible<br \/>as it enables you to<br \/>add any custom post type<br \/>to your page in a very<br \/>visual and unique display.<br \/>So first we&#8217;ll search for the widget<br \/>and drag it in and once<br \/>it&#8217;s dragged into place<br \/>you&#8217;ll see the content<br \/>tab and the style tab.<br \/>In the content area you have full control<br \/>over the layout, query, and<br \/>filter bar of the widgets.<br \/>So in the layout area we<br \/>first have the columns<br \/>where you can set the amount of columns<br \/>displayed in the widget.<br \/>So you can choose between one and six.<br \/>Say I choose two or four<br \/>et cetera.<br \/>And then you have post count.<br \/>You can set the exact amount<br \/>of posts to be displayed<br \/>in the widget.<br \/>So I could choose say one<br \/>or 20 and so on.<br \/>And next we have the image size<br \/>where you can set the size of the images<br \/>from thumbnail to full size.<br \/>And we have item ratio<br \/>where you can set the ratio<br \/>of the images in the widget.<br \/>Next we have show title.<br \/>You could choose whether<br \/>to hide or show the title<br \/>of each post by clicking here.<br \/>Showing the title will display it<br \/>while hovering on the images.<br \/>See it.<br \/>Now if activated note how<br \/>another option is added.<br \/>Title html tag.<br \/>Here you could select the<br \/>html tag for the title<br \/>as a heading, div, span, or regular text.<br \/>So those were the layout<br \/>options for the widget.<br \/>Next for the query options.<br \/>We first have source<br \/>where you could select the source<br \/>from which the widget<br \/>will display the content<br \/>as posts, pages, products,<br \/>galleries, or manual selection.<br \/>We&#8217;ll be going over the<br \/>manual selection options soon.<br \/>So after the source setting<br \/>we have the filter settings.<br \/>The first one is categories.<br \/>I can filter the posts<br \/>displayed by categories.<br \/>For instance I have a fashion<br \/>category in my website,<br \/>so if I insert fashion<br \/>and click on it,<br \/>see how the widget only displays the posts<br \/>with the fashion category.<br \/>Now same goes for tags.<br \/>I have a devices tag on my website,<br \/>so if I click on it<br \/>see how only the posts<br \/>with the tag of devices<br \/>are displayed in the widget.<br \/>Now I&#8217;ll quickly just go back<br \/>to the manual selection option<br \/>that I told you about<br \/>and here as it sounds<br \/>I can manual insert<br \/>the exact post or posts<br \/>that I want to display.<br \/>So for example I have a post<br \/>with the title of &#8220;Tips for Vacation&#8221;<br \/>so if I insert it and click on it<br \/>see how the widget<br \/>displays only this post.<br \/>After this we have the advanced options.<br \/>So the first one is order by.<br \/>Here I can set the order<br \/>of the posts displayed<br \/>by date, title, menu order, or randomized.<br \/>And then I have the order<br \/>where I can set as<br \/>ascending or descending.<br \/>And I have last but not<br \/>least here the offset<br \/>where I can insert the amount<br \/>of posts to be skipped over.<br \/>For instance if I insert<br \/>two the widget will begin<br \/>it&#8217;s display starting from the third post.<br \/>So those were the query options<br \/>for the portfolio widget.<br \/>Next is the filter bar options.<br \/>So here I actually have a show option<br \/>where I can set whether<br \/>to show it or hide it.<br \/>Now once activated<br \/>another option is added.<br \/>The taxonomy option.<br \/>Here I could select the<br \/>taxonomy from which the widget<br \/>will display the posts.<br \/>So here we have categories,<br \/>tags, product catergories,<br \/>product tags, or gallery categories.<br \/>So I&#8217;ll choose tags and see<br \/>how it&#8217;s displayed up here.<br \/>So those were the content options<br \/>for the portfolio widgets.<br \/>We&#8217;ll move on to the style tab.<br \/>So here we have control over the items,<br \/>item overlay, and filter<br \/>bar style options.<br \/>In the items we first<br \/>have the item gap option<br \/>where you can set the exact<br \/>gap between the items.<br \/>Say I give it 80 or 5 et cetera.<br \/>And then we have border radius<br \/>where you could set the<br \/>border radius for the images.<br \/>Say I give it a 100, see<br \/>it&#8217;s completely rounded,<br \/>or only 50, or zero, so on.<br \/>Next we have the item<br \/>overlay style options<br \/>where here you can set the<br \/>background color of the overlay<br \/>when hovering over the items.<br \/>Say pink, see how it changed to pink<br \/>and we have the title color<br \/>where you can set the color<br \/>for the title of the overlay.<br \/>See how it changed to pink also.<br \/>And typography which we<br \/>can set to customized<br \/>which opens the standard<br \/>typography options<br \/>such as size, see,<br \/>font family, weight,<br \/>transform, style, line height,<br \/>or letter spacing.<br \/>And next we have the<br \/>filter bar style options<br \/>where here we can set<br \/>the color of the text<br \/>or only the active color,<br \/>meaning the color for only<br \/>active text in the filter bar,<br \/>and typography which we can<br \/>customize or deactivate it,<br \/>and we have filter spacing<br \/>where you can set the exact<br \/>spacing between the filter bar<br \/>and the images below it.<br \/>And we have space between items<br \/>where you can set the exact space between<br \/>the items themselves in the filter bar.<br \/>So those were the style options<br \/>for the portfolio widgets.<br \/>So as you can see this<br \/>is an extremely helpful<br \/>and fun widget.<br \/>I hope you enjoyed this video.<br \/>For more videos and tutorials subscribe<br \/>to our YouTube channel or<br \/>visit us at docs.elementor.com.<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Learn how to make a portfolio website in WordPress with Elementor\u2019s drag-and-drop website builder. Display your portfolio projects, or any other custom post types, in a unique and visual way that will impress your site visitors. This is a really fun and useful widget, that is great for high-end designed websites. Transcript [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-2948","post","type-post","status-publish","format-standard","hentry","category-other"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Make a Portfolio Website in WordPress with Elementor - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a Portfolio Website in WordPress with Elementor - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Learn how to make a portfolio website in WordPress with Elementor\u2019s drag-and-drop website builder. Display your portfolio projects, or any other custom post types, in a unique and visual way that will impress your site visitors. This is a really fun and useful widget, that is great for high-end designed websites. Transcript [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-23T07:36:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-21T10:52:28+00:00\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a Portfolio Website in WordPress with Elementor - Academy","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:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Make a Portfolio Website in WordPress with Elementor - Academy","og_description":"Overview Transcript Overview Learn how to make a portfolio website in WordPress with Elementor\u2019s drag-and-drop website builder. Display your portfolio projects, or any other custom post types, in a unique and visual way that will impress your site visitors. This is a really fun and useful widget, that is great for high-end designed websites. Transcript [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-23T07:36:06+00:00","article_modified_time":"2023-02-21T10:52:28+00:00","author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to Make a Portfolio Website in WordPress with Elementor","datePublished":"2021-06-23T07:36:06+00:00","dateModified":"2023-02-21T10:52:28+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/"},"wordCount":1020,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"articleSection":["Other"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/","url":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/","name":"How to Make a Portfolio Website in WordPress with Elementor - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"datePublished":"2021-06-23T07:36:06+00:00","dateModified":"2023-02-21T10:52:28+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-make-a-portfolio-website-in-wordpress-with-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Other","item":"https:\/\/elementor.com\/academy\/other\/"},{"@type":"ListItem","position":4,"name":"How to Make a Portfolio Website in WordPress with Elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2948"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2948\/revisions"}],"predecessor-version":[{"id":9397,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2948\/revisions\/9397"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}