Канал: Pinegrow

GPT-4o-mini - A great Quick model for Pinegrow's AI Assistant

GPT-4o-mini - A great Quick model for Pinegrow's AI Assistant

Color classes for Tailwind buttons - Quick tip

Color classes for Tailwind buttons - Quick tip

AI Web Development Competition - Summer 2024

AI Web Development Competition - Summer 2024

Improved Tailwind Class tree inspector

Improved Tailwind Class tree inspector

How to disable Tailwind preflight in Pinegrow

How to disable Tailwind preflight in Pinegrow

Powerful Tailwind variants selector

Powerful Tailwind variants selector

Benefits of using Tailwind for pure CSS styling

Benefits of using Tailwind for pure CSS styling

Custom Tailwind config with built-in compiler

Custom Tailwind config with built-in compiler

Plain CSS styling with Tailwind - The Bunny tutorial

Plain CSS styling with Tailwind - The Bunny tutorial

Use Claude AI models in AI Assistant

Use Claude AI models in AI Assistant

Flowbite Blocks integration in Pinegrow

Flowbite Blocks integration in Pinegrow

Regular CSS styling with Tailwind (without utility classes)

Regular CSS styling with Tailwind (without utility classes)

Quick intro to Tailwind CSS grid editor

Quick intro to Tailwind CSS grid editor

One-click browser preview

One-click browser preview

Wrap with DIV command and some CSS grid fun

Wrap with DIV command and some CSS grid fun

Design CSS grid with Tailwind - Wave McSplash tutorial

Design CSS grid with Tailwind - Wave McSplash tutorial

Pinekit - a free Bootstrap based component and template library

Pinekit - a free Bootstrap based component and template library

Inline SVG images with one click

Inline SVG images with one click

Happy holidays and all the best in 2024!

Happy holidays and all the best in 2024!

AI Assistant - The Best Way to Customize Templates with Content

AI Assistant - The Best Way to Customize Templates with Content

AI Assistant - Working With Project Images

AI Assistant - Working With Project Images

AI Assistant - Exploring Image to HTML Conversion

AI Assistant - Exploring Image to HTML Conversion

AI Assistant - Learning Tasks

AI Assistant - Learning Tasks

Invitation to Pinegrow Online

Invitation to Pinegrow Online

WordPress blocks - Editable tag names, class controls and using the theme styling

WordPress blocks - Editable tag names, class controls and using the theme styling

Wrap WordPress shortcodes in custom blocks

Wrap WordPress shortcodes in custom blocks

Hybrid WordPress Blocks

Hybrid WordPress Blocks

Welcome to Vue Designer!

Welcome to Vue Designer!

Learn about Vue Designer Features!

Learn about Vue Designer Features!

Using Tailwind Design Panel image with Background image utility class

Using Tailwind Design Panel image with Background image utility class

Displaying Optional Link Heading with Block Condition Action

Displaying Optional Link Heading with Block Condition Action

Create a Customizable Star Ratings Block with Block Condition Action

Create a Customizable Star Ratings Block with Block Condition Action

Displaying Weather Icons with Block Condition Action

Displaying Weather Icons with Block Condition Action

Pinegrow's Tailwind Class Tree Inspector - The Power Tools for Tailwind CSS Styling

Pinegrow's Tailwind Class Tree Inspector - The Power Tools for Tailwind CSS Styling

Export theme.json for Pinegrow WordPress themes

Export theme.json for Pinegrow WordPress themes

AI Assistant Improvements in Pinegrow 7.4

AI Assistant Improvements in Pinegrow 7.4

Create Engaging HTML Presentations with Pinegrow's AI Assistant

Create Engaging HTML Presentations with Pinegrow's AI Assistant

Introducing Pinegrow's CSS Tree Inspector - A Power Tool for CSS / SASS Styling

Introducing Pinegrow's CSS Tree Inspector - A Power Tool for CSS / SASS Styling

NEW - Talk to the AI Assistant in Pinegrow

NEW - Talk to the AI Assistant in Pinegrow

AI Assistant Flexbox positioning with bonus jokes - Interactive tutorial

AI Assistant Flexbox positioning with bonus jokes - Interactive tutorial

Position and center HTML elements with Flex - Interactive tutorial

Position and center HTML elements with Flex - Interactive tutorial

Build Your First Gutenberg Block Tutorial - Without Coding - Free Tutorial

Build Your First Gutenberg Block Tutorial - Without Coding - Free Tutorial

Pinegrow WordPress Plugin Release Interview

Pinegrow WordPress Plugin Release Interview

Pinegrow Countdown Day 1 – Playing Nice with Others

Pinegrow Countdown Day 1 – Playing Nice with Others

Pinegrow 7 - Media size tabs in the Visual CSS editor

Pinegrow 7 - Media size tabs in the Visual CSS editor

