Skip to main content

Documentation: YOOtheme Elements

Extended Grid Element

Extended Grid Element is only available in the PRO version.
Unlock this and other features by upgrading to Joomill YOOtheme Elements PRO

The Extended Grid element is a flexible card grid. Each card can combine a title, meta text, description, up to 3 images, a video, an icon, up to 3 links, a social-icon block and a nested list, and you choose exactly where each of those pieces appears within the card. It also supports masonry layouts, a parallax scroll effect, and a filter navigation to let visitors narrow the grid down by tag.

In the YOOtheme Builder, open the element picker and look for the Joomill Extensions group of elements, then select Extended Grid.

Content tab

Items Add one or more cards.
Display Show or hide the title, meta, content, image, video and link fields on every card without deleting the content itself.

Item

Title / Meta / Content The card's heading, small meta text and description. Content supports rich text formatting.
Image 1 / Image 2 / Image 3 Up to 3 separate images per card, each with its own alt text, focal point and text color, positioned independently in the Settings tab.
Icon / Video An icon from the icon library and a video, shown alongside or instead of the images.
Link 1 / Link 2 / Link 3 Up to 3 links per card, each with its own text and ARIA label, and its own style set in the Settings tab.
Panel Link Makes the whole card clickable to this URL, separate from Link 1/2/3. Requires "Link panel" enabled in the Panel settings.
List Items An optional nested list of extra lines within the card, for example a feature list.
Social Up to 5 social links, each with a link, ARIA label, icon and title. Paste a profile URL and a matching brand icon is detected automatically.
Tags A comma-separated list of tags used by the Filter navigation, e.g. blue, white, black.
Panel Style / HTML Element Give this individual card its own boxed or tile style, overriding the grid default.

Settings tab

Masonry / Parallax / Parallax Justify / Parallax Start-End Pack cards of different heights into a gap-free masonry layout, or move columns at different speeds while scrolling.
Column Gap / Row Gap / Divider / Column Alignment / Row Alignment Spacing and alignment between grid columns and rows.
Columns (Phone/Tablet/Desktop/Large Screens) Number of columns at each screen size, from 1 to 6, or Auto to size columns to their content.
Filter Enable a filter navigation built from the Tags field, with its own animation, order (alphabetical or manual), style (tabs or subnav variants), an optional "All" control, position (top/left/right) and alignment.
Panel Style / Link Panel / Hover Style / Padding / Image Without Padding / Max Width / 1-Column Content Width / Image Height The default boxed or tile style for every card, and how images sit within it.
Title / Meta / Content Style, Position (A–Z within the card), Alignment, Decoration, Color, Element, Margin Style each text block and choose exactly where within the card it appears.
Images Layout Stack Image 2 and Image 3 or show them side by side when placed at the same position.
Image 1 / Image 2 / Image 3 Width/Height, Loading, Border, Box Shadow, Box Decoration, Link, Hover Transition, Position (A–Z), Alignment, Margin, Inline SVG, SVG Color, Text Color Each image has its own identical set of size, position and style options.
Video Position / Width/Height / Autoplay / Border / Box Shadow / Link / Alignment / Margin Size, position and playback behavior of the video.
Icon Position / Width / Color / Link / Alignment / Margin Size, color, position and optional link for the icon.
Social Style / Grid Direction / Column-Row Gap / Alignment / Show Title / Icon Width / ARIA Label / Attributes / Margin / Position Style the social-icon block, including icon-only, button, or nav styles, and where it appears in the card.
List Type / Alignment / Marker / Marker Color / Style / Size / Divider / Content Style / Content Color / Icon / Icon Color / Icon Alignment / Margin / Position Style the nested list and where it appears in the card.
Links Layout / Alignment / Position (per link) Stack the 3 links or show them side by side, and place each independently in the card.
Link 1 / Link 2 / Link 3 Text / ARIA Label / Attributes / Download / Nofollow / Noreferrer / Style / Size / Full width / Margin Each link has its own identical set of style options.
Position, Margin, Max Width, Alignment, Text Alignment, Animation, Item Animation, Visibility, Remove Container Padding The usual layout options shared by all Builder elements.
CSS Custom CSS for this element. Selectors .el-element, .el-nav, .el-item, .el-title, .el-meta, .el-content, .el-image, .el-image-1/2/3, .el-icon, .el-link, .el-link-1/2/3, .el-list and .el-social are prefixed automatically.