Coffee Tea The Process In three steps, you can have this great looking filterable gallery. At this point, I created two galleries, one for the coffee images and one for the tea.
Go ahead and drop the shortcodes for your galleries into as many tabs as you have galleries for and name your tabs as you want the buttons to be labeled. Add this to the Tabs Controls section. The following CSS is mostly for the styling of the buttons, i. Place it in the Tab section. Add this to the Active Tab section. Tim took the time to show me how to get the buttons to centre themselves independent of screen resolution.
Go ahead and have fun! Any idea why this might be happening? Hi Rob, you should also notice that there are still lines running between the boxes at the bottom.
You need to modify the CSS in the Tab section by adding! Hi Rob, thanks for solving that one the box is all closed at the end.09 Divi Theme DIVI Builder Email Optin, Filterable Portfolio, Gallery, Image, Login, Map, Menu
Thanks for this post. It really helped me out! However, I am having the same problem with lines at the bottom. Did anyone come up with a solution? Never mind. I just tested it myself. Is there a way I can email you so that you can have login in info? Thanks for sharing this great post. How do we customize it so it it is mobile optimized? When I try on the ipad and mobile version all the tabs move on the top of each other, it looks very disorganized.
Hi Rob … I want to set this up with about 7 tabs. I think 7 might be pushing it. Hi Rob, thank you for this tutorial.
Any idea how to remove this?
Free Download: Divi Filterable Portfolio Sections with Custom Hover Effects
Thank you so much for this! The first tab is absolutely fine, but in the second and third they are not laying out properly- any ideas? Is it possible to make a link to a specific tab. Thanks for the great tips! Just had to thank you so much for this article — I have been searching all day for a free filterable gallery plugin with no good results, and here you have it perfect! Hey there! Hi Rob, thanks for this great tutorial.Divi FilterGrid is the most powerful and flexible plugin for displaying posts and any post type in Divi.
With lots of other great features including custom content, AJAX load more, and lightbox and popup options — Divi FilterGrid is great for both developers and personal use. By Joni Millar on April 8, at pm. Super great. Thanks for your work! Did you find this review helpful?
By Christian Stockklauser on March 10, at am. The plugin is as described a comes with many features. I use it in order to showcase my products in a elegant way. Thumbs up! The support from the developer has also been superb, as I encountered a few areas I needed help with. They have been very responsive and helpful. Extremely pleased with this plugin — will be looking at their other plugins for potential use as well. I reached out to support and received stellar help.
Not only did support go over the basics of the code, they even offered to configure the plugin for me. An agent logged-in to my website and setup the css to configure the grid exactly as I wanted.
By cosmocanuck on February 23, at am. This plugin did exactly what I needed, and Brad provided outstanding support — including custom code suggestions — to help me achieve exactly what I needed.
Highly recommended! Amazing plugin with a perfect integration with DIVI, lots customize options and very fluid working.Divi is a remarkably good tool, but sometimes we face a niche or specific challenge that is not possible by default in Divi. You will find that all of our popular Divi tutorials address problems like this, so if you are new to the blog — that what ya get! There is one common issue I see a lot, and I wanted to put and end to it once and for all.
This is fine sometimes, but if you want to show off your projects in their original shape, for example, a square, you need to modify Divi with some PHP code. Add this snippet to the functions.
Filterable Grid for Divi
This code snippet will remove the default Divi cropped image size for the portfolio featured image and will use the original aspect ratio instead. The Divi Gallery Module also crops the images by default, which is usually nice.
But sometimes you want to have these uncropped and display at the same aspect ratio as the actual images. This tutorial will show you how to remove the crop from the Divi gallery module. This code snippet will remove the default Divi cropped image size for the gallery images and will use the original aspect ratio instead. Last but not least, we all know the Divi Blog Module crops the featured image by default. Sometimes this is not very noticeable if your images are a similar shape, but there are times this can be very annoying.
You want to have vertical or square images as your featured image in the Divi blog feed. This tutorial will show you how to remove the crop from the Divi blog module.
Out of the box, Divi creates an additional image size for the blog featured image, which is smaller than the one shown on blog posts. Our method here will simply remove that smaller size and replace it with the original size, which will also give it the same aspect ratio as the one you upload.
This code snippet will remove the default Divi cropped image size for the blog feed featured image and will use the original aspect ratio instead. In this Divi tutorial you will learn how to add more icons to Divi in the Social Media Follow module! Use any social media or brand icon you want! Use this Divi Slider layout in a unique way to show off your reviews! We send out a roundup email once or twice a month with tutorials and new products, so that's what you will get!
Visit Our Channel. Code by Day Explore By Weekend. Learn how to stop the featured images from being cropped in the Divi blog module and portfolio modules, as well as images in the gallery module. All you have to do is add the following code snippet to your Divi child theme. That's it! Please share your thoughts in the comments below. Subscribe for more stuff like this. We have more cool stuff coming for our subscribers! Please share this post!
He loves helping small businesses, exploring, building websites with Divi, and teaching others. Go To Group. Recent Posts.You can for example choose how many columns you want to display for each device class. Here we use a layout with manually created content. This is item 1. It has a button. Click Me Item 2 This is item 2. Click Me Item 3 This is item 3. Click Me Item 4 This is item 4. It has no button. Item 5 This is item 5. Item 6 This is item 6.
Tag: filterable gallery
Generated Content The grid above uses manually created items but of course you can generate the grid content from your projects as well — and not only that! You can use any post type with a hierarchical taxonomy. It also works for additional taxonomies on existing post types. You can even mix post types — for example projects and blog posts — and manually added content. When generating content, you have additional options. You can for example display the excerpt or content of the post, hide the title and the terms and even display a button with a custom text.
Of course you can also use a overlay color and icon for the image. Art and DesignNature. Art and Design. Filterable Grid for Divi can also be used to create filterable image and video galleries. However, the real power of Filterable Grid for Divi are the endless custom styling options. Every single element can be styled to your liking, right out of the module.
Writing custom CSS is almost never necessary — even if there are CSS fields for each element in the advanced settings. By the way, most of the styling options can not only be configured module wide but you can overwrite them in every single item.
You can go really crazy when styling Filterable Grid for Divi and achieve incredible designs with it. If you ever get stuck, we are always here to help you build your awesome next project!
A nice sunrise at the sea. Take a break and enjoy the landscape. You deserve it. Have a great day. Japan is amazing. You should check it out. Sea 1 The Sea The sea is rough. Sea 2 The Sea 2 The sea is calm. How about a button grid as a menu substitue? Because Filterable Grid for Divi is so flexible, it offers a broad variety of possible use cases. Like this button grid which can act as a menu substitute which looks the same on every device type — unlike the Divi Menu module, which looks different on mobile devices than on desktops.
Just deactivate the filters to only show the grid item. You can choose how to align the items.In this post I would like to share with you four Divi Filterable Portfolio section layouts with different custom hover effects applied to portfolio items on hovering over. I decided to make it a FREE download rather than a DIY tutorial since this will allow Divi users to implement these effects on their sites with much less effort.
Check out the short demo video of these layouts with custom hover effects below or click the button to navigate to the live demo.
These protfolio sections make use of the section dividers feature of Divi, so, at least Divi v3. But the rest of the styling and custom hover effects will work with earlier versions of Divi too. The download is a single. Next, go to the page where you would like to have your portfolio and add the imported section from the Divi Library. Then open the Filterable Portfolio module settings and select your project categories which you would like to show on your site.
So, subscribe and stay tuned! I was wondering, if i could set a transparancy to the rectangle colors? Like i still want to see the pictures from the portfolio on hover, so thats why i would like to set a transparency on the colors if that makes sense? Also, is it possible when i click on the pictures Projects of the portfolio, that it is not directing me to the projects page?
Because for a real estate company i only want the projects to display and not have a project page for each project. When someone clicks on the project, i want the project picture to get bigger, thats everything i want.
Just to make the picture bigger like in the gallery module, and not direct me to a project page when i click on it. Regarding the redirection to project page on click: this is how the Portfolio module works, it is intended to redirect the visitor to project page providing more info about the project. If you need to display a larger image on click then you should use the Gallery module for that.
The project name is actually being displayed on hover. Could you resolve this problem, please. Hi Ivan, Great plugin, I got a question, Any ideas how I can bring the filtering box to the left side of the images? You can adjust these values for different screen widths using media queries. I just downloaded and tried this with no results.
Added all layouts to library, loaded layouts to the page, added projects with title and images, added CSS. Nothing happens. No changes. Do you think is it possible to use it for normal portfolios?Include or exclude posts by categories and tags for your Divi Blog, build your search- category- tag- and author pages with this new module and style your WooCommerce Shop page as you like it.
It is also fully compatible with all standard WooCommerce filters and search widgets. This advanced Divi Blog module was developed with the focus on high performance and uses advanced Ajax functionality.
Each of these described functions is built right into the plugin. This simple to install plugin can make a drastic difference in your website as a whole. The plugin is not compatible with the Standalone Divi Builder plugin. Photo Credits. The module is engineered to create complex feeds, archives, etc. But it is not possible to implement the module several times in a single page. Here is a link to the documentation. Then just contact me via the Support Form.
For pre-purchase questions use the comments below or just ask me on Facebook. Otherwise you can find version 1. You must log in and be a buyer of this download to submit a review.
Username or Email Address. Remember Me. Save my name, email, and website in this browser for the next time I comment. Hello, I just purchased the plugin today and started to use it, and, of course, it is not compatible with my divi theme version. I am on Version : 4. For Divi 2.Divi Academy Membership gives you exclusive access to over resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks.
This free Divi layout uses the native Divi tabs module along with library layouts containing blog modules displaying different categories to show a filterable module similar to what you see in the Extra theme.
View the demo and download this free layout plus 24 other awesome free Divi resources by subscribing below. If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now. Subscribe to receive regular emails packed with tips, tricks, tutorials, freebies, product info and promotional offers, and get instant access to 25 completely free awesome Divi resources!
Any pointers? Hi, awesome layout, question : is it possible to dsplay excerp in the blog page? I ticked the option excerp of full content but nothing is displayed.
And remove it. I only have a problem : when a post category is, for now, empty, how can I change the error message? Hello, splendid post, thanks. I have tried it, and it showed as per your sample. However, how do you change the font?