Pinegrow 7 - Bootstrap class preview

Pinegrow 7 - Bootstrap class preview

Pinegrow 7 - Tailwind CSS quick class editing

Pinegrow 7 - Tailwind CSS quick class editing

Pinegrow 7 - Empty placeholder toggle

Pinegrow 7 - Empty placeholder toggle

Pinegrow 7 - Advanced CSS Grid gap controls

Pinegrow 7 - Advanced CSS Grid gap controls

Pinegrow 7 - Play animation on every playhead move

Pinegrow 7 - Play animation on every playhead move

Pinegrow 7 - Open in Wrapper

Pinegrow 7 - Open in Wrapper

Pinegrow 7 - Insert menu in the toolbar

Pinegrow 7 - Insert menu in the toolbar

Pinegrow 7 - Tailwind CSS class preview

Pinegrow 7 - Tailwind CSS class preview

Pinegrow 7 - Responsive interactions

Pinegrow 7 - Responsive interactions

Pinegrow Countdown Day 2 Pinegrow is STILL not a Page Builder

Pinegrow Countdown Day 2 Pinegrow is STILL not a Page Builder

Pinegrow Countdown Day 3 Pinegrow Frameworks

Pinegrow Countdown Day 3 Pinegrow Frameworks

Pinegrow Countdown Day 4 – WordPress Blocks and Themes

Pinegrow Countdown Day 4 – WordPress Blocks and Themes

Pinegrow Countdown Day 5 – Desktop or Plugin

Pinegrow Countdown Day 5 – Desktop or Plugin

Pinegrow Countdown Day 6 – What’s New

Pinegrow Countdown Day 6 – What’s New

06 Slider - Flex - Creating a Tailwind CSS WordPress Theme

06 Slider - Flex - Creating a Tailwind CSS WordPress Theme

03 Hero - Flex - Creating a Tailwind CSS WordPress Theme

03 Hero - Flex - Creating a Tailwind CSS WordPress Theme

04 Services - Flex - Creating a Tailwind CSS WordPress Theme

04 Services - Flex - Creating a Tailwind CSS WordPress Theme

08 Recent Posts - Flex - Creating a Tailwind CSS WordPress Theme

08 Recent Posts - Flex - Creating a Tailwind CSS WordPress Theme

12 Footer - Flex - Creating a Tailwind CSS WordPress Theme

12 Footer - Flex - Creating a Tailwind CSS WordPress Theme

WP Builders Fight Club - Overview of the Pinegrow Build

WP Builders Fight Club - Overview of the Pinegrow Build

05 Steps - Flex - Creating a Tailwind CSS WordPress Theme

05 Steps - Flex - Creating a Tailwind CSS WordPress Theme

02 Setup - Flex - Creating a Tailwind CSS WordPress Theme

02 Setup - Flex - Creating a Tailwind CSS WordPress Theme

07 Pricing - Flex - Creating a Tailwind CSS WordPress Theme

07 Pricing - Flex - Creating a Tailwind CSS WordPress Theme

11 Animating the Menu - Flex - Creating a Tailwind CSS WordPress Theme

11 Animating the Menu - Flex - Creating a Tailwind CSS WordPress Theme

10 Navigation - Flex - Creating a Tailwind CSS WordPress Theme

10 Navigation - Flex - Creating a Tailwind CSS WordPress Theme

01 Introduction - Flex - Creating a Tailwind CSS WordPress Theme

01 Introduction - Flex - Creating a Tailwind CSS WordPress Theme

09 Logos - Flex - Creating a Tailwind CSS WordPress Theme

09 Logos - Flex - Creating a Tailwind CSS WordPress Theme

What's new in Pinegrow Web Editor 6.6

What's new in Pinegrow Web Editor 6.6

Customizing Pico CSS with SASS in Pinegrow

Customizing Pico CSS with SASS in Pinegrow

Update on the poster image - CSS Grid Course

Update on the poster image - CSS Grid Course

Agency Tutorial 5

Agency Tutorial 5

55. Disabling the design panel

55. Disabling the design panel

23. Related products

23. Related products

57. The subscribe to newsletter block

57. The subscribe to newsletter block

29. Search block for the sidebar

29. Search block for the sidebar

15. The product tabs with Bootstrap accordion

15. The product tabs with Bootstrap accordion

42. The product picker block

42. The product picker block

16. The product description tab

16. The product description tab

45. The hand picked categories block

45. The hand picked categories block

56. Extending the small banners block

56. Extending the small banners block

17. The product additional info tab

17. The product additional info tab

22. Up-sells

22. Up-sells

43. Template variants – alternative sale flash design

43. Template variants – alternative sale flash design

Quick introduction to Shop Builder for WooCommerce

Quick introduction to Shop Builder for WooCommerce

60. The footer

