Blog

New Framework Features: CSS/HTML Editor, Row/Column Link, Accent Colors, Dev Mode..

New Framework Features: CSS/HTML Editor, Row/Column Link, Accent Colors, Dev Mode..

Themify just got another awesome update with more new features and improvements. The Themify Updater has got better and better. Now you can install the required plugins without leaving the demo import lightbox. Other highlighted features include: accent colors, HTML/CSS editor, row/column clickable link, and dev mode. Read on this post for more details.

Module Option Grouping

As we are growing our module list and its options, we are grouping the options in each module. The options are grouped in accordions similar to the styling tab. This gives a cleaner user interface and it also help users to navigate through the options easier.

Builder UI Grouping

Ajax Install & Activate Required Plugins

Installing the theme demo has never been this easy before. Now, all the required plugins can be installed and activated with Ajax. Just select a skin, then click the "Install" button for the required plugin(s) and it will install the plugins without having to reload the page. The whole demo import process is seamless and quick.

Ajax Install Required Plugins

Accent Colors

As CSS variables have become widely supported by all top browsers, we've converted our themes to use CSS variables for accent colors. This makes the accent color customization very easy. On the Customize panel if you pick the accent color, it will apply to all elements that uses the accent color. For example: in Ultra, if you pick an accent color, it will apply the color to all elements that have the Ultra's red color.

Accent Color Styling

Row/Column Clickable Link

In the last major update, we added the tooltip feature to rows, columns, and modules. Now we've complemented it with a clickable link. You can make the whole column or row clickable by inserting a link. If you want a big area to be clickable with a mixture of different content, this clickable link feature is perfect for you. Add the tooltip on top to indicate it is clickable and grab attention from the reader.

Row/Column Clickable Link

More Tooltips!

Yes, more tooltips! We've been obsessed with the new tooltip feature recently. Now you can enable tooltip on the Builder's Menu module and the main navigation menu on Ultra and Shoppe. It uses the WordPress menu link's title attribute for the tooltip text. To enable menu tooltip, go to Themify > Theme Settings > Theme Appearance, check " Enable menu tooltip".

Menu Tooltip

HTML Editor

We've converted the Plain Text module as Shortcode/HTML and incorporated a HTML editor on it. You can use it to write shortcode, text, or HTML code just like before. The awesome thing is it has a HTML validator with code highlights and auto closing tags. If you write an invalid HTML code, it will alert the error on the editor. This can help to reduce the chance of adding invalid HTML code on your site.

HTML Editor

CSS Editor

You may be aware that we also added a CSS editor on the Builder and Customize custom CSS panel. The editor also has code highlights and auto closing tags like the HTML editor. If you insert an invalid CSS code, it won't let you save the custom CSS panel. No chance of adding invalid custom CSS to your site!

CSS Editor

Dynamic Query With Advanced Products/Posts

In the latest Builder Pro update, you can enable/disable the dynamic query option on the Advanced Products and Archive Posts module when using them in Pro archive templates. To put this in simple words, now you can use Advanced Products in search template to display products in the search results. With the dynamic query disabled, you can query posts from other categories in the post archive templates.

Dynamic Query

Dev Mode

For the Themify developers out there, we have a nice feature added in the Themify development mode. Now you have an additional option to disable concate CSS once Themify Development mode is enabled. With concate CSS disabled, all modular CSS files are loaded individually which allows you to debug easier.

Themify Dev Mode

11 Comments

  1. Shubham Patel
    Mar 29, 2022 @ 14:24

    Amazing update. You always provides best customisation options.

    Reply

  2. Blake
    Mar 29, 2022 @ 15:22

    Cool! Thanks for the continued awesomeness and support!

    Reply

  3. Nick Suy
    Mar 29, 2022 @ 16:01

    Great update!

    Reply

  4. huekland
    Mar 29, 2022 @ 16:14

    nice update, make life easier with short code widgets

    Reply

  5. Eric
    Mar 29, 2022 @ 21:24

    Thumbs up!

    Reply

  6. Paulo
    Mar 30, 2022 @ 15:30

    Very nice! thank you so much :)

    Reply

  7. Bluecorner
    Mar 30, 2022 @ 15:52

    Great UI/UX improvement. Always looking forward to next step.

    Reply

  8. Amanda
    Apr 05, 2022 @ 16:00

    You’re the best! Great improvements to an already amazing product :)

    Reply

  9. Susan
    May 04, 2022 @ 01:58

    Row/Column Clickable Link !!!!!!
    That’s exactly was I always wanted ….

    Reply

  10. Chiwetel Obi
    May 12, 2022 @ 10:17

    This is truly improving the experience. I appreciate the new features and improvements. Keep doing what you do best, Themify!

    Reply

  11. Eunice
    May 24, 2022 @ 09:28

    Great new features.
    What I love the most are the CSS and HTML editors. I love tinkering with my site from time to time, the editors make everything far easier. The invalid CSS failsafe is a stroke of genius because my tinkering is most times far from correct : p.
    Thanks Themify.

    Reply

Reply