First of all, we want to thank you for your purchase. We hope our plugin meets your expectations. In this page is explained the process to install the plugin, along with the main configuration options. They are not all included in this documentation, as many of them are just an extension of the Divi’s default portfolio options and their use is very intuitive.

If after reading this documentation you still have any doubts, or you want to ask for any changes or questions, please feel free to send an email to support@destacaimagen.com. We will be happy to answer any question.

1 – How to install

Once we have our WordPress installation with Divi working, we have to install the plugin.

1. In your admin dashboard, go to Plugins > Add new.

2- Click Upload Plugin button, and in the form that appears, select the zip file of the plugin and click Install Now.

3- Once the plugin is installed, activate it by clicking Activate Plugin.

Now that the plugin is installed and active you will see a new module available in your Divi Builder called ‘Grid Portfolio’

2 – Configuration: Content Tab

Under the Content tab of the Divi Grid Portfolio settings you will find the options to configure the projects you want to display in your portfolio.

• Content: configure as projects you want to display. You can configure there the projects of which categories you want to include.
  
• Elements: configure the elements you want to display.
  

Activate/deactivate any of these options to show/hide the element in the porfolio.

Filter Options

If you activate the option ‘Show Filters‘ two new fields will appear:

• Mobile Filters: Choose between three options:
  • Rounded: Show a rounded icon to open the filters in full screen mode.
  • Inline: Show the filters with the same style as in the desktop.
  • Hidden: Hide the filters in mobile devices.

3 – Configuration: Design Tab

Under the Design tab of the Divi Grid Portfolio settings you will find the fields to customize the style of your portfolio.

• Layout: choose between our five different layouts for your portfolio. You will be able to set up the gap between the elements and if you want to animate them when your user moves its mouse over the project with the option ‘Zoom on mouse over’.
  You can see the examples of the available layouts in our demo page here.
• Overlay: configure the overlay layer that appears hovering a project.
  Do you want to remove the overlay? Just select for its two fields the transparent color.
• Title & Categories: select between the three different positions (top, middle, bottom) for the title and the categories of your projects.
  You can also configure to display them only when mouseover.
• Gallery & Gallery Slider: here you can find the options to customze the gallery that prompts after clicking the project. Take a look at the section ‘Gallery‘

The rest of the options under the Design tab are standard design options in Divi. Use them to configure fonts, colors backgrounds, etc. of the different elements of the portfolio. We recommend you to explore them, make changes and see the result in the live preview.

4 -Project Galleries

Under the ‘Content Tab’ you can see the ‘Click Action’ toggle. There, you can configure the behaviour you want when you click in a project of your portfolio. You these options:

•  Open project page: this is default behaviour. The user will be redirected to the project page.
• Open project gallery: The gallery of the project will prompt in the screen. You can shoose between two layouts:
• Images gallery. Only show the image gallery like in the example here.
• Gallery Slider + Project Description. Show a gallery slider like in the example here.

Keep reading to find out how to configure the gallery.

Configure your project gallery

If you go to the edit page of your project (the WordPress’ default edit page, not the Divi’s one) you will see a new toggle options at the bottom called ‘Project Gallery‘. There you can find the fields Gallery Description (only fo full gallery layout) and Images.

Configure these two field to show this content when you click in the project.