• Move the selected elements by using a mouse or a keyboard;
• Change element size by stretching edges;
• Change font size – Font size can be changed by pressing on Settings icon–>Styles–>Advanced.

Check out the video for a better visualization of Google maps integration:

Check out the video for a better visualization of Social integration:

You can see more detailed description of every Social option below

Facebook fans – Like box
It’s a widget with options to display your Facebook page fans, posts, cover photo and so on. You should put your Facebook page’s URL in the field “Profile URL (required)” in tab General.

Facebook like or recommend button
It’ll display a button with or without a counter of all page likes on Facebook. Put your page/site URL in the field “URL to like”. Choose layout style (standard, count button, count box), verb (like or recommend), color scheme (light or dark depending on your background) and whether to display faces of people who liked your page or not.

Share
It’s an AddThis.com widget that gives you the option to display all social buttons in one box. You can choose icons size and which social networks to show. Available options are: Facebook (just icon with logo), Twitter (just icon with logo), E-mail (send link as e-mail), Google (just icon with logo), Print, More (AddThis option to share in more social networks), Facebook like (native Facebook button with count), Tweet button (native Twitter button), Google plus (native G+ button), and Addthis share (option that collects all of the previous). We recommend using just some of the available options:
– first 6 will display similar square icons;
– next 3 will display native social buttons;
– last one will display all of the above in one button.

VK – ВКонтакте widget
It’s a widget with options to display your VK page’s members, news or just name. You should put your VK page’s URL in the field “ID for Page or Group” in tab General. Choose layout and colors (optional).

VK – ВКонтакте button
It’ll display a button.
You can specify a layout, verb (like or this is interesting) and height.

OK – Одноклассниках widget
It’s a widget with options to display your profile from OK.
You should put your Group ID.

OK – Одноклассниках button
It’ll display a button. You should specify your page’s URL in the field “URL to Like (required)”. Other customizable options are: size, style (oval, rounded, straight), counter position (none, right, top) and text (none, class, share, like).

Flickr widget
It’s a widget with options to display your Flickr gallery. You should put Flickr gallery or set URL.

1. Mark the text which you want to have as a link to PDF (or any other) file.
2. Press the Link icon.
   
3. Select option “File from your computer”
4. Choose .PDF file from your Computer and upload it.
5. Tick “Open in New Window” if necessary.
   

Before altering the image, make a copy of the original file as this process is permanent.

1. Open the desired image file using the Preview application.
2. In the menu bar at the top of the screen, select Tools, then Adjust Size.
3. A window should appear. On the right side of the window, click the box that states pixels and select your desired measurement.
4. There should be three text fields along the left side of the window labeled Width, Height, and Resolution. Type in your desired values.
5. When you’re finished, select OK.
6. Finally, remember to save the file before closing it.

Using MS Paint on Windows

1. Open MS Paint – it’s preinstalled Windows software.
2. Drag and drop your image in Paint. Or use Menu and Open to import it.
3. Click on button “Resize” on home tab.
4. A “Resize and Skew” modal will open.
5. Click on “Maintain aspect ratio”. If you don’t choose it your picture might get stretched.
6. Choose Percentage or Pixels and write the desired dimensions in the fields. It’s enough to write just the horizontal dimention and vertical will be calculated based on original ratio.
7. Click OK.
8. Save the picture.

Other methods

Alternatively you can use any of these options:

• Photoshop
• Gimp
• Online free picture editing tool Pixlr
• MS Photo Gallery
• PhotoScape
• or any other software you know to resize your image.

Site Builder offers an easy solution if you want to have simple e-commerce shop. Here is how you can add a new page with all your products to your site:

1. Open the site that you want to customize through Site builder.
   If you already have a page and just want to add Store to it go to step 9.
2. Right-click on the site’s menu and choose “Add Menu Item”.
3. Write desired menu name in field “Item Name”, choose “Content” below it and select which page’s content to copy (you actually don’t need this content and will delete it afterward so it doesn’t matter which option you’ll choose).
4. Click Apply button.
5. The new page should be added to the menu. If you don’t see it try to extend the width of the menu box. There are two ways to do this:
   • Go with your mouse to the bottom right corner of your menu. The mouse cursor should change to an arrow. Click and drag to extend the width or height.
   • Right click on menu box and select “Properties”. Go to “Options” tab and write a higher number in field “Width”. Click Apply.
