CRUD Operations With Element Widgets

CRUD - Create, Read, Update and Delete - are one of the most common operations you will often carry out while use XRipe Website Builder to build and maintain your website. These operations repeat across almost all the element widgets.

On the constructor page, element widgets can be manipulated and styled by right-clicking the Element handle and selecting necessary action from the context menu that pops up. Some actions will trigger additional window to pop-up in the sidebar panel, while others will change the state of the mouse cursor from default pointer (typically an arrow.) to a Move pointer (indicating something to be moved), often with green thick horizontal line. The move pointer looks like a cross with four arrows around it. The arrows show that you can move an entire object either up, down, or side to side.

	Element handles
	move pointer with green thick horizontal line

Below is a list of common operations that can be carried our with XRipe Website Builder elements

Manipulating Element Widgets

Create (Add)	There three different ways you can Create or Add new Element: Select, Drag and Drop the widget from element widget toolbox - located on the sidebar panel - pic.1 Clone, Drag and Drop the new element elsewhere from an existing one - by activating the element's context menu and clicking on "Clone" - pic.2 Select, Drag and Drop the element from library of saved Global elements - located on the sidebar panel - pic.3 Methods 1 and 2 are similar to duplicating and inserting a new element from original.
Read	Right-click the element handle and choose Edit from the context menu, if you want to read the element's content, style and other properties. You can also edit the data in the resulting window in the sidebar panel.
Update (Save)	You can Undo/Redo changes and edits by using the available features on the navigation bar, located on top of the constructor page. You undo changes or/and return to previous page by clicking the Undo icon on the navigation bar. Redofeature let you repeat single or multiple actions, but all actions must be undone or redone in the order you did or undid them – you can't skip actions. In short, click the left icon to Undo an action (or to go back), click the right icon to Redo an undone action (or go forward). Saving changes and edits can be achieved by invoking the Save/Publish Context Menu at the extreme right of the top menu bar (see pictures below). By default, the menu items are not visible, they are collapsed behind the hamburger button. Click the button to display them on the screen. Publish - click to save and to publish your website. Save as draft - click to save changes temporarily. Close - click to exit the Constructor page and return to the Dashboard
Delete	Right-click the element handle and click Delete from the context menu - pic.3

Other Operations with Elements

Apart from CRUD (create, read, update, delete) operations, most Element widgets support advanced features such as editing the properties, saving some part(s) of the web page as Template(s) into the Global Element library and re-using the saved template(s) across multiple web pages. Another feature is to copy a section style without content (as opposite cloning) and later use the style elsewhere on the page. To carry out these operations you only need to invoke the context menu of the element by right-clicking on it's handle.

Edit	Click on the Edit item from the element's context menu - pic.3 The element's properties, including content, styles and all available options will be displayed in the sidebar panel to the left Make necessary Edits and then Save as draft to continue other operations. You can also achieve this by simply moving your mouse cursor back to the workspace. If you have made an error and want to discard the changes or want to go back to previous page(s), then click the Undo button (top menu bar).
Move	To Move an element from one position to another: Click on the Move item from the element's context menu - pic.3 The mouse cursor from default pointer (typically an arrow.) will change to a move pointer (indicating something to be moved up, down, or side to side), accompanied with green thick horizontal line. Drag the green line or/and the cursor to the new position. Left-click the mouse cursor to insert the element into the new position.
Clone	Clone duplicates an element with all it's content and properties and then insert the copy immediately after the original element. If necessary, you can use Move to drag drop the new element into another position.
Copy Style	Copy and paste only the style (without the content) from one section to another. See also: Styling And Formatting
Save As Global	Save As Global - saving some part(s) of the web page as Template(s) into the Global Element library and re-using the saved template(s) across multiple web pages. Examples: Navigation Menu, Header and Footer sections, Social Buttons or any other section(s). There is no limit to the number of global elements you can save to the repository. Select the Element and Right-click on it to open the context menu Click the Save As Global item - pic.3 A small window pops-up in the left sidebar panel with a new Global item - pic.4 Rename the default name (label - Global item) of the Element (or Template) to a descriptive one. e.g. Global Footer1. Done, Save your work as draft or publish To Delete a Global element or template, click on the trash icon against the name (label)
Globals	All saved custom elements or templates can be re-used across all pages (including the current one) of your website project. Typical example: Create a new web page From element toolbox, click on the tab named Globals - pic.2 Select the necessary element(s) for the new page just created Drag and Drop the global element(s) into the new page Done, Save your work as draft or publish
Add Column	The operation adds a new column below the current (selected) section - pic.3. This can also be achieved by selecting Column Element widget from the sidebar panel (pic.1) and inserting it into the necessary position on the web page.