In this video, I'll introduce you to the basic actions in the Online Presence Builder. Let's start with the so called "drag and drop" action that is highly used in the OPB. Actually, it's quite simple. To add a text field, for example, click on the “Elements” button, located in the left menu panel. Position your cursor over the "Text" element. You will see that a blue border and a rectangle have appeared over the icon. The rectangle is called a drag handle. Click on it or anywhere over the icon to grab the element. Hold the mouse button and drag the element to the desired location.
You'll see that a blue line appears, indicating that you can place the element here. It also shows what width the element will take. When you decide on where to add the element, drop it by releasing the mouse button. To delete the initial placeholder text, select it with your mouse and press “Delete” on your keyboard. Now, you can type your own text. You can also copy and paste in this field.
The available text properties are similar to most text editors. You can change the text styles, alignment ,create bulleted and numbered lists and change the text color. From the dropdown, you can style the text with specific predefined styles for the design. Let's select the heading.
Click on the dropdown and choose a style with a larger font. Next, let's center it and change its color. When you are done with your changes, click anywhere outside of the blue container. If you need to format it again, just hover on it, until you see the blue border and click. This will get you back to the editing options. You will notice that there are a few icons at the right part of the container.
From those, you can do multiple operations with it. The first one will delete it. If you wish to undo your change, you can press the undo button located at the top part of the screen. The second icon will duplicate your element, so that you can use it in other places as well. If you click on the duplicate icon, you will notice that in the left panel, a “Clipboard” icon has appeared with the numbered of copied elements. Click on it. Here is your copied element. If you've copied multiple elements, your latest copy will be shown as the last one.
And when you are not certain which copy is the one you need to add, position your cursor over an element and you will see that a preview of the element's content will appear. Adding a copied element into your website is done the same way as adding a text element - select and drag and drop it to the desired place. The eye icon will hide the element from publishing, meaning that the users visiting your website won't be able to see it. As you see, the element's visibility is reduced in “Edit mode” to indicate that the element is hidden.
To make it visible again, just click over the eye icon. The last icon will select the element. This is useful if you need to apply the same action to multiple elements. Click on the delete icon. This will delete all of the selected elements. To add an image near your text, enter the text field, click on the place you want the image to be added and click on the image icon in the right panel.
You can upload one from your computer. Add form URL. Or choose an icon from our library. To change an already existing image, with your own, click on it and hit the “Change” button, located in the right panel.
You can adjust its size by the different image buttons in the right panel. The image can be small, medium, large or using its actual size. If you need to add your own size, check the“Custom size” and add the desired dimensions. Below, you can change the image's alignment and add a link to it. To preview how the website will look like, click on the “Preview” button. This will show you how the users visiting your website will see it.
If you click on the tablet icon, located in the top part of the screen, you will see how the website will look like on smaller screen- like the tablet's. The next button, will give you a preview on how the page will look like on mobile phones. To return to editing, just click on the “Edit” button. When you are done with the changes, you can publish your website. To do that, click on the green “Publish” button. This will publish all pages. When the page is published you will see as mall pop-up in the bottom left corner of the screen. Click on the link and the published website will open in a new tab.