{"id":104799,"date":"2023-02-21T17:52:29","date_gmt":"2023-02-21T12:22:29","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&p=104799"},"modified":"2023-02-21T17:52:29","modified_gmt":"2023-02-21T12:22:29","slug":"create-website-portfolio-showcase-page-in-elementor","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-website-portfolio-showcase-page-in-elementor\/","title":{"rendered":"How to create Website Portfolio\/Showcase Page in Elementor?"},"content":{"rendered":"\n

As a small business or freelancer, an effective portfolio page is a must to showcase your work and set yourself apart from the competition. Designing a portfolio\/showcase page with the Elementor page builder can be an incredibly rewarding experience, allowing you to showcase your work in a beautiful and professional manner.<\/p>\n\n\n\n

While there are many widgets within the Elementor that you can use to create your portfolio page but using the Dynamic Device widget from The Plus Addons for Elementor, you can add an extra layer of professionalism by showing your portfolio images in an interactive device mockup, especially if you are in web designing field. <\/p>\n\n\n\n

The Dynamic Device widget lets you create a beautiful image scrolling effect inside a device mockup.<\/p>\n\n\n\n

To check the complete feature overview documentation of The Plus Addons for Elementor Dymanic Device widget, click here<\/a>.<\/em><\/p>\n\n\n\n

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n

\n
LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

To create a portfolio page in Elementor using The Dynamic Device widget, follow the steps – <\/p>\n\n\n\n

1. To create a page from the dashboard, go to Pages<\/strong> > Add New<\/strong>.<\/p>\n\n\n\n

2. In the page title, add Portfolio<\/strong> and click on the Publish<\/strong> button.<\/p>\n\n\n\n

3. Once published, click on the Edit with Elementor<\/strong> button at the top.<\/p>\n\n\n\n

4. Now, in the Elementor editor, click on the +<\/strong> icon and choose your preferred column layout. <\/p>\n\n\n\n

5. Then, search the Dynamic Device widget from the widget panel and add it to the page.<\/p>\n\n\n\n

6. From the Layout<\/strong> dropdown, choose Normal<\/strong>. After choosing the appropriate device type and mockup, go to Content <\/strong>and choose Image <\/strong>from the dropdown.<\/p>\n\n\n\n

7. Now, add your image from the Media Image<\/strong> section.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n
\n

Note: Make sure to choose a tall vertical image for a good scrolling effect.<\/em> You can use this Free tool<\/a> to capture long screenshots of website<\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

8. Now go to Style > Device Background and turn on the Scroll Image toggle. This will make your image scroll when someone hovers over it.<\/p>\n\n\n\n

You can adjust the image scroll speed from the Transition Duration<\/strong> section.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n

If you want to add a manual scroll instead of scrolling on mouse hover to your image, you can do that by turning on the Manual Scroll<\/strong> toggle.<\/p>\n\n\n\n

9. Now, simply copy your Dynamic Device widget by right clicking on it and pasting it on other columns. Then just change the image of your widget.<\/p>\n\n\n\n

Following this process, you can create a beautiful portfolio page with an image scrolling effect inside device mockups in no time. <\/p>\n\n\n\n

\"multiple<\/figure>\n","protected":false},"author":16,"featured_media":104801,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[543,527],"class_list":["post-104799","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-dynamic-device","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=104799"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/104799\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/104801"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=104799"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=104799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}