Watch this video to quickly learn how HTML and CSS editing is done in Pinegrow.
-
- Getting Started
- User Guides
- Page views
- The Library Panel
- Page Libraries
- The Tree Panel
- Element Properties
- Styling with CSS
- Code editing
- HTML Snippets
- History – Undo and Redo
- Drag & Drop
- Tools & Helpers
- Getting the Most out of Pinegrow UI
- Keyboard Shortcuts
- Edit remote websites and web applications
- Working with dynamic HTML elements
- Using External Code Editors & Tools
- The Design Panel for Plain HTML
- Working with PHP templates
- Font Awesome
- How to Guides
- Add elements to the page
- Add stylesheet or script to the page
- Duplicating existing elements
- Delete elements
- Add or Remove classes from elements
- Remove the tag (span, div…) around the element
- Change the code editor theme
- Arrange panels vertically to minimize neck rotation
- Make page information meta elements editable in Master pages
- Pinegrow PRO
- Bootstrap Visual Editor
- Start a New Bootstrap Project
- Customizing Bootstrap 5 themes
- Easily upgrade Bootstrap projects to the latest Bootstrap version
- Edit an existing Bootstrap page or project
- Activate Bootstrap tools for your page
- The Library of Bootstrap components
- Bootstrap properties common to all elements
- Display helpers
- Customize Bootstrap 4 themes
- Bootstrap Design Panel
- Bootstrap Floating Tools
- Pinegrow Interactions
- Creating and designing WordPress themes
- Features
- Responsive images
- Including Scripts and Styles
- A guide to WordPress templates for posts, pages and custom post types
- Converting HTML Websites to WordPress Themes – A Step by Step Guide
- Working with Selectors
- Short guide to naming WordPress templates
- Introduction to the WordPress template structure – Headers, Footers, Site content and Master pages
- Overview of the Theme Creation Process
- Ten Points for Productive WordPress Development with Pinegrow
- Troubleshooting
- FAQ about creating WordPress themes with Pinegrow
- Courses & Tutorials
- Pinegrow WordPress Starter Theme 2
- Actions
- Theme / Plugin Settings
- Page Settings
- Show Posts
- Post Title
- Post Link
- Post Content
- Post Excerpt
- Post Featured Image
- Post Field
- Post Tags & Categories
- Post Date
- Post Author
- Post Pagination
- Post Breadcrumbs
- Site Name
- Site Description
- Site Link
- Site logo
- Site Tags & Categories
- Customizer Field
- Customizer Section
- Menu
- Sidebar
- Reusable Template Part
- Form
- Function
- Don’t Export
- Block
- Block Attributes
- Block Inner Content
- Smart Actions
- Theme Setup
- The Easiest Way to Build Custom Gutenberg WordPress Blocks
- Creating Your First Block
- Adding Attributes and Controls
- Inner Blocks – Blocks within the blocks
- Displaying up-to-date information with Dynamic Blocks
- Dynamic, Regular and ACF Blocks – What is the difference and when to use what?
- Displaying the Site Styling in the Block Editor
- Creating ACF Pro Blocks
- Generated Code and Files
- Styling our Custom Blocks
- Adding Front-end JavaScript Code
- Common Block Controls
- Theme or Plugin – Which is Best for Custom Blocks?
- Inline SVG Images
- Examples and Tutorials
- Download and Set Up the Demo Project
- The complete guide to creating custom WordPress blocks
- Plugin compatibility issues
- Shop Builder for WooCommerce
- Creating custom WooCommerce themes – Course
- Introduction
- Overview of WooCommerce customization
- Setting up the WordPress theme export
- The master page and the site content
- Single product template
- The product title
- The product rating
- The product short description
- Hooks vs. freestyle mode
- The product price
- The product stock & custom CSS styling
- Add to Cart section for a variable product
- Add to Cart section for a simple product
- The product meta
- The product tabs with Bootstrap accordion
- The product description tab
- The product additional info tab
- The product attributes
- The product image gallery
- The sale flash sticker with saved amount
- Breadcrumbs
- Up-sells
- Related products
- Product list template
- Product list breadcrumbs, title and result count
- Ordering the product list
- Product list pagination
- The shop sidebar
- Search block for the sidebar
- Sidebar heading block
- Sub-categories on the product list
- Setting up the front page
- The hero block
- Small banners block
- The call to action block
- The product list block
- Product count attribute for the product list block
- Order attribute for the product list block
- On sale filter for the product list block
- Toggle ratings on the product list block
- Tags and categories for the product list block
- The product picker block
- Template variants – alternative sale flash design
- The sub-categories block
- The hand picked categories block
- The header with site name and menu
- The cart info and link
- Setting up the content of the index template
- Index template sidebar
- Single column layout for cart and checkout
- Avoiding the quantity input conflict on the cart page
- Notices
- Adding custom PHP code
- Using the design panel
- Disabling the design panel
- Extending the small banners block
- The subscribe to newsletter block
- The features block
- The image mosaic block
- The footer
- The approach
- Features
- Actions
- Single Product
- Product Title
- Product Price
- Product Link
- Product Short Description
- Product Sale Flash
- Product Image Gallery
- Product Add to Cart
- Product Description
- Product Categories
- Product Tags
- Product Meta
- Product Stock
- Product Rating
- Product Tabs
- Product Tab Description
- Product Tab Additional Information
- Product Attributes
- Related Products
- Upsells
- Loop Add to Cart Button
- Product Content
- Show Products
- Product Loop Count
- Product Loop Order By
- Product Loop Thumbnail
- Product Loop Add To Cart Button
- Product Loop Pagination
- Show Categories
- Category Image
- Category Link
- Category Name
- Category Count
- Content Wrapper
- Page Title
- Breadcrumbs
- Notice
- Shop Sidebar
- Shop Search
- Cart Link
- Function
- Do not Export
- How to upgrade to Shop Builder
- Creating custom WooCommerce themes – Course
- Tailwind Visual Editor
- Introduction to Tailwind CSS
- Opening or creating a project
- Activating the Tailwind extension
- Visual controls
- Customized Tailwind CSS themes
- Helpers
- Class styles
- Tailwind Blocks
- Component libraries
- Tailwind CSS Design panel
- Tailwind CSS Floating Tools
- TailwindUI
- Tutorials
- Using the external build process
- CSS Grid
- Bootstrap Blocks
- Working with
- Pinegrow Snapshots
- Developers
- Licensing Questions
- Try Pinegrow for free for 7 days
- About charging sales tax on Pinegrow purchases
- Money Back Policy
- How to use Discount Coupon Codes
- How to Cancel your Pinegrow subscription
- How to change your Pinegrow subscription
- How-to Renew your annual license
- Students, Teachers, and Non-profit organizations
- Pinegrow Web Editor Software License Agreement
- Foundation
Helpdesk