Essential Grid 4 has a new admin, but nothing was taken away: every setting of version 3.2 is on one of the new pages, stores what it stored, and keeps its value. Many settings have plainer names now. Two things help you find them:
- The i next to a setting ends with its place until 3.2, such as “Until 3.2: Source › Type and Category › Post Types”.
- Find a setting in the grid editor and in the skin editor (and the settings search in Global Settings) finds a setting by its old name too, and shows its old name or its old place.
The grid editor: eleven tabs, seven pages
The grid editor of 3.2 had eleven tabs in a row. In 4.0 it has seven pages in a rail, each for one question, plus the top bar (The grid editor).
| Until 3.2 | In 4.0 |
|---|---|
| Naming | The top bar: the grid’s name; the pen, Grid details (the shortcode name and the card image); Embed (the shortcode). The CSS ID is Advanced › HTML id. |
| Source | Content: Source, Which posts, Limit, Media, and Add Items for custom grids. |
| Grid Settings | Layout: the layout, width, ratio, right to left, Cobbles, columns, spacing and blank items. Pagination and Smart Loading’s load more are Navigation › Show more items; Smart Loading’s Wait for Viewport and Lazy Load are Loading › Lazy loading; Media Playback is Items › Media in the grid. |
| Nav-Filter-Sort | Navigation: Filters, Sorting, Search; the positions of the controls are Where the controls sit. The start order (Start Sorting By, Sorting Order) is Content › Order. |
| Skins | Items: the skin card; Change skin opens the skin gallery. The grid’s background is Layout › Spacing and background › Background; the navigation skin is Navigation › Style and memory › Navigation style. |
| Animations | The start animation is Loading › Entrance effect; the filter and pagination animation is Navigation › Change effect; the item hover is Items › Hover. |
| Lightbox | Click › Lightbox |
| Ajax | Click › Open in the page |
| Spinner | Loading › Loading indicator |
| API/JavaScript | Advanced |
| Cookies | Navigation › Style and memory › Remember visitor choices |
| Refresh Preview, Delete Grid | The top bar’s ⋯: Rebuild preview, Delete grid |
| Addons | The top bar’s Add-ons, and the add-ons group under the rail |
Settings with a new name
A selection of the grid editor’s settings whose names changed. The i of each names its old place.
| Until 3.2 | In 4.0 |
|---|---|
| Maximum Posts / Maximum Posts Preview | Content › Limit / Preview items |
| Category Relation | Content › Match |
| Additional Parameters | Content › Extra query arguments |
| Start Sorting By / Sorting Order | Content › Order › Initial order / Direction |
| Media Ratio X:Y | Layout › Image ratio |
| Content Push | Layout › Content below pushes the row |
| Offset Container | Layout › Leave room for |
| Grid Padding | Layout › Space around the grid |
| Main Background Color (Skins tab) | Layout › Background |
| Hide Blank Items At | Layout › Hide blank items below |
| Item No. Added | Navigation › Items per click |
| Item No. Remaining | Navigation › Show remaining count |
| Hide Load More Button | Navigation › Hide the button |
| Page Number Option | Navigation › Page numbers |
| Filter Type / Filter Logic | Navigation › Visitors pick / Show items that match |
| Add Filters By | Navigation › Filter items by |
| Mobile Filter Conversion | Navigation › Phones: dropdown |
| Show/Hide Filter “All” Button / Filter “All” Text | Navigation › “All” button / “All” button text |
| Layout Option (In Line, Dropdown) | Navigation › Filter style (Buttons, Dropdown) |
| Show Number of Elements | Navigation › Show counts |
| Sort Filters Alphabetically | Navigation › Sort A–Z |
| Sort By Text / Available Sortings | Navigation › Sort menu label / Sort options for visitors |
| Exclude Original Media | Click › Skip own media |
| Wait for Viewport | Loading › Start in view |
| Lazy Load / Lazy Load Blurred Image | Loading › Lazy loading / Blur on load |
The skin editor: two boxes, Skin and Layer
The item skin editor of 3.2 had two boxes of tabs: Layout Composition for the whole skin and Layer Settings for the selected layer. In 4.0 the inspector has Skin and Layer, each with the modes Design, Motion and Action (The skin editor).
| Until 3.2 | In 4.0 |
|---|---|
| Layout Composition › Layout | Skin › Design › Layout (Layout, Content area, Content align, Side by side) and Media (Fit, Position, Repeat). Ratio X / Ratio Y is the stage’s Ratio. |
| Layout Composition › Cover | Skin › Design › Cover (Cover area, Colour, Blend mode). Always Visible on Desktop / Mobile is Card › Hover › Always show. |
| Layout Composition › Spaces › Full Item | Skin › Design › Item box |
| Layout Composition › Spaces › Content | Skin › Design › Content box |
| Layout Composition › Shadow | Skin › Design › Shadow |
| Layout Composition › Animation | Skin › Motion: the Hover preset tiles, and under Advanced Media effect, Cover effect, Cover and its layers together and Alternative image |
| Layout Composition › Link/SEO | Skin › Action › When the item is clicked |
| Layer Settings › Source | Layer › Design › Content. Min Height, Max Height and Disable Styling are Layer › Design › Advanced. |
| Layer Settings › Style › Idle | Layer › Design with Idle: Style (font, colours, align), Box (spacing, border, corners, shadow) and Position |
| Layer Settings › Style › Hover | Layer › Design with Hover: Change the style on hover and its rows |
| Layer Settings › Show/Hide | Layer › Design › Visibility. If LightBox is Video is Layer › Action › Lightbox video. |
| Layer Settings › Animation | Layer › Motion › Hover animation |
| Layer Settings › Link/SEO | Layer › Action › When clicked. Use Tag and Fix: !important are Layer › Design › Advanced. |
| Save as Template | The layer menu’s Save as preset… |
| Layer Templates | Add in the Layers panel (Add a layer) and Browse all presets ›; Drop for Style Change is Layer › Design › Style › Presets |
| Item Layout, Show at Width, Show Schematic | The stage, its Width and How a skin is built |
| CSS Editor (Global Custom CSS) | CSS in the top bar: the custom CSS drawer |
| Skin Overview, Create New Item Skin, Import from Grid Templates | Skins: New skin › Blank skin or From a grid template (The skins overview) |
Skin editor settings with a new name
A selection; the i of each names its old place.
| Until 3.2 | In 4.0 |
|---|---|
| Grid Layout | Skin › Design › Layout › Layout |
| Content (Bottom, Top, Hide) | Skin › Design › Layout › Content area (Below, Above, None) |
| Split Item | Skin › Design › Layout › Side by side |
| Media Fit / Media Align / Media Repeat | Skin › Design › Media › Fit / Position / Repeat |
| Cover Type | Skin › Design › Cover › Cover area |
| Background Color (Cover) | Skin › Design › Cover › Colour |
| Item Paddings / Border Radius / Overflow Hidden | Skin › Design › Item box › Padding / Corners / Clip content |
| Use Shadow / Inset Style / Animate onHover | Skin › Design › Shadow › Shadow on / Inside / Only on hover |
| Group Animation | Skin › Motion › Advanced › Cover and its layers together |
| Alt Image on Hover | Skin › Motion › Advanced › Alternative image › Show on hover |
| Add Link To / Link To / Link Target | Skin › Action › When the item is clicked › Clickable part / On click / Open in |
| Source + Element | Layer › Design › Content › Shows |
| Limit By | Layer › Design › Content › Shorten to |
| Text Transform / Font Style / Text Decoration | Layer › Design › Style › Capitals / Italic / Decoration |
| Paddings / Margin | Layer › Design › Box › Inner space / Outer space |
| Position (Absolute) / Align / Display | Layer › Design › Position › Position (Pinned) / Pinned to / Line |
| Show without Hover on Desktop / Tap on Mobile | Layer › Look › Visibility › Always show |
| Hide Under Item Width / Hide Under Type | Layer › Design › Visibility › Hide on small items / Hide by |
| If Media is Video | Layer › Design › Visibility › Video media |
| Advanced Rules | Layer › Design › Visibility › Conditions |
| Use Tag / Disable Styling | Layer › Design › Advanced › HTML tag / No skin styling |
| Transition (in / out) | Layer › Motion › Hover animation › Effect (On hover: Appears / Disappears) |
| Link To (layer) | Layer › Action › When clicked |
Global Settings: five tabs, seven pages
Global Settings had five tabs, with most settings on the first. In 4.0 it has a rail of seven pages, named after what you want to do, and the add-ons’ settings below them (Global Settings).
| Until 3.2 | In 4.0 |
|---|---|
| Settings | Spread over General (who can use Essential Grid, the box on posts, help on hover), Content (post types, messages on your site, the query method), Images & video (lightbox, fallback image, YouTube privacy, video thumbnails), Fonts & icons (icon fonts), Search (Extended search, now under What search finds) and Performance (caching, scripts, troubleshooting). |
| Meta | Custom fields › Custom fields |
| References | Custom fields › References to other fields |
| Global Search | Search › Search from your theme |
| Shortcode Search | Search › Search shortcodes |
| Advanced Tooltips | General › Help on hover |
| Use Own Caching System / Delete Cache | Performance › Grid cache / Clear grid cache |
| Import Full Demo Data | Content › Post types › Import demo posts (with the example post type on, also in Import/Export › Demo data: Import and export) |
Good to know
- Nothing stored changed: a grid saved with Essential Grid 3 opens in 4.0 with every value it had, and the editor saves the same settings.
- The skin editor’s sections and modes: The skin editor.