6. Save Draft.
7. Click on the newly created page in the menu.
8. Remove all unnecessary boxes using right click and “Remove” on each of them.
9. Once you have a clean page find “Commerce” icon in the top navigation.
10. Go with your mouse on top of it to see the sub-menu and Drag&Drop “Store” to the page’s container.
11. Use mouse or keyboard to position and resize it.
12. Save Draft.

Shopping cart

Now you have added E-commerce box with products to your site. Let’s continue with adding a shopping cart to your page. There are a few options you can choose. Here we’ll introduce two of them and of cource if you have any other idea feel free to experiment:

Shopping cart button in the header

You can add the shopping cart functionality in the header of your site (next to your logo and menu) – this way it will be visible on all pages.

Shopping cart button in the container of “Shop” page

You can add the shopping cart functionality in the container of “Shop” page – this way it will be visible only on this page.

Products

Here is how to add/edit your products:

1. Make sure you are on the right page and you can see the Store box.
2. Right click on it and select “Properties”.
3. First, click on the second tab “Settings” and set the correct currency, price prefix/postfix, thumbnail and product image sizes. If you don’t have available payment options (check the “Shopping cart” functionalities above) click on the pencil right next to the “Contact form” field to set the inquiry fields you want to have. You can find more information about inquiry settings here.
4. When you’re ready with “Settings” click on the third tab “Style” and set the desired styles for products’ attributes.
5. Now you’re ready to go back to first tab – “Edit”. All products in your store are editable in this tab.
   
   • Left panel with product list (1) – you can Drag&Drop them to change the order of appearance.
   • Item name (2)
   • Price (3)
   • Category (4) – You can select a category for this product, or to “Edit” categories in order to add a new one.
   • SKU (5) – Stock Keeping Unit is an unique identifier (Optional field)
   • Description (6) – Put product description in this field. It supports HTML tags (e.g. <b>, <em>, <a href=””>, <ul><li> and so on…)
   • Image (7) – Product image
6. Click Apply button when you’re ready.
7. Save Draft.

Inquiry form

If you don’t want to support online payment on your site you can have an inquiry form for your customers. That way you’ll receive an email with inquiries instead of orders in the system. Inquiries are not recorded on the Site Builder. Here is how to set it:

1. Right click on Store box and select “Properties”.
2. Open the second tab “Settings”.
3. Click on the pencil right next to “Contact form”.
4. First tab “Fields” – Activate the desired inquiry fields that customers have to enter. You can also add an additional question with predefined answers (e.g. How did you find us? – Found on google; Followed a link from another site; Friend told me). Just put one answer per row and you’ll have a select form in your inquiry.
5. Second tab “Email settings”
   • Form will be sent to this E-mail – Put the email that will receive the inquiries. You can specify several emails separated by semicolons.
   • Form will be sent from this Email – Put same email or any other email that will be shown as a sender. This field allows only one email.
   • With Subject – Subject of the message.
   • Form sent Message – The message that customer will see when he sends the inquiry. (e.g. Thank you for contacting us. Your inquiry has been sent and we’ll contact you back as soon as possible.)
   • SMTP Enable – It is an optional advanced setting for sending inquiry emails. If you’re not sure how to use it leave it unchecked – the form will work anyway. If you enable SMTP option you have to add your outgoing mail settings in the fields.
6. Third tab “Settings” – You can add Google reCAPTCH to prevent spam attacks. Go to https://www.google.com/recaptcha/ and register a new site to get the keys.
7. Click Apply button to save inquiry changes.
8. Click Apply button to close Store box properties.
9. Save Draft.

Orders

It’s easy to track all your orders in Site Builder. Here is how to open the list:

1. Make sure you are on the right page and you can see the “Shopping cart” box.
2. Right click on it and select “Properties”.
3. Click on the button “Check orders” on “General” tab.
4. You should see a list of your orders and details for each of them.

Let’s have a look at all customisation options presented on the right side. Background can be fully customised to suit your needs.

