RequirementsMicrosoft Windows XP / Vista / Windows 7 / Windows 8 / Windows 10
Date addedNov 20, 2018
Pinegrow Web Editor is a work area web supervisor that gives you a chance to manufacture responsive sites quicker with live multi-page altering, CSS and SASS styling and savvy segments for Bootstrap, Foundation and WordPress. Make sites without any preparation or alter your current undertakings. Pinegrow has all that you have to assemble sites: HTML altering apparatuses, styling, structure devices, part libraries and that's only the tip of the iceberg. Utilize component library to rapidly assemble a page mockup. Copy the page and play with various design varieties.
Utilize factors rather and different SASS and LESS treats. Utilize math articulations and capacities like help and obscure to make plans that can be redone by changing only several factors - all continuously. Why stop at mockup? Simply ahead and transform it into a specially crafted website page by styling components with CSS rules. Alter leads through the Visual supervisor or compose the code straightforwardly. Open various pages that share the equivalent template. Style changes are thought about all pages continuously. View them at various screen sizes. Utilize Pinegrow Web Editor as a CMS for your static Html pages. Move components around and double tap on any component to alter its content substance. Need a Bootstrap frame or a navbar? Plan it in Pinegrow, change its design with a solitary snap. Select the shape and duplicate the HTML code. Utilize standard source control apparatuses like Git to deal with your code and to work together on tasks with your colleagues.
Accelerate working with HTML
Rapidly fabricate the design of your site page with incredible visual instruments for including, altering, moving, cloning and erasing HTML components. Embed N components with repeater and adjust the format of different chosen components with one move.
Bootstrap 3 and 4 and Foundation
Transform many system classes into ground-breaking visual devices, for example, designs with resizable sections, lattice show, responsive controls for content, shading, separating, perceivability and even Bootstrap flex classes. Embed components from rich library of segments.
Alter and test your page on all gadget sizes on the double
Utilize multi-page altering to alter the page at various gadget sizes. Effortlessly structure responsive sites with Media inquiry aide device. Include custom breakpoints or let Pinegrow distinguish them by investigating templates.
Gives you a chance to accelerate your work significantly more with shrewd highlights, for example, ace pages that given you a chance to characterize formats for your venture. Transform page components into reusable segments with custom editable territories. Utilize Pinegrow as CMS for static HTML sites.
Make creation prepared WordPress topics
Open or make a HTML page in Pinegrow Web Editor. Add WordPress activities to HTML components and set their parameters. Fare the WordPress subject. Pinegrow creates PHP code and parts the page into PHP topic documents.
Pinegrow adores the code
Pinegrow doesn't conceal the code from you. Alter pages outwardly and through code - in the meantime. Changes made through visual UI are quickly reflected in the code see. Code alters - regardless of whether made in outer code supervisor - are instantly unmistakable on the page and in visual UI. (BTW, this makes Pinegrow the ideal apparatus for finding out about HTML and CSS).
Rapidly construct sites with Blocks
Utilize the gathering of instant site squares to rapidly assemble incredible looking sites. Drag squares to the page, redo the substance, style CSS rules in the event that you need - and your site is finished. You can even make completely customisable WordPress topics with squares.
Alter any page from the web
Pinegrow likewise gives you a chance to open any page from the web. Simply enter the URL and begin altering the remote page: change format, alter content and pictures, adjust CSS rules... This is incredible for altering CSS of server-created pages and for experimenting with layouts. At that point spare altered HTML and CSS documents to your PC.
Utilize Pinegrow close by your most loved code manager
Pinegrow fits directly into your work process. Utilize it close by your most loved code supervisor (with shrewd auto-revive), source control framework, bundle chief and arrangement instruments. Utilize module for Atom to live synchronize alters with Pinegrow.
Alter PHP, ASP and ERB HTML layouts
Outwardly alter HTML formats with dynamic server-side code labels. Double tap on any component that contains PHP, ASP or Ruby on Rails squares to alter the code.
First, a quick look back. In the year since Pinegrow Web Editor 4 was released, we had 10 strong updates with features like Smart WordPress Actions and powerful Visual CSS Grid Editor.
- A note about upgrades to Pinegrow 5: if your license is eligible for free updates (one year after the license purchase and renewal, or as long as subscription is active) you get all Pinegrow Web Editor updates for free, including Pinegrow 5.
- With Pinegrow 5 we focus on improving the workflow of dealing with HTML layout and CSS styling. We even created a feature called “Focus on”. “Focus on…” lets us isolate an element on the page and deal with just this element instead of the whole page. That’s very useful on complex HTML layouts. “Focus on…” command is available in the top toolbar, on the element context menu or with the shortcut CMD+F (CTRL+F on Windows/Linux).
A couple of things happen when we Focus on an element:
The Tree panel displays the structure of the focused element, with all its children nodes collapsed (only the top most level is expanded):
Drag & drop on the page deals only with top level children of the element. For example, grabbing anything within the element will grab the top level child:
- Similarly, dropping an element from the Library panel will place the element on the top level of the focused element
- That’s very handy for dealing with the top level structure of the focused element without worrying that we’ll drop something in the wrong place
If we want more control over drag & drop placement, we can expand relevant nodes in the Tree panel and use it for dropping or rearranging elements:
The “Focus on” menu also contains a shortcut to focusing on the Page layout of the Body element:
The Focus bar also lists the elements that can be inserted into the focused element, if available:
- To exit the “Focus on” mode click on the close icon in the Focus bar or select Clear from the Focus menu
- Improved CSS Styling
- Starting from Pinegrow 3 it has been possible to style elements with inline styles (with HTML element style attribute)
- The benefit of inline styles is that we can jump straight into styling an element, without thinking about classes, ids and CSS rules
- But eventually, all inline styles should be transferred into proper CSS rules. That’s hard to do if inline styles are scattered around the page
- Pinegrow 5 has a solution for that
- Working with inline styles
First, the Style panel now clearly indicates when inline styles are used:
Second, the Quick Create CSS Rule tool offers to transfer the inline styles into a newly created CSS rule:
And the Tree panel shows the style icon next to elements with inline styles. Clicking on the style icon in the Tree jumps straight into Style editor for that element:
The Tree panel filter can be used to only display elements with inline styles:
- With these tools we have the best of both worlds: the freedom to directly style with inline styles and the systematic process for creating CSS rules for those styles
- And some might ask: Why not have a feature that would automatically save all inline styles on the page as CSS rules
- It would be easy for Pinegrow to go through the page and store all inline styles into CSS classes like .rule1, .rule2…
- Although it sounds useful, such feature would lead to messy CSS code. Creating maintainable CSS structure requires strategic thinking about properly naming and organizing CSS rules. That’s not something that an app can do for you
- Creating clean and maintainable code is the top goal and quality of Pinegrow Web Editor. We don’t want to introduce any feature that would go against this
- Other styling improvements
There are more styling improvements worth mentioning:
Stylesheets and their CSS rules can be hidden in the Active Style panel by clicking on the Hide stylesheet icon next to the stylesheet name:
- Before, the “Ignore in Active” function was only available from the Stylesheets menu
Text indent control was added to the Text section of the CSS Visual Editor:
“Customize variable” command (for SASS and LESS files) will ask for the new value if the default value uses a custom function:
This avoids breaking SASS/LESS files with functions that are not yet defined in the section where custom variables are defined:
- Pinegrow uses CSS Autoprefixer when compiling SASS and LESS files. Now you can control the Autoprefixer configuration in the Settings dialog. This feature is for advanced users, most users can just leave the autoprefixer settings as they are
- The Project panel
- Note, the Project panel is a Pinegrow PRO feature
Now, we can drag images, stylesheets and scripts from the Project panel to the page. Draggable files have a Drag icon displayed next to their names:
- Dragging an image inserts the image to the selected place on the page or in the Tree
Dropping an image on an existing image on the page replaces that image:
- Dragging a stylesheet (.css file) to the page appends the stylesheet to the page
Image previews in the Project panel now also display the dimensions and size of images:
- And using the search in the Project panel expands all folders with matched files
- The Tree panel
The Tree panel got a “Filter” function that lets us display only elements with inline styles, images, texts, links, components or WordPress actions:
The filter works alongside the existing search function that lets us search with strings and CSS selectors:
- Other improvements
- Use arrow keys to select elements
- UP_KEY selects the parent element
- DOWN_KEY selects the first child element
- LEFT_KEY selects the previous element
- RIGHT_KEY selects the next element
- Use SHIFT_KEY with LEFT_KEY and RIGHT_KEY keys to select a range of elements
- Selecting a duplicated element
- A duplicated element is now automatically selected, if the Duplicate command was run on a selected element
- Element dimensions in pixels are shown when an element is selected or hovered with the mouse pointer
- Clicking on a image in the Unsplash photo browser replaces the currently selected image
- Use “Clear code” icon in Insert code in the Library panel to clear the code from the editor
- Page and project thumbnails are now turned off by default on Linux because on Linux, generating thumbnails requires briefly showing a second window. You can turn them on in the Options menu on the Start screen