Salient 12 is a major release built around responsive control. Many page builder element settings can now hold separate values for desktop, tablet, and phone, and two new elements, Scrolling Text and a Self Hosted Video Player, join the builder. On top of that it adds 40 Salient Studio templates, two full demo sites, a switch for animations on mobile, and a new off canvas menu style. If you build layouts that have to hold up on every screen, the per-device settings are the reason to update.
Nothing you have already built changes when you move to 12. The new controls are opt-in and start from your existing values, so an old page renders the same until you decide a breakpoint or an element needs something different.
It is a large release, 72 changes in total, but the weight sits in a handful of features you will reach for. Here are the seven, then the smaller improvements and the fixes.
Set padding and sizing per device
Salient’s builder has carried responsive controls in a few places for a while. In 12 they become a consistent pattern: a device group attached to a setting, each with its own value for desktop, tablet, and phone. Open the setting, switch between the three device views, and the number you type applies only to that breakpoint. The same padding no longer has to serve a 1440px desktop and a 390px phone.
The settings that gained device groups in 12 are a specific set rather than every field:
- Row and Inner Row: top and bottom padding, translate X and Y, and minimum width
- Column and Inner Column: padding, margin, and maximum width
- Fancy Box: minimum height and padding
- Image With Animation: margin
- Divider: height
Tablet and phone inherit the desktop value until you override them, so adding 12 to an existing site costs nothing until you choose to tune a breakpoint. This is the release’s headline: it turns a pile of custom media-query CSS into fields in the panel.
40 new Salient Studio templates
Salient Studio is the built-in library of pre-built sections and pages you drop straight into the builder. Version 12 adds 40 new templates to it, so the starting points for a hero, a pricing block, or a team section are wider before you touch a single row.
The library also gains a small but welcome control: you can now sort templates by date or alphabetically, which matters once the list is long enough that scrolling for the one you want becomes the slow part.
Two new demos: Wellness and Nonprofit
Demos are complete sites you import as a foundation, and 12 ships two new ones: Wellness and Nonprofit. Each is a full layout, styled and populated, that you can import and then rewrite into a client build rather than starting from an empty page.
The release also folds refreshed dummy images into several of the older favorites, including Business, Corporate, Agency, and App, so the demos you already knew import looking less dated.
Scrolling Text, a new element
The new Scrolling Text element, filed under Typography, animates a line of text across the screen in a continuous loop, the oversized moving headline that used to mean a marquee plugin or a hand-written CSS animation. Add the element, type a heading into it, and it scrolls.
The controls are the ones you would want: a scrolling direction, standard or reverse; a speed running from slowest through to static; a text color; and a custom font size with a separate value for mobile. You can set how many times the text repeats to keep the loop unbroken, and add a divider between repeats. The Scrolling Text element page shows it in motion.
A Self Hosted Video Player element
The second new element plays video you host yourself. The Self Hosted Video Player, in the Media category, takes an MP4 or WebM file you have uploaded and plays it inline on the page, with a preview image, an aspect ratio you can set per device, alignment, autoplay, and looping.
Two of its options are about weight. A lazy-loading mode holds the video download until the viewer presses play, which keeps several clips on one page from all loading at once, and a “replace with image on mobile” option serves the preview image instead of the file on phones. It is the element to reach for when you want your own footage on the page and none of the branding or tracking an embed brings with it. The Self Hosted Video page has a working example.
Turn on element animations for mobile
Salient’s page builder animations, the column and image reveals that play as you scroll, have run on desktop and tablet while staying still on phones. Version 12 adds a theme option that lets them play on mobile too.
It sits in the Salient options panel under General settings > Functionality, as Page Builder Element Animations On Mobile Devices. It is a single switch, and the choice is a real one: motion adds life to a page, and it also costs a little on the phones where performance budgets are tightest, so the control leaves the call to you per site rather than forcing it.
A Fullscreen Split off canvas menu
Off canvas menus are the panels that slide or expand over the page from a menu button, and 12 adds a new style for them: Fullscreen Split. It covers the screen and divides it into two panels, which gives a navigation room to pair links with an image or a second column of content instead of a single stacked list.
Choose it from the Off Canvas Menu Style option in the Salient panel. The new Nonprofit demo uses it, so you can see the style in place before committing to it on your own site.
Everything else in Salient 12
Beyond the spotlights, 12 sharpens controls you already use. Columns gain a z-index field and translate X and Y transforms, the Icon element takes a custom color, Highlighted Text adds gradient fills and a Text Outline style, the Post Grid adds two grid styles and per-item animation, and Tabs gains a vertical sticky-scroll layout. Developers get two openings: a child theme can now override Salient’s WPBakery element templates, and new filters attach page metaboxes to custom post types. Forms pick up new inline styles and field controls, and Imagify can serve WebP for the Single Image element.
The release also clears about 28 bug reports, mostly IE11 sizing, lazy loading in RSS feeds and AMP, and WooCommerce and plugin conflicts. The full 12.0 changelog has the line-by-line.
How to update
Salient 12 is a major version, so treat the update like one: back up the site and run it on staging before production. Update the Salient theme first, then its bundled plugins, which move to Salient Core 1.5 along with new Nectar Slider, Portfolio, Home Slider, and Demo Importer versions; keeping them in step holds the editor and front end in sync.
After updating, clear your browser cache and any caching plugin, and regenerate minified CSS and JS if you run a minification plugin, or the stale assets can hide the new styles. Version 12 also fixes PHP 7.4 compatibility, so a current PHP version is fine. The standard update steps cover the rest.
Update, then build for the screen
The through-line in 12 is control that follows the screen: spacing that changes by device, video you host yourself instead of handing to an embed, and motion you can allow on phones or hold back. It is the release where Salient stopped assuming one layout could serve every width.
Update, then open a page that has always looked cramped on mobile and give its rows their own phone padding. That is the ten-minute win waiting in this one.
Frequently asked questions
Will updating to Salient 12 change how my existing pages look?
No. The features in 12 are opt-in, so a site built on an earlier version renders the same after the update. Per-device values inherit your existing desktop setting until you set a tablet or phone value, the option to run animations on mobile stays off until you switch it on, and the two new elements only appear where you add them.
What is the difference between the Self Hosted Video Player and Salient’s Video Lightbox element?
The Video Lightbox element opens a video in an overlay when a viewer clicks a trigger, and it is built for YouTube or Vimeo links. The Self Hosted Video Player added in 12 plays a file you have uploaded, MP4 or WebM, inline on the page, with its own controls, autoplay, and lazy loading. Reach for the player when you want your own footage on the page without a third-party embed; it also carries a lightbox mode of its own if you want the overlay behavior with a self-hosted file.
Will importing the new Wellness or Nonprofit demo overwrite my existing pages?
No, importing a demo does not delete the pages you already have. A full import does add that demo’s pages, images, and sliders, and it applies the demo’s theme options, which is a lot to layer onto a live site. Import on a fresh install or a staging copy, and back up first.
Can I add per-device values to elements I already built?
Yes. The device group appears on the supported settings of any element on the page, including the ones you placed before updating. Open the element, switch to the tablet or phone view on a setting like column padding or divider height, and enter a value for that breakpoint; nothing has to be rebuilt.
