How to modify portfolio widget in Elementor Pro

The Elementor Portfolio Widget has a layout that might not be suitable for all users. It’s a combination of Featured image and Post title while the Title is initially hidden and displays over an overlay when we hover on the image.


What if we want to move the Title below the Featured Image and add some Post excerpt too? Like below:

There is no option to do that!

For that reason, we need to modify the portfolio widget code. But we can not modify the core widget as that’s not the recommended way and we can not modify it using only CSS.

So, we are going to create a small plugin that will alter the layout of the portfolio widget without affecting the core widget’s code. We’ll basically extend the default portfolio PHP Class with our own Class.

Steps Involved to modify Elementor Portfolio Widget:


Step 1: Create the Plugin File

Create a directory/folder in your computer and name it “custom-portfolio-elementor”. Now create a file inside it named “custom_portfolio_elementor.php” and add the following code.


Step 2: Save the file and prepare to upload

Save the file and Zip the entire folder that we created in Step 1. This zip is now a complete WordPress plugin that we can install via admin interface.


Step 3: Upload to plugins and activate

Now login to the backend of your site and navigate to Plugins section. Click “Add New” and upload this new plugin. After uploading, activate it.


Step 4: Adjust CSS if required

There is some CSS added to the plugin for adjusting the layout but if you require any further adjustments, feel free to edit the CSS or write your own. Instead of modifying the plugin file, use the Custom CSS section under Appearance > Customize of your WordPress backend.


That’s All: Use the Portfolio widget with new layout

Congrats! You have successfully modified the default Elementor Portfolio widget.

Now, wherever you use it, our new modified layout will display with the Featured image at top, Title under it and Excerpt under that with Read more link.

Result:


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *