Home/ Release Notes/ Pinegrow Web Editor 7.4 – 26. April, 2023

Pinegrow Web Editor 7.4 – 26. April, 2023

New CSS Tree Inspector – Improved Tailwind Class Inspector – Export theme.json in WordPress – AI Assistant improvements and tutorial.

Download Pinegrow 7.72

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 8fc62d5ce341aee21851eeb8eeb1ce0d3c829967

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 5688a76765d3108bc4e7ca56a99639efd2d5b446

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: 38ffd9a3e022a37b3b4112c6ceaebf0a7b65352c

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 165eb13033ff0f5eda6ec15a2beeba4632d159ff

Download Pinegrow 7.6

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: b050e43feb764e5e82a83e793a62f3715ea17797

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 0c11a80469c3ae389e8f2d51b387ea522abf8654

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: afeeefb3424e60f45a991a26811aedf45708e462

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 4196e62fbc56f91ca2f928d077a17c78467b05ab

Download Pinegrow 7.5

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cd4449006d315b5b9825cc2d6976758423a95c

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 8688b47acbae1523b030b0d1c7ec923b890c4f76

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: b322e67373644e9558ab1f3897971558f1869de9

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: abd452ceeb082c009474ae0a3fd047c97a26bfbf

Download Pinegrow 7.4

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cdbd7a24cce183268c7cd47fe0f94a941e9fba

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: b84a266ce222e27ce44ce27b9be91efda6753440

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: bfcba642254734bb77de59efa956cc5f9c98fe67

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: b69944aa1eca7bf5ad19b3c8b16a84939ee98615

Introducing the New CSS Tree Inspector – Beta

This innovative feature simplifies working with CSS styles and is similar to the Tailwind class inspector from version 7.3. With the ability to easily edit, delete, and add CSS properties, as well as work with SASS styles.

Keep in mind that this feature is still in beta and may not be fully polished yet. Your feedback is invaluable in helping to refine and improve this feature.

For now, the CSS Tree Inspector is only available in Pinegrow Web Editor, not in the WordPress plugin.

Accessing the CSS Tree Inspector

To open the CSS Tree Inspector simply navigate to the Style panel in Pinegrow and select the Open CSS Tree command in the menu under Visual Editor Options.

Exploring the CSS Tree Inspector Interface

Designed with user experience in mind, the CSS Tree Inspector functions similarly to browser developer tools. It displays all the styles, inline, and CSS rules that apply to the currently selected element, as well as to all its parent elements. Editing existing values is as easy as dragging the underlined values with the mouse or clicking on color swatches to change the colors.

Commenting and uncommenting properties can be done by simply checking or unchecking their respective checkboxes.

Adding and deleting CSS Properties

To delete a property, click on the value. You can edit the value here, but if you delete the value and press Enter, the whole property is deleted. Adding a new property is just as simple—click on the orange line between existing properties or click on the plus button. From there, you can choose properties from various categories…

…or search directly for the values:

For style attributes, click on the plus icon to save the inline style as a CSS rule, mirroring the functionality of Pinegrow’s current style panel.

SASS Styling

The CSS Tree Inspector supports working with SASS.

Discover Additional Tools

Beyond its core functionalities, the CSS Tree Inspector offers several useful tools, such as the ability to edit media queries…

…or click on the count of how many matching elements are found on the page to select one of them:

Try it and tell us how it goes

Try the CSS Tree Inspector and let us know how it works for you. With the positive feedback received for our Tailwind Class Tree Inspector, we believe that this new feature will be just as helpful for professional users.

Tailwind Class Tree Inspector Improvements

When you uncheck a class, it gets removed from the element but remains visible in the Class Tree. This makes it easy to reapply the class by checking it again. Unchecked classes are marked with an unchecked checkbox and appear slightly grayed out:

To completely remove an unchecked class, just re-select the element. When the tree gets repainted, any unchecked classes won’t be displayed.

Watch the overview of Class Tree Inspector:

WordPress – Export the theme.json file

Pinegrow WordPress builder now allows you to export theme.json file with your WordPress themes. This quick overview covers enabling the feature, adding custom colors and fonts, and customizing your theme.json file with custom code.

AI Assistant improvements

AI Assistant commands are now accessible from the selected element menu. Just click on the magic wand icon to open a dropdown with all saved commands and presets – as well as commands defined in the info page of the current project.

Commands that reference a second element (with #REF) let you easily select any named element in the project as a reference.

To see all these new features in action, explore the HTML Presentation Maker tutorial.

Download Pinegrow 7.72

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 8fc62d5ce341aee21851eeb8eeb1ce0d3c829967

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 5688a76765d3108bc4e7ca56a99639efd2d5b446

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: 38ffd9a3e022a37b3b4112c6ceaebf0a7b65352c

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 165eb13033ff0f5eda6ec15a2beeba4632d159ff

Download Pinegrow 7.6

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: b050e43feb764e5e82a83e793a62f3715ea17797

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 0c11a80469c3ae389e8f2d51b387ea522abf8654

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: afeeefb3424e60f45a991a26811aedf45708e462

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: 4196e62fbc56f91ca2f928d077a17c78467b05ab

Download Pinegrow 7.5

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cd4449006d315b5b9825cc2d6976758423a95c

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: 8688b47acbae1523b030b0d1c7ec923b890c4f76

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: b322e67373644e9558ab1f3897971558f1869de9

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: abd452ceeb082c009474ae0a3fd047c97a26bfbf

Download Pinegrow 7.4

The package includes Pinegrow PRO, WordPress, WooCommerce, Interactions and Tailwind editor.

Pinegrow for Mac (Intel) Antivírus checkedMac: 23cdbd7a24cce183268c7cd47fe0f94a941e9fba

Pinegrow for Mac (M1 / M2) Antivírus checkedMac: b84a266ce222e27ce44ce27b9be91efda6753440

Pinegrow for Windows 64 (Installer) Antivírus checkedWindows: bfcba642254734bb77de59efa956cc5f9c98fe67

Pinegrow for Linux (Zip, 64bit) Antivírus checked Linux: b69944aa1eca7bf5ad19b3c8b16a84939ee98615



Last updated on April 28, 2023 at 4:53 am



Print this article