60. The footer

08. The product short description

08. The product short description

12. Add to Cart section for a variable product

12. Add to Cart section for a variable product

07. The product rating

07. The product rating

09. Hooks vs. freestyle mode

09. Hooks vs. freestyle mode

06. The product title

06. The product title

02. Overview of WooCommerce customization

02. Overview of WooCommerce customization

11. The product stock & custom CSS styling

11. The product stock & custom CSS styling

03. Setting up the WordPress theme export

03. Setting up the WordPress theme export

01. Introduction

01. Introduction

04. The master page and the site content

04. The master page and the site content

10. The product price

10. The product price

05. Single product template

05. Single product template

47. The cart info and link

47. The cart info and link

41. Tags and categories for the product list block

41. Tags and categories for the product list block

28. The shop sidebar

28. The shop sidebar

Very quick introduction to Shop Builder for WooCommerce

Very quick introduction to Shop Builder for WooCommerce

26. Ordering the product list

26. Ordering the product list

59. The image mosaic block

59. The image mosaic block

51. Avoiding the quantity input conflict on the cart page

51. Avoiding the quantity input conflict on the cart page

30. Sidebar heading block.

30. Sidebar heading block.

18. The product attributes

18. The product attributes

38. Order attribute for the product list block

38. Order attribute for the product list block

33. The hero block

33. The hero block

24. Product list template

24. Product list template

52. Notices

52. Notices

54. Using the design panel

54. Using the design panel

58. The features block

58. The features block

13. Add to Cart section for a simple product

13. Add to Cart section for a simple product

37. Product count attribute for the product list block

37. Product count attribute for the product list block

31. Sub-categories on the product list

31. Sub-categories on the product list

27. Product list pagination

27. Product list pagination

50. Single column layout for cart and checkout

50. Single column layout for cart and checkout

49. Index template sidebar

49. Index template sidebar

20. The sale flash sticker with saved amount

20. The sale flash sticker with saved amount

35. The call to action block

35. The call to action block

14. The product meta

14. The product meta

25. Product list breadcrumbs, title and result count

25. Product list breadcrumbs, title and result count

34. Small banners block

34. Small banners block

48. Setting up the content of the index template

48. Setting up the content of the index template

39. On sale filter for the product list block

39. On sale filter for the product list block

53. Adding custom PHP code

53. Adding custom PHP code

40. Toggle ratings on the product list block

40. Toggle ratings on the product list block

32. Setting up the front page

32. Setting up the front page

44. The sub-categories block

44. The sub-categories block

46. The header with site name and menu

46. The header with site name and menu

36. The product list block

36. The product list block

21. Breadcrumbs

21. Breadcrumbs

19. The product image gallery

19. The product image gallery

How-to self-host Google fonts in your website project created with Pinegrow

How-to self-host Google fonts in your website project created with Pinegrow

Dynamic blocks

Dynamic blocks

Creating nested blocks and class toggles

Creating nested blocks and class toggles

Introduction

Introduction

Creating blocks from HTML content

Creating blocks from HTML content

Behind the scenes look at WooCommerce Pinegrow development

Behind the scenes look at WooCommerce Pinegrow development

13. All posts - Simple full site editing with WordPress Blocks

13. All posts - Simple full site editing with WordPress Blocks

12. Recent posts - Simple full site editing with WordPress Blocks

12. Recent posts - Simple full site editing with WordPress Blocks

11. The Post content - Simple full site editing with WordPress Blocks

11. The Post content - Simple full site editing with WordPress Blocks

10. The Post hero - Simple full site editing with WordPress Blocks

10. The Post hero - Simple full site editing with WordPress Blocks

3. The Hero Block - Simple full site editing with WordPress Blocks

3. The Hero Block - Simple full site editing with WordPress Blocks

6. The Quotes Block - Simple full site editing with WordPress Blocks

6. The Quotes Block - Simple full site editing with WordPress Blocks

1. Setting up the theme export in Pinegrow - Simple full site editing with WordPress Blocks

1. Setting up the theme export in Pinegrow - Simple full site editing with WordPress Blocks

5. The Projects Block - Simple full site editing with WordPress Blocks

5. The Projects Block - Simple full site editing with WordPress Blocks

7. The Header Block - Simple full site editing with WordPress Blocks

7. The Header Block - Simple full site editing with WordPress Blocks

4. The About Me Block - Simple full site editing with WordPress Blocks

4. The About Me Block - Simple full site editing with WordPress Blocks

9. Conclusion - Simple full site editing with WordPress Blocks

9. Conclusion - Simple full site editing with WordPress Blocks

8. The Footer Block - Simple full site editing with WordPress Blocks

8. The Footer Block - Simple full site editing with WordPress Blocks

2. Creating empty index.php template - Simple full site editing with WordPress Blocks

