> 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/block-elements-for-listing-articles/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>Single Issue (Published) Card Design</p></figcaption></figure>

{% hint style="success" %}
No need to purchase the [WPBakery Page Builder Wordpress Plugin](https://wpbakery.com/) to Use this Element.
{% endhint %}

### About Block Element

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

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

* Create a Page from **“Admin>Pages>Add New”**. OR **"Edit"** any Page on which you want to ADD this Widget.
* Open **"Block Inserter"** Section.&#x20;

<figure><img src="/files/7m8WkfjeVKPBGt27rJ6q" alt=""><figcaption></figcaption></figure>

* Search or Find Element Named ***"Journal Research Grid".***
* Select it, to **ADD** in Pag&#x65;***.***
* Now, Click on Added Block to Open **"Configuration"** Dialog. You can Manage Frontend Listing from Here.

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

### Settings Information

* **Number of Column:** Number of Columns to Show in a Single ROW.
* **Pagination Options**: Dots Format OR Numerical Format (To Load More Items. it will be shown at the End of Journal Grid Element)
* **No of Entries Per Page**: Max Number of Entries to Load for Each Page with Pagination.
* **Grid Height**: Height of Single Issue Card.&#x20;
* **Grid Width**: Width of Single Issue Card (In Pixels).&#x20;
* **Choose Volume-Issue:** To Select from the List of Published Issues. Selected Issues will be added in Issues Grid View. *(Multiple Selection is Possible)*

**Based on the Selected Volume-Issues from "Choose Volume-Issue" Dropdown; Elements in Configuration Dialog will be Generated & Added as Shown Below.**

<figure><img src="/files/QpBHu2LsnyyxA4Vdless" alt="Journal Research Grid Configuration : Generated Issues based on Selection"><figcaption></figcaption></figure>

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

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

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

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

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

* **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)
* **Image :** Image to be shown within the Card.

<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.
* Save the **"Page"** as well.
* **Done !**&#x20;

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

## &#x20;                                       [Element View in Page](https://journalpublication2023v5.hyvikk.solutions/latest-features-v5-0-6/)

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