> For the complete documentation index, see [llms.txt](https://jrpdocs.hyvikk.space/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jrpdocs.hyvikk.space/features/wp-bakery-page-elements/journal-research-grid.md).

# Journal Research Grid

This Widget Adds a Grid View of Selected Issues(Published) on any Page. Each Grid Box shows a Magazine Front Page Kind of Image with Volume-Issue Numbers + it's "Issue Page" URL.

***It Enhances the Look & Feel of "Published Issues" Page and Also helps Admin Add a Separate Image for Each "Published Issue".***

<figure><img src="/files/8TYp6HtBZsxdwS7p42sJ" alt=""><figcaption><p>View of Single Issue (Published) Card</p></figcaption></figure>

{% hint style="info" %}
[WPBakery Page Builder Wordpress Plugin](https://wpbakery.com/) Must be Installed to Use this Element.
{% endhint %}

### About Widget Element

* You can Design your own **"Enhanced Published Issues Listing Page".**
* Add *"any Number of Issues"* that you want to List on a Page.
* You can Skip any Issue if you don't want to Show in Frontend.

#### **To Add & Format "Journal Research Grid" Element (Frontend).**

* Create a Page from **“Admin>Pages>Add New”**. OR **"Edit"** any Page on which you want to ADD this Widget.
* Find **"Page Body / Main Content"** Section.&#x20;
* Click on **"Add New Element".** This will show List of Elements.

<figure><img src="/files/MMqZg7po0WSQPn9OTMAd" alt=""><figcaption><p>ADMIN : Add Element Modal in Edit Page</p></figcaption></figure>

* Search or Find Element Named ***"Journal Research Grid".***
* *Click on it to "**ADD".***
* *By Clicking on it; a Dialog will Appear to Configure the **"Element".***

<figure><img src="/files/zTHJARoTsWVeg2ghstsu" alt=""><figcaption><p>Journal Research Grid Settings</p></figcaption></figure>

### Settings Information

* **Number of Column:** Number of Columns to Show in a Single ROW.
* **Choose Volume-Issue:** To Select from the List of Published Issues. Selected Issues will be added in Issues Grid View. *(Multiple Selection is Possible)*
* **Pagination Options**: Dots Format OR Numerical Format (at the End of Journal Grid Element

**Based on the Selected Volume-Issues from "Choose Volume-Issue" Dropdown; Elements in Settings Dialog will be Generated similar like Below Screenshot.**

<figure><img src="/files/MzQZqVC4joFqfFtR3nw3" alt=""><figcaption><p>Journal Research Grid Settings : Issue Box for Each Selected Issue</p></figcaption></figure>

> **Each Generated Element Represents a "Volume-Issue" Card.**

#### **Now, It's Time to Add Information for Each "Volume-Issue" Card Element**

<figure><img src="/files/3b1AdWHdkU85HVmfiR71" alt=""><figcaption><p>Single Volume-Issue Card Details</p></figcaption></figure>

#### **Information About Fields :**&#x20;

* **Image :** Image to be shown within the Card.
* **Title :**  Title of Card (E.g. Volume Number OR ISSUE Name)
* **Description :** Short Description of Card (E.g. Issue Number OR Info. About Published Issue)

<div align="center"><figure><img src="/files/xG1FNAqrhcIooGgc2fpd" alt=""><figcaption><p>Visual View of Each Card on Frontend [After Adding Information]</p></figcaption></figure></div>

#### ADD INFO IN "Volume-Issue" CARD

* Fill Up All the Required Fields for Each Card.
* Click on **"Save Changes"** Button to Save.
* **Done !**&#x20;

### Voila! You have Successfully Added "Journal Research Grid" Element on your Page.

## &#x20;                                       [Element View in Page](https://journalpublicationv5.hyvikk.solutions/journal-wp-bakery-elements/)

<figure><img src="/files/kfgXtr7NGy0p2UkYBs8I" alt=""><figcaption><p>Frontend Page View with "Journal Research Grid" Element</p></figcaption></figure>