Knowledge Base

1. • Drag & drop layout from main toolbar;
   • Choose layout composition;
   • Select one of the following layout in right toolbar:
2. Horizontal Layout:
   • Element alignment is horizontal.
3. Vertical Layout:
   • Element alignment is vertical.
4. Floating Block:
   • Element alignment does not have a strict structure.
     Note. No additional layouts should be added to floating block.

Background can have an image/video uploaded:

1. Option 1:
   • Upload it as background gallery.
2. Option 2:
   • Select layout and select background ;
   • Select image/video and upload video;
   • Adjust opacity;
   • Select position, choose what position picture will start from;
   • Select repeat options. Horizontally or vertically to have image/video repeat for horizontal/vertical position;
   • Select "Don't scroll background" to have background at the same position;
   • Select "Offset" to move image/video from the starting point;
   • Select "Auto" to have auto resize picture and select if the picture is going to be stretched to fit the layout or it is going to fit as it is.
3. Preview:
   • 

• Login to your OpsPi Account.

• Go to "Hosting Controls" > "Domains"

• Select and click on your domain.

• Go under "My Website" panel and choose "Start Website Builder"

• Click "New/Reset" dropdown list at top of builder;

• Select "Change template" and choose from templates available or create website from "Blank Template"

Note: All components disappeare when template is changed.

1. Save backup:
   • Open your websites;
   • Open the builder with the original domain using "Edit Website" button;
   • Save website's backup by following step 1 in the link.
2. Restore backup:
   • Open the builder with the new domain using "Edit Website" button;
   • Restore backup by following step 3 in the link.

1. If you don't have a website yet:
   • You can use the "Landing page" template;
2. You can use the "Landing page" template;
   • Сonnect the menu items with the necessary sections of your website by going through the steps (in step 4, use the part for "menu item").

1. Adding layout:
   • Drag and drop layout from main toolbar;
   • Choose layout composition;
   • Add elements into your layout;
   • If you have more than one layout you can add elements to each layout.
2. Customising layout
   • Position:
     Change elements position in layout. Choose from "Horizontal Layout", "Vertical Layout" or "Floating Block" in right toolbar.
   • Alignment:
     Align elements in layout by selecting alignment for that layout in right toolbar.
   • Background:
     Select layout and click background icon in right toolbar; Choose your background layout colour and opacity; Or upload image/video:
     1. Adjust opacity;
     2. Select position, choose what position picture will start from;
     3. Select repeat options. Horizontally or vertically to have image/video repeat for horizontal/vertical position;
     4. Select "Don't scroll background" to have background at the same position;
     5. Select "Offset" to add move image/video from the starting point;
     6. Select "Auto" to have auto resized picture and select if the picture will be streched to fit to layout or fit as it is;
     7. Sele
     opacity, position, etc.
   • Dublicate:
     Add duplicate layouts by clicking on icon on layout you want dublicate and choose "Dublicate".
   • Borders:
     Select layout and click border icon in right toolbar to add borders to layout and choose your width, style and colour.
   • Size:
     Adjust layout size or "Allow to adjust size automatically" in right toolbar.

1. Adding Menu:
   • Drag and drop Menu from main toolbar;
   • Choose Menu composition;
   • Click "New Menu Item":
     • Select type of menu item (e.g. "Page");
     • Enter "Name";
     • Select from dropdown list "Copy layout from" (e.g. Home);
     • (Optional) Select section that needs to be clear; Click "Apply".
2. Customising Menu:
   • Select type of menu item:
     
     • Page on your website.
       Select page from dropdown list.
     • Web Address.
       Enter URL.
     • File from your Website.
       Click and select file from gallery or "Upload New File".
     • E-mail address.
       Enter e-mail address.
     • Phone Number.
       Enter phone number together with country code.
     • Popup.
       Select popup page from dropdown list or click to create "New Popup".
     • Empty.
       Leave the menu item empty.
   • Select additional options to "Open in a New Window", etc.
   • Submenu:
     
     1. Drag your created element to required location or on top of a menu element to create a submenu.
     2. Note: By default if menu is placed in "Header" or "Footer" section of the website it will be shown on all pages.
     3. If menu is in "Body" section of the website, select "Visibility" and select how to show your menu.

