V4 Elements Advanced Portfolio Estimated reading: 5 minutes 2 views A portfolio section for your latest work. A big title on top, and your posts as a grid of pictures below. It reads your posts by itself, so a new post shows up with no extra work. No code needed. WIDGET Advanced Portfolio PARTS Section Title, Posts List, Portfolio Items PLAN Free A QUICK LOOK What You Will Build A bold section title and a grid of rounded photos. Each picture is the featured image of one of your posts. A title and a grid of post pictures BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: The pictures come from the featured image of your posts. Give each post one, and the portfolio fills itself. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: Advanced Portfolio is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under Blog Widgets, find Advanced Portfolio and switch it on. Click Save Settings. The Advanced Portfolio card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the portfolio in. Click the + button at the top left to open the Elements panel. Type Advanced Portfolio in the search box. Drag it onto your page. The Section Title (1) and the Posts List (2) (click to zoom) Note: A new portfolio shows the title WORK and a list of pictures, one for each of your latest posts. STEP 3 Set the Title and the Number of Posts Open the Layout section in the General tab. Set Posts Per Page. The default is 6. Choose the Post Title Tag. The default is H3. Type your own Section Title, for example Our Travel Stories. The default is WORK. Choose the Section Title Tag. The default is H2. Posts Per Page (1), Post Title Tag (2), Section Title (3) and Section Title Tag (4) (click to zoom) Tip: Keep one H1 on a page. If your page already has one, leave the Section Title on H2. STEP 4 Choose Which Posts to Show Open the Query section. Source: pick Posts, or another type of content on your site. Order By: Date (default), Title, Menu Order or Random. Order: Descending (default, newest first) or Ascending. Offset: skip the first posts. The default is 0. STEP 5 Style It Open the Structure panel and click a part. Then open the Style tab. Click the Section Title. Set a big size, for example 64 px, and a bold weight like 800. Click an image inside the Posts List. Set a Border Radius, for example 16, for rounded corners. Click the Posts List to change the gap and the layout of the grid. Tip: The picture above uses a 64 px title and a radius of 16 on the images. STEP 6 Scroll Animation (Optional) Open the Animations section to add a pinned title effect. Switch Enable on. Set Title Pin Area Start and Title Pin Area End. They tell the title when to stick and when to let go as the visitor scrolls. The defaults are top top and bottom bottom. Choose the Breakpoint. The animation is switched off on screens smaller than this. Switch Enable Editor Mode on to preview the animation while you edit. Enable (1), Enable Editor Mode (2) and the pin area (3) (click to zoom) Note: This effect is easiest to see on a long page with other content around the portfolio. Test it on your live page. RESULT Final Result The portfolio with the title Our Travel Stories, six photos and rounded corners. The finished portfolio SETTINGS Options Posts Per Page Default: 6How many pictures. Post Title Tag Default: H3The tag of each post title. Section Title Default: WORKThe big title on top. Section Title Tag Default: H2The tag of the section title. Animations: Enable Default: OffPinned title scroll effect. Title Pin Area Start / End Default: top top / bottom bottomWhen the title sticks and lets go. Animations: Breakpoint Default: MobileScreens below this skip the animation. Source Default: PostsWhere the items come from. Order By / Order Default: Date / DescendingHow items are sorted. Offset Default: 0Skip the first items. GOOD TO KNOW More Details Fills itself New posts appear in the portfolio automatically. The Presets box The Presets section is there for ready-made looks. No presets are included yet, so it is empty for now. Use other content Change Source in Query to show something other than posts, for example your own custom post type. HELP Troubleshooting I do not see Advanced Portfolio in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and switch on Advanced Portfolio under Blog Widgets. Click Save Settings, then reload the editor. A picture is missing That post has no featured image. Add one in the post editor. I see no post titles under the pictures A new portfolio shows pictures first. Click the portfolio in the Structure panel to see its parts and style them. The Presets box is empty This is normal for now. Style the parts yourself in the Style tab. The title does not stick when I scroll Switch Enable on in Animations, and check your Breakpoint. Test on your live page, with enough content to scroll. You Did It Your page now shows your latest work in a clean portfolio. If you face any problem, please contact our support team. We are happy to help.
