WEBBUILDER TUTORIALS

      ProFusion WEBBUILDER editor is an easy-to-use tool for creating websites. Instead of developing a concept and design from scratch, you can create/manage a site with just a few clicks with the help of pre-made content blocks. The use of the ready-made blocks minimizes the possibility of a design error and also significantly saves you time on site development.
      This article will show you the basic actions with your site blocks, how to work with your site elements, edit your text, and add your images.

      Toolbar

      Once you have opened your site's editor, you can see a toolbar at the top where the elements of navigation within your site editor are gathered:

      Illustration

      Upon clicking on the tabs and links, you will be able to navigate within your site's editor settings. Here is a brief note about the top editor panel:
      (1) My websites. This is a quick link back to your account's page.(2) Site settings - this drop down's options will take you away from the editor to the chosen section of the site's setting.(3) Page management menu. Here you will find a button leading to the settings of the main site blocks, list of your site pages, pop-ups and your site style settings.Please note that the pages that are displayed here are visible solely in the editor and are not accessible to visitors until you link them to your site menu or other elements. To open the editing mode of a particular page, click on that page's tab in the DROPDOWN list.(4) Quick navigation drop-down. It is another place for getting quickly to another page of your site.(5) Undo and Redo buttons. They are to help you to quickly discard (or bring back, if needed) a change you have just made in the editor. This will work only for the current session in the editor. To undo your site modifications made earlier than within this session and to restore a previous version of your site, we recommend using your site history (see below).(6) Autosave status. This section lets you know that all changes you have made so far are safe now.(7) Preview your site to see how everything looks before pushing the changes you have applied to it live.(8) Publish your site to make it look exactly how you see it in the editor.(9) History. Here you can manually create and store your different site versions and recover any of them when needed. It is very important to have a copy of your site before modifying it further.(10) Comment mode. Used when team members have contributor access. (11) Share your site's link with your colleagues or relatives to get a deeper insight about your website.(12) Hide your editor's menu - the very top row of your editor's top bar - to allow a bit more space for yourself in the editor.

      Blocks in the editor

      ProFusion WebBuilder sites are created with the help of content blocks — full-width sets of elements that are easily adaptable to different screen resolutions. We offer blocks for various business purposes — showcasing images, team presentation, products exposing, describing services, etc. To place a new block on a page, mouse over the area you wish to add a new block and click on the + icon that displays.
      Tip: If none of our pre-made options in the gallery meets your needs, check the Custom Block to see if you can create a block that fits your design needs from scratch.

      Basic actions with blocks

      You can move, delete and hide, or duplicate a block to another page of your site.
      Moreover, our blocks are easily customizable, so you can adjust their layout to match the overall design of the site. 
      For more detailed information, follow the instructions in the article Changing the design of a block.

      See our video tutorial on how to work with the blocks below: 

      Basic actions with the elements in a block

      Your texts, images, buttons, and other block contents are referred to as your site's elements. All elements have their own placeholders — an area they occupy in a block. You can also enrich the look of your blocks by adding additional elements to them, i.e. more buttons, lists, dividers, or social icons, etc.

      Illustration

      Each item has its own settings, but there are basic actions that can be applied universally — you can copy, delete, or move them within the block they are added to.
      Elements are usually placed in columns for quick customization. With the help of columns, you can easily adjust your content alignment or change the background in this specific part of the block. 

      Special types of blocks

      Some blocks in the gallery have unique settings and behavior — for example, collections and lists. Each item in these blocks keeps the same layout as others. For example, if you delete an element from one list item in the collection, it will be automatically deleted from every other list item. This simplifies the editing process a lot!

      Moreover, the collections can be turned into different modes. You can enable a slider mode with the navigation elements as well as organize the items with the help of tabs.

      Basic actions with your text

      To replace existing text in a template with your own, select the placeholder text and enter your own content. You can add an additional text element in a block. You can apply the regular settings to your texts available for all elements — copying it, moving it anywhere within its block, and deleting your text.
      To customize the display of your text — change its style, size, color, line height, alignment, and so on — select the text and choose an action in the pop-up menu:

      Illustration

      The text font is automatically adjusted on your site based on template settings, but if you want to change it, you can do that in Site Settings. If you haven't found the font you were looking for in our gallery, you can upload your own.

      Basic actions with your images

      Adding images to the site is an excellent way to illustrate what your page is about and attract your customers' attention. In the editor, you can upload your own pictures or choose free stock images using the keyword search. 
      Besides that, there are several tools available in the editor that will help you fit your images into the overall site design — for example, add a filter, overlay color, or resize the placeholder of your picture.

      Watch our short video tutorial on how to work with text: