Website Tips & Tricks

General Block Tips

Name blocks for better organization

To help keep track of Sections, Containers, Blocks, Grids, etc. name them.

This becomes more helpful when using multiple sections on the page.

1. Select the Block in the backend
2. Go to the properties tab
3. Open the last section "Advanced"
4. In the field "Name", enter the name of the block
5. The block should now display the Name value you entered
6. Save your changes.

Copy paste function in the GUI for the Web block editor

It is possible to copy paste blocks in the block editor:

1. Select the block to copy
2. Click on Cntrl + c or Command + c
3. Click on the block that you want to paste this block into
4. Click on Cntrl + v or Command + v
5. (the copied block appear beneath all the blocks in the currently selected block)
6. Click on Save button to save your work

Quickly rename a backend block

1. Double mouse-click the header title text of the block you want to rename

2. Then after the double-mouse click, click a single time on the text. The cursor should appear among the title text characters. (if might not be so easy to see)
3. Click on Cntrl + a or Command + a, to select all the text
4. Start typing the new text 
5. When the changes are done, click on the "Save" button to save your work.
6. Note: There is a bug, if you only remove all of the block title text it will replace the default title again. So just type the desired text after selecting all of the text, to get around the bug.

Images

Copy paste the image to another image block

1. Select the image block, then in the right side panel look at the properties tab
2. Next to File, click on the clipboard
3. Click on Copy image. This puts the image on the application clipboard
4. Click on the next image block, and go to the properties tab
5. Next to File, click on the clipboard
6. Click on Paste image. The image should be pasted into the 2nd block
7. Make sure and save your changes

Images with transparent backgrounds

To make images with transparent background look more natural in the layout try the following:

1. Click on the Image block
2. Click on the Styles tab
3. Set a check in the box for "Transparent"
4. Save changes and view in frontend
5. Note: The images must have a transparent background (.png, .svg)