Search results for: add classes/2
103 results found.
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.
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.
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.
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.
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.
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!
Creating a reusable navigation component in multi-page projects
A step by step guide to defining and using reusable navigation with Pinegrow Components.
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.
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.
Creating the first block
We will use custom WordPress blocks to create a versatile and fully customizable front page for our website.
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.
What’s new in Interactions 2.0?
See all the new features in the latest Pinegrow Interactions update.
Using Master pages in a multi-page project
Using a Master page in a Pinegrow project makes building quicker and keeps your design unified.
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.
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!
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.
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.
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.
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!
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.
Overview of the Theme Creation Process
Pinegrow Web Editor with WordPress theme builder lets you visually create and edit WordPress themes.
Using the external build process
Learn how to use Pinegrow with an external Tailwind CSS compilation process (not with using the built-in compiler).
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!
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!
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.
Animation properties
Overview of animating various element properties with the Timeline editor.
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.
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.
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
Class styles
Tailwind Visual Editor comes with a powerful feature that makes working with Tailwind styles even easier – Class Styles.
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.
Class Tree inspector
Visual controls for Tailwind CSS are nice, but for more experienced users working with them requires too much clicking and scrolling around.
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.
Creating ACF Pro Blocks
Use Block Smart action to turn any HTML element into a WordPress visual editor block.
Pinegrow Live update log
The exciting story of Pinegrow Live updates.
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.
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.
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.
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.
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.
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.
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.
NEW: Bootstrap Blocks
Use the new Bootstrap Blocks library and a simple three step process to easily create uniquely designed websites.
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.
Customized Tailwind CSS themes
New in Tailwind Visual Editor – Use Visual controls to work with your custom Tailwind CSS themes.
Interactions
Use the Interactions action to add one or more interactions to the selected element.
Visual controls
Visual controls are the core of Tailwind Visual Editor. They are located in the Properties panel.
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
Release 2.92 – 27. July 2016
Pinegrow 2.92 is available for download.
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.
Block Attributes
Block Attributes action defines and uses one or more editable block attributes on the selected HTML 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!
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.
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.
Post Excerpt
Post Excerpt action displays the excerpt of the current post. If excerpt is not set, WordPress generates a snippet from the post content.
Vue Designer — a Visual Editor for Building Vue Applications
Introducing the new visual IDE for Vue, by Pinegrow.
Introduction to Pinegrow Interactions
Pinegrow Interactions is a powerful visual editor for designing web interactions and animations.
Introducing Pinegrow Interactions
Pinegrow Interactions is a powerful visual editor for designing web interactions and animations.
Introducing Pinegrow Theme Converter
Use your favorite website builder – Webflow, Muse, Dreamweaver, Blocs or any HTML editor – to create custom WordPress themes.
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.
Pinegrow Web Editor 6.4 – February 10, 2022
UI improvements – Tailwind CSS with plugins – WordPress – Performance and stability
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.
The Bright Bridge
A free elegant custom Bootstrap 5 and Tailwind CSS theme and website template created with the Design panel in Pinegrow 6.
Pinegrow Web Editor 7.1 – January 10, 2023
Recent classes – CSS media size tabs – Aspect ratio – WordPress improvements – Build you first block tutorial
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
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.
The Easiest Way to Build Custom Gutenberg WordPress Blocks
Create custom Gutenberg blocks visually, without coding and without plugins.
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.
Selecting target elements
Use the Element selector control to select one or more elements on the page.
Pinegrow Web Editor 6.21 & 6.2 – 16. Nov, 2021
Creating custom WordPress blocks – WordPress plugins – Plain HTML Design Panel – Monterey macOS support and more.
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.
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.
5 Essential Tips to Make Your WordPress Theme Project a Success
A well thought out and well prepared WordPress project is a successful project.
There are many different situations in which you may want to create a WordPress theme. The following tips are specifically for users who wish to use Pinegrow or Pinegrow Theme Converter to create a theme for their own site.
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.
Pinegrow Web Editor 5.7 – July 31, 2019
Improved Style editor, Components and Master pages… Plus, a healthy dose of bug fixes.
Site logo
Display the site logo that is set in the customizer Site identity section.
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.
Introducing Pinegrow Web Editor 6
Do more with less UI.
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.
Color the Boxes
The Pinegrow Challenge: take any tool you like – including coding by hand – and try to be faster than Pinegrow at using classes to style a bunch of boxes.
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.
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.
Apresentando o Pinegrow Interactions
Pinegrow Interactions é um poderoso editor visual de interações e animações para web.
Release 2.94 – 27. September 2016
Pinegrow 2.94 is available for download. The new release brings improvements and important bug fixes.
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
Bootstrap 4 element properties
These Bootstrap 4 element properties can be set for any element on the page.
Developers
API documentation for extending Pinegrow Web Editor with custom plugins.
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.
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.
Pico CSS
Customize Pico CSS with SASS in Pinegrow.