1. Adding new page:
   • Select "Settings" at top of website builder and select "Pages";
   • Select "New Page";
   • Select page type;
   • Write page "Name";
   • Select from dropdown menu which page layout to copy;
   • (Optional) Select section that needs to be clear;
   • Click "Apply".
2. Customising new page:
   • Make page as home page, do not index or show popup when page is open;
   • Add SEO to your page: Title, description, etc.;
   • Add page background;
   • Add custom script.

• Click "Page Structure" at the top of right toolbar;
• Select element and drag and drop it to where you want to move it (e.g. select layout and drag and drop it in footer).

To add files to your website, you can upload it gallery.

Types of files that can be added to your website:

• Image:
  'jpg', 'jpeg', 'gif', 'png', 'svg', 'webp'
• Video:
  'ogg', 'mp4', 'mpeg', 'avi', 'flv', 'mkv', 'mov', 'webm'
• Favicon:
  'jpg', 'jpeg', 'gif', 'png', 'ico', 'svg'
• Audio:
  'mp3', 'aac', 'wav', 'ra', 'midi', 'ram', 'wma', 'ogg', 'ape'
• Other documents:
  'pdf', 'docx', 'doc', 'xls', 'xlsx', 'rtf', 'ppt', 'pptx', 'odt', 'txt', 'csv', 'html', 'xml', 'js', 'yml', 'rar', 'zip', 'tar', 'gz', 'eps', 'cdr'

1. Select a Layout and type of layout in right toolbar;
2. Select alignment of your elements in layout;
3. Select alignment for vertical layout, if horizontal layout and "Switch to vertical layout on smaller screens" is selected.

1. Save backup:
   • Open the builder with the initial domain using the "Edit website" button;
   • Select the "Publish" drop-down list and select "Backup / Restore";
   • Click "Download Backup" button.
2. Auto backup:
   • Go to "Publish" dropdown list and select "Backup / Restore" option;
   • Switch to the "Restore" tab and choose auto backup version to restore;
   • Auto backups are automatically saved every 5 minutes.
   • The number of auto-backups per website is limited and it saves 50 copies by default. Only 50 newest copies are saved when the limit is reached.
3. Restore backup:
   • Go to "Publish" dropdown list and select "Backup / Restore" option;
   • Select "Restore" tab;
   • Click "Browse" and choose downloaded backup from your computer or choose auto backup version to restore;
   • Click "Restore".
   

1. Select element / layout you would like to copy;
2. Click in top right corner of the element;
3. Select copy and select layout in which you would to paste copied element/layout;
4. Click in top right corner of the layout and select paste;

• Click "Undo" button at the top of the builder to go back to previous step;
• Click "Redo" button at the top of the builder to cancel undo action. This button only appears if you used "Undo".

• Select element / layout you would like to duplicate;
• Click in top right corner of the element;
• Select duplicated element and drag it to section in which you would like it to appear.

1. How to add anchors?
2. Choose "Advanced" category in right toolbar;
3. Write "Anchor name" (e.g. anchor) (Optional) Write "Class name" and "Name";
4. Select element you want to link to anchor:
   • For menu item:
     • Select "Edit Menu" in right toolbar;
     • Click on "New Menu Item";
     • Select "Link" and write "Name";
   • For image/button:
     • Click icon below "URL" in right toolbar;
   • For text:
     • Select text part you need to add anchor;
     • Click "Link" button in text editor;
5. Select "Page on your website";
6. Choose Anchor name from dropdown list;
7. Click on "Apply".

You can add animations on all elements on your website:

1. Click on element in builder that will have animations;
2. Select "Animation" section in right toolbar;
3. Select "Effect" type (e.g. Fade in, Bounce in, Zoom in) and edit its properties if needed:
   • Direction;
   • Duration;
   • Delay;
   • Loop.
4. Set effect on "Default" or / and on "Hover".

Set text style for your website builder.

• Select "Settings" and "Styles" at top right of the website builder;
• Select text style and select font, size, etc.;
• Select "Links" and set link text colour and link hover;
• Select "Advanced" to adjust aditional features.

• Select "Settings" at the top of builder;
• Select "Favicon";
• Click favicon ;
• Click "Add New" / "Upload New Picture" or drag and drop the file to upload or change favicon;
• Click "Apply".

• Login to your account;
• Go to My Websites;
• Click "Edit Website" button next to domain you would like to publish;
• Make necessary changes to your website;
• Click "Publish" website at top of the builder to make your website visible to public;
• You can publish "Under construction" template of website while you create your website.

• Click "New / Reset" dropdown list at top of builder;
• Select "Reset" and start from beginning.

Note: All your current progress will be lost if you choose to reset template.

• Click "Preview" at top of the website builder;
• You can see how your website will look online through different formats (e.g. desktop);
• Click "Close preview" at top right corner to close preview window.

Your websites are automatically created to look good on all devices.

To check your website responsiveness:

• Select different size screens just above your website content;
• Select preview.
  Select different size screens to see how it looks.

Note: If you need to adjust some elements only on particular screen see the link.

Elements visibility can be managed for:

1. Devices:
   • Select an element / layout / page section;
   • Select "Visibility" on right toolbar;
   • Choose devices that you want to show/hide selected element/layout.
2. Pages:
   • Select element / layout / page section;
   • Select "Visibility" on right toolbar;
   • Choose to "Show on current page only", "Show all pages" or "Show specific pages".

Elements visibility can be managed for:

1. Select a layout you want to adjust;
2. Select layout colour by clicking Background in right toolbar;
3. Select layout colour or image / video for the background;
4. Select "Visibility" in the right toolbar;
5. Select devices that you want your layout to appear in (e.g. a wide screen, desktop, and tablet);
6. Select a different size of screen above your website content (e.g. phone);
7. Insert another layout in the same position where the previous was;
8. Select that layout and choose layout colour by clicking "Background" in right toolbar;
9. Select different layout colour or image / video for the background;
10. Select "Visibility" in right toolbar and set it to show for that layout only (e.g. phone).

• Select element that will be used to download a file (example: image, button, text);
• Select "Advanced" tab in the right toolbar;
• Find "URL" on tab;
• Click next to "No link selected" button;
• Select "File from your Website";
• Click button;
• Click "Upload New File";
• Choose necessary file from computer;
• Click "Select";
• Click "Apply".

1. Press Ctrl / Cmd key on your keyboard and select elements you want to edit;
2. Make changes to selected elements in right toolbar.

Note: If you choose same category elements you will have more features to edit.

Each template has its own default elements and each element is placed differently per template.

So, after changing template, your created website will be lost.

Website have not been created:

• Select the required "Under construction" template;
• Edit website;
• Click "Publish" at the top of website builder;
• Click "New / Reset" dropdown list at the top of website builder and select "Change template";
• Select new template;
• Select the checkbox "Got it" and click "Yes, change template";
• Edit your website, but don't publish it until it's finished.
  Use "Preview" button to view your website.
  Select "Publish" dropdown list at the top of website builder and select "Save Draft" to save your progress.

Hiding website while it is being created / updated:

• Save backup of your current website;
• Select "New / Reset" dropdown list at the top of website builder and select "Change template";
• Select "Under construction" template;
• Select the checkbox "Got it" and click "Yes, change template";
• Edit website;
• Selec "Publish" dropdown list at the top of website builder and select "Backup / Restore" option;
• Restore backup of website you want to continue editing;
• Edit your website, but don't publish it until it's finished.
  Use "Preview" button to view your website.
  Select "Publish" dropdown list at the top of website builder and select "Save Draft" to save your progress.

1. Select an element you want to edit;
2. Select "Visibility" in right toolbar;
3. If an element is not visible but should be:
   • Select devices that you want your element to appear in.
4. If it is still not appearing in the preview:
   • Find the element in Horizontal / Vertical (parental) layout and check for its "Visibility" option;
   • Select layout's visibility for necesary devices so its inner element would be also visible in the preview.