Add elements to the pageHow to

Let's take a look at how you can add new HTML elements to the page.

As always in Pinegrow, you can add elements in a couple of different ways. Choose the one that suits your task at hand the most.

Open the Library

Open the Library panel.

The Library panel contains elements and components (ready-made groups of elements) arranged in sections.

The Library panel.

What sections are shown depends on which frameworks and libraries are activated on your page. For example, if Bootstrap support is active, Bootstrap-related sections and components will be listed in the Library.

Moving the mouse over an element in the Library will show the preview of the element.

Drag element to the page view

Open the Library panel.

Grab an element from the Library panel and drag it over the page.

As you move it over the page (while still holding down the mouse button) you'll see two things:

Dragging the element from Library to the page.

The target element is highlighted with a green border and orange line shows where in relation to the target element the new element will be inserted.

Drop the element at your chosen destination by releasing the mouse button.

You can use the Repeater to insert more copies of the element. Type a number before or during the dragging operation with 0_KEY to 9_KEY keys to set how many copies of the element you want to insert.

Press ESC_KEY to abort the drag & drop operation without adding the element to the page.

Drag elements to the Tree

Open the Library and the Tree panels.

Dragging elements from the Library to the Tree panel gives you precise control over the placement of new elements.

Take an element from the Library and drag it over the tree. The insertion line will show the position.

Dragging an H2 element from the Library to the Tree panel.

Release the mouse to insert the element at the indicated position.

You can use the Repeater to insert more copies of the element.

Press ESC_KEY to abort the drag & drop operation without adding the element to the page.

Insert into the selected elements

Open the Library panel.

Require selected element

RIGHT_CLICK on the element in the Library and choose the placement of the new element in relation to the selected element:

Insert with RIGHT_CLICK on the Library element.

Use the Repeater to insert more than one element to the page.

"Insert into selected" Library section

In addition, for some types of elements, Pinegrow suggests elements that can be inserted into the element.

Insert into selected heading element.

Such suggestions are listed in the "Insert into selected" section. To insert such element into the selected element CLICK on the name or RIGHT_CLICK on the name for more options.

Inserting code

The Library panel lets you add code directly to the page.

Open the Insert code section and enter the HTML or simplified Pug syntax for the element you wish to add to the page.

A Library panel element representing the code will appear below the code editor.

Insert code from the Library panel.

Use it as you would use a normal Library element: drag it to the page, to the Tree or use RIGHT_CLICK to insert it into the selected element.

Quick insert into the selected element

Require selected element

You don't have to keep the Library panel visible at all times.

Click on Insert element icon import_ICON in the selected element menu or press the PLUS_KEY key to bring up the floating Library panel.

Open Quick insert tool.

Shortcut Press PLUS_KEY to display the floating Quick insert Library for the selected element. Use ESC_KEY to close the floating Library. 

Choose placement and click on any Library element to insert it into the selected element.

In addition to dragging elements to the page or to the tree, you can also just CLICK on a Library element to insert it into the selected element.

Use the position icons to chose the placement of the new element in relation to the selected element.

Quick insert into the Tree

Open the Tree panel.

Hovering the mouse pointer over the borders between elements in the Tree panel will display an orange insertion line at that position. CLICK when the insertion line is displayed to open a floating Quick insert Library.

Hover the mouse over element borders to display the insertion line.

Click on an element in the Library to insert it at the indicated position.

Quick insert into the tree.

Shortcut Press ESC_KEY to close the floating Library.

Using the Repeater to add multiple copies of an element

All operations that insert new elements to the page work with the Repeater. Just type the desired number before the operation or during a drag & drop move and Pinegrow will add that many copies of the element to the page.

The Repeater.

Type a number before the operation with 0_KEY to 9_KEY keys to set how many copies of the element you want to insert.

Smart drag & drop into multiple selected elements

Require selected element

Let's say we need to insert a new element into multiple elements on the page. For example, we need to add a button into each of the ten DIVs. With Pinegrow, we can do that with one move.

Select all elements to be modified and then when you insert a new element into one of the multiple selected elements...

Inserting a button into one of the selected elements.

...Pinegrow will analyze the situation and repeat the same operation on all selected elements.

Buttons were inserted into all selected elements.

Delete elementsHow to

Let's take a look at how you can delete HTML elements from the page.

Require selected element

As always in Pinegrow, you can do that in a couple of different ways. Choose the one that best suits your task at hand.

Delete elements in the Page view

The easiest way to delete an element is using the bin_ICON in the selected element menu:

Delete the selected elements.

This operation will delete all selected elements.

Delete is also available in the element context menu accessible by RIGHT_CLICK: 

RIGHT_CLICK to display the element menu.

NoteYou can use RIGHT_CLICK to display the context menu even for the elements that are not selected.

The quickest way to delete all selected elements is pressing DELETE_KEY or BACKSPACE_KEY:

Shortcut Use DELETE_KEY or BACKSPACE_KEY to delete all selected elements.

This keyboard shortcut is not available in text_edit_ICON_ACTIVE text editing mode.

Delete elements in the Tree

Open the Tree panel.

Use the bin_ICON in the selected element menu in the tree to delete all selected elements.

You can also RIGHT_CLICK on any element in the tree, even if it is not selected, and remove it with a Delete menu command.

NoteDeleting a selected element with the RIGHT_CLICK menu will delete all other selected elements as well. Doing the same on a non-selected element will delete just that element.

Duplicating existing elementsHow to

Sometimes the easiest way to add more elements to the page is duplicating (making copies) of existing elements on the page.

To duplicate an element click on the duplicate_ICON in the selected element menu.

Make copies of the element.

A copy of the element will be inserted right after the original.

ShortcutUse CMD+D_KEY to duplicate the selected element.

Duplicate also works with multiple selected elements.

By default, duplicating multiple elements will duplicate the elements individually, one by one:

Press ALT_KEY when duplicating or choose "Duplicate as group" from the context menu to duplicate the elements as a group:

Use the Repeater to create more than one copy of the element.