Search results for: add classes/page
90 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.
Fantico – Creating a landing page with TailwindCSS and Tailwind Visual Editor
A step by step tutorial about building a landing page with TailwindCSS.
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.
Styling Pseudo-classes and Pseudo-elements in Pinegrow
Pinegrow makes adding and styling pseudo-classes and pseudo-elements quick and easy. This tutorial shows you how.
Creating a reusable navigation component in multi-page projects
A step by step guide to defining and using reusable navigation with Pinegrow Components.
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.
A guide to WordPress templates for posts, pages and custom post types
A website usually contains more than an index page and you probably want to create different layouts for different pages and posts for your WordPress theme. The good news is that WordPress can handle all your needs thanks to the use of specific templates that you can create with Pinegrow.
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!
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.
Creating specialized blocks
The Pinegrow Web Editor makes creating Gutenberg blocks easy! However, some blocks have dynamic content or styling that requires some work-arounds to use as a block. In this tutorial we will explore how to add a JavaScript-powered Bootstrap carousel to our custom theme.
Interactive image hotspots – Interactions tutorial
A step-by-step tutorial about creating interactive image hotspots with Pinegrow Interactions.
Implementing user controls in Pinegrow
Accessibility controls are important in web design. This tutorial walks through one method to add controls to your navbar and gives a review of CSS Grid.
Styling with CSS in Pinegrow – A short tutorial
Pinegrow is all about choices. Adding styling to your page is no exception. Whether all code, low-code, or no code Pinegrow can let it happen!
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.
Nested blocks and class toggles
The Pinegrow Web Editor makes creating nested blocks (blocks within blocks) easy! In this tutorial we will look at how, plus we will look at other customizations you can add to your themes.
Tailwind CSS Design panel
The Pinegrow Design panel for the Tailwind CSS framework allows you to easily set up a custom theme without editing any config file or setting up a complex compiler. It also allows you to test alternative designs for your whole project quickly and easily.
Troubleshooting
Because the conversion from HTML to WordPress is not a black box process, there are sometimes edge cases that you will need to take into consideration upfront in order to ensure the successful conversion of your HTML template into a fully functional WordPress theme.
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 the first block
We will use custom WordPress blocks to create a versatile and fully customizable front page for our website.
Add or Remove classes from elements
Let’s take a look at how you can add and remove classes (for example .my-class) from elements on the page.
What’s new in Interactions 2.0?
See all the new features in the latest Pinegrow Interactions update.
Animation properties
Overview of animating various element properties with the Timeline editor.
Overview of the Theme Creation Process
Pinegrow Web Editor with WordPress theme builder lets you visually create and edit WordPress themes.
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.
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.
Show Posts
Show Posts action loops through a collection of posts. Post smart actions can then be used on and inside the Show Posts element to display post content.
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.
Creating custom page dividers in Pinegrow
CSS dividers help with sectioning your content both making your pages more readable, but also enhancing the visual appeal. This tutorial shows how easy it is to add custom page dividers in Pinegrow.
Dynamic Blocks
In addition to normal JavaScript blocks, the Pinegrow Web Editor also offers dynamic PHP blocks. In this tutorial we will look at how to add these powerful blocks to your custom theme!
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.
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.
Element Properties
Use Element properties panel to edit element’s attributes. For example, to edit classes of any element, or to change source and alt text attributes of an image. The panel also contains controls for properties defined by frameworks like Bootstrap.
Adding gradient and SVG backgrounds in Pinegrow
Gradient and SVG backgrounds can add a spark of visual appeal to your sites. Luckily, adding them in Pinegrow is easy!
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.
Creating ACF Pro Blocks
Use Block Smart action to turn any HTML element into a WordPress visual editor block.
Tailwind CSS Floating Tools
The Floating Tools panel allows you to style your Tailwind CSS page with many of the common classes directly within the Page View, speeding up page construction and design implementation. No more switching between the page and the Properties or Style Panel. Let’s explore just what this tool allows you to do!
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
Working with Selectors
Pinegrow Theme Converter uses CSS selectors to add WordPress actions to HTML elements on the page.
Let’s take a look how to use high-quality selectors and solve any issues that might arise.
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.
Using the external build process
Learn how to use Pinegrow with an external Tailwind CSS compilation process (not with using the built-in compiler).
Pinegrow Web Editor 7.3 – 28. March, 2023
Improved AI Assistant with chat and its own panel – Class Tree inspector for Tailwind CSS – Bug fixes
Bootstrap Floating Tools
The Floating Tools panel allows you to style your Bootstrap page with many of the common classes directly within the Page View, speeding up page construction and design implementation. No more switching between the page and the Properties or Style Panel. Let’s explore just what this tool allows you to do!
Release 1.107, April 23 2014
New Pinegrow Web Designer 1.107 is available for download on pinegrow.com with many improvements that will make your work with Pinegrow quicker and more reliable.
Class styles
Tailwind Visual Editor comes with a powerful feature that makes working with Tailwind styles even easier – Class Styles.
Pinegrow Live update log
The exciting story of Pinegrow Live updates.
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 – 1.2 BETA
Beta release of Pinegrow Web Designer 1.2 is available for download on http://pinegrow.com, featuring: – Working with HTML pages that use JavaScript code and plugins – Better Edit code – Visual page synchronization – Support for Revolution Slider and Bootstrap Carousel – Bug fixes At the first glance Pinegrow 1.2 looks very similar to previous releases.
Release 2.92 – 27. July 2016
Pinegrow 2.92 is available for download.
Post Breadcrumbs
Post Breadcrumbs displays the hierarchical path to the current post, either with links to post parents or with links to post categories.
Hybrid Blocks
The missing piece to making custom Gutenberg blocks useful in real-world projects.
Interactions
Use the Interactions action to add one or more interactions to the selected element.
Pinegrow Web Editor 6.1 – July 28, 2021
Design panel with improved backgrounds, filters, harmonic colors and local web fonts – New templates and blocks – SVG icons for every project – Code editor with intelisense, new color themes and better performance – Bootstrap and Tailwind CSS updates – and more!
The Bright Bridge
A free elegant custom Bootstrap 5 and Tailwind CSS theme and website template created with the Design panel in Pinegrow 6.
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.
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.
Pinegrow Web Editor 5.7 – July 31, 2019
Improved Style editor, Components and Master pages… Plus, a healthy dose of bug fixes.
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.
Visual controls
Visual controls are the core of Tailwind Visual Editor. They are located in the Properties panel.
Introducing the New WordPress Smart Actions – with Pine Adventures Tutorial
Pinegrow 4.6 comes with a set of new Smart Actions for WordPress that make creating WordPress themes with Pinegrow even easier.
Selecting target elements
Use the Element selector control to select one or more elements on the page.
Customized Tailwind CSS themes
New in Tailwind Visual Editor – Use Visual controls to work with your custom Tailwind CSS themes.
NEW: Bootstrap Blocks
Use the new Bootstrap Blocks library and a simple three step process to easily create uniquely designed websites.
Introducing Pinegrow Web Editor 6
Do more with less UI.
Introducing Pinegrow Theme Converter
Use your favorite website builder – Webflow, Muse, Dreamweaver, Blocs or any HTML editor – to create custom WordPress themes.
Getting the Most out of Pinegrow UI
Pinegrow comes with a powerful and flexible user interface that gets out of your way when you don’t need it.
Introducing Pinegrow Interactions
Pinegrow Interactions is a powerful visual editor for designing web interactions and animations.
Introduction to Pinegrow Interactions
Pinegrow Interactions is a powerful visual editor for designing web interactions and animations.
Pinegrow Web Editor 5.94 – February 24, 2020
Create custom WordPress blocks, improved CSS Grid editor and projects.
Pinegrow Web Editor 6.3 – Jan 14, 2022
Tailiwnd CSS 3 – Bootstrap 5.1.3 – Broken links checker – Performance and stability – and more.
Vue Designer — a Visual Editor for Building Vue Applications
Introducing the new visual IDE for Vue, by Pinegrow.
Release 1.11 – May 29, 2014
Lots of goodies in this release! The most important is support for defining custom responsive breakpoints together with the media query selection tool. This works on any HTML page, regardless of which framework it is using (or not). See it in action and learn how to use Pinegrow to create responsive sites. Multi-page editing was
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.
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.
Bootstrap 4 element properties
These Bootstrap 4 element properties can be set for any element on the page.
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.
Galleries
Learn how to use galleries blueprints to create custom image galleries.
Presentations
Learn about using the presentation blueprint to create custom presentations.
Sliders
Learn about using the slider blueprint to create custom sliders.
Release 2.2 – Jul 23. 2015
Pinegrow 2.2 with Bootstrap & WordPress Blocks (and more) In this release: ▪ Blocks for Bootstrap and WordPress ▪ Full support for WordPress Customizer ▪ Online course about creating WordPress themes with Pinegrow ▪ Pinegrow Slack Community ▪ and more. Download Pinegrow for Mac, Windows and Linux — Bootstrap & WordPress Blocks The biggest news
The approach
Shop Builder is designed to give you full control over your WooCommerce projects, while at the same time, it follows the recommended customization practices and can be used alongside customizations implemented with code.
Pinegrow at the WP Builders Fight Club
Pinegrow participated in the WP Builders Fight Club challenge to build the same website with a bunch of different WordPress tools, and to compare results.
Pinegrow Theme Converter 2.1, 2.11 & 2.12- Sep 14, 2023
Editable tag names in blocks, disable automatic WordPress block classes and more.
Pinegrow Web Editor 7.7, 7.71 & 7.72- September 14, 2023
Bootstrap and Tailwind CSS updates, editable tag names in blocks, improved block controls, new tutorial and more.
Release 2.94 – 27. September 2016
Pinegrow 2.94 is available for download. The new release brings improvements and important bug fixes.
Pinegrow Web Editor 6.6 – July 6, 2022
Picture element – Lazy loading – CSS Grid context menu – SASS performance – WordPress & WooCommerce improvements
Pinegrow Web Editor 6.7 – July 26, 2022
Edit element code shortcut – Tailwind CSS prose and WordPress editor stylesheet – WordPress with remote pages – Tags and categories.
Developers
API documentation for extending Pinegrow Web Editor with custom plugins.
Post Featured Image
Post Featured Image action shows the featured image of the current post, or the post itself if the post is an image attachment.
Inline SVG Images
Blocks created with Pinegrow come with a powerful support for using inline SVG images.