Search results for: components
124 results found.
Components
Smart components are reusable website elements that can have editable areas. Go through this article to learn about everything you can do with them.
Creating a reusable navigation component in multi-page projects
A step by step guide to defining and using reusable navigation with Pinegrow Components.
Using Master pages in a multi-page project
Using a Master page in a Pinegrow project makes building quicker and keeps your design unified.
Editable areas
Editable areas are used in both Master pages and Smart components. They are layout elements that can be customized on content pages and in component instances. Different aspects of elements can be defined as editable: the content, attributes, and classes.
Page Libraries
Load any website into the Library panel and use it as a component library from where you can drag elements to your page.
Journeying to improved profitability with Pinegrow
I’m Tim Bowerbank, Director, www.pendigital.co.uk and I am a recently converted advocate of Pinegrow. I have been using Pinegrow for 18 months now. It’s transformed our web development business into a more productive, and hence, profitable venture. I want to tell you about our journey to improved profit with Pinegrow.
Component Libraries
Vue Designer supports all Component Libraries!
Components with WordPress actions
Use Pinegrow’s static HTML components in combination with WordPress actions to create reusable dynamic elements.
The Library of Bootstrap components
Use the Library panel to add Bootstrap components to the page.
Reusable libraries
Every project can be loaded as a library of another project. That means that all the components and resources de ned in the library project will become available for use in the current project. That’s a powerful way of defining reusable
website components.
Release 2.3 & 2.3 PRO – Nov 12. 2015
Pinegrow Web Editor 2.3 is out. This has been our biggest update so far. The new Pinegrow is faster and uses 20x less memory than before.
How-to use Material Design for Bootstrap (MDB) UI Kit with Pinegrow
Material Design for Bootstrap is a popular and highly customized version of Bootstrap 4 with 500+ material UI elements, 600+ material icons, 77+ CSS animations, 9+ useful plugins, SASS source files, templates, tutorials and many more. As you will discover in this tutorial, it is the perfect candidate to start a web project with Pinegrow.
Master Pages
Master pages are a feature that enable you to define common structure and interface markup elements for your Web site, including headers, footers, style definitions, or navigation bars.
Vue Designer – Vitepress, Astro and more…
Vue Designer v1.1 update is available now.
Nuxt
Nuxt provides is an amazing Vue Meta-framework that provides one of the best developer experience both via features and it’s innovative set of toolsets.
Introduction to Tailwind CSS
Tailwind CSS is a CSS framework that defines 1000s of CSS classes that are used to replace working with CSS rules and properties directly.
îles
îles is a joyful static site generator that’s batteries included, supports the Islands architecture with islands made of multiple frameworks such as Vue, Preact, SolidJS, Svelte and Plain Javascript.
Components, Master pages and Libraries
Follow practical examples to learn how to use master pages, smart components, editable areas and other Pinegrow features for managing static HTML projects.
Pinegrow Web Editor 7.93 – March 6, 2024
Pinegrow Web Editor 7.93 brings usability improvements to all users, and introduces a whole new way of working with WordPress.
TailwindUI
TailwindUI is a premium Tailwind component library created by authors of TailwindCSS. Tailwind Visual Editor adds the TailwindUI library into the Library panel and extends visual controls with Tailwind UI extensions.
App Tree & State Panel
With your Vue app, you think of components and its state.
Foundation
See how Pinegrow can help you to work with Foundation 5 and Foundation 6.
Tutorial – Using CodePen components in Pinegrow projects
A step-by-step guide to using the resources on CodePen in your own Pinegrow Web Editor projects.
FAQ
Although we try to provide as much information as possible on our website, it appears that many questions regularly come up on the community forum or in the support mailbox. We thought it might be a good idea to gather all these frequently asked questions and our answers in one place.
Using CodePen components in Pinegrow projects
A step-by-step guide to using the resources on CodePen in your own Pinegrow Web Editor projects.
Pinegrow Web Editor 5.96 – May 14, 2020
Improved Page Libraries – Editing XHTML Files – Preserve attribute case – #Link mapping – Register WordPress Taxonomy supports Blocks editor – Bug Fixes
Projects
Projects allow you to open any folder as a project. The file tree of the folder is displayed in Project panel. There you can easily open pages, add new ones, delete unneeded files. Note: the use of many template resources requires that you set-up a project folder.
Vue Designer — a Visual Editor for Building Vue Applications
Introducing the new visual IDE for Vue, by Pinegrow.
Release 2.5 – 8. Jan 2016
Pinegrow 2.5 is available for download.
Release 2.6 – 3. Feb 2016
Pinegrow Web Editor 2.6 with improved UI, better code editing and more.
Creating a Slider with Pinegrow Interaction 2
A step-by-step tutorial about creating custom sliders with Pinegrow Interactions 2.
Interactive Introduction to Pinegrow
New to Pinegrow? This interactive guide is the best place to start. We’ll go through all Pinegrow panels and take them for a spin.
Pizzeria Static HTML into Vue Islands with îles, Vitepress & Astro
Learn with Vue Designer – Course 1
Release 2.7 – 3. Mar 2016
Pinegrow 2.7 is available for download.
HTML Snippets
Add any HTML element into a custom snippet library and reuse it on the same page, on other pages and even in other projects.
Pinegrow Web Editor 5.93 – February 3, 2020
Insert special characters, exclude project folders and files, updated device presets and UI improvements.
Pinegrow Web Editor 7.92 – January 16, 2024
Pinekit, a free component and template library – Inline SVG images with one click – AI Assistant tutorials – WordPress Block supports settings – Bug fixes
What’s new in Interactions 2.0?
See all the new features in the latest Pinegrow Interactions update.
How Does Pinegrow Compare to Webflow for Web Designing Without Code?
There are a number of products on the market to allow users to put together a static webpage with little or no coding. On the surface, the Pinegrow Web Editor and Webflow are very similar products that let you accomplish this task. They both allow users to easily assemble web pages visually, using a variety of elements that can be positioned and styled on the page with visual controls and without writing a single line of code. Pinegrow does this in the form of a stand-alone web app that does not require the internet, while the Webflow builder is completely on-line.
Pinegrow Web Editor 5.992 – March 18, 2021
Bootstrap 5 Beta – Improved text editing – WordPress custom image sizes – Bug fixes
Newsletter #8 – July 17, 2020
Loading Screen tutorial – Adding custom PHP code to WordPress themes – Discover the Library Panel
Creating plain HTML and Tailwind CSS Timelines with Pinegrow
Pinegrow makes creating repetitive elements easier with HTML snippets. This is a step-by-step guide to putting together a timeline in Pinegrow.
Sliders
Learn about using the slider blueprint to create custom sliders.
Presentations
Learn about using the presentation blueprint to create custom presentations.
Galleries
Learn how to use galleries blueprints to create custom image galleries.
Newsletter #7 – July 1, 2020
Loading Screen tutorial – Adding custom PHP code to WordPress themes – Discover the Library Panel
Summer Nights 2 – Creating a CSS Grid layout in Pinegrow
CSS Grid has gained much wider support, with virtually all modern browsers supporting it. Page layout is significantly easier than using traditional floats and widths, and best of all, Pinegrow has a variety of visual tools to help out!
In this tutorial I’m going to walk through putting together a simple web page using CSS Grid using the visual tools of the Pinegrow Web Editor. Along the way we will also look at some tricks and tips for using CSS Grid, as well as looking at the drawbacks.
How to use and customize Bootstrap Blocks
Pinegrow features a library of Bootstrap 4 blocks to make assembling a page quick and easy. These blocks are non-opinionated and easily altered to give your pages a custom look.
Pinegrow CMS for static HTML websites
No code on the server. No API calls. No generators. Just HTML.
Pinegrow CMS lets end-users edit static HTML websites without touching the HTML code.
Release 2.1 – May 26. 2015
Pinegrow 2.1 with Page tabs, WP goodies and more Hi, Matjaz here, the author of Pinegrow Web Editor. Pinegrow 2.1 is available for download. The update is free if it falls within one year from your license purchase (no problem if that’s not the case – you can get additional year of updates for half
Vue Designer 1.0 – July 6, 2023
Congratulations! You are using the first release of Vue Designer, a powerful visual editor for building Vue applications.
Vite
Live Designer module of Pinegrow Vite Plugin enables visual editing of Vue Single-File Components (SFC) in Vue Designer.
Troubleshooting
Known issues, troubleshooting and workarounds.
Vitepress & Astro
Vitepress is excellent for documentation, Astro for content heavy sites!
The Library Panel
The Library panel contains elements that can be placed on the page. You can also use the Library panel to insert the code directly, to define your own components and load any page as a library.
Vue Designer 1.3 & 1.31 – September 29, 2023
Vuetify add-on, blank templates, improved properties control, remote dev-server, plugin updates and bug fixes.
Pinegrow Web Editor 7.8 – October 31, 2023
Publish projects to Netlify – Disable component scanning – WordPress 6.4 compatibility – Bug fixes and more.
Remote Connection
Known issues, troubleshooting and workarounds.
Add elements to the page
Let’s take a look at how you can add new HTML elements to the page.
Flex – Creating a Tailwind CSS Theme with Gutenberg Blocks and Pinegrow Interactions
A fun tutorial on converting a Tailwind CSS project into a WordPress theme based on Gutenberg blocks. As a bonus, we will use Pinegrow Interactions to create a slider block and a pricing toggle.
The complete guide to customizing a Tailwind CSS theme
A step by step tutorial to creating custom Tailwind CSS themes, including installing the tools and setting up the build process.
Working with Bootstrap modals
Learn how to easily and quickly add modals to your Bootstrap projects.
Release 2.65 – 16. Feb 2016
Pinegrow 2.65 is available for download.
Pinegrow Web Editor 5.94 – February 24, 2020
Create custom WordPress blocks, improved CSS Grid editor and projects.
Release 2.92 – 27. July 2016
Pinegrow 2.92 is available for download.
Overview of the Theme Creation Process
Pinegrow Web Editor with WordPress theme builder lets you visually create and edit WordPress themes.
Release 5.4 – 27. March, 2019
Redesigned element context menu – Copy & Paste actions – SASS fixes – WordPress improvements – Insert actions from the context menu – Visual helpers – Post & Loop settings – Smarter Smart Menu – Reusable Customizer Sections and Fields
Pinegrow WordPress Starter Theme 2 documentation
If you want to create your own WordPress theme with Pinegrow PRO/WP but you do not yet have all the necessary knowledge OR if you simply want to optimize your process and start from a solid foundation and focus on the essentials, using the ST2 is the best opportunity to get started quickly and efficiently.
Introducing the Visual CSS Grid Editor
Pinegrow Web Editor includes a powerful collection of visual tools for working with CSS Grid.
Pinegrow for Dreamweaver Users – User Review
The nice thing about Pinegrow is that it is quickly integrated in your pipeline, and just makes life easier for the front-end coder. In my opinion Pinegrow is what Dreamweaver would have been in a parallel universe.
Release 2.4 – 3. Dec 2015
Resizable views, PHP editing, partials, improved components and many other fixes.
Release 2.21 – Sep 2. 2015
Pinegrow 2.21 – Smart WP menus and bug fixes Hi, Matjaz here, the author of Pinegrow Web Editor. Pinegrow 2.21 is available for download. The update is free if it falls within one year from your license purchase (no problem if that’s not the case – you can get additional year of updates for half
Pinegrow Web Editor 5.97 – July 8, 2020
Tailwind Visual Editor add-on – Drag & Drop with collapsed elements – Reorganized HTML element Library – Copy paste attributes – Combined Undo history and more.
Pinegrow 5 – Nov 20, 2018
“Focus on…” mode, Handling inline styles and other styling improvements, Drag files from the Project panel and more.
Introduction
Both Vue and Pinegrow share a profound affection for HTML-based templating.
Introducing Pinegrow 5
Pinegrow 5 is available for download. It comes with “Focus on…” mode, Handling inline styles and other styling improvements, Drag files from the Project panel and more.
Mastering the Conversion of Webflow design to WordPress Theme or Block plugins using Theme Converter
Theme Converter facilitates turning HTML templates into a WordPress theme or block plugin for the WordPress CMS. This application is designed to work along with your preferred web development tool, such as Webflow.
Pinegrow AI Assistant
Meet your new web development assistant. It knows how to create and transform HTML code, how to manipulate content, come up with CSS styling, make the code accessible, give advice and much more.
Pinegrow Web Editor 7 with 7.0x – Nov 28 and Dec, 2022
Updates – Mac M1 build – Layout tools – Improved CSS editor – Class previews – Responsive interactions and more.
Summer recap 2022
See what we did this summer: three releases, a bunch of tutorials and articles.
Pinegrow WordPress Starter Theme 2
The WordPress Starter Theme 2 (ST2) is a framework for quickly developing your own custom themes based on Bootstrap 4.5.0, SASS and WooCommerce 4.2.2.
Is Pinegrow the right choice for you?
This guide will help you evaluate if Pinegrow Web Editor is a good choice for your needs.
Bootstrap properties common to all elements
Bootstrap defines many helper classes for properties like text color, alignment, responsive visibility and so on. These properties can be set for any element on the page.
Tools & Helpers
Pinegrow contains many helpers and tools that can make you even more productive.
Styling with CSS
Styling – painting and positioning elements – is done with CSS properties and rules. Pinegrow offers a collection of powerful styling tools to suit different tasks and workflows.
HealthHub – a Master page example
A ready-to-use HealthHub project that uses a master page to manage header and footer.
Nuxt UI
Fully styled and customizable components for Nuxt.
Tailwind CSS
Pinegrow Tailwind CSS Addon provides customized visual controls, design panel for theming, and other powerful visual features for your Tailwind CSS projects.
Release 4.1 – Dec 11, 2017
Pinegrow 4.1 is available for download.
Keyboard Shortcuts
Pinegrow has many useful keyboard shortcuts that can make your work even faster.
Release 2.91 – 14. June 2016
Pinegrow 2.91 is available for download.
Release 2.9 – 26. May 2016
Pinegrow 2.9 is available for download.
Vue Designer 1.4 & 1.41- February 02, 2024
Embarking on Our Quasar Journey, Meet Ms. Pine Cone!
Vue Designer
Vue Designer is a visual IDE for Vue applications. It works with every Vite project and frameworks such as Nuxt and Iles.
Pinegrow Web Editor 6.4 – February 10, 2022
UI improvements – Tailwind CSS with plugins – WordPress – Performance and stability
Release 5.1 – 24. Jan, 2019
Open panels in floating windows and arrange them on multiple screens. Easily update Bootstrap, fixed Master pages, WordPress improvements, Starter Theme 2 update and more.
Release 5.3 – 27. Feb. 2019
Open CSS Grid Editor and other tools in floating windows, Collapse / Expand all in the Tree panel, Bootstrap Carousel and more.
Component libraries
TailwindCSS differs from frameworks like Bootstrap in that it comes with no ready-made components like buttons, alerts…
Pinegrow Web Editor 5.971, 5.972 and 5.973 – July 29, 2020
Work with customized Tailwind themes in Tailwind Visual Editor – Faster CSS Grid editor – Bug fixes