2. Creating empty index.php template - Simple full site editing with WordPress Blocks

How to customize the appearance of the Details menu of your WordPress theme created with Pinegrow

How to customize the appearance of the Details menu of your WordPress theme created with Pinegrow

Customizing a Bootstrap 5 theme with Pinegrow

Customizing a Bootstrap 5 theme with Pinegrow

A quick introduction to the new Pinegrow 6.0

A quick introduction to the new Pinegrow 6.0

Novos recursos do Pinegrow 6

Novos recursos do Pinegrow 6

Expand SVGs and set fill and stroke color in Pinegrow Web Editor 5.99

Expand SVGs and set fill and stroke color in Pinegrow Web Editor 5.99

1. Introduction - Creating a Slider with Pinegrow Interactions 2 0

1. Introduction - Creating a Slider with Pinegrow Interactions 2 0

Using CSS Grid in Pinegrow - 3. Making the page responsive

Using CSS Grid in Pinegrow - 3. Making the page responsive

Video 3 - Adding a font size selector

Video 3 - Adding a font size selector

Using CSS Grid in Pinegrow - 1. Introduction to CSS Grid

Using CSS Grid in Pinegrow - 1. Introduction to CSS Grid

Video 2 - Adding the mode switch

Video 2 - Adding the mode switch

Using CSS Grid in Pinegrow - 2. Creating a page

Using CSS Grid in Pinegrow - 2. Creating a page

Video 1 - Page Overview

Video 1 - Page Overview

BS4 Blocks 3

BS4 Blocks 3

BS4 Blocks 1

BS4 Blocks 1

Adding Lottie animation to Pinegrow

Adding Lottie animation to Pinegrow

Using SVG in Pinegrow

Using SVG in Pinegrow

Pinegrow's Surprise Me in Action

Pinegrow's Surprise Me in Action

The Pinegrow Design panel for Tailwind CSS

The Pinegrow Design panel for Tailwind CSS

BS4 Blocks 2

BS4 Blocks 2

6. Adding autoplay and making the slider infinite - Creating a Slider with Pinegrow Interactions 2

6. Adding autoplay and making the slider infinite - Creating a Slider with Pinegrow Interactions 2

10. Generating reusable JavaScript code - Creating a Slider with Pinegrow Interactions 2

10. Generating reusable JavaScript code - Creating a Slider with Pinegrow Interactions 2

Animating SVG with Pinegrow Interactions

Animating SVG with Pinegrow Interactions

BS4 Blocks 6

BS4 Blocks 6

4. Make the slides snap - Creating a Slider with Pinegrow Interactions 2

4. Make the slides snap - Creating a Slider with Pinegrow Interactions 2

BS4 Blocks 4

BS4 Blocks 4

9. Reusing the interactions on multiple sliders - Creating a Slider with Pinegrow Interactions 2

9. Reusing the interactions on multiple sliders - Creating a Slider with Pinegrow Interactions 2

The Pinegrow Floating Tools for Bootstrap

The Pinegrow Floating Tools for Bootstrap

BS4 Blocks 7

BS4 Blocks 7

Manipulating Lottie animation with Pinegrow Interactions

Manipulating Lottie animation with Pinegrow Interactions

The Pinegrow Design Panel for Bootstrap

The Pinegrow Design Panel for Bootstrap

2. The layout - Creating a Slider with Pinegrow Interactions 2 0

2. The layout - Creating a Slider with Pinegrow Interactions 2 0

BS4 Blocks 5

BS4 Blocks 5

Pinegrow Floating Tools for Tailwind CSS

Pinegrow Floating Tools for Tailwind CSS

7. Stop the auto play on user interaction - Creating a Slider with Pinegrow Interactions 2

7. Stop the auto play on user interaction - Creating a Slider with Pinegrow Interactions 2

5. Adding the pagination - Creating a Slider with Pinegrow Interactions 2 0

5. Adding the pagination - Creating a Slider with Pinegrow Interactions 2 0

SVG Terminology

SVG Terminology

Using custom page dividers in Pinegrow

Using custom page dividers in Pinegrow

8. Adding animations to slides - Creating a Slider with Pinegrow Interactions 2

8. Adding animations to slides - Creating a Slider with Pinegrow Interactions 2

Using Lottie animation with Pinegrow Interactions

Using Lottie animation with Pinegrow Interactions

3. Adding the navigation - Creating a Slider with Pinegrow Interactions 2 0

3. Adding the navigation - Creating a Slider with Pinegrow Interactions 2 0

Top new features in Pinegrow Web Editor 6

Top new features in Pinegrow Web Editor 6

Sliders - Pinegrow Interactions Blueprints

Sliders - Pinegrow Interactions Blueprints

Presentations - Pinegrow Interactions Blueprints

Presentations - Pinegrow Interactions Blueprints