Skip to main content

Ideal Grid – Documentation

Ideal Grid takes the full YOOtheme Pro grid and adds text on hover, badges and polished hover effects for portfolios, shops and team pages, without any CSS.

Contents

Requirements

  • Joomla 4.4, 5 or 6
  • PHP 8.1 to 8.4
  • YOOtheme Pro 4 or 5

Installation

  1. Download the ZIP from My licences or from the link in your order e-mail. Do not unzip it.
  2. In Joomla, open System › Install › Extensions and drop the ZIP into Upload Package File.
  3. Ideal Grid enables itself. There is nothing else to switch on.

A new version installs the same way, over the old one. Your content and settings are kept.

Licence key and updates

Your licence key (format IDPC-XXXX-XXXX-XXXX-XXXX) is in your order e-mail and on the My licences page. Paste it once per site:

  1. Open System › Update › Update Sites.
  2. Click Ideal Grid. Joomla shows “missing download key”.
  3. Paste the key into the Download Key field, then click Save & Close.

New versions then appear in System › Update › Extensions and install in one click. Updates and e-mail support are included for 12 months. After that, the extension keeps working with no time limit; only access to new versions stops. You can renew at any time from My licences.

The key does not go into the plugin settings or into YOOtheme. The same key works for all your IdealPC extensions.

1. Add the element

In the YOOtheme Pro page builder, add the Ideal Grid element (group “IdealPC”). It has all the settings of the YOOtheme Grid element (columns per breakpoint, gaps, dividers, panel styles, image, title, meta, content and link options), plus two extra tabs: Hover (Ideal Grid) and Badges (Ideal Grid).

2. Items

Each item can have an image, a video or an icon, a title, meta text, content and a link, as in the YOOtheme grid. Ideal Grid adds:

  • Hover title and hover content: shown over the image when the mouse moves over it.
  • Hover image or hover video: replaces the image on hover.
  • Badge and badge colour: a small label on the image, e.g. “New” or “-20%”.
  • Tags: used by the filter navigation.

3. Hover effects

  • Hover style: dark overlay, gradient to bottom, frosted glass (blur), primary colour, secondary colour or muted.
  • Text position: centred, bottom left or bottom centre.
  • Animation: fade, slide up from bottom or zoom.
  • Always show the hover text on mobile: recommended, because touch screens have no hover.

4. Badges

Set the default badge colour, the position (top left, top right, bottom left, bottom right) and the shape (rounded, slightly rounded or corner ribbon) in the Badges tab. Each item can override the colour: primary, dark, light, success (green), warning (orange) or danger (red).

5. Filter, masonry, lightbox

These work as in the YOOtheme grid: enable the filter navigation and give each item one or more tags (comma-separated), enable masonry for images of different heights, and the lightbox for a gallery.

Languages

The settings are shown in the administrator’s language (English, French, German or Italian). Your content is shown as you enter it; on a multilingual site, create one grid per language page.

FAQ

What is the difference with the YOOtheme Grid element?
Ideal Grid includes everything the YOOtheme grid does and adds hover text, hover backgrounds and animations, and badges. See the comparison on the product page.
Can I switch an existing YOOtheme grid to Ideal Grid?
Add an Ideal Grid element next to it and recreate the items; the settings are the same, so it is quick.
Does it work with dynamic content?
Yes, like the YOOtheme grid, items can be linked to dynamic content sources.

Support

A question, a bug, an idea? Write to This email address is being protected from spambots. You need JavaScript enabled to view it. with your Joomla, PHP and YOOtheme Pro versions and, if possible, a link to the page. I reply personally, usually within one working day.