Blog

27 Sep 2021

New Framework Features: Inline Editor, Image Resizer, Dark Mode, Google Fonts Importer..

Development / 27 Comments

In case you've missed our updates, there are many new features that have been added in recent releases. Some of the exciting features include the inline editor with live image resizer and the Google Fonts importer. Editing and formatting text with the Builder is so much faster with the inline editor — just click and type. The Google Fonts importer allows you to host your own Google fonts without having to download/upload the font files manually.

Inline Editor

Inline editor allows you to quickly edit any text-based content without having to open the module option panel. Simply click on the text and start typing to edit the content. On the inline editor bar, you can apply formatting such as: link, heading tag, text alignment, text style, bullet/numbered list, colors and fonts.

The inline editing feature is available on any module that has text element such as: Text, Button, Icon, Tab, Accordion, Slider, and more.

Image Resizer

As part of the inline editor, we've added the live image resizer feature. You can resize the images live on the layout without having to enter the image width and height. Just click on the image and drag the handlers to resize it.

Dark Mode

Is your screen getting too bright? We've added dark mode option on the Builder interface, Ultra and Shoppe theme. To enable dark mode on the Builder: turn on the Builder, hover the top toolbar > hover the "Interface Options" and enable "Dark Mode".

Ultra & Shoppe's Dark Mode

Dark mode option in Ultra and Shoppe theme can be enabled on the Themify panel > Settings > Theme Settings > Dark Mode. Once it is enabled, it will turn the site frontend to dark mode. You can schedule the dark mode time range (eg. show dark mode at night time only).

NOTE: If you have customization entered on the Customizer, it might override the dark mode feature because Customizer has higher priority (ie. if you set a background color on Customizer, it will override the dark mode appearance).

Google Font Importer

For those who are concerned about Google Fonts privacy issues (GDPR specifically) or the fonts being blocked in certain countries such as China, we've made it very easy to host your own Google fonts. With any Themify theme, you can import fonts from the Google Fonts library. Once the font is imported on your site, it uploads the font file to your own server, so your site will no longer serve the font from Google servers.

To import Google Fonts: go to WP-Admin > Themify > Custom Fonts, on the "Import From Google Fonts" box, select a font and then click "Import". It will create a custom font and upload the Google Font file to your server. Then the font will be available on the Builder and Customizer's font list.

Hook Content - Click to Select Location

Hook Content is one of the popular features in Themify themes. We've added the "Select Hook Locations" lightbox that helps you to identify where the hook location is on the site. Clicking the hook location on the preview lightbox will select the location for you.