When you click on one of these links, you get a discount, we get commission, and Elegant Themes makes another sale. You can do this by a snippet of CSS code to your Divi website. Divi comes with dozens of great fonts powered by Google Fonts. If you are working with a dark background, then your text should be light. Hi Elizabeth. Any help is appreciated…, https://logisticspropco.com/properties/?active_filter=park-overview. When I try use the active filter link, the category tab is selected, but the post aren’t filtering. It uses the same style for the filter buttons and a 4-2-1 column layout for desktop/tablet/mobile. We’ll take a look and see if we can find the issue for you. Hi Deborah. The filterable grid is built using some core PHP in the Divi theme and it’s extremely difficult finding out how to override this, but don’t worry, I’ll show you how In this tutorial we’ll be creating a customised version of the Divi Filterable Portfolio module that lets you add custom fields to … Every Divi module has a long list of design settings that you can use to change just about anything. The theme uses a filterable portfolio gallery that a user can click to filter between categories. i.e. This border can be customized using the following conditional settings. Portfolio Post Pro doesn’t just make it easy to activate a filter category by default. Custom CSS can also be applied to the module and any of the module’s internal elements. This module works with ANY custom post type, including blog posts, projects, testimonials, etc. We use your Divi Filter Grid Plugin but can’t see this feature in it? The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. When I download elegant-tweaks-posts.php I get the following error message when I try and load it into my WordPress site: The package could not be installed. Hover Overlay Color: rgba(224,153,0,0.58) The filterable portfolio looks just like the normal portfolio module, except that it loads new projects using an Ajax request, and it includes options to filter the project list by categories. Letter spacing affects the space between each letter. If you would like to change the color of your filter text, choose your desired color from the color picker using this option. You can for example choose how many columns you want to display for each device class. Line height affects the space between each line of your filter text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. New modules can only be added inside of Rows. When you first open a page with the filterable portfolio module, The “All” filter button is active which shows all of the posts by default. * Designed by Divi Addons | … * Affiliate Disclaimer: Some of the links in this site are affiliate links. By default, Divi uses the Open Sans font for all text on your page. This is the tab you will use to change how your module looks. Back To Divi Builder Plugin Documentation. Update the Filterable Portfolio Settings as follows: Layout: Grid Hi Arno. There might be times you want to link to this page so that one of the categories is active by default. Choose whether or not you would like to display the category below each post in the post meta area. Custom units of measurements of supported, which means you can change the default unit from “px” to something else, such as em, vh, vw etc. When you click on one of these links, you get a discount, we get commission, and Elegant Themes makes another sale. There you have our nine best free Divi portfolio layouts. I have to say that I'm not good in code, CSS and stuff. https://diviplugins.com/downloads/divi-filtergrid/. I’m afraid the active filter option is only capable of making a single category/filter active. * Divi Tutorials Directory is not affiliated with nor endorsed by Elegant Themes. CSS input into these settings are already wrapped within style tags, so you need only enter CSS rules separated by semicolons. * Some of the links and images on this site are affiliate links for the Divi theme. [Side note: If you are unfamiliar with the Filterable Portfolio module, it allows you to embed a tabbed project portfolio. However, unlike the Filterable Portfolio, it’s easy to change the style. Line height affects the space between each line of your meta text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. Title Font Size: 14px Pagination Active Page: *Divi is a registered trademark of Elegant Themes, Inc. By default, Divi uses the Open Sans font for all text on your page. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface. Now let’s create our module: Anywhere you like on your page, add a new filterable portfolio module.Select the categories you just set from the list in the Content tab, then go ahead and adjust any other settings in this tab you want.. Next, click the Design tab and set the Layout to Grid (I am assuming you want a grid layout here ).Again, adjust any of the other setting you like. Sounds like you are unzipping the file and then trying to install the unzipped files. by ed@divihype.com | Oct 16, 2018 | Divi Tips and Tricks, PHP ** UPDATE 25/07/2019 ** I had several requests to update this code so it worked with later versions of Divi. Letter spacing affects the space between each letter. Once you have entered the Visual Builder, you can click the gray plus button to add a new module to your page. As Divi doesn’t do this out of the box, I had to look for options, one of them being Essential Grid but as I didn’t want to fork out for a plugin that would have been overkill, I decided to see if I could turn the Divi Tabs module into the same kind of thing and, with a little bit of tinkering, I managed to come right. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. If you sign up through them we will earn a small commission, at no extra cost to you. While Divi gives you some control over which projects are displayed, such as selecting which category is displayed, it doesn't currently provide a way to control the order in which projects are displayed. Method . If you would like to change the color of your meta text, choose your desired color from the color picker using this option. You can display posts or custom post types in a grid or fullwidth layout. If you would like to change the color of your title text, choose your desired color from the color picker using this option. Display blog posts, projects, products, create galleries, and much more. An ID can be used to create custom CSS styling, or to create links to particular sections of your page. With this extension, Search & Filter will now be able to directly integrate with the following Divi modules: Blog; Shop; Portfolio; Archives; Integrating with the Blog/Portfolio/Shop Modules . Using sorting functionality along with DIVI Filterable Portfolio module . https://diviplugins.com/divi-filterable-portfolio-active-filter-link The Filterable Portfolio allows you to display your most recent projects in either a Grid or Standard fashion. We have some great tutorials about how to use Divi’s row and section elements. Select your desired style from the dropdown menu to apply it to your border. 100% recommend this plugin! If you would like to increase the space between each letter in your meta text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. Anything that controls what appears in your module will always be found within this tab. These options are separated into three main groups: Content, Design and Advanced. Zoom Icon Color: #ffffff If you would like to increase the space between each letter in your filter text, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. Divi FilterGrid is a third-party plugin that adds a new filterable module to the Divi Builder. You can add multiple classes, separated with a space. Is it possible for the filter to show only posts that are in multiple categories? active filter. http://www.bangalayvillas.com.au/enjoy/?active_filter=tours. Filter Font Size: 14px You can also customize the style of your text using the bold, italic, all-caps and underline options. I’ve installed & setup the plugin & it doesn’t seem to be working? The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. Anyways, works like a charm now. This is useful if you want to use different modules on different devices, or if you want to simplify the mobile design by eliminating certain elements from the page. Here you can apply custom CSS to any of the module’s many elements. The Filterable Portfolio allows you to display your most recent projects in either a Grid or Standard fashion. Select which categories you would like to display. Locate the filterable portfolio module within the list of modules and click it to add it to your page. The active filter URL isn’t working for me, even after disabling all other plugins. It can display posts from any custom post type and create custom filters to display them according to any taxonomy you choose. You would not be able to use it to activate/display two filters at the same time. Enabling this option will place a border around your module. How to add, configure and customize the Divi filterable portfolio module. Next, click the Use Visual Builder button to launch the builder in Visual Mode. In this tutorial we are going to show you how to add Excerpts to your filterable portfolio module and make the changes in your child theme so that you won’t lose the changes when you update/reinstall Divi. this was quite easy. So we can direct people with a url to a specific category, Hi Steve! By default, all text colors in Divi will appear as white or dark gray. Because FilterGrid makes the hierarchy of categories visible (other than divi!) For this example, I’m going to show you how to add a Filterable Portfolio Module to a portfolio page. by Brad Crawford | Blog, Divi | 19 comments. This will change the label of the module in the builder for easy identification. Preview 110+ Premade Websites & 880+ Premade Layouts. I apologize for that. I’m afraid this is not an option in Portfolio Posts pro but is an option in our new plugin: R39: How to Set a Custom Tab Order in the Divi Filterable Portfolio Module F26: Masonry Filterable Portfolio Layout R37: How to Show the Gallery Image Title and Caption on Hover 25 awesome free Divi resources just for you! Filter Font: Default, Bold, Uppercase The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. Exclusive to subscribers only. Keep in mind the free version of the plugin does not have a filterable option. Replace it with our version of that module, DP Filterable Blog, and it should work. You can choose to disable your module on tablets, smart phones or desktop computers individually. Thanks Brad -I had kinda figured it but must have entered the url incorrectly. The DP Filterable Blog module is similar to the default Filterable Portfolio module available in Divi, except it works on any custom post type and has several additional options. Here you can adjust the size of your filter text. I sent an email. You can also customize the style of your text using the bold, italic, all-caps and underline options. The Divi Filterable Portfolio module lets you show posts in a grid layout, and then filter the results using category filter buttons displayed horizontally above the posts. This post may contain referral links which may earn a commission for this site . When a particular category is selected, the list of projects is instantly regenerated with a new list of projects from the selected category. Do you have any custom functions or custom javascript that might be conflicting? When you upload the plugin in the WordPress dashboard, select the zipped file. Masonry Filterable Portfolio Divi Layout. I could have also used custom queries to write my own filters but that wasn’t even necessary. thanks for this info, however is there a way that the page can open with an active filter, rather than having to use a URL to trigger it? Then add a Filterable Portfolio Module to the row. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. It adds lots of other features too, including the ability to load custom post types in a filterable portfolio layout. It’s responsive and will adjust the column number based on the device size without needing to use media queries. It appears this page contains the default Divi filterable portfolio module. Hi guys, I have not worked with Divi for a long time. 1 License. How to Redirect Divi Filterable Portfolio items to custom URLs. Once you switch to our module, the active filter should work. If you could please create a support ticket and send me the URL and the filter you want active, I can provide the script. This is working on our test sites. This option enables/disabled pagination. Let us know if you run into any troubles! If your background is light, then your text should be set to dark. http://yourwebsite.com/page-with-filtergrid-module/?dfg_active_filter=7. You can drag the range slider to increase or decrease the size of your text, or you can input your desired text size value directly into the input field to the right of the slider. Yes, please log into your account and submit a ticket with login credentials. Here you can adjust the size of your meta text. Shockingly, that isn’t a feature built into Divi. Filterable Grid for Divi is the perfect solution if you want to display a filterable portfolio without the need to use Divis build in Project post type. I need it for the actual filterable portfolio to sort projects, not blog posts. However, we can add a simple script to your site that would trigger an active filter of your choice after the page loads. Example: I need to show posts that are in both the Videos for Men AND the Elementary & Middle School categories…. I'm using the current version of the Divi 2.0 theme and Wordpress. “Divi – Filterable Blog Module” is one of the ideal ways for users to filter through posts, projects, products, and any custom post-type in a much more advanced way than users can typically use the Divi Blog module. Use the visual builder to add a Regular Section with a fullwidth (1 column) row under the header of the page. Define a custom background color for your module, or leave blank to use the default color. I have been looking for a way to create my portfolio just the way I want it and with this plugin it is super easy! That's now been done and tested on version 3.26.3. 1. In a recent project I was asked to create a filterable image gallery. “Fullwidth” display one post per row, while “Grid” will display your projects in a tiled grid with multiple projects per row. Once the module has been added, you will be greeted with the module’s list of options. After reading the comments above, do you have to use the filterable blog module? https://diviplugins.com/portfolio-posts-pro-plugin/?active_filter=sample-3. If the category name has more than one word, separate each word with a dash. August 7, 2018. Hi Kara. Within the advanced tab, you will find options that more experienced web designers might find useful, such as custom CSS and HTML attributes. We just haven’t gotten around to adding it to the documentation. Built to get you more shares and more followers. Select a custom color from the color picker to apply it to your border. http://yourwebsite.com/page-with-filtergrid-module/?dfg_active_filter=7, https://diviplugins.com/downloads/divi-filtergrid/. The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. It's a win-win for everyone!!!! Be sure to follow along the video to help you understand it, but it is pretty easy! You can also customize the style of your text using the bold, italic, all-caps and underline options. None of these layouts use the Divi Filterable Portfolio module, the Divi Full Width Portfolio module or the Divi Portfolio module, but these can be incorporated in you prefer to organize your work that way. > Using sorting functionality along with DIVI Filterable Portfolio module. Divi by default display 4 images in Portfolio module. This layout adjusts the number of columns based on the device. Title Font: Default, Bold, Uppercase First you will need to add the filterable portfolio module in your child theme. I’d be happy to provide access if you’re able to take a look: http://new.30edesign.com/architecture/?active_filter=commercial. You’ll need to install the Pro version of the plugin to have access to the filterable module. DIVI provided by Elegant Themes is just great! A CSS class can be used to create custom CSS styling. This helps fund our site. You can change the font of your title text by selecting your desired font from the dropdown menu. View Demo. The Filterable Grid for Divi module by default mimics the style of the Filterable Portfolio module. Harness the power of Divi with any WordPress theme. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Here you can choose whether your text should be light or dark. It is however, a feature that many plugin designers have created. Add the filter category to the URL in this format: Replace with your URL and filter category name. This is the demo of Divi Filterable Portfolio section layouts with 4 different custom hover effects applied to portfolio items. This option lets you control which devices your module appears on. color: #e09900 !important; Within the content tab you will find all of the module’s content elements, such as text, images and icons. Locate the filterable portfolio module within the list of modules and click it to add it to your page. rather than having ‘all’ selected, would be great if option a or option b could be the default open category. Filter Letter Spacing: 1px Enter an optional CSS ID to be used for this module. If you can provide access to the site, we would be happy to take a look. Line height affects the space between each line of your title text If you would like to increase the space between each line, use the range slider to adjust the space or input your desired spacing size into the input field to the right of the slider. is there anyway to do this? With the Portfolio Posts Pro plugin, this is as easy as adding the category to the URL. Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder’s modules. Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor every time you are building a new page. I love this plug-in! Try Out The Drag & Drop Page Builder for FREE! By default, all text colors in Divi will appear as white or dark gray. The Divi Theme includes several portfolio modules which can be used to display "projects". Masonry Filterable Portfolio Divi Layout is a portfolio layout that lets you display your portfolio with featured images of varying sizes. Background images will appear above background colors, which means your background color will not be visible when a background image is applied. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature. Enter optional CSS classes to be used for this module. Hi Kevin. Enter a title, if desired, which will be placed above the list of projects. Unlimited Users. Meta Font Size: 12px Divi Tutorial – Centering the Filterable Portfolio Buttons. Portfolio filter. Is it possible or did I miss something. Here you can adjust the size of your title text. This option affects the color of your border. I believe the best and the easiest solution is to add one more image and have finally 4 images for this module. Post date January 29, 2018 Post author By PK; Post categories In Divi, Tips & Tricks, Tutorials; This one is really easy. Our specialists are highly compassionate and professional in dealing with patient’s dental health. If pagination is disabled, only a single page of projects will be displayed for each category. Footer News, News. To remove a background image, simply delete the URL from the settings field. Within the Custom CSS section, you will find a text field where you can add custom CSS directly to each element. By default, Divi uses the Open Sans font for all text on your page. Discussion in 'Free Divi Community Forum' started by it's_Ben, Jan 5, 2021. it's_Ben New Member Hello, I have a filterable portfolio filtering all my projects, for some reason when I look on mobile the portfolio doesn't work, and whenever I do click on one of the filter tabs some strange overlay covers my screen so I can't hit my menu to navigate. Yay. What I really wanted was a way to replicate the Divi Filterable Portfolio module, but for blog posts. Posted in Divi Customization, Tips & Tricks, Q & A submissions, General know-how, Divi Hacks, Modules, Divi Web Designer Resources, Divi Resources, Filterable Portfolio, Code Snippets, Images and Graphics, Solution Repository The input fields supports different units of measurement, which means you can input “px” or “em” following your size value to change its unit type. Correct, you need to use the Filterable Blog Module. Sadly the Plugin is not working for me. Title Letter Spacing: 1px It is fully responsive and the column number will adjust based on the device size with no media queries needed. Before you can add a filterable portfolio module to your page, you will first need to jump into the Divi Builder. you want to link to. You can also apply custom CSS classes and IDs to the module, which can be used to customize the module within your child theme’s style.css file. You can find this term ID by right clicking on the filter you want to link to, left click on Inspect Element, and viewing the “data-term-id” value in the HTML for the a href element. It also includes a category filter; DP Fullwidth Blog – Like the built-in fullwidth portfolio module, but again with support for the other post types; Once installed, you can use these modules as you would any other Divi Builder module. This free Divi layout is a great way to display your portfolio when your featured images are of varying sizes. Divi comes with dozens of great fonts powered by Google Fonts. Query and filter by a subset of categories for projects, different on a lot of pages. If you are starting a new page, don’t forget to add a row to your page first. Divi comes with dozens of great fonts powered by Google Fonts. The perfect theme for bloggers and online-publications. I would be very happy if you could help me. If defined, this image will be used as the background for this module. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. I needed to do something the divi filterable-portfolio wasn’t able to do. To change default Divi settings and display only 3 items you would need some custom coding and several fixes to make it responsive. DP Filterable Blog – Like the filterable portfolio module, it adds support for posts and custom posts. Model CV layout pack portfolio page. Sneak Peek. By default, all text colors in Divi will appear as white or dark gray. Choose how may posts you would like to display before the list is paginated. Lets Get Started. You can also click the Enable Visual Builder button when browsing your website on the front end if you are logged in to your WordPress Dashboard. edit: active filter link I should have said! Replace the number at the end with the ID of the term (category, tag, etc.) By default, borders have a width of 1 pixel. Unlimited Websites. Borders support eight different styles, including: solid, dotted, dashed, double, groove, ridge, inset and outset.