Search results for: components/page
113 results found.
Using Master pages in a multi-page project
Using a Master page in a Pinegrow project makes building quicker and keeps your design unified.
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.
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.
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.
Creating a reusable navigation component in multi-page projects
A step by step guide to defining and using reusable navigation with Pinegrow Components.
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.
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.
Adding web interactions to Booklers landing page
A step by step tutorial on adding web interactions and animations to a simple landing page.
Quick Introduction to the Pinegrow Web Editor
The Pinegrow Web Editor is a powerful tool, but it can also be a bit daunting. This tutorial will provide a quick walk-through of the main features of Pinegrow that will let you start designing you web project quickly!
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.
Creating a Slider with Pinegrow Interaction 2
A step-by-step tutorial about creating custom sliders with Pinegrow Interactions 2.
Tools & Helpers
Pinegrow contains many helpers and tools that can make you even more productive.
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.
Fantico – Creating a landing page with TailwindCSS and Tailwind Visual Editor
A step by step tutorial about building a landing page with TailwindCSS.
The Library of Bootstrap components
Use the Library panel to add Bootstrap components to the page.
Using SVG images in Pinegrow
Scalable Vector Graphics (SVG) are a light-weight way to display vector images that can be displayed at any resolution and manipulated by both CSS and JavaScript methods.
Discovering Pinegrow Web Editor – The Overview
In this guide I want to give an overview of the main features of the Pinegrow Web Editor, showing the main panels used to put together web pages.
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.
FAQ about creating WordPress themes with Pinegrow
Let’s face it, although made super easier by the use of Pinegrow or Pinegrow Theme Converter for WordPress, the creation of a custom WordPress theme remains a complex task, which requires knowledge and proper planning for the operation to be considered a success.
Make page information meta elements editable in Master pages
How to make master page name, description and other meta elements editable on child pages.
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 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.
Add elements to the page
Let’s take a look at how you can add new HTML elements to the page.
Overview of the Theme Creation Process
Pinegrow Web Editor with WordPress theme builder lets you visually create and edit WordPress themes.
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.
Working with Froala Blocks
A step-by-step guide on how to add Froala Blocks to Pinegrow library and use them to quickly build a great looking website.
Components with WordPress actions
Use Pinegrow’s static HTML components in combination with WordPress actions to create reusable dynamic elements.
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.
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
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.
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.
What’s new in Interactions 2.0?
See all the new features in the latest Pinegrow Interactions update.
How to create a language dropdown with flags in Bootstrap 4
A step-by-step guide to creating a Bootstrap 4 navigation bar with drop down menu for language selection.
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.
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.
App Tree & State Panel
With your Vue app, you think of components and its state.
Working with Bootstrap modals
Learn how to easily and quickly add modals to your Bootstrap projects.
Component Libraries
Vue Designer supports all Component Libraries!
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.5 – 8. Jan 2016
Pinegrow 2.5 is available for download.
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
Foundation
See how Pinegrow can help you to work with Foundation 5 and Foundation 6.
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.
Pinegrow 5 – Nov 20, 2018
“Focus on…” mode, Handling inline styles and other styling improvements, Drag files from the Project panel and more.
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.
Release 2.92 – 27. July 2016
Pinegrow 2.92 is available for download.
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.
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.
Pinegrow Web Editor 5.7 – July 31, 2019
Improved Style editor, Components and Master pages… Plus, a healthy dose of bug fixes.
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.
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.
Pizzeria Static HTML into Vue Islands with îles, Vitepress & Astro
Learn with Vue Designer – Course 1
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 7 with 7.0x – Nov 28 and Dec, 2022
Updates – Mac M1 build – Layout tools – Improved CSS editor – Class previews – Responsive interactions and more.
HealthHub – a Master page example
A ready-to-use HealthHub project that uses a master page to manage header and footer.
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.
Vue Designer – Vitepress, Astro and more…
Vue Designer v1.1 update is available now.
î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.
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.
Pinegrow Web Editor 5.992 – March 18, 2021
Bootstrap 5 Beta – Improved text editing – WordPress custom image sizes – Bug fixes
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.
Introducing the Visual CSS Grid Editor
Pinegrow Web Editor includes a powerful collection of visual tools for working with CSS Grid.
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.
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.
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.
Release 2.6 – 3. Feb 2016
Pinegrow Web Editor 2.6 with improved UI, better code editing and more.
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
Pinegrow Web Editor 5.93 – February 3, 2020
Insert special characters, exclude project folders and files, updated device presets and UI improvements.
Release 2.4 – 3. Dec 2015
Resizable views, PHP editing, partials, improved components and many other fixes.
Release 1.12 – June 5, 2014
CSS improvements CSS vs LESS Until now Pinegrow always used LESS parser to work with CSS files, even when no LESS features were used. LESS and SASS versions of stylesheet were always saved alongside the CSS file. This had some undesirable side-effects: adding unnecessary .less and .scss files in your project; if .css file was edited
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.
Vue Designer — a Visual Editor for Building Vue Applications
Introducing the new visual IDE for Vue, by Pinegrow.
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.
Tutorials
Learn about components, master pages and partials with our step-by-step tutorials.
Pinegrow Web Editor 5.94 – February 24, 2020
Create custom WordPress blocks, improved CSS Grid editor and projects.
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
Remote Connection
Known issues, troubleshooting and workarounds.
Troubleshooting
Known issues, troubleshooting and workarounds.
Component libraries
TailwindCSS differs from frameworks like Bootstrap in that it comes with no ready-made components like buttons, alerts…
Vue Designer
Vue Designer is a visual IDE for Vue applications. It works with every Vite project and frameworks such as Nuxt and Iles.
Keyboard Shortcuts
Pinegrow has many useful keyboard shortcuts that can make your work even faster.
Tutorial – Creating a reusable navigation component in multi-page projects
A step by step guide to defining and using reusable navigation with Pinegrow Components.
Release 2.7 – 3. Mar 2016
Pinegrow 2.7 is available for download.
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 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.
How to use valid W3C documents to maximize your experience with Pinegrow
To the best of our knowledge, Pinegrow is currently the only multi-platform visual HTML editor that allows you to create HTML documents and projects from scratch and import your existing HTML documents and projects to edit them.
Vue Designer 1.4 & 1.41- February 02, 2024
Embarking on Our Quasar Journey, Meet Ms. Pine Cone!
Using the external build process
Learn how to use Pinegrow with an external Tailwind CSS compilation process (not with using the built-in compiler).
Release 2.51 – 14. Jan 2016
Pinegrow 2.51 is available for download.
Bootstrap Visual Editor
No more guessing the correct Bootstrap class name and copy-pasting code from Bootstrap docs. Pinegrow includes everything you need to easily work with Bootstrap-based projects.
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.
Pinegrow Web Editor 7.8 – October 31, 2023
Publish projects to Netlify – Disable component scanning – WordPress 6.4 compatibility – Bug fixes and more.
Presentations
Learn about using the presentation blueprint to create custom presentations.
Sliders
Learn about using the slider blueprint to create custom sliders.
Release 2.65 – 16. Feb 2016
Pinegrow 2.65 is available for download.
Galleries
Learn how to use galleries blueprints to create custom image galleries.
Vite
Live Designer module of Pinegrow Vite Plugin enables visual editing of Vue Single-File Components (SFC) in Vue Designer.
Newsletter #7 – July 1, 2020
Loading Screen tutorial – Adding custom PHP code to WordPress themes – Discover the Library Panel
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.