1. On the left side, you will see all available pages that you can modify and Default settings option.
   Note that you can either set a default background for all pages or any particular web page that you want.
2. There are four different background sections available for editing – side, header, body and footer background. Click on the section that you want to modify and proceed to the next step.
3. Use this box if you want one consistent color as a background. Click on the Color option and choose a desired color for your website’s background. Click “Apply” and preview the changes.
4. Use this box if you want to use an image or texture as a background of your site.
   Repeating texture (pattern)
   If you want to use a texture, click on the Image option. Choose from listed pictures or “Upload New Picture” and then click “Select” button at the bottom. In most cases you need to select both options under the Repeat setting: Horizontally and Vertically (depends on the image dimensions). Click “Apply” and preview the changes.
   Background image
   If you want to use an image, click on the Image option. Choose from listed pictures or “Upload New Picture” and then click “Select” button at the bottom.
5. Use this box to choose a position of your image background. Skip this step if you have a texture background.
6. The secondary background allows you to add additional image or color to your primary background.

In order to track your visitor’s data in Google Analytics you should first visit analytics.google.com and create a profile for your website. (How to create a profile?). Once your profile is created you should copy the profile id (ex. UA-38401376-1) and follow the next steps to add it to your site in Sitebuilder:

1. Open the site that you want to customize trough Site builder.
2. Navigate to the top right corner, click on the -“gear” icon and select the first option “SEO” from the drop-down menu.
3. A pop-up window will appear. Click on the second tab “Analytics”.
   
4. Paste the profile ID from Google Analytics in the field “Google Analytics Tracking ID”.
5. Click “Apply”.

How to add Google Search Console (Webmaster Tools) code to my website in Sitebuilder?

You can track your site’s search performance in Google Search Console (former Google Webmaster Tools). First you should visit webmasters.google.com and create a profile for your website. Once your profile is created you should verify the ownership of the website. By refering to the link above you will notice that there are several ways for verification but in our case scenario we are going to explain how to do this by placing an HTML verification tag in Sitebuilder field. On Google Search Console verification page click on the option “Alternative methods” and select “HTML tag”. Copy that tag and follow the next steps to add it to your site in Sitebuilder:

1. Open the site that you want to customize trough Site builder.
2. Navigate to the top right corner, click on the -“gear” icon and select the first option “SEO” from the drop-down menu.
3. A pop-up window will appear. Click on the second tab “Analytics”.
   
4. Paste the HTML tag from Google Search Console in the field “Google Webmaster Tools Code”.
5. Click “Apply”.

If you use Svenska Domäner’s site builder to build your site you might take advantage of our prebuild professional templates. All of them are responsive-ready which means they are optimized for all browser widths. Here is a guide how to activate the responsiveness of your chosen template:

1. Open your site in site builder.
2. Find the screen resolution options in the top bar.
   All templates come with checked only “Desktop” screen resolution by default.
   
3. Click on desired screen resolution (wide, tablet or phone).
4. An additional white option will appear right below the default site builder menus.
5. Click on it to turn selected responsive version on.
6. Repeat steps 3-5 for each responsive version you want to activate.

Once you have activated all desired screen resolutions, your site will be responsive on different devices.

Why is it important to have a responsive website?

Responsive web design creates better experiences for users on mobile devices. Since April 21, 2015, it is also considered as a Google ranking factor that responsive sites get a rankings boost.

Having a responsive mobile site mean more traffic from Google:

1. Navigate to service’s main page.
2. Scroll down to Deployed domains section.
3. Click on the “Go to Site Builder” button for the desired domain name.
4. On the next page, you will have to choose the domain name (in case you have more than one domain available) you are planning to use.
5. Select a template for your website. Choose from more than 170 templates* in different categories such as Art, Business, E-commerce, Education, Entertainment, Health, Media, Sport, Technology, Travel and much more.
   Each template comes with pre-defined images and texts that you can easily replace and keep the original template look. Text buttons, colour schemes, and backgrounds can be easily changed.
6. Your template will be loaded and now you can start customizing it. Simply add and edit your content and pictures with Drag&Drop functionality.
7. Publish! Make your website visible on the Network with one click.

*Number of templates depends on your hosting plan.