Make it easier for site visitors to find exactly what they’re looking for with product filters. These enable visitors to search for specific products according to category, attributes and price. When it’s easier for visitors to find what they’re looking for, it’s easier for website owner to convert.

This powerful new feature is available in all 2500-product stores. For more about eCommerce plans, read this.

Help site visitors find what they want

Product filters make it easier for site visitors to find the product they’re looking for quickly. They can filter according to price, inventory level, promotions, keywords, product options and attributes. This is especially useful in stores that have many products.

The best filters are those that are pre-configured and enabled according to the number of products you have, available product options and attributes, promotions, stock levels and more. You can add/remove filters manually to create the experience you want for site visitors.

Filters update automatically whenever you add, update or remove products, or when products get sold. This means site visitors always see relevant filters when they visit the store.

Getting started with product filters is easy

1. Go to MANAGE STORE

2. Click on SETTINGS > PRODUCT FILTERS

3. Click on ENABLE FILTERS

4. Select the filter criteria you want to present

There are so many ways to customize your stores to optimize sales and engagement. To read more about recent store updates, see here.

With store management on the go, you can add new products and product images, update existing products (for example, remove items that are sold out) and modify prices and offers (Flash sales, anyone?), all from your mobile device.

There are two ways to access the store panel from your mobile device:

• In your dashboard, tap the more icon on the site you want to edit (three vertical dots) and pick Manage Store from the list of site actions.
  
  
• If you’re already in the editor, tap the more icon in the bottom bar and choose Manage Store.

You’ll be taken directly to the control panel, where you’ll have access to all of the same functions you have on desktop.

After updating your store, just tap Republish and the changes will be live for site visitors to see.

Site visitors will find it even easier to shop on your websites with the new, smoother and slicker Sell on Facebook integration.

With this improvement, your clients' products can be effortlessly promoted on Facebook, increasing the number of people who see their products. This integration is also a great incentive for your clients to upgrade their eCommerce plan, as it’s exclusively available in stores with 100 products or more.

The New Facebook Shop: How it Works

The Sell on Facebook integration brings your store directly into the native Facebook Business Page Store. Visitors on Facebook will see store products just as they do in your site: with the same images, prices, descriptions, etc.

While visiting the Facebook Shop, users can share products on their timeline and with friends, save products by tagging them, or purchase products directly from the website. Visitors can also subscribe to the page, opening a channel for sending notifications whenever new products are added.

Going to Love This!

Integrating Facebook into your stores has so many benefits:

• Millions of potential new shoppers: With all store products visible on Facebook, the number of potential shoppers increases with every product share or like.
  
  
• Familiar interface: The Facebook Store is native, so it’s perfectly synced with Facebook. As for the product images and descriptions, they are exactly what you’ve uploaded to your site.
  
  
• Completely responsive: This shop is perfectly adapted to mobile, desktop and tablet, so visitors will enjoy a fantastic experience on any device.
  
  
• Automatic syncing: The Facebook shop syncs twice daily with your online shop. You can also sync it manually simply by clicking Sync products on the store page control panel.

This powerful selling features is only available for stores with 100 products or more

With these new features, it will be easier to increase sales, convert visitors, and manage their stores.

They’ll be able to:

• Encourage customers to buy more with discount coupons.
  
  
• Manage stores anywhere using the store mobile app, designed for both Android and iOS devices.
  
  
• Offer more products with e-goods such as downloadable audio and video files, software, graphics, etc.
  
  
• Reach site visitors with targeted ads through remarketing with Google Analytics.
  
  
• Save time using CSV export for all data relating to orders, products and customers.

• Show precise prices at checkout with automatic tax calculations.

All features are with no additional charge to sites that already have a 100 product store.

For customers who don’t have a premium store yet, these new features are a fantastic reason to upgrade.

Here’s how it works: simply tag product photos on YOUR Instagram feed.

When Instagram followers tap those tags, they’ll see the product’s pricing, details, and a link directly to the online store to complete their purchase.

An Incredible Way to Boost Site Traffic

Instagram is one of the world’s most popular social networks, with about 1 billion (yes, that’s 1,000,000,000) active users every month. This new product tagging capability, available in 44 countries worldwide (see the full list here), has the potential to seriously increase site traffic and store sales!

Also, your customers have a terrific opportunity to give their Instagram posts real value. The more thoroughly they tag their products, the more traffic they’ll drive to their online stores.

Another Great Upsell Incentive

To enable this feature, you need to have a product catalog on Facebook page, because that’s where Instagram goes to pull the product feed. This capability is available for any site with a 100 or 2500 product store, making the Sell on Instagram feature yet another great reason to upgrade! 

Setup is Simple

Creating stores in multiple languages is simple. Here’s all you need to do.

For a new store

1. Set up a multilanguage site.  

2. Add a 2500-product store to your site.

3. Go to Store Panel > Setting > General > Regional Settings. In the Storefront Languages section, click Manage Languages and select the languages you want. (You have 51 languages to choose from!)

4. Add translations for the products, categories and labels.

5. Publish your site.

6. When visitors switch languages on your site and go to the store, they'll automatically see the store version in that language.

For an existing store

If you already have a store on your site and want to make it multilingual, here’s all you have to do:

1. Go to Store Panel > Settings > What’s New .

2. Enable the Multilingual feature.

3. Continue from Step 3, above.  

Full Integration

In addition to seeing the translated texts of store products and categories, site visitors will also see all default store elements (Add to Cart, Go to Checkout, etc.) in the translated language. Any notifications sent from the store to site visitors will also be translated.

This feature is available to all clients with 2500-product stores, making it a great incentive to upgrade.

As many of our customers know, we have deep integration with an eCommerce tool called Ecwid. In the past, we have relied on the Ecwid store Javascript embed to load & display each page of the store. Pages such as product pages & categories would load after the page loaded & require all javascript to execute before the content would be displayed.

People who follow the SEO industry closely know that Google has a hard time rendering pages that fully rely on Javascript to display content. Google has been trying to educate the community on how to render and display content so that Google is best able to crawl and index the content. Based on this education and our own experience with how well our store content on our website was indexed, we listened to this.

With this new release, we will now server-side render the content of our eCommerce stores for the product, home and category pages of the store. This means that when a crawler (such as the Google or Facebook bot) visits the website, they will see the full HTML & content of the page. In the past, we would not have all the content within the HTML for each store page.

The benefit of this is many:

• Google will find and index store pages much faster. In the past, store pages took a long time to become indexed, because Google had to go into a more lengthy index process of rendering the javascript from the store.
• Google will now find Schema data within the store. This means that they will have solid data about the price, description, SKU and more at their fingertips to populate search results better.
• Below is an example from Google’s Structured Data Testing Tool that shows them identifying schema within the product page of an eCommerce Store.

• Social websites will now find the correct Open Graph image to display when a store webpage is shared on a social website.

We hope with this change we will see continued success with our eCommerce customers and show that we are committed to providing the best platform for agencies to scale their business.

• Single product page enhancement
  
  
• Better Mobile experience
  
  
• Control Breadcrumbs style
  
  
• Cart & checkout page enhancement

These enhancements will improve visitors’ shopping experience, making your stores smoother, sleeker and more attractive on every device. 

Single product page

You can choose from multiple layouts to display items on individual product pages and control elements such as the text location and thumbnail image layout and ratio. With these new customizations, you’re equipped to show off store products in the very best light (and layout) possible.

Your stores look better, on any device

The mobile version of your stores has been updated so visitors now swipe between images (rather than click) for a smoother, slicker, more convenient shopping experience.

Caption: Single product page - Mobile view

Single product page - Desktop view

Customize breadcrumb style

You can now enable breadcrumbs on store pages and set their style as you like. This makes it easy for customers to see exactly where they are in the store. 

Cart & Checkout Customizations

Your new cart and checkout customization capabilities make the checkout process clearer, more attractive, and more user-friendly.

Your online stores - getting better all the time

These are just the highlights of your increased store possibilities - you can also show more store details, control the sign-in link style, and more. Online shopping is sure to be more popular than ever, and these new capabilities will help you refresh your offerings, simply and effectively.

Upgrade to the new store

To use the new store capabilities and customize it using all of the above you will need to upgrade your existing stores - changes may occur after updating it, so please review before publishing. Don't worry, we will auto create a backup version of the site when you click update.

You can send emails to any shopper who entered their email address during the checkout or to any user who has created an account with your store directly.

This feature is available on the 2500 product plan.

Abandoned cart email example:

Using the Square payment processor, you can collect credit card payments online, easily and securely, using the same account.

To add, go to: Manage Store Panel > Settings > Payment > Credit card drop down and enable Square credit card.

Available in the premium store. 

The import tool in StoreFront allows to upload your products in the form of CSV files. You may want to use this if you need to add or update a lot of products at a time. In your control panel, you can find the import tool at Catalog → Products → Import products.

For examples of the import tool usage, please refer to this article: Import-Export. 

CSV

StoreFront uses the CSV format for import and export of files.

http://en.wikipedia.org/wiki/Comma-separated_values 

Essentially, CSV is a plain text format, thus you can use any text editor for creating or editing CSV files. On the other hand, spreadsheet editors provide better editing experience. Currently, the most powerful and convenient tools are OpenOffice, MS Excel and Google Docs. We should note that Excel (especially its old versions) won't always open CSV files properly. There are a number of workarounds, however, we recommend using the free OpenOffice app to edit & save your CSV import files.

File contents

Each line in a CSV file represents the properties of a certain item (e.g. a product, an order item or a customer) separated by a delimiter. The same delimiter should be used for the whole file.

The very first line in a CSV file can contain column names, for example: 

Export always puts column names on the first line. For import, it supports both formats (with or without column names line). The StoreFront import dialog has a relevant option - "Skip first line". In case this option is selected, StoreFront just skips the first line in the file without any verification. If the "Skip first line" option is off, it means that the whole file contains data, and StoreFront checks every line.

Data columns separators (delimiters)

StoreFront supports three CSV value separators:

• semicolon
  
  
• comma
  
  
• tabulation

Line separators

StoreFront supports three different line separators for CSV files:

• \r\n - Windows
  
  
• \n - Unix, Linux, MacOS X
  
  
• \r - classic MacOS

StoreFront automatically recognizes file line separators, you do not need to set it up or adjust it in any way.

File encoding

StoreFront supports more than 10 charsets, such as UTF-8, UTF-16, US-ASCII, etc. If all your products and categories are in English, you don't need to change anything. Use the default encoding settings ("UTF-8") and all the information will be imported correctly. If you want to import a CSV file with non-English characters, we strongly recommend using the UTF-8 encoding for your CSV file. If you cannot use UTF-8 for your CSV file for some reason but use some other encoding, you will need to set the correct encoding in the import settings. Otherwise, the information will not be imported correctly.

Number formatting

There are two strict requirements for number format in StoreFront import:

1. The decimal mark (decimal separator) must be a dot (.)
   
   
2. A number must not contain a thousand separators

Columns 

StoreFront recognizes 14 columns in the CSV file, their descriptions are below:

FAQ 

Can I use an XLS/XLSX file for import?

An Excel spreadsheet file (XLSX) cannot be uploaded as is, but you can convert it to a CSV right in Excel and then upload to StoreFront. To convert XLSX to CSV, use the 'Save as' option in Excel and choose the 'CSV' format from the available options to save the file with '.csv' extension.

Please keep in mind that having a .csv extension alone doesn't make the file valid. The file contents also matter, so please make sure they comply with the import format specification.

How can I import product options?

The options are rather complex properties of the products, and it is not really feasible to put them into the same plain table, as described above. So StoreFront doesn't allow importing product options using the CSV format described here yet. However, you can partially import product options using CSV files in X-Cart format. Please, refer to this article: X-Cart import format and StoreFront

Can I import products from other file formats?

Yes, you can import your products in X-Cart and LiteCommerce formats.

More information on them: 

• X-Cart import format and StoreFront
  
  
• X-Cart import-export guide
  
  
• LiteCommerce: Import/Export Procedures and CSV File Format

Can I import categories?

StoreFront doesn't allow importing categories using its format yet. However, you can import categories using CSV files in X-Cart format. Please, refer to this article: X-Cart import format and StoreFront

When I import a CSV file, StoreFront shows that the import will take a few hours, however usually it takes about 5 minutes. Why?

Import process is a quite long and resource consuming procedure. Thus it can affect server performance, so all the other stores which use the same server can load slower because of that. We don't want this. We want to make sure, that all the stores are always loaded quickly. So we have implemented a smart way to import products from different stores. How it works (in a nutshell):

• if some StoreFront users try to import products at the same time on the same server, StoreFront doesn't start to process multiple import jobs simultaneously. All the import files are put into a queue and are processed sequentially, one by one.
  
  
• If the server load is too high, all the import jobs are stopped temporarily. StoreFront will continue to import products automatically, once the server load becomes normal.
  
  
• depending on the server load and the length of the import queue, StoreFront calculates the approximate ETA of import start. It isn't 100% exact, but gives an estimation when your file will be processed.

As a result, even if 100 StoreFront users decide to import 20,000 products each at the same time, all the other stores will work without any delays or slow downs.

In your particular case we assume that the import queue has already had a bunch of files to import and the server load has been a bit high. So it has taken longer than usual to import your file. 

What does the "skip column" option do? 

The "skip column" options in the import settings dialog are necessary when your CSV file has some columns that cannot be processed by StoreFront, and you for some reason don't want to modify your CSV file. So, just enable the "skip column" option and StoreFront will ignore the corresponding column in the CSV file.

Troubleshooting

In most cases issues with CSV import in your StoreFront store are related to one of the following:

• invalid CSV file format
  
  
• import settings that the store administrator chooses in the StoreFront control panel do not correspond to the file content

Please look at these screenshots. There you can see an example of a CSV file content and the corresponding import settings:

If you have any problem when importing a CSV file to StoreFront, you should first of all check the below points:

1. Your file is in CSV format. For information on what CSV format is see http://en.wikipedia.org/wiki/Comma-separated_values
   
   
2. Your file contains columns that StoreFront supports.
   
   
3. Columns that represent numeric product properties (e.g. price, quantity, etc.) contain numbers, not text-strings.
   
   
4. Columns enabled in the import settings are the same as in the CSV file. For example, if your CSV file contains SKU, name, price and weight columns, exactly the same checkboxes should be ticked in the import settings dialog (SKU, name, price, weight).
   
   
5. Column order in the CSV file corresponds the column order in the import settings.
   
   
6. The values separator (comma, semicolon, or tab) used in your CSV file corresponds the 'Delimiter' option in the import settings dialog.
   
   
7. CSV file encoding is the same as the one you select in the 'Character encoding' option in the import dialog.

Please find the full format specification here.

An error is displayed on the import page. What does it mean? 

The import function may generate the following errors:

I have tried to update my products with import, but it has duplicated them. Why is that? 

When updating your products with the import function, StoreFront checks if the incoming products already exist in your inventory by their SKUs as the key field. It takes each row of the imported file and verifies whether the SKU is already present among your products. The SKU is verified word-by-word, i.e. the length and the exact characters in the SKU must match both in the imported file and ina your inventory in order for StoreFront to consider this product a target for the update. If such a product is not found, StoreFront will create a new one and will store the information from that row in the new product.

So, for example, SKUs '00050' and just '50' are completely different for StoreFront, despite that they both may represent numeric value 50 and may look the same for humans. When you have a product with SKU '00050' in your inventory, and try to import a product with SKU '50', you will get 2 similar but separate products - because for StoreFront those 2 SKUs are completely different.

We have had a number of reports that Microsoft Excel has to cut off the leading zeros from the SKUs, just like in the example above. This may result in duplicating products when you quickly edit your exported inventory in Excel and import it back to StoreFront.

Excel automatically selects the most similar format for the columns, so if you use numeric SKUs and try to edit an exported file from your StoreFront inventory in Excel, it may decide that SKUs are pure numerals and their leading zeros are meaningless.

To prevent such behavior, you can try to rename the exported *.csv files from StoreFront into *.txt, open them in Excel with 'Open…' menu command (not just by double-clicking on the file). In this case Excel will show the settings dialog, where you can select the exact type for each column; you should select the 'Text' type for the SKU column to preserve its leading zeros.

The other solution is to use OpenOffice.org free office suite to edit the *.csv files exported from StoreFront. No renaming is needed then: you can just open the *.csv files with OpenOffice spreadsheet editor and it will show the settings dialog immediately. Make sure that the settings you use there produce a meaningful table of product properties for you, and the SKU codes match the ones you actually use in your StoreFront shop.

Product images failed to import. Why?

In some cases everything is imported fine except for the product images. If you face such a problem, please follow these troubleshooting steps:

1. Check whether the images URLs you put in your CSV file are correct and accessible on the web.

The images prepared for import have to be available by direct links, e.g. 'http://example.com/images/product_1.jpg'. To check them you can try to open an image URL in your browser: if the image is opened without asking for password or login, it can be included into the import file.

2. Make sure each product image URL leads directly to the image file, not to an HTML page that contains the image.

For example, if you upload your images to some image hosting like Flickr and want to include their URLs to your StoreFront CSV import file, you have to use the direct links (e.g. http://example.com/image.jpg) , not just URLs of HTML pages that display that image (e.g. http://example.com/image_page.html) . Here's how to get a direct link from an HTML page containing the image:

• open the page in your browser
  
  
• right-click on the displayed image
  
  
• the mouse context menu will likely contain a selection like 'Copy image URL' . This URL will work unless it is protected by your account login.

I use non-English characters in my product names and descriptions. When I export them to a CSV file and open them in Excel, the characters do not show correctly.

StoreFront exports all the information in UTF-8. This encoding is widely used and is already a standard for web applications, because it is compatible with all languages. For example, you can have a part of your product description in French and the other part - in Japanese.

However, if you use a non-English version of Excel, it may expect your CSV file to be in a different encoding, for example in the encoding of your national language. Thus, non-ASCII symbols will be corrupted. In order to fix this issue take these steps:

• Launch Excel.
  
  
• Go to the "Data → From text" page (if you use localized Excel, the actual menu items` names may vary). Open your CSV file.
  
  
• The "Text Wizard" window will appear. Set the correct delimiter and charset (use "UTF-8")

All decimals are rounded to nearest integers after importing a CSV file. Why?

Such issues are caused by an incorrect number format used in the import CSV file, e.g. when you use a comma as a decimal separator (it must be a dot). Please refer to this paragraph for the details: Number format.

Demo Store: Try free for the full store experience  

Build an entire store, with all the features of the Standard Store plan (previously the 100 product store), show it to your clients, all before you pay for it. This store does not include a checkout option until it is paid for. After purchasing a plan, checkout is possible without further customization.

Unlimited Store: Includes Square POS integration  

This opens all the possibilities that you need to get the most from your online business. It includes everything offered in the lower plans as well as Square POS support, global discounts and, of course, unlimited products.

New Names Reflect Plan Features

In addition to these new plans, two current plans have been renamed to better reflect their feature set:

Standard Store: Previously the 100-Product Plan, includes store search and display filters, full customization, sale options and more.

Advanced Store: Previously the 2500-Product Plan, includes 1G digital downloads, discount coupons, automatic tax calculations and more. 

Adding a store

If you have not added store functions on your website, do the following:

1. Click Store on the left menu.
   
   
2. Click the Upgrade button to upgrade your plan and add the store feature to your Website.

Adding products to your store

Enter a product name and price, and upload an image for each product in your store. Click Add more to add more products to your store and click Save when you're done.

Localizing your store 

For your store to work, you need to provide units of currency and weight for your products. The default is the U.S. dollar and kilogram, but you may wish to change these to better suit your location.

Setting up your shipping 

If you're selling physical goods, you'll want to set up shipping for your store to make sure your customers pay you for the cost of shipping. If you aren't selling physical goods, you'll want to disable shipping for those products.

Setting up payment options 

You need a way to get paid. By default, PayPal and Stripe are the simplest ways to let your customers pay you, but we allow for a huge variety of other payment methods. Click the PayPal or Stripe options to select a payment method, or click Advanced payments setup if you want to use a different method.

Finishing your store 

Once you've gone through every step in the set up, click the Finish Store button to start selling. You can always come back to this page to edit your store's settings after you've created it.

Manage your store 

When your store is created, you can manage your store by clicking Store on the left menu, then clicking the Manage Store button. This will bring up the Store Control Panel, where you can manage your sales, catalog (products), promotions, and store settings.

Other options include adding store widgets (e.g. cart, search box), adding store categories as a subpage of your home page or another page on your Website, accessing the FAQs to give you more information about your store, and upgrading your store to feature more products.

Considerations 

In addition to having more products, each eCommerce Store plan has more features and functionality. Be sure to carefully check the plans descriptions for more information.

The new Real Estate template is a perfect start for building their website. In addition to using it for real estate agents, it can be used for car dealerships, hotels, and more.

The template has a rich Contact Form, so customers can easily collect important information from site visitors.

It also has a list for describing key features, a blog for posting news, and the new Photo Gallery, designed to show off your customers' images in their very best light. 

The template has bold colors, a friendly, accessible font, and great photo galleries that feature the engaging new zoom effect.

Check out the bubbles!

Like the cool bubble effect running through the middle of it? This effect was made using a cool design trick that you can copy in any template that you like. To replace the background image, go to the Design panel, click Site Background, and replace the background image. You can also do this with a row background.

To replace the bubble shape, simply build a .png with your preferred design tool and use it instead of the bubble shape image.

The template features bold, easy-to-read fonts that convey information clearly at a glance. The desktop version features a sidebar header, freeing up the full height of the page for other content. The sidebar header is fully customizable, so you can add as many widgets as you like.

The tablet version of the template features an expandable menu, enabling more attention to be drawn to the Click to call message in the header. You can replace this link with any other icon that you like, connecting it to the appropriate internal or external page.

The template has a hamburger icon in all versions and a side-entering expandable menu on desktop. This leaves maximum room for images, while enabling navigation to be revealed on a click. The sidebar is flexible, so you can add more images here if you like (even an image gallery).

The template includes a blog, so clients can stay in touch easily with their customers, as well as an image-rich project page that includes space for descriptive texts.

This landing page is designed to direct visitors towards a single goal - to reserve a spot for an event. Of course, it can be adjusted to suit any goal or campaign that your customers have. The design is simple but sophisticated, with an elegant diagonal section contrasted by eight tidy circles in the photo gallery.

How to create a diagonal section

With a bit of graphic editing, you can create a diagonal section in your websites just like the one in this template. (Of course, you can also save these rows as a Section, and simply reuse in any other website. For more on how to save as a Section, click here).

Step 1. Use Photoshop or another graphic editing platform to create a triangle with a width of 1920px and a transparent background, and export it as a PNG.

Step 2. Add an Image widget at the bottom of a row and upload this triangle as the image. Set the row to full bleed, make sure it has only 1 column and that the background is an image or color. If it’s a color, make sure it is different from the triangle you created. Add widgets above the triangular shape; for example, text, a button, etc.

The effect is most visible when the section below this one has the same color as the triangle you’ve added.

For a diagonal top and bottom

This effect is created using 3 rows:

Row 1: Full bleed, no spacing, add an image widget with a triangle image (as described above) and set it at the top of the row. Set the row background color to a different color than that of the triangle.

Row 2: Add your content, with as many columns as you like. Make the background row color identical to the color in Row 1.

Row 3: Full bleed, no spacing, add an image widget with a triangle that is the mirror image of the one you added above. Set it at the bottom and set the same row background color as in row 1 and 2.

The templates features the new Countdown widget, enabling you to create a sense of excitement and urgency. The template is short and concise, containing all the elements you need to encourage visitors to sign up. There are six short bullets for describing webinar content, logos to add a sense of trust, and a contact form for collecting visitors’ contact details.

Cool technique makes the countdown stand out

Placing the countdown widget above the fold ensures that everyone who opens the site sees it right away. Highlighting the countdown with an unusual shape in the background draws even more attention to it.

To recreate this technique in your own websites, follow these steps:

1. Start with a template that has a top bar header (you can change this via Global Design>Site Layout). Choose a great hero image, go to Global Design>Site Background>Background per page and upload the image.

2. Next, make sure the background of the header and first row are transparent (no color, no image, no shadow). Make sure the row contains a Title widget (in most templates, there will already be one).

3. Set the same background color (blue in this case) for the header and first row, and set opacity to 50%.

4. Add a second row below the first one.

5. Set it to full bleed, set the background color to blue (50% opacity) and the top padding to 30px.

6. Right-click on the column in the row, add a shape with a transparent background image and set it to cover. (Use Photoshop or another graphic editing platform to create an image and export it as a PNG).

7. Add the Countdown widget to this column and set the top margin to -50px so it appears at the top of the shape.

There are eye-catching images on every page, perfect for displaying works by stylists, make-up artists, designers, or artists of any type.

The template features a Photo Gallery widget on the Homepage and includes an additional Gallery page, for showing even more images. Images in both galleries have a reverse grayscale effect on hover, perfect for drawing attention to the images and encouraging users to click. You can replace this effect with one of 8 hover effects and/or more than 25 possible animations, all available in the widget's Design Editor.

The template’s About Us page features the new Accordion widget, ideal for displaying commonly asked questions and answers.

The Pricing page features a Restaurant Menu widget to display services and prices. You can import services from an online menu (if your client already has one) and update with images for each entry, if you like.

This template is excellent for any type of service provider, from medical professionals and cosmeticians to lawyers, consultants and more. It has enough pages for providing concrete information about services, while being small enough to accommodate a single provider.

It also features the new mobile header and menu, which gives you a wide variety of possibilities and customizing the content.

The template includes the new Audio widget, which enables you to add URLs of public tracks saved on SoundCloud or Mixcloud. Choose from several layout options for increased design flexibility. The template also includes a Video widget, for adding YouTube, Vimeo or DailyMotion videos.

There’s a short bio in the site, and a gallery for showing vibrant photos. The List widget is used to display upcoming performances and the Contact Form widget is used to collect subscriber names and addresses.

Notice the cool brush stroke effect?

This cool brush stroke effect is easy to recreate in your own websites. Here’s how you can do it:

Step 1. Use a graphic editing platform to create a brush stroke design with a transparent background. Export it as a PNG.

Step 2. Set a single image as the background for the entire page (in this case, it’s the image of the performer). As you add rows to the page, alternate between having transparent backgrounds (so the background image is visible) and a color background (in this case, black).

Step 3. Set the color of the brush stroke design to black and then add the brush stroke at the top and bottom of alternating rows.

As visitors scroll, they’ll see the same background image along the entire site, and the sections will be set off with brush stroke borders.

We’ve designed this template with landscapers and gardeners in mind, but you can use it for any client who offers services that are easily displayed with images; for example, photographers, event planners, chefs and more. 

The template includes a Services page with space for an image for every service. The Projects page also has room for images, so you can display your clients’ achievements in full color. As always, make sure you use high quality images in all of these elements.

The Contact us page comes with a Contact Form, and the header features a button (a click to call icon on mobile) for requesting a quote. At the bottom of every page is a stylized footer that adds a touch of elegance to the site.

If that’s what you’re looking for, you’ll love the new Empty Template. It’s a blank template, with no almost no content at all. Simply fill it with the widgets, text and images that you like.

This template, which includes five pages, a header and a footer, gives you complete flexibility to work your website building magic. It includes five pages, a header and a footer.

This template is particularly handy if you:

• Want to start from scratch, and let your imagination run wild.
• Want to build your site using sections and pages that you or your team have designed.
• Already know what you want in the website (and don’t want to start with something predesigned).
• Are an advanced user and want total website building freedom.

Just add images and content, drag and drop widgets, and customize with ready-made sections or full pages.

Check out new Electrician template, designed especially with this type of client in mind.

The Electrician template has a rich Services page that enables you to display multiple services with alternating rows of images and texts. Each service is linked to the Contact Form, so visitors who want more information can contact the site owner directly. The Services page also features a Photo Gallery of images with descriptions to show another perspective on the site owners' range of services.

On the Homepage, the Photo Gallery features a slightly more eye-catching display, where images are shown in different sizes and styles. It’s a great way to draw attention to high-quality professional images. Also on the Homepage, there's a bulleted list is built using the Accordion widget, so you can enrich bullets with descriptive content that doesn’t take up too much space on the page.

The template makes use of the Accordion widget by using it to show upcoming events and their descriptions. This enables you to include a lot of information in relatively little space. You can use it for any content-rich information that your client wants to display (without taking up too much room).

The ability to collect donations is important for many faith-based organizations, and the donation tab here, linked directly to PayPal, is a great way of doing this. The template also includes easy communication channels with website owners via a Click to Call, Click to Email and Contact Form widgets, as well as a Blog.

The template includes an attractive photo gallery that’s ideal for showing off lots of images. Each image features a cool hover effect and can be linked to a variety of destinations. There’s also a popup on each image, so you can add further details on each listing that you're promoting.

You’ll also find a blog, for updating visitors about related news items. As with all blogs, you can import existing blogs (if your customer already has an up-and-running blog) or take advantage of our newest blog improvement: adding a blog author directly from the blog settings (so you don’t need to set up a blog permission).

You can replace these images with healthier fare, of course, and use this template for any restaurant, bakery or cafe, or any other client (barber, cosmetician, etc.) who has high-quality, relevant images of their services and can make good use of this template's design and functionality.

The website features a hamburger menu (no pun intended) on desktop, leaving maximum space for a mouthwatering hero image. The Menu widget has a page of its own, and can be updated with a menu pulled from the internet or by manually entering information. The menu in the template doesn’t have images, but if your customer has professional images of every dishes, they can certainly go ahead and load them. There’s also a contact form for booking a table, a map for easy access, and relevant social links.

Cool header technique

See the cool technique in the header that sets the logo so that it overlaps over the section below?

To reproduce this technique in your own sites, follow these steps:

1. Go to Design > Site Layout and choose the desktop Expandable Menu option. This header has a 1-column row, a hamburger menu (on the left or right) and an image with the logo in the middle.

2. Add two more columns to this row. You'll now have 3 columns in total; place the logo in the middle column.

3. To make the logo overlap, right-click on the image. Select Edit Design, go to Spacing and set the bottom margin to -60px.

Some Tips for Your Next Restaurant Site

Building restaurant websites for your clients? Here are a few things to keep in mind:

• Use excellent quality food images: Don’t settle for less than the best. A bad food image will do more harm than good
• Add cool atmosphere images if you have them: A good atmosphere image or two can really help convey the spirit of the site.
• Include relevant social links: Online reviews are incredibly important for bringing new customers to restaurants. Yelp and TripAdvisor are two important networks for sharing reviews; if your customer has a presence elsewhere, add these links, too!
• Update images and content on the go: Restaurants are dynamic businesses with new menu items, sold-out dishes and more. Encourage your clients to keep their sites up-to-date by updating content on the go using mobile editor. For more about on the go editing for restaurant websites, read this.

You'll find 3 fantastic new landing page templates in your editor, ready to be customized so your clients can collect sign-ups, increase reservations, attract shoppers and more.

A Few Landing Page Tips & Best Practices

Before you decide on which template to use for your next landing page, here are some best practice reminders:

• Goal Oriented: Landing pages should have a single goal (for example, get visitors to sign up, call now, join, etc.) and this goal should be supported throughout the page.
  
  
• Visible Call to Action: Visitors need to know what they are supposed to do at a glance, and the Call to Action (usually a button) should be visible immediately when the user reaches the site.
  
  
• Mobile Friendly: As with all things in life, landing pages need to look great on mobile. This means key messages (for example, the Call to Action mentioned above) must be above the fold on mobile, too.
• Knock Visitors' Socks Off: Landing pages need to look great. Customize the template you choose with high-quality images, readable fonts, and bold colors.
  
  
• Load quickly: Visitors won’t want to engage in a landing page that loads slowly. Luckily, all websites, including one-pagers, load really really quickly. You can test your landing page speed at Google here.
  

Your New Landing Page Templates

Amber: This landing page has a bold call to action that’s visible right from the start. The button color matches the image, so be sure to customize according to the image you choose. There’s a click to call icon in the header, so visitors immediately see two ways to get in touch.

Consultant: The layout of this landing page is great for conveying textual information to support the goal of the site. The color of the button matches the color of the company logo; consider customizing to match your own clients’ logo.

Real Estate: In this landing page template, the tagline attracts more attention than the image, so make sure that the text you add is short, catchy and clear. The button and contact form title are the only elements with color, making them impossible to miss.

It has a video background on the home page, class scheduling, and more.

Meet your new Sections

With these gorgeous new Sections, you'll take your site designs up a notch, all with zero effort.

Find in the INTRO category: Side-by-side buttons

Find in the FEATURES category: Six-column row

Find in the ABOUT category: Multi-columns with image

Find in the TEXT BLOCKS category: Five-column row

Find in the TEXT & IMAGE category: Multi-column section with image

Find in the TEAM category: Grid with multi-column cards

Find in the CONTACT US category: Contact information with icons

Filled with sweeping background images and calming colours, it’s perfect for sites that focus on individuals who provide professional services.

Use it for everything from life coaches and personal trainers to interior designers and event caterers.

The template has large background images on every page, designed to create a sense of vastness and space. If you replace these images be sure that the images you use are of excellent quality. Also, note that the tagline takes centre stage on the homepage, so make sure it is well-written and clear.

There’s a blog in the site, so site owners can keep in touch with visitors easily, and a Services page that enables visitors to learn more by submitting a simple contact form

The template makes use of the restaurant menu widget to show prices and short descriptions. (It’s just one of the many ways you can use the restaurant menu widgets for websites that have nothing to do with food!) There’s also a Services page, for providing a fuller description of the services.

Check out the stylised shrinking header at the top of each page. The regular header is transparent, showing off the background image at the top of each page in the site. When the user scrolls, a transparent header won’t be , the header shrink and its background turns to black, so that it’s perfectly visible (but not distracting) on scroll.

The site also includes a gorgeous gallery with images that zoom on hover, for a dynamic touch. 

The template features a shop that shows off many recently added store capabilities. For example, each item is displayed with multiple product images. This is a great way for giving customers a really good look at the items you’re selling.

You can choose from multiple layouts for single products and control elements such as text location and thumbnail image layout and ratio. New store features such as breadcrumbs and more cart & checkout customizations are also part of this template. Of course, they’re available in every online store you build.

With the recent store update, all of your stores look better on mobile. This is great news, of course, because more people are doing more of their online shopping on mobile.

Tips for building great eCommerce sites

Ready to build an online shop with this new template? Here are some tips to keep in mind as you do:

Use excellent quality images

Don’t use images that don’t do justice to the products. Hire professional photographers and make sure the images look great.

Use realistic images

The images you use must accurately reflect the product. The last thing your customers want are returns because the item on their site doesn’t live up to its photo.

Optimize with social media

Facebook and Instagram are great channels for finding new customers. Tagging images on Instagram and connecting online shops to Facebook business accounts are easy ways to expand your online store’s organic reach.

Add site personalizations

Promotions for return visitors, coupons for visitors during certain times of day, and more are all great ways of increasing interest in your store. Learn more about site personalizations here.

Write great product descriptions

Images are important to the success of your online store, but don’t underestimate the value of a great product description. It should be simple, accurate and enthusiastic. Also, make sure it’s error-free.

This gorgeous template is just what you need to show off their portfolio in style!

The first thing you’ll notice is the rich, colorful photo gallery widget that takes up the entire homepage. This photo gallery really does justice to a person’s portfolio, making images the most important elements of the site.

Each image in this gallery features a description that’s visible on hover, and is connected to a full page that describes the product. The product description page features an image slider (so you can show multiple images of each product) as well as a photo gallery with related products.

This template is engaging and colorful, a great place to begin when creating inspiring portfolios for your customers.

The template has a bold hero image for capturing the atmosphere of the event you’re promoting. This image features side-by-side buttons (built using Rows Inside Rows) that are ideal for presenting two important Calls to Action in the same valuable space. There’s an agenda built using the Accordion Widget and a section with room for images and short bios built using the Image Gallery. There’s also a registration form built with the Contact Form widget.

The design is clean and modern, with plenty of white space, bold and bright colors, and space for a few really good images. There's also a couple of really nice borders built using the cool design trick described below. 

Recreate these stylized borders in your own sites

Notice the cool rounded arrow shapes at the bottom of the hero image and top of the footer? These shapes were created using the Image widget and a bit of graphic designing.

For the top white rounded shape:

• Build a white rounded arrow shape in Photoshop (or some other graphic editing platform) and export it as SVG.
  
  
• Add an Image widget at the bottom of the row with the Hero image and upload the white shape.
  
  
• Link the image to an anchor on the page (in this case, it scrolls slightly downwards on the page, although you could link the image anywhere you want on the site).
  
  
• Make sure the row immediately below this image is white as well.

For the bottom purple rounded shape:

• Build an identical rounded arrow shape in purple and export as SVG.
  
  
• Add a row to the footer, immediately above the row with the footer information.
  
  
• Add an Image widget to this row and upload the purple shape.
  
  
• Make sure the footer is transparent and set the color of the row under the shape to be the same purple as the shape.
  
  
• To allow this shape to cover the bottom of a map, open the footer design editor, click Spacing and set the top margin to -40px.

This template features sidebar navigation on desktop, for a sleek, modern look.

Some of the highlights...

The sidebar stays on the left side of the screen on scroll (you can move it to the right side, if you like), enabling you to keep important information visible regardless of where the site visitors scrolls on the site.

Also, you can add any widgets that you like to the sidebar (for example, image widget, image slider, and more).

The template has multiple pages, and plenty of room for images and short descriptions. On the Home page, there are sections for short descriptions, testimonials, and client icons. On the Services page, there are sections for describing individual services (with images and with icons), a section for getting in touch, and a section with pricing options. There's also a FAQ page and Contact page with business hours, social icons and more. 

You got it!

You now have more editing possibilities in your tablet site layouts. You can add any widgets that you want to the header and expandable menu, choose whether the sidebar enters from the left or right side of the screen, decide what effect the sidebar has when it appears on the site (for example, whether it pushes the page content aside or covers it), and more.

With this new flexibility, you’ll be able to boost tablet site conversions by adding important icons and messages to the header or expandable menu. You’ll also have more design possibilities.

Here's how to get it

To get the new tablet layout in your website, simply open the tablet header Context Menu, click Edit Design, and click Update header. If you don’t see the Upgrade header message, go to Site Layout and choose the rightmost tablet layout.

Note: When you switch your site layout, an automatic backup is made. To access this backup, open the site Settings and click Backup Site.

In addition to updating your tablet header, your mobile and desktop headers have also been updated. 

It’s a solid structure for starting any website and includes key sections including Features, How it Works, Testimonials, Plans and Contact.

All of the sections are neatly arranged in a single page, with anchors connecting each section to the shrinking header at the top. This means site visitors can find their way around the site quickly, regardless of where they scroll on the site. The minimalist design makes it easy to customize to perfection.

Notice the wave in the middle of the template?

You can use this cool design trick in any website that you like. To replace the background behind the wave, go to the Design panel, click Site Background and replace the background image. You can also do this with a row background.

As for the wave shape, it’s simply a PNG that sits on a full bleed row. To change the shape, build a PNG with your design tool and replace the wave shape image.  

With a rich services page and a blog, it’s perfect for customers who have a lot of content that they want to share with their website visitors.

You’ll find handy icons that you can customize with your customer’s text, a contact form for booking services and testimonials.

In addition to having plenty of inspiring images, it also has several features that will help your clients promote classes, describe instructors, publish health-related news and more. 

Eye-catching classes page 

This page features short descriptions of each class, along with key details about duration, level of difficulty and more. It’s built using inner rows for a rich design that has room for bulleted information on one side and descriptive text on the other side, including a button that could lead to a sign up, more information, the calendar, etc.

How to reproduce this design in your own sites 

To recreate this look in your own sites, follow these steps:

• Row 1: Add an image background and set it as parallax. Set the top and bottom padding to the height you’d like. 
• Row 2: Add a second column to the row. Set the left column to one-quarter of the row width and the right column to three-quarters.
• In the left column, set the background color to white, top margin to -50px, and add 3 widgets: title, text and button
• In the right column, set the background color to black and add an inner row.
• The inner row has 2 columns. In the left column, add an H4 widget. In the right column, add a text widget.
• Copy and paste this inner row to create multiple rows and replace the widgets in the right column (for example, with business hours, images, etc.).

Striking header that looks fabulous on scroll

Download

• Choose a website layout with top navigation. Go to Global Design>Site Background>Background per page and upload a great hero image.
  
  
• Open the header widget and choose the fourth layout (it features three columns). Set the background color to black with 40% opacity.
  

        This header is made up of three columns.

• The left column has the logo; set the background to transparent. 
• The middle column has the navigation; set the background to black. 
• The right column has a button; set the background to the same color as the button.    
  
• Turn on the Shrinking header toggle and set the background color on scroll to black. In the row immediately below the header, add a column so there are two columns. In the left column, add a title widget and button; in the right column, add a social icon widget and align it to the right.
  
• Set the same background color for this row as you set for the header (black in this case) with a 40% opacity.

Schedule page featuring Google Calendar

Site visitors will stay up to date on everything that’s going on at the gym thanks to the new Google calendar widget. It’s really easy for your clients to use and manage. Simply connect your client’s public Google calendar with the site, and the site will automatically update every time your client updates the calendar. It’s a great tool for clients that have regular events (such as workshops, classes, lectures, etc.). For more about the calendar, read this.

Fabulous blog

Blogs are a great way of keeping site visitors engaged when it comes to health and fitness. It can include weekly or semi-weekly updates about what’s new, health tips, seasonal advice and more. Of course, it’s a great place for showcasing images. You’ll find great images in the template, but we recommend that you encourage your clients to add high quality ones of their own.

The mobile version of this site is particularly striking and designed with careful consideration of how visitors on mobile will experience the site.

Some template highlights

• Google Calendar widget: Engage visitors and keep them informed by showing upcoming events and activities. For more on this new widget, read this.
  
  
• Double navigation bar: This gives you plenty of room for displaying pages.
  
  
• Donation page: Enable PayPal donations quickly.
  
  
• A blog: Accessible via the What’s New tab, this is ideal for engaging visitors with regular updates about student life.
  
  
• Accordion widgets, for maximum use of space: Course programs are arranged in side-by-side accordion widgets in two inner row columns. This allows for texts (that can be linked to full pages) that take up a minimal amount of space.

Simple Steps for Recreating This Template's Neat Designs

Overlapping slider with a negative margin

The eye-catching effect on the homepage features a slider image with a negative left margin that enables it to overlap with the larger background image. To create this look in your sites, follow these simple steps: 

1. Add a full bleed row with two columns.

2. In the left column, set the left padding to 50px and add the following widgets: H1 text, paragraph text and button. 

3. In the right column, add a background image and set the position to cover. Add an image widget. Set the top and right border of the image to 28px and set the color to dark blue. 

4. Right-click on the image, align it left and set the left margin to -40px.

Checkerboard effect for displaying information

To create the effect you see here, follow these steps:

Row with image on right

1. Add a row, set it to full bleed, and set the top and bottom padding to 70px. 

2. Add a column to the row so there are 2 columns. In the left column, set the left padding to 50px and add icon, title and paragraph widgets.

3. In the right column, set the background color to light blue and set the left padding to 100px.

4. Add an image widget and upload an image. Right-click on the image, set the alignment to the right and set the top margin to -70px.

Row with image on left

1. Add a row, set it to full bleed, and set the top and bottom padding to 70px. 

2. Add a column to the row so there are 2 columns. In the right column, set the right padding to 50px and add icon, title and paragraph widgets.

3. In the left column, set the background color to light blue and set the right padding to 100px.

4. Add an image widget and upload an image. Right-click on the image, set the alignment to the left and set the top margin to -70px.

On the Template selection page, you'll see two new sections in the left sidebar:

• Favorites is where you’ll find templates that you’ve tagged as Favorites. To do this, just click the star that appears on hover in the top right corner.
  
  
• Recently used is where you’ll find templates that you recently used. No need to tag these templates; they’ll be automatically saved here.

More ways to find the perfect template

Since we're already talking about saving time when you build websites, this is a great opportunity to highlight a few more ways you can save time when looking for templates.

Search: You can search through all of your templates (include Team Templates, if you have them) with the search bar at the top left panel.  

Filters & Categories: Browse through the templates by category or filter according to the template's most dominant color.    

The color scheme of this template is inspired by the Scandinavian color trend. It mixes strong colors for buttons and icons with more neutral, nature-inspired colors including earthy greens, dusty browns and soft blues. The overall effect is trustworthy and reassuring. 

This template doesn’t include too many images, but be sure that the ones you choose are of great quality, with bold and bright colors, and suit the look and feel of the site. The fonts are simple and bold - especially the title font, which is a Serif font. As for the main title on the home page, note that it's above the hero image, rather than on top of it, as is often done.

Another neat features you’ll find in this template is the use of the Audio widget so you can easily include podcasts or other audio materials in the site. 

Learn more about this topic and how you can hide, add, and delete pages, plus add SEO details to make them easy for users to find.

Customising your site is also important since it appeals to the look of your site.

Learn how you set up your navigation and layout for your site here

Importing the text, images and files from your original site is easy.

Learn more about what we can pull in and where you can find it in your editor.

Find out more about the global changes you can make that will cut down on the time it takes to design your site.

Here, you can find out where you can change your colour scheme, font and buttons.

This system builds the overall structure of the pages in your site.

Within the structure, you further customise your pages by adding widgets to the layout and edit each widget within the page.

Learn more about customising your pages in the tutorial of the inline editor.

Here we show you around so you know more about how to navigate through your editor so you can build and customise your responsive site.

Learn about great features for customising your site and widgets you can add to give your site more functionality.

Importing the text, images and files from your original site is easy.

Learn more about what we can pull in and where you can find it in your editor.

Find out more about the global changes you can make that will cut down on the time it takes to design your site.

Here, you can find out where you can change your colour scheme, font and buttons.

This system builds the overall structure of the pages in your site.

Within the structure, you further customise your pages by adding widgets to the layout and edit each widget within the page.

Learn more about customising your pages in the tutorial of the inline editor.

Here we show you around so you know more about how to navigate through your editor so you can build and customise your responsive site.

Learn about great features for customising your site and widgets you can add to give your site more functionality.

There are a couple available that can be found here.

Dynamic Pages allow you to generate multiple pages from internal or external content collections, dramatically speeding up the process of creating and updating multiple pages at once.

Use Cases

The ideal use case for Dynamic Pages is building a website that contains multiple pages with the same structure, but different content. Examples include:

Real Estate listings

Team pages

Recipe pages

Catalog items

Landing pages

And much more

How Does it Work?

Dynamic Pages work by using the same design to dynamically generate multiple pages using data in a collection. The result is a unique page of content for each row in the dataset.

Business Content then Collections and click New Collection.

Select External URL.

Enter the Endpoint URL and click Fetch collection.

Click Continue.

Name the Collection.

Select the correct data type for each field in the Collection.

(Optional) Add additional fields.

Click Continue.

Import the collection.

The next step is to create or convert a Dynamic Page and connect it to your newly created Collection.

The entire review process is faster, clearer and more accurate, giving your clients better service, faster go-live, and allowing more time to scale your business. It also eliminates the need for alternative methods of communication (such as email, messages, phone calls, etc.) and creates a single channel for receiving feedback and responding to it.

CLICK HERE FOR ACCESS

We'll keep you in the loop throughout, register your domain and provide you with access to our DIY portal so you can make changes ongoing.

If you've purchased our WebDesignApp Fully Managed Website Premium packages, we can quickly and easily make changes to your website for free. Just drop us a support ticket with your requests and we’ll make the updates. Click Here

You can also make changes yourself. Click Here for Help Desk

Or you can purchase assisted changes as an optional extra to your website plan. Contact us!

An ongoing partnership. Whether it’s a price change or a product update, our DIY portal allows you to easily edit your website. However, anytime you need help with changes, brainstorming ideas or content creation, our support team and website builders are just a call away.

If you require changes, our expert team will collate and incorporate your feedback.

If not, we will launch your new online presence.

One-Stop-Shop

With Internal Collections, you can build Dynamic Pages without ever leaving the editor. Collections are organised in tables: rows represent pages; columns represent fields.

Endless opportunities

Build large websites with multiple pages that have the same structure, or multiple landing pages under one site domain, all without leaving the editor.

Starting is simple with ready-to-use Dynamic Pages 

Add a predefined Dynamic Page, already connected to an Internal Collection, and update with your content. Available for real estate listings, team members, blank pages, and more.

Here's how it works

1.  Add a Dynamic Page 

Open the pages panel and choose from 4 predefined Dynamic Pages. Each page is connected to its own Internal Collection.

2.  Update Content 

Open the collection and update it with your content. Keep the field names as they are so they stay connected to the widgets.

3.  Display with a List or Gallery 

Add a List or Photo Gallery widget to your site and connect it to the collection so visitors have direct access to the dynamic pages.

You can also create an Internal Collection from scratch and connect it to your Dynamic Page.  

All the data types that you need

Set the fields with the types of content (aka data types) you want to connect to in the Dynamic Page.

A unique URL for every page

Each row in the collection represents a page and has its own URL, defined as the page item URL. Set a unique, meaningful URL to improve usability and boost SEO.

Set SEO for each page in a snap  

Just open the Dynamic Page settings, click SEO and connect the Page Title, Description and Social Networks Image to relevant fields in the collection.

Use a different sender name for each form by adding a sender name in the submission tab, so when submission notices come in, you’ll see at a glance which form was submitted. The email address beside the Sender name is automatically set to no-reply as a reminder not to reply to the submission email. Instead, click Reply to customer link that appears in the email body.

Customising this field can improve your workflow

Here's how:

• Optimise contact form placement and copy. If you’ve got multiple contact forms on a site, having a unique sender name for each one enables you to see at a glance which form was used. This can help you optimize the placement and text on the forms. 
• Remind your customers who built the form. Adding your agency name to this field reminds your customers that you’ve played a part in their conversion success.

• Speed up responses. If the form that’s been submitted requires immediate action (for example, the site visitor wants a quote or more info) you'll know at a glance

Other tips for optimising contact forms

• Only include necessary fields (don’t ask for a fax number if you’re never going to use it).

• Keep the size of the fields reasonable (not too big, not too small) (control this in the Content editor).

• Use compelling button text. For example, Get Quote, Tell Me More, Send Info, etc.

• Including an engaging title and use colours and fonts that visitors notice.

What’s a favicon and why add it? 

Favicons are the small icons that appear beside the page title in the browser tab and they help visitors identify sites at a glance. If users have multiple open tabs (and really, who doesn’t?), favicons help them spot the tab they are looking for quickly. Until now, favicons were only visible on desktop sites. Now, Google has added them to their organic mobile search pages, too. This enables users on mobile to recognize sites quickly when they are on mobile.

Set your site favicon now! 

Setting your favicon is super easy. Just open the site, click Site Settings and load an image in the Favicon section. 

A few favicon tips 

• Site favicons should be visual representations of a site’s brand. In most cases, a company logo is perfect. 
• If the logo is too complicated, simplify it for the favicon.
• If you decide not to use something related to the brand, use a shape or style that will stand out on the page.
• Make the favicon the right size: 32px by 32px.

These changes enable you to create richer collections with great functionality, quickly and easily.  

Use this capability to build: 

• Staff or team member lists
• Location lists
• Portfolios
• Service lists
• And more

Connected Data is an incredible way for you to build sites at scale, quickly and easily. It's available for all users on the Team plan and higher; updating data via an external source requires API and is available for Agency plan users.

Until now, all desktop sites were automatically set to 960px. To enable a wider screen for your site design, you could set rows to full bleed, and the design would stretch across the entire screen.

Now, we’ve made it easier to enable your site to cover wider screens, without having full bleed. The new 1200px desktop width option gives you more room to design, add columns, etc.  

Set Desktop Width in Global Design 

To expand your site width on desktop, simply go to Global Design > Site Layout and select 1200 in the Row width dropdown.

Great reasons for making your sites wider

Expanding the width of your sites is a subtle change that has many benefits, including:

• Ideal for modern website designs 
• Greater design capabilities: for example 5-row inner columns that looks great
• Offers a nice balance between full-bleed and 960px width rows.
• More space for design elements (or for white space)

Note: This change has no effect on the tablet or mobile versions of your sites. 

Save time & stay organized

The new capability saves you time by enabling you to organize images from the moment you add them to the editor. It’s available in both Quick View and Full View.

How it works

• Open the Image Picker and select the folder you want to add the images to. (To add a new folder, open the Image Picker Full View, turn Manage Images on, and click + Add Folder.) Read about managing images here.
• Click Upload Images. You can add multiple images at a time.
• The images will automatically be uploaded to the selected folder; they will be displayed in the Uploaded Images folder as well.

To check out the new capability, open the editor and start uploading images.

This enables you to edit Restaurant Menu content and republish the changes, all from your mobile device. 

You and your customers can post gorgeous images of Today’s Special as soon as it is served, remove items that have run out, update prices for Special Offers and more.

You can:  

• Upload new images 
• Update prices
• Delete items (such as dishes that are no longer available or have run out)
• Add new items
• Replace the main title
• Rename or delete categories or items

When you’re finished editing, preview the site to make sure everything look just right, and then republish to update in all versions.

We’ve expanded the Add Section capability so that you can now add multiple Sections to any page on your website from directly inside the Sections mode.   

Just click “Save & Add Another”, and add as many fabulous Sections as you like to any site page.  

This new functionality makes it easy to build full pages for your website using professionally designed Sections. And, since every Section takes on the Global styles of the website to which it’s been added, these Sections will automatically share common styles and colors.

Of course, each and every Section is fully customizable after it is added to your site.  

To check out this new functionality, just go to the editor, choose a site, and click the “+” between rows on the site.   

So Many Sections, So Little Time

Many of you have told us how much you love building sites with Sections, and that’s why we keep making more of them. You now have more than 100+ Sections, organized in 18 categories (and we’re working on more of them as we speak!). At the same time, we know that many of you have built amazing Sections of your own. This means you may have 200 or more Sections in your editor.

Manage Categories helps you organize Sections in two key ways:

Custom Categories: Create categories for the Sections you build and view them in your Section sidebar menu. The are displayed immediately below the Sections that are already in the platform.

Hide/Show Categories: Streamline your Section sidebar by hiding the Categories that you and your teammates never use. When you only see the Sections that are relevant to you, your Section selection process becomes even faster. (To unhide a Category that you’ve hidden, go to the Manage Categories.) 

Note: Managed sections categories is a new permission for team members only. Account owners and team members with admin permission will get it automatically 

Improving Your Workflow in 3 Easy Steps

Here’s how this cool new capability can improve your entire team’s workflow:

1. Create categories according to the order you build your sites (for example: Headers, Intros, Tabs, Footers). 

2. Add Sections to these categories. 

3. Hide the Categories you don’t use. 

The next time you and your teammates build a new page, you can go through the categories, one by one, and choose the Sections you want. 

Some Section tips to keep in mind

Save any row as a Section and it will be available to you and your team in any site. To do this, simply right-click on the ROW tag and choose Save as a Section. When you save the Section, give it a name, choose a category, and set its visibility. To create a new category for the Section, choose Manage Category.

Resave Sections to improve your own process. If the category we’ve saved a section in isn’t quite right for you, you can simply resave the Section in a category that works for you. For example: if there’s a PROMOTION Section you’d prefer to find under INTROS, just save a copy of it in the INTRO category, and it will be there when you need it.  

Sections preferences apply to everyone on your team. So if you’ve hidden the INTRO Category, for example, no one on your team will see these Sections. 

Sections have Privacy settings. While sections are visible to anyone building a site, the privacy level of every Team Section can be individually set. 

Inner row is like any other row with only one difference - it can be inside a column. Add an inner row from any row or column context menu.

You can divide inner rows into up to four columns, and add to them any element that you want. Think multi-column service pages. Think complex hero image. Think multiple columns with icons and text.   

To give you an idea of the possibilities, scroll down to see stunning examples along with simple instructions for recreating these rows in your sites.  

Hero image with side-by-side buttons

1. Start with a row that has a single column, background image and text.
2. Add an inner row. (It automatically has two columns.)
3. Add a button to each column in the inner row.

Six-column row

1. Start with a row and split it into three columns.
2. Add inner rows to each column. (Each one automatically has two columns.)
3. Add an icon widget to each inner row left column and a text widget to each inner row right column.

Grid with multi-column cards

Start with a row that has a gradient background color and three columns.

Add an inner row to each column. (Each on automatically has two columns.)

Set each inner row background to white, apply an outer shadow, and add 20px padding on all sides.

Add an image icon to each inner row left column, choose the round layout, and add a shadow. Add a text widget to each inner row right column.

Multi-column section with image

1. Start with a full bleed row that has two columns. Make the right column twice as wide as the left one.
2. In the left column, add a background image.
3. In the right column, add a text widget.
4. Beneath the text, add an inner row with four columns.
5. Add the following widgets to the inner row columns: Column 1 - icon; Column 2 - text; Column 3 - icon; Column 4 - text.
6. Add another inner row and repeat step 5.

Contact information with icons

1. Start with a 3-column row.
2. In column 1, add an image widget and set the image to full image.
3. In column 2, add a text widget and then add three inner rows.
4. In the inner rows, add an icon widget to the left column and a text widget to the right column.
5. In column 3, add a contact form widget (or any other widget you like).

Five-column row

1. Start with a 2-column row. Make the right column three times wider than the left one.
2. In the left column, add a title.
3. In the right column, add a 4-column inner row.
4. Add a divider widget and a text widget to each inner row column.
5. Add another 4-column inner row and repeat step 4.

Just the tip of the iceberg...

These are just a few examples of how you can use the inner row to make your sites more sophisticated.

Soon, you’ll find these examples and more in various Section categories in the editor.

To explore this new capability on your own, open the context menu of any row or column. Choose Add Inner Row and a two-column row will be added within the existing row or column.

You now have Rich Text flexibility that includes adding links, bold, italics, underline, color, and bullets in the following widgets: Photo Gallery, Image Slider, List, Restaurant Menu and the Contact Form Submission Message.  

This enables you to boost your design possibilities and effectiveness by highlighting specific words (rather than the entire paragraph) in the description elements of these widgets. 

Here are just a few ideas of what you can do with Rich Text:  

• In the Image Slider, choose different text colors for each slide to complement the image colors. 
• In the Restaurant Menu, use bold or italics to draw attention to important ingredients or special dishes.
• In the List Widget, integrate bullets in a Team Member’s description to describe their diverse roles in a company and make them stand out.
• In the Contact Form Submission Message, increase conversions by adding a link to get More Info.

This new flexibility gives you a third level of design control over your sites, in addition to the Global Design controls (accessible via the editor left panel), and individual widget design (accessible in the Design Editor of each widget).

Note to Developers  

The Rich Text option is also available in the Large Text component of widgets built in the Widget Builder. If you already have a widget with this component, you can update it with this new functionality - just make sure to republish the widget afterwards to enable it to all users.  

Let's Get Creative!

The image editor just got a huge upgrade and now includes dozens of cool capabilities along with a slick and smooth user interface.

The new editor is accessible via any image on your site and contains dozens of handy, trendy, easy-to-use image editing capabilities. Among other things, you can:

• Resize 
• Rotate images
• Add filters
• Adjust shadows
• Zoom in and out
• Change aspects
• Add stickers
• And much more!

Worth remembering

When you edit an image in the image editor, the edited image is saved as a new file. This enables you to return to the original image if you’re not satisfied with the edited one.

Until now, right-to-left column order was automatically arranged top-to-bottom on mobile devices; now, you can control which column row appears first when displayed on mobile.   

This allows you to create better row designs that are dedicated for mobile without the need to hide / remove columns. 

With the new Privacy Settings options, you can integrate key privacy elements into any website from a single convenient location.

This new dedicated page, along with other privacy-related features (detailed below), enable you to provide your customers with websites that meet privacy standards. This is super important for building sites that your customers have confidence in, and their site visitors trust. 

Privacy Policy Page

A privacy page is a document that tells site visitors what type of information a website collects, how this information is collected, and how the information is kept private.

On the Privacy Settings page, there is a suggested privacy policy template that can be activated and customized with specific information regarding the site. Information that needs to be customized includes company name, linkable address, types of information collected, and more.

This template gives you the base for building a site’s unique privacy page. Make sure to customize and review it thoroughly before publishing the site.

Cookie Notifications

Cookies are the data that are stored on a user’s computer and enable websites to provide visitors with a better experience. To be more transparent with your site visitors, and to protect both yourself and your visitors, it’s important to inform them when using cookies via the cookie notification.

After you activate the cookie notification in your site, you’ll see default, customizable text. We suggest linking the text to your privacy policy, so that interested site visitors can learn how information collected by cookies is used by the website.

This new feature is particularly handy in sites with lots of pages, as it allows you to organize pages logically, so your customers can find what they are looking for faster, without browsing through too many pages. Just give the Folder a name and nest related pages in its sub-navigation.

Where Folders are particularly handy:

• In Service-oriented sites (for example, Plumbers, Gardeners, Carpenters, etc.), add a Folder entitled Services and nest all the service pages within it. Visitors can simply click on Services and a menu will appear with sub-pages of all Services, enabling them to reach the service they are looking for quickly.
• In Photography sites, nest photo collections in a Folder called Portfolios so visitors can click to choose the portfolio they want to see; for example, Weddings, Graduations, Special Events, etc.
• In Restaurant sites, nest all menus (for example, Breakfast, Lunch and Dinner) under a single Folder called Menus.
• In eCommerce sites, nest items that fit in a single group (for example, shirts, skirts or accessories) in Folders of the same name, so it's easy for visitors to reach exactly the items they want.

Benefits of adding Folders to your site:

• Makes navigating sites easier and more logical.
• Visitors can reach the content they are looking for faster.
• No need to create content for a parent page if there is no genuine need for it.
• Eliminates duplicate content that sometimes results from having navigation and sub-navigation pages with identical content.

Adding a Folder to your site

To add a folder to your site, click add New Page in the pages panel, and select Folder. Give the Folder a name and then nest the pages you want to appear under it.   

When you add Sections to your site, you’ll find 13 gorgeous Text Blocks Sections that provide beautiful combinations of text and images that are appropriate for any website.

As with all Sections, Text Block Sections speed up the design process by making it easier to create gorgeous, eye-catching websites for your customers.

To add Text Block Sections to your site, just go to the editor, click the “+” between rows on the site, and go to the Text Blocks tab.

In addition to having expandable headers for mobile and tablet, you can now add expandable menus to your desktop sites, too. With this new capability, you’ll be able to give sites a modern look and allow more room for content such as images to shine.

Once you choose the expandable desktop layout (from the Site Layout tab), you’ll find 8 new expandable, fully customizable menu layouts, revealed by clicking on a hamburger icon.

Great reasons to use expandable headers in your desktop sites

• Give sites a modern look. Adding an expandable menu is an excellent (and easy!) way to give your sites a modern look. You can also freshen up existing sites by replacing the current header with an expandable menu.
• Do justice to image-rich sites. If you’re building websites for artists, photographers, design agencies, etc., you’ll want to allow maximum space for images. The expandable menu makes this possible, without compromising on content. 
• Optimize space in one-pagers. In landing pages and one-pager sites, visitors can navigate the entire site easily on scroll, so having the navigation visible isn’t always necessary. The expandable menu enables you to hide navigation (while keeping it accessible), thereby optimizing space.
• Create rich menus that are visible anywhere. The expandable menu is fully customizable, so you can add any widgets that you like (and as many of them as you want). Users will be able to access these widgets regardless of where they are on the site simply by clicking the hamburger icon.
• Highlight important header icons and buttons. Want to a shopping cart icon that leads to checkout or social media icons that enable sharing to stand out in the header? The hamburger menu enables you to conceal other header items, so these ones stand out.

Here's how to get it

To add an expandable menu to any desktop site, open the Global Design panel and click Site Layout. From here, choose the bottom layout for desktop. If you have the same layout for both the desktop and tablet versions of your site, all edits will be applied to both versions.

Note that every expandable menu layout contains a different collection of widgets, and can be edited as much (or as little) as you like. Control the color and placement of the hamburger icon (right or left side of the header), how the expandable menu opens (from the top or side), and customize its width.

This update is the latest in a series of recent header improvements. 

The improved tablet editor gives you full access to our responsive website editor via tablet.

With slick UI and a touch-friendly design, you’ll be able to create & publish sites, edit, add & remove widgets, and upload images, anywhere you are. 

Site building freedom for you 

With the new tablet editor, you don’t have to be at the office to build or edit sites anymore. You can do it from your customer’s place of business, on a train, at a coffee shop.

In short, you can do it anywhere you like, from any tablet device.

Touch-Friendly Design

We've redesigned some key elements in the editor, so that you can edit your sites quickly and easily, anywhere.

These changes include making elements bigger to suit your fingertips and enabling you to add widgets inline, instead of drag & drop.

Here are some of the highlights:

Black bar menu

Tap anywhere on the site and a black menu bar appears, enabling full editing access. From this handy bar, you can add widgets inline, edit them, and move them anywhere. You can also access the settings menu and go to a link (if the widget is connected to one).

To delete, tap the settings icon and then tap delete.

Widget panel

The widget panel opens inline and contains all widgets. Just tap on the widget you want and it will appear inline below the initial selection.

Move mode

To move a widget from one place to another, tap “Move” on the black menu bar. The widget you've selected will be highlighted, and you can then drag and drop it anywhere on the page.

Top bar

Icons in the tablet editor top bar are wider than on the desktop editor, for easier editing. To access the Dev Mode, Support and Dashboard, tap the "More" icon at the far right.  

Larger widget handles

To make dragging and resizing widgets easier, we've made the widget handles bigger.

Row and section labels appear on tap

To minimize distractions while you edit, row and section labels only appear on tap.

The new tablet editor in action

Here are just a few ideas of how tablet editing can boost your productivity:

Load images to a store: Take photos of new products with your tablet and upload them directly to your store.

Fix errors on the fly: Catch a typo after business hours? Now you can correct it immediately on your tablet

Set personalizations on the go: Your client wants to remove a notification or add a coupon? You can set the personalization rule directly from your tablet.

These Sections make it simple and quick to add compact, well-designed Services, Plans or Team member sections to your sites.

To check out the new Tabs sections, click + Add Section anywhere on your website. In the left sidebar, you’ll see the Tabs category immediately below Text Blocks. Here, you’ll find eight designed Sections, each one built using the Tab widget and perfect for adding content-rich material in an easily digestible manner.

Up Your Tabs Game With these Design Tips

We’ve used some simple design techniques to create these Sections. To integrate these techniques into your sites, you can add the Sections that features them or recreate them using the following steps:

1. This Section is made with two rows. In Row 1, add an image background and title widget. In Row 2, add a tab widget.
2. Remove the top padding from Row 2.
3. Open the Tab widget design editor and set a negative margin at the top. This will enable the widget to overlap slightly the image above it.

1. This Section is made with a single row divided into two columns. In the right column, add a background image.
2. In the left column, add three widgets: title, paragraph and tabs.
3. Open the tab widget design editor and choose the third layout (the vertical one).
4. Open the content editor and set the image toggle to off.

Remember: Use Manage Sections to Increase Efficiency

As you have more and more Sections to add to your sites, organizing them efficiently becomes even more important. Manage Sections makes this possible by enabling you to organize your Team Sections in new categories and to hide Sections that you never use.

1. Open the Sections sidebar and click Manage Categories. From here, you can hide Sections that aren’t relevant to your team, and add new categories. 
2. Have a few Sections that you and your team love to use? Save them as Team Sections and save them in a Category called Favorites so everyone on your team knows where to find it.

Choose from 4 new sidebar layouts, each of which contains a different combination of social icons and links, and can be fully customized. You can also decide whether the sidebar appears on the right or left side of the screen.

Great reasons to choose desktop sidebar layout

• In large sites that have lots of pages, the sidebar layout allows for more entries to be displayed in a less cluttered manner.
• If you want a clean, distraction-free website, the sidebar layout frees up space at the top of the page.
• For particularly creative websites (for example, for portfolios or design agencies), sidebar navigation gives an additional twist to your site design.
• It’s a simple way to refresh an existing site and give it a modern twist.

Here's how to get it

To get the new sidebar layout in any website, open the Global Design panel and click Site Layout. From here, choose the rightmost layout for desktop.

Note

1. If the site is viewed on a screen that’s narrower than 1090 pixels, the sidebar will automatically be hidden by a customizable expandable menu icon.
2. Whenever you switch a site layout, an automatic backup of your site is made. To find this backup, open the site Settings and click Backup Site.

In addition to having an updated desktop header, your mobile and tablet headers have also been updated. 

These new Sections are incredibly flexible, and can be used to convey a wide variety of information. For example, you can use them to show:

• Types of services 
• Portfolio images
• Team members
• Company activities

 You can also arrange several Text & Image Sections in a row and reverse the layout of every second Section to create a checkerboard effect.

Share your Customized Sections with Teammates

As with all Sections, you can share these ones with your teammates after you've updated them with your own images and content. For example, if you create a checkerboard pattern with several Text & Image Sections displayed in a checkerboard pattern, you can save them in Team Sections and enable your colleagues to use them, too.

We handle the dazzle, you handle the rest

These gorgeous Galleries are an excellent way of adding some dazzle to your websites. Also, because these Sections were designed using the Image Gallery widget’s built-in capabilities, they are super easy to customize.

Among other things, you can use them to show:

• New products for eCommerce sites 
• Work samples for professional sites
• Eye-catching customer testimonials
• Engaging company services

And almost every other type of content your site has to offer!

Many of you have asked for exciting new ways of presenting images on your websites. We hope you love what you see here, and use them to add gorgeous galleries in your sites!

More Contact Us Sections, too!

In addition to the dazzling new Gallery category of Sections, you’ll find several new Contact Us Sections, giving you even more ways to enable site visitors to get in touch.

This means you don’t have to wait until you get to your office before you make important site edits such as changing button CTAs, updating menus and more. You can track activity and update your sites from home, on the train, at a cafe, etc.

You can also send stats emails to your clients from your mobile device.

With mobile site stats access, you can track a wide variety of events, including:

• Click-to-Call 
• Click-to-Email
• Coupon Clicks
• OpenTable reservations
• Form submissions
• And more

To ensure that you continue to have reliable image editing capabilities, we’ve built a new editor that enables you to crop and rotate images quickly and smoothly.

Image editing tools already in the website builder

Many of the capabilities that were part of the old image editor are already part of many widget design editors, so you can simply edit the images after you upload them to your sites. These capabilities include:

• Border: Choose border location, width and color 
• Shadow: Choose shadow color, location, and position
• Overlay: Choose overlay color and opacity (on row/column background images)

Image editing tips

And since we’re already talking about site images, here are some tips to keep in mind:

• 1 image = 1000 words: Image is a great way to grab visitors’ attention, evoke emotion, convey information effectively and more. So make sure you include plenty of high quality, relevant images on your websites. 
• Displaying text on images: There are two ways of displaying text on images so that both the text and images render perfect on all devices.

1. Use the Image Slider or Photo Gallery widget and add text to the Title and Description fields.
2. Add text to a column or row and then add a background image. 

In the Photo Gallery widget, you can add text to any image via the Title and Description fields.

• Rename images for better SEO & management: We highly recommend giving images meaningful names before uploading them to your sites. Meaningful names boost your site SEO and make it easier to manage images. To rename images, open the Image Picker in Full View, turn on Manage Images, select the image you want to rename and click Rename. 

Collecting data from site visitors is simpler and much more transparent with the new opt-in field that's been added to the contact form. Simply add the “Opt-in” field to any of your contact forms and responders can actively check that they agree to share their personal information with you. This new field is mandatory by default, so if you've added it to the contact form, visitors must consent before submitting the form.

If your site has a privacy page, we recommend linking the opt-in field to that page. 

Free Text Field

If you want to add explanatory text, a privacy indication, or any other type of text within the contact form, you can now do it via the new "Free text" field in the contact form editor. Just choose the “Free text” field type, customize it using the rich text editor, and locate it anywhere on the form.

See some examples: 

So many shadow possibilities!

With this enhanced design capability, you can give objects a trendy, minimalist touch. You’ll help elements pop off the screen, enhance the overall page design, and add a realistic 3D appearance to your websites.

Your Shadow Controls

You can control shadows in the following way:

• Color: Choose just the right shadow color. 
• Opacity: Shadows aren’t solid splashes of color, so use the opacity setting (located in the color picker) to get your shadow effect just right.
• Type: Choose whether the shadow appears on the inner or outer border of the object.
• Position: Choose whether the shadow appears at the top, bottom, right or left side of the element, or set the shadow to surround the entire element.

Shadow Tips & Best Practices

You have full control over the shadow position. Here, there’s an outer shadow along the bottom right of the element.

In this example, an inner shadow appears along all sides of the element.

Shadow Dos and Don'ts

Use a shadow to highlight important calls to action.

Use a shadow to highlight services or features.

Use a shadow that’s visible on a light background. In this case, #c7c7c7.

Don’t use a shadow that is much darker than the background. In this case, #999999.

Use a shadow that’s visible on a dark background.

Don’t use a light shadow on a dark background.

Use a color shadow that suits the element or website color. Preferably, choose a lighter/darker color.

Don’t use a color shadow that doesn’t match and don’t use several different color shadows on a single page.

To explore your new shadow capabilities turn the Shadow toggle to on.

You can also make changes yourself. Click Here for Help Desk

Or you can purchase assisted changes as an optional extra to your website plan. Contact us!

With this new flexibility, site navigation no longer needs to be based on a site’s pages. For example, in the footer, you can show navigation that includes only social and external links. Break the page navigation into groups, show only the pages you want, and more.

Examples of how to use custom navigation links

Footer links

Want a site footer with important links that don't appear in the main navigation? Custom navigation allows you to build exactly that. No need for a lot of text here. Just build a horizontal navigation layout with the exact links that you want.

Social links

Sometime you don't want social icons but would prefer to have a list that shows the name of the social account and a call to action. You can now build this easily by customizing the navigation links. 

Inner page navigation

Certain pages require more links than what the main navigation offers. You may want this navigation to appear alongside the header navigation, or instead of it. Now, you can build additional navigation using with the Navigation Content Editor and place it anywhere that you want. 

The Navigation Content Editor is just another way to allow you to work efficiently and allow you to build sites even faster, and with great flexibility.

These Sections give you a huge variety of eye-catching ways to add promotions to your sites. You’ll find designs for Buy-One-Get-One (BOGO), dinner deals, % savings, seasonal sales, flash sales, and more.

With these new Sections, you'll be able to respond quickly to clients who want to update their sites to reflect a special deal or event.

Simply replace the Promotion Section’s content with the details of your client’s promotion, and you’ll have a professionally-designed promotional strip online in a jiffy.

More Intro Sections, too!

In addition to the new Promotion category, you’ll find several of new Intro sections in the existing Intro category.

In these Sections, important features such as buttons are positioned above the fold, professionally placed for maximum conversion. One of the Sections features a cool stylized border.

As with all Sections, these ones automatically take on most Global Designs and are completely customizable.

This category gives you diverse, modern ways to present content-rich information such as Q&As, services, events, and more.

All of these FAQs were designed using the new Accordion widget and can be used to display a wide variety of content types, including:

• Questions and answers 
  
  
• Service titles and descriptions
  
  
• Event dates and descriptions
  
  
• And more

These FAQ Sections make it easy to present a lot of information effectively, and refresh your site with little effort. Choose the one that best suits your customer’s tone, customize it to suit the content and style of your site, and you’ll have an attractive new element in no time!

These full page sections are designed to fulfill different needs: About Us, Services, Our Team and Contact Us. Each section contains a variety of widgets that are most suited to those needs.

As with all sections, you can edit and customize these full pages sections as you like. You can also save them after customizing and use the customized versions over and over again.

The new Footer category has 7 predesigned footer Sections for you to add to your websites. All include key footer elements such as company name, address and phone number, as well as social icons, company logos and more.

Remember: Site footers are super important for helping users find their way around a site, because when a site visitor reaches a footer, it means they’ve reached the end of the page’s content.

The footer’s job is to contain the information a site visitor needs to contact the business, check their social channels, register to a newsletter, or navigation to another page.

As with all Sections, footer Sections automatically take on the Global design settings for the site, making integration easy and fast. And if you’ve entered a website’s key business information in the site’s Content Library, fields such as phone number, website address, and email address will automatically be filled when you add a Footer Section. This saves you even more time.

Your site local SEO will also get a boost with these fantastic footers, as they contain information that’s key for local SEO, including company name, address and phone number.

You’ll find new fonts in all sorts of styles - from serious and sophisticated to creative and fun. Simply choose the one that's right for your customers’ brand and voice. Here’s a list of your new fonts:

When combined with the fonts you already have in the platform, you have more than 160 fonts at your fingertips, perfect for building distinct, attractive, high-converting sites for your customers.

As you explore your fabulous new fonts, keep these tips in mind:

Tip 1: Everything in moderation, including types of fonts. Try not to use more than three different fonts in your site; often two fonts is just right. For example, use a creative sketch or outline font for site titles (H1, H2 and H3) to add impact and draw attention to these elements. Try a more ordinary font for paragraphs to make reading sentences easier.

Tip 2: Set Global Site first

Set the fonts for your site using the Global Design settings to ensure that the fonts appear consistently in every element of the site, including ones you may not expect to use.

Using a creative font with a header image can really bring life to the image.

This means it’s a perfect time to update your site meta descriptions, improving your sites’ presence and enticing more visitors to click-through from Google’s search engine results page (SERP).

First, a few words about snippets

Snippets are the short paragraphs displayed on a SERP that describes a web page or website. For example:

These are the top two results for “ice cream” on the Google SERP. Note that they are both longer than the old 165-character limit.

Snippets are important because they are the text that potential visitors see after they make a search query. If a snippet is enticing, visitors will click-through. If it’s not, they’ll scroll until they find one that is.

Google won’t always display the meta description you write on the page as part of the snippet. Depending on the search that’s performed, Google might display other text from the page that it feels is more relevant to the searcher's intent. If you write solid descriptions that help users understand the content of the page, you’re more likely to have your description shown on the SERP.

So, what's the change?

Until about two months ago, Google displayed a maximum of around 165 characters in every snippet. If a meta description was longer, excess text would be replaced with an ellipsis. Google tested higher length descriptions and found that they lead to higher click throughs and more engaged users, so they rolled out the higher limit to all websites.

With up to 320 characters available in both page and site snippets, you can write a lot more in your meta descriptions. Use the extra characters to give people a better idea of what the site is about and to persuade visitors to click-through. This will result in more targeted clicks, because people have a better idea of what the site/page is all about.

Adding/Updating meta descriptions in your sites

If you haven’t added meta descriptions to your sites before, now is the time to do it! If you do have meta descriptions, now is the time to update them. You don’t have to use all 320 characters, of course, but if there is something you can add that will give more value to potential site visitors, go for it!

Site and page descriptions

To add/edit a meta description for the entire site, go to Settings > SEO and scroll down to Site Description.

To add/edit the meta description that appears for any page, click Pages, click the settings cog beside any page, and then click SEO.

Gradients - Here, There, Everywhere!

Gradients are all the rage these days, and for good reason. They are gorgeous, eye-catching, and can help you create atmosphere on your sites. You can create vivid, contrasting gradients that draw attention to specific elements on your site, or create subtle gradients that create a sense of atmosphere. There's a rainbow of opportunities available to you with this new feature. Here are just a few ideas:

Image overlay: Create a sense of atmosphere by adding a delicate gradient to a background image overlay.

Row background: Draw attention to important information by adding a vibrant gradient to a row background. 

Button gradient: Emphasize a page’s primary Call to Action by using an eye-catching gradient.

Color Your Sites, Fantastic!

The gradient control enables you to choose any two colors you like, set the color percentage, and control the gradient direction.

To start a color revolution in your sites, go to any site, open a widget with a color picker, and start creating!

Sections are rows that contain a collection of widgets, and are designed to convey certain messages and goals. The new Sections are organized into categories, so you can easily find just the right Section for any purpose. To access the Sections, just start editing a site and click the “+” that appears between rows.

Build amazing sites more quickly

Sections save you time in the design process. For example, instead of investing time in designing the perfect Plans section for your customer’s offerings, you can simply add a pre-made Plans Section and customize it for your customer’s needs.

Created by our professional design team

Each and every new Section was designed by our professional design team, without any use of custom CSS, to inspire you and encourage customer engagement. Once added to your site, Sections behave like any other row in the editor, so you can add widgets, customize them, change their order and more.

Automatically adjusted to any template

When you add a Section to a website, it automatically takes on the Global Design characteristics of that website. So, if the template you’re using has a fancy font in the main header and the Section you choose also includes a header, that Section will show the same fancy font.

Ready to start?

You can already find dozens of Sections in the editor, arranged in categories including Plans, Social, Testimonials, Team, About, Features and Intro, and we'll be adding more categories soon. To start exploring, just go to the editor, choose a site, and click the “+” between rows on the site.

We now allow you to point the root of a domain (client-domain.com) directly to the platform. In the past, we did not have the option to point the root of the domain directly, which forced you to redirect the root to the www value (www.client-domain.com).

This allows a few key things:

• We can now generate an SSL certificate for both the www AND root versions of your domain.
  
  
• By pointing both values directly, we help maintain a higher SLA for your websites. In the past, there was some other piece of infrastructure (usually outside of the core AWS hosting) performing the redirect from the root domain to the www value. With everything pointing to ___, it helps maintain higher uptimes.

If you have a domain & website already with us, you can leverage this new infrastructure today.

Step 1 - Change your DNS settings by pointing your root domain to the new IP addresses as explained below:

Step 2 - Regenerate your SSL certificate via the SSL settings page so we can generate a certificate to your root domain.

Note that this has to be done after your root domain is successfully pointing to the IP address. 

Bonus SEO goodies

Also as part of this update, we are updating some SEO settings. We’ll now set the canonical value of the website/page to be an absolute link. 

This ensures that Google only sees one correct version of the page and should help be more certain about what page is the source of truth for the content on your website.

You’ll find these perfectly designed fonts right inside the platform.

In addition to these new fonts, we’ve also improved the font load time, so your live sites are even faster.

To explore the new fonts, just click on any text area in your site.

Today, protecting site visitors’ personal data is very important, and required in the EU according to the GDPR 

With the new Form Responses management page, you can protect site visitors’ privacy and increase site transparency. The responses page enables you to delete responses that have been collected via a site’s contact form, should your customers ask you to do so.

This page contains all form responses from all contact forms that have submissions on the site. It is accessible from the Sites Dashboard as well as in the Content Library in the editor.

If you need or want to delete a response, just search for the exact responder details (we will auto search it in all forms on the site) and click delete.

Note: Form deletion cannot be undone.

More than half of web traffic today comes from mobile, and the number is growing all the time. Now it’s time to increase conversions on your mobile sites with extensive new customization options in your mobile headers and expandable menus. By adding buttons, social icons, store links and more to the most prominent area on your site, you can do just that!

With more than 20 new mobile header and expandable menu layouts to choose from, you can give your mobile sites an exciting, conversion-oriented facelift simply by changing the menu and/or header layout.

A world of new opportunities

Boost conversions by placing key icons and messages in your mobile header, so they stay visible regardless of where visitors go on the site. For example:

• Increase social interactions by including social icons.
  
  
• Add a Click to Call link so visitors can reach website owners.
  
  
• Add a shopping cart icon so visitors can complete their purchases.
  
  
• Add a Yelp icon so visitors can check restaurant reviews.

You can also improve your mobile design possibilities:

• Define a distinct menu entrance - from the top, from the side, pushing the site or covering it.
  
  
• Choose whether the menu icon appears on the left or right.
  
  
• Customize the menu open/close icon color and background.
  
  
• Alter the width/height of the menu. 

Here’s how to get it

To get the new mobile header in any website, simply open the mobile header Context Menu, click Edit Design, and click Update header.

If you don’t see the Upgrade header message, go to Site Layout and choose either the first or second mobile layout.

Note: When you switch your site layout, an automatic backup is made. To access this backup, open the site Settings and click Backup Site.

In addition to updating your mobile header, your tablet and desktop headers have also been updated.

Edit your sites anywhere with  on the go, the amazing new service that enables you to edit and republish sites directly from your mobile device. This new service, now in beta, makes it easy to keep your websites up-to-date, and empowers your clients to do the same.

Oh, the places you’ll go, with  on the go

With the new mobile editor, you can replace images and text in the most frequently used widgets. Upload photos you’ve taken on your phone, replace outdated phone numbers, change button text and more.

Save time by enabling your clients to update their own sites on mobile, and improve your service by providing superfast responses to common requests.

Just a few of the possibilities...

Changes made via on the go apply to all versions of the website (desktop, tablet and mobile) and can be republished directly from mobile. You can edit text and images in the following widgets:

• Text
  
  
• Image picker
  
  
• Image widget
  
  
• Photo gallery
  
  
• Image slider
  
  
• Button
  
  
• Click to call & click to email
  
  
• Link picker

And this is only the beginning! We’ll be adding even more functions and capabilities in the future.

For those who are not familiar, when you first publish a website, YDA makes the website available on a sub-domain (also called the default domain). This domain for most customers looks like: example-customer.multiscreesite.com.

By making it available as a sub-domain, the website is available immediately after publishing while waiting for the DNS settings to connect to the domain correctly. Then, once you connect the primary domain, the sub-domain URL was still active and available to be visited.

What YDA has now implemented is that once we detect that a primary domain (example-customer.com) is successfully pointed & connected to the platform, we will enable a 301 redirect from the default sub-domain site to the primary custom domain.

There are two main reasons this is important:

• It forces the old domain to become de-indexed by Google. In the past, if you left the website published for too long without a primary domain, Google would index the sub-domain version of the site. This made it hard later for Google to remove that sub-domain from their index and would sometimes display both the sub-domain and the primary domain in the same search results, which of course, is a bad experience for customers.
  
  
• Only a single domain can be used to load a website, instead of both the sub-domain and primary domain. This prevents confusion later when trying to access the website.

This is now the default behavior in the platform and all websites will 301 redirect from the old sub-domain to the primary domain. If you would like to make the sub-domain available for visiting after connecting the primary domain, you can enable it in the site settings, as shown below:

NOW YOU CAN!

You can now do all this (and more!) with Team Sections, a unique new functionality that enables you to save rows, sections and entire pages, share them with your team, and use them over and over again.

It's a real game-changer, and will totally transform how you and your team build websites.

Build once, use anywhere!

With Team Sections, you can reuse anything that you’ve created, in any other site that you build. Simply save the row/rows / full page as a section and add it to any site in your account. You can also create a section from scratch, building it once and reusing it as often as you like.

Just replace the content and your perfectly designed section is ready to go.

For example, most sites have an About Us section. If you create an awesome one for one site, you can now save it and use it in another site. Or you can copy a terrific menu that you’ve built for one customer and use it in another customer’s restaurant site.

Faster site building process

Your entire site building process will be faster because once you’ve designed a section or page, you never have to redesign it again.

Just save it as a section and use it again.

Colleagues & customers can use them too

Team Sections will help your entire team!

Let your colleagues use your sections, and they’ll save time building websites. You can also allow customers (who have site editing permission) to access your sections, so they can use them when editing their own sites.

Once your entire team is creating sections, you’ll have a huge pool of sections to choose from, meaning more sites in less time. 

It’s all about simplicity

There are two simple ways to create sections:

1. To save rows from an existing site, open the row context menu and select Save as Section. This enables you to save as many rows as you like (and even the entire page).

2. To create a section from scratch, just click the “+ add section” between rows on any site and then click Create Section.

Once you’ve saved your section, you can add it to any site and edit it as you edit everything else.

And this is only the beginning...

Using sections to build sites is a new way of building websites that’s unique, and sure to save you time and effort.

We’re working on more tools to help you and your team work better together, so stay tuned for more updates.

In the meantime…

Happy Section Building!

The new flexibility enables you to control the font, format, alignment and text direction of this message, for a more customized experience.

To customize the text, go to the Submission tab in the Contact Form content editor. 

By connecting these fields, you enable automatic syncing when these fields are updated, saving you time in optimizing your site performance.

To get started with this new capability, open any page SEO settings and click on the Connect to data link under the SEO Title and SEO Description fields, and choose the relevant connection from the dropdown that appears.

Boost Productivity with Connected SEO

This new capability can improve your productivity in several ways:

• Make SEO optimization automatic for customers building instant websites.
  
  
• Save you time when you build new sites.

We’ve completely transformed our blog to make it smarter, faster, easier to use and more flexible. The new blog works exactly like a site page, so if you know how to edit a page, you know how to use the blog. This makes it really easy to add great-looking posts easily and quickly.

Here are some of the features that make this possible:

• Structured layout that’s ideal for SEO
  
  
• Complete content flexibility in every post
  
  
• Quick publishing of new posts (from directly inside the blog)
  
  
• Swift search for posts according to title or author
  
  
• Fully customizable SEO default settings for every post
  
  
• Ability to update the layout of all posts (current and future) at once
  
  
• And more!

How does it work? (aka Why did we build it this way?)

The new blog has two modes: Layout Mode is where you set the general structure once for all posts. Post Mode is where you go to add content for each post. The post settings are connected to the layout to give current and future posts design flexibility within the structure set in the layout. This enables a consistent layout which is good for SEO and enables a better user experience.

Smart Design in Layout Mode 

Think of the Layout Mode as your center for design. Here, you connect the main components of the post (title, author, image) so that the look and feel of all blog posts is consistent. Once set, all current and future posts have the same look. Want to change something in the layout? No problem. Any changes you make in Layout Mode are applied to every post in your blog, and visible online when you republish your site.

Content Flexibility in Post Mode 

Post Mode is where you go to write your posts. Add any widgets that you want and customize individual posts with images, design elements, etc. When you finish editing the post, just click publish and the post will be live - no need to republish your site.

Fast Post Creation with Connected Modes 

The connection between these two modes enables you to create new, consistently designed posts quickly. This supports SEO and enables users to find what they are looking for easily.

Elements in your post that are automatically connected are the title, author, date and image. You can remove these connections if you like, but we highly recommend keeping them to ensure that all posts contain this key information.

The big benefits of blogging

Though there are many ways to keep in touch with users today, blogs remain a great tool for fostering a strong online presence, communicating with customers, and helping businesses grow. Blogs enable you and your customers to update content regularly and easily, create more indexed pages, communicate with visitors, and more. The benefits of these activities include:

• Supporting SEO
  
  
• Driving traffic to your website
  
  
• Positioning your brand as an industry leader
  
  
• Fostering customer relationships

Hard at work on the next phase

The new Blog is available in every new site that you build.

So... what’s more important than having a targeted, well-designed ready-made page to fit your needs?

Now, you’ve got it!

All of the default pages have just had a major facelift. They’ve been completely redesigned to fit your customers' current needs. Each page includes new features and fresh, modern layouts. As always, every page that you add automatically takes on the site’s Global Settings, making integration into every site smooth and easy.

New pages you have to choose from. include the following:

• Blank Page
  
  
• Page URL
  
  
• About Us
  
  
• Locations
  
  
• Contact Us
  
  
• Landing page
  
  
• Our Team
  
  
• Our Services
  
  
• Photo Gallery
  
  
• Portfolio
  
  
• Project Page
  
  
• Restaurant Menu

To add a new page, simply click Pages in the left sidebar and click + New Page.

This slider is automatically available if you load more than a single image to any background row or column. Add as many images as you like and control the transition between images (slide right, left, top and bottom) as well as the time between slides.

Most important, since it’s a slider, you can drag any widget on top of it.

Think multiple dishes for a restaurant. Multiple arrangements for a flower shop. Multiple hairstyles for a barber shop and many many more.

To explore this new capability, just open the Content Editor of any row or column and add more than one image to the background.

As Easy as 1-2-3

Adding new authors is simple. Just go to Manage Posts and open the Settings of any post. Click the checkbox under the Author section and then fill in the new author’s name in the text field.

More Blog Authors = More Blog Traffic

Expanding your pool of blog authors makes it easy to post blogs more frequently and increase traffic to your website. This expands the subjects you can write about, and increases the quality of your blog by making it easy to incorporate specialty blog posts from experts.

With multiple blog authors, you’ll find it easier to establish a rich blog schedule because when you’ve got more people writing for your blog, you have more opportunities to publish.

Keep on Blogging!

The email has the exact same content and functionality, and all existing preferences. For Clients with access to the full stats get one small new addition - a link to On the Go Stats, so you can track from a mobile device.

Increase client satisfaction and collaboration with Site Stats emails

Stats emails are an excellent way of keeping clients involved revealing information about:

• Site visits
  
  
• Page views
  
  
• Events like Clicks-to-Call, form submissions and more

The edge-to-edge display, one of the most exciting aspects of the new iPhone device, provides viewers with an incredible viewing area. It also presents a challenge for website displays, as the notch at the top of the device means non-optimized sites viewed in landscape mode will display white margins on the left and right side, to accommodate the notch without compromising the website.

We optimized every site by using a new viewport descriptor provided by Apple and adjusting the site CSS to be aware of the notch. This ensures that every site looks great on the iPhone X, in both vertical and landscape modes, and displays beautifully on the edge-to-edge screen.

All sites are now optimized for the iPhone X incredible edge-to-edge display.

This update affirms our commitment to fast-loading websites and responsibly staying up-to-date on the latest web standards on behalf of our customers.

What is HTTP2?

HTTP2 is a new web protocol that controls how a website is downloaded from a server to the browser. HTTP2 allows for more files to be downloaded over the same connection which results in a faster download of a website to the browser. There are a few other features as well (such as data push from the server) that are less relevant.

With the old HTTP 1.1, every file (think images, css files, etc.) was downloaded through its own, new connection to the server. The switch to HTTP2 helps solve this problem to make websites even faster.

How do I take advantage of this?

The only requirement you need to take advantage of HTTP2 is having an SSL certificate installed on your website. This is because all browsers require a secure connection to start using HTTP2.SL If your website already has an SSL certificate installed, it is already being served over HTTP2. 

The Shrinking Header is a smaller version of the site header, enabling you to keep important navigation information fixed without distracting users as they scroll down a page and without taking up too much space. It acts as a sticky header but shrinks the size of the logo and removes its spacing to make it smaller. It is particularly useful in sites that have large headers, and sites designed for long scrolling.

You can control the size of the logo that appears in the Shrinking Header, as well as the background colour and spacing.

Also, if the Header contains several rows, you can choose to show just the navigation row.

You can enable a Shrinking Header on any website.

Just open the Header Design Editor and look for the Shrinking Header anchor. 

Now, every image, icon, and any other clickable element in your site can connect directly to Click to Call or your online Store Shopping Bag.

This conversion-boosting capability makes it more convenient for visitors to call or make purchases from anywhere on your site.

More prominent means more calls

Add a telephone icon to your sticky site header, activate the Click to call link, and site visitors will be able to place a call, regardless of where they have scrolled on the site. In other words, they don’t need to look for a Click to Call button or phone number in the page footer. (Note: The Click to Call ability is active on all devices that allow for direct calling.)

Encourage site visitors to reach the store checkout

Add a cart icon leading to the Store Shopping Bag anywhere on the site and you’ll make closing a deal that much easier. Also, because you can now link to any page in your store, you can also use this new capability to promote a specific sale. Just add a sale icon to the website and connect it to the corresponding page in the store.

These Sections make it simple and quick to add compact, well-designed Services, Plans or Team member sections to your sites.

To check out the new Tabs sections, click + Add Section anywhere on your website. In the left sidebar, you’ll see the Tabs category immediately below Text Blocks. Here, you’ll find eight designed Sections, each one built using the Tab widget and perfect for adding content-rich material in an easily digestible manner.

Up Your Tabs Game With these Design Tips

We’ve used some simple design techniques to create these Sections. To integrate these techniques into your sites, you can add the Sections that features them or recreate them using the following steps: 

1. This Section is made with two rows. In Row 1, add an image background and title widget. In Row 2, add a tab widget.
   
   
2. Remove the top padding from Row 2.
   
   
3. Open the Tab widget design editor and set a negative margin at the top. This will enable the widget to overlap slightly the image above it.

1. This Section is made with a single row divided into two columns. In the right column, add a background image.
   
   
2. In the left column, add three widgets: title, paragraph and tabs.
   
   
3. Open the tab widget design editor and choose the third layout (the vertical one).
   
   
4. Open the content editor and set the image toggle to off.

Remember: Use Manage Sections to Increase Efficiency

As you have more and more Sections to add to your sites, organising them efficiently becomes even more important. Manage Sections makes this possible by enabling you to organise your Team Sections in new categories and to hide Sections that you never use.

1. Open the Sections sidebar and click Manage Categories. From here, you can hide Sections that aren’t relevant to your team, and add new categories.
   
   
2. Have a few Sections that you and your team love to use? Save them as Team Sections and save them in a Category called Favorites so everyone on your team knows where to find it.

See examples (with instructions) of striking ways you can use the Shape widget to create interest on your site and make information, promotions, images and calls-to-action really pop.

Great ideas for adding the Shape widget to your sites

Highlight information

1. Choose the round wavy shape and add a title and short description.
   
   
2. Select colors for the shape and texts.
   
   
3. To position the shape on the top corner of the image, use a negative left margin (spacing > margin > -50px left & top margin).

Highlight a specific plan or service

1. Choose the flag shape and add a title and/or short description.

2. Toggle off “Keep proportion” so you can adjust only the width.  

3. Select colors for the shape and texts.

4. To position the shape so it overlaps the top of a column, use a negative top margin (spacing > margin > -30px top margin).

Create a trendy eye-catching shape on the header

1. Create a row with two columns.

2. Choose an amorphic shape and add it to the right-side column.

3. Make the shape as big as the column.

4. In the design tab select the layout with the background image and replace the image with the one you want.  

Use as a button by adding a link and hover effect

1. Choose the circle shape and add a title and description.

2. Select colors for the shape and texts. 

3. To position the shape on the corner of an image, use a negative margin on the left side of the shape (spacing > margin > -50px left & top margin).

Create an eye-catching scroll button

1. Choose the diamond shape and add a title.

2. Toggle off “Keep proportion” so you can adjust only the width. 

3. Select colors for the shape and texts.

4. To position the shape on top of an image, use a negative top margin (spacing > margin > -50px top margin).

Another quick & easy tool for making sites that convert

The Shape widget is another tool designed to make it easier and quicker to design unique sites for your visitors. By turning off the "Keep proportion" toggle, you have even more shapes at your disposal, because you can adjust the width/height without keeping the ratio. 

You'll find these new sections in the Intro and Promotion categories. They’re an easy way to create a sense of urgency, excitement and anticipation.  

Intro Section - Upcoming Webinar

Generate leads for an upcoming event with this section, which features a countdown widget and a short contact form. 

To create this section on your own (or to copy the techniques used to build it), follow these steps:

1. Add a row and set it to full bleed. Set the top and bottom padding to 120 px. Add a background image and set the position to cover. Add a 2-color gradient and a 60% overlay color.  

2. Add an inner row to this row. It automatically has 2 columns.

3. In the left column, add a title and text paragraph widget.

4. In the right column, set the background color to white, switch on the shadow toggle and set the left margin to 50px. Add Countdown and Contact Form widgets and set the content.  

Intro Section - Product Launch

This section is perfect for creating anticipation for a new product launch. 

Intro Section - Coming Soon

Preparing a new website or a new page on an existing website? This is a great way of building excitement. 

Intro Section - Popup Store

This section is great for announcing an upcoming store expansion or temporary shop. 

Intro Section - Save the Date

Planning a party, a wedding, or any other type of celebration? Announce the event with this section.  

Promotion Section - Book Your Seats Now

Encourage people to purchase tickets with this section. It features a countdown widget and a bold button. 

Promotion Section - Seasonal Events

You can also use countdowns for events that are quite far away. For example, the start of summer or ski season. 

These Sections speed up your design process by making it quick and easy to add perfectly designed sample menus, full menus, coupons, and more to your sites.

As with all Sections, it’s simple to add these Sections to your site.

Just go to the editor, click the “+” between rows on the site and browse the different Sections.

You can add several Sections at one time simply by adding them one after another.

Bon Appetit!

Faster than ever!

Want to have 10s or even 100s of photos in your website gallery? NO PROBLEM!

The new gallery uses lazy loading, which means we only load images when a site visitor scrolls to them. This results in improved page speed and a better user experience. Try it yourself and you’ll be amazed!

Layouts, layouts and more layouts!

• You’ll find more layout options, both for the image captions and for the full gallery.
  
  
• You can build galleries with rounded or tear-drop shaped images, display text and buttons prominently on images (this is best for mobile), and more.
• Choose from 10 gorgeous pre-designed gallery layouts and remember: you can customise any of these layouts as you like.

Hover effects - the more the merrier

• Who doesn’t love a good hover effect? You can now add a variety of cool effects to your Photo Gallery images, making your customers' websites more attractive and eye-catching!
• Add a blur effect, grayscale the images, zoom in, display a shine effect, add opacity and more. (Note that hover effects are only available on desktop sites).
• You can also add animations to your images. Choose from animations including zoom, slide in, fade, bounce and more.

Captions with buttons - I'll click to that!

Alongside the title and description that you can add per image, you can now add a button, too. Link the button anywhere that you like, either inside or outside of the website.

You can control button design and location, positioning the button either beneath the image or on top of it.

Reorganised for easier editing

To make your editing experience easier, we’ve reorganised the widget's Design Editor to make it more intuitive. To make editing the widget even faster, we suggest using one of the pre-designed layouts.

Automatically Fit to Frame

All gallery images are automatically optimised to fit the frame in which they appear, saving you valuable editing time. If you want to adjust the image size yourself, just turn off this capability and edit as you like.

Go on, try out the new Photo Gallery widget on your website. You won't stop playing :)

The optimization process is an offline process that occurs once you publish or republish your site. This process can take up to two minutes, so if you want to run the Lighthouse speed text, wait a couple of minutes after publishing before you do so.

In addition to what we’re doing to speed up your sites, here are some tips on what you can do when you build your sites to ensure that they load as quickly as possible.

Keep the header clean

Content in the header is loaded immediately so it's best to have as little content as possible here, so sites load as quickly as possible.

Add minimal widgets at the top of the page

Widgets that are above the fold are initialized immediately, whereas widgets placed further down the page are loaded on demand. To support a quicker load time, minimize the number of widgets you have above the fold. This enables the site to load more quickly, which is important for keeping visitors engaged.

Place slow-loading widgets lower on the page

Widgets that rely on external scripts (for example, the “Facebook like” widget) have a big impact on site performance. If you include these types of widgets in your sites, place them low on the page.

Generally speaking, use as few widgets as you can

We only load CSS for widgets that are on the page. In the future, we’ll be doing this for JavaScript too. So, choose the widgets you add wisely.

Avoid custom code

There may be cases when you want to use custom code, but if possible, avoid it. If you must use it, use dmApi which has performance optimizations build-in (no <script src=xxx>).

Take advantage of ongoing improvements by republishing your sites

YDA is working on behind the scenes improvements on a continuous basis. This includes:

• Improving critical CSS and removing unused fonts: This has led to a 5% improvement in Lighthouse scores.
  
  
• Lazing loading of images below the fold: Images above the fold are fully loaded when a visitor lands on the page; other images are loaded after the page finishes loading, or as they come into view while scrolling.
  
  
• Lazing loading of CSS: CSS style sheets now load after the page loads, so the browser can prioritize new styles and determine when they should be loaded.
  
  
• Lazy loading of widgets: This is currently in effect for Facebook-based widgets, and will eventually extend to other widgets that rely on external scripts, such as the Map and Twitter widgets.

To make sure that your sites are benefiting from these ongoing updates, republish your sites. It’s an easy and immediate way to speed up your sites.

This new dashboard provides a space for sharing resources, making it easier to increase your site-building speed and build amazing websites at scale for your customers.

Optimize teamwork

The Team Section Dashboard enables your entire team to be more efficient. You’ll see all available Sections at a glance, which means you won’t spend time building Sections that you already have. Just make sure that you set your Section visibility level to Staff, so everyone on your team can see your Sections.

Save time

The Dashboard’s Search feature enables you to search predesigned sections, as well as Sections that you and your teammates have built. You can search by Section name or creator, or filter according to Category and Privacy level.

You can also create new Sections or edit existing Sections. This means you don’t have to open a Section inside a website in order to edit the design or settings.

Duplication: The best form of flattery

Duplication is a terrific form of flattery, and a great time-saver, too. See a Section that you love and want to change it just a little bit? Simply click the Duplicate button and use it as the starting point for building a new Section.

Getting started

The Team Sections Dashboard is just one more tool to support your team collaboration and allow you to be more efficient.

If you or anyone on your team has already created a Team Section, you’ll automatically see it here. 

Your improved Share widget makes this easier than ever, with a smoother flow, more attractive interface and an additional share capability.

What’s new & improved?

Looks better - The widget has two new layouts, both modern and sleek, perfectly suited to today’s website designs. Each layout can be fully customized with the colors and icon size that you want.

Share via WhatsApp - With more than 1.5 billion users worldwide, WhatsApp is a hugely popular messaging platform, and a powerful addition to your sites.

Easier email share - Clicking on the email icon immediately opens the visitor’s default mail provider, which makes sharing by email even easier.

Smoother mobile experience - Visitors on mobile can share your site in a single click. (Previously, sharing on mobile was a 2-step process).

Add a title - If you like, add a title to the widget: Tell a Friend. Sharing is Caring. Spread the News. 

Hover effects - Draw more attention to the share icons on desktop by adding eye-catching hover effects. 

Sharing is caring

Enabling visitors to share your site with friends, followers, contacts, etc. is a great way of boosting organic traffic. That’s why adding this simple widget, which enables sharing simply and easily, is so important.

The system records and displays full statistics for your website, per device, so you can view exactly what users are doing on desktop, tablet, and mobile. You can view all of your stats in the stats section of your dashboard.

More instructions can be found here.

• Image  
  
  
• Icon
  
  
• Social icons
  
  
• Restaurant menu
  
  
• List widget

Hover effects make websites more interactive and attractive. They encourage visitors to explore the site and enhance their overall experience. Use them to liven up a restaurant menu, draw attention to clickable icons, or encourage people to share, tweet and like.

Note that all hover effects are only visible on desktop versions of the site.  

Why hide a footer?

Footers are a great way to direct site visitors to other pages on your site, and to display legal info, copyright details, site navigation and more. However, if you have a site page that functions as a landing page, product page, or Coming Soon page, you may not want it to have the same footer that you have elsewhere on the site.

By hiding the footer, you can keep users focused on the main goals of a specific page. After hiding the site footer, you can create an alternate footer for that page by adding a row and customizing it as you like.

The Hide Footer hides it on a specific page on all devices.

To unhide, click the hide icon at the bottom of the left side panel.

This widget will display what’s new, what’s recent, and who else likes this Facebook page, all directly on the website. Visitors can like or share the page without leaving the site, increasing social validation and boosting confidence.

Keep website content current via Facebook updates

Your client may well be updating their Facebook page more often than they do their website. By integrating the Facebook Feed widget, you enable an element of their site to be updated regularly too, so the messages visitors see are always timely. You also enable visitors to communicate with site owners via Facebook messenger, all without leaving the site.

Control how the feed looks on the site and customize which tabs are shown: Timeline, Events, Messages - or all three.

Note: This feed will only appear for public Facebook pages. If a page has any restrictions (for example, by country or age) it will not be displayed.

The center logo options align the page links evenly on both sides of the logo, and take into account the number of links. This means you can continue adding pages to a site and the links will automatically be evenly arranged.

All new navigation layouts are fully compatible with the center logo. All you need to do is check “Add center logo” in the navigation widget and your logo will be placed in the middle.

To make it easier for you to locate, the Giphy filter is available in both the Mini View and Full View (as there are around 900,000 GIFs in Giphy).

Please use with caution... :) as it is addictive

Note: Giphy is available in all image widgets except the background component.

These certificates, which are completely free using Let’s Encrypt, will be automatically generated in the background the next time you log into your custom dashboard, or when you set it for the first time. In other words, you don’t need to do anything in order to benefit from this extra layer of security.

The process takes a few minutes, and when it’s done, you’ll see that the domain is preceded by HTTPS (rather than just HTTP). This means the site editing process is more secure for you, your staff and your customers.

Why HTTPS is important?

SSL certificates and HTTPS ensure a site’s integrity in a variety of ways. They ensure that information was not altered while being transferred from the web server to your customers’ computers or devices, since the connection is encrypted. Google’s Chrome has started warning users who visit websites that are not secure, especially if there is a password input (for example, in a dashboard login).

Make sure to secure your sites by enabling SSL certification from the Settings section of any site. Just open the Settings panel, click on Site SSL, and follow the instructions.

New Image Picker just got even better.

In addition to having millions of free images, great GIFs, and powerful image management tools, you can now add premium Shutterstock images to your websites directly from the Image Picker. You’ll find millions of professional, high-quality images to choose from, all of them available for a small price.

Adding high-quality images to your websites gives you greater flexibility in conveying your customers’ messages, so you can build high-converting sites that are engaging, authentic and attractive. Of course, having high-quality images in the websites you build also boosts your own website portfolio.

Try before you buy

Not sure how images will look on your website? No problem!

You can add watermarked premium images to your sites, so you have a chance to see exactly how the images look before purchasing them. Just add the premium images with a watermark and decide if you want to purchase the images.

Control who can purchase images

Don’t want all of your team members to be able to purchase images? Control which team members can buy images through Roles & Permissions. While all team members can add watermarked premium images, only the team members you specify will be able to purchase.

Note that customers cannot purchase premium images through the Image Picker, but they can see the images you purchased for them.

A world of possibilities

Having access to so many types of images (free, premium & GIFs) opens a world of possibilities for your websites. 

Now, you’ve got more than 150 new ones to choose from in your editor!

Icons are a simple and effective way of conveying messages to site visitors. In many cases, they are more effective than words, because people understand them at a glance, quickly and without any need for reading.

We’ve just added more than 150 new icons to the platform, organised into several categories like: food, finance, logistics and more.

These new icons give you even more graphic options for conveying your messages.

How and when to use icons

Icons are handy in so many situations. Here are just a few examples:

• Highlight features: Icons are great for illustrating specific company features or qualities (check it out in various sections and templates)
  
  
• Attract attention: Phone icons, envelope icons, and location icons help users find the information they are looking for quickly.
  
  
• Summarise content: If your website offers multiple plans, using a different icon for each plan can visually summarise the different levels of service.
  
  
• Overcome language differences: For sites with international visitors, icons are a great way to convey information without words. For example, hotel websites can use icons to show wifi, pools, parking, room services, etc.

All of the icons are arranged in categories, and can be searched for by keyword or category. Explore them now via the Icon widget

This includes having full design freedom over the content of individual posts and powerful management tools so you can update posts and search through posts that have already been published. You’ll never need to worry about saving posts as you work (they’re automatically saved, just like the rest of the platform) and SEO for every blog post is easy to implement.  

This update is irreversible, so make sure you’re familiar with the new blog before updating.

How to update to the new blog platform

Sites that are eligible for the update will display an Update your blog ribbon when you open them in the editor. Simply follow the flow and your blog will be updated in just a few moments. After the update, review every post to make sure they look just right and then republish the site

Note that posts will remain live in the old blog format until you republish the site.

Update team templates, too

If you have Team Templates that were built before the new blog was released, update those blogs too, so the next time the template is used it features the new blog. (To do this, simply edit the template in Template mode, follow the Update your blog flow, and click Done.) From now on, all websites based on those templates have the new blog platform.

A few things about the new blog to keep in mind

Posts automatically take on the Global Design settings for text, images, background page, etc. To override these settings, go to the Post Layout mode and customize the post page. There may be minor spacing differences in the posts after they move to the new blog, so make sure to review each post before republishing.

As mentioned, this update is currently available for blogs with up to 20 posts. We're working on a solution for blogs with more posts, and will let you know as soon as it's ready. 

Overview 

Setting up a new blog and adding posts is simple and quick with the new blog editor. Two editing modes work together seamlessly so you can design the perfect blog for your business and update it easily with new posts that look great, have the content you want, and are optimized for SEO.

Smart Design –– Layout Mode

Layout Mode is where you set the structure for all of your blog posts, both current and future. In this mode, you set the layout for elements that appear in every post, such as blog title, author, main image, etc. These elements are connected to the content of individual posts, so that all posts have a consistent structure. This is important for SEO and makes your blog easier for visitors to read.

As for the content of each post, the space designated for this in Layout Mode is the content placeholder. You can’t edit the content here, but you can add elements around it. For example, you can add columns, rows and sections above, below and adjacent to the content placeholder. 

Any changes you make in Layout Mode will be updated in all posts. For example, if you add a section under the content placeholder in Layout Mode, this section will appear, exactly as it appears in Layout Mode, in every blog post.    

All of the changes you make in Layout Mode affect every blog post. 

Flexible Content –– Post Mode

Post Mode is where you go to write individual blog posts. You have complete freedom over the content of each post (contained within the content placeholder section that’s visible in Layout Mode), and can add any widgets that you want. Editing a post is just like editing a page in the editor.

When you are in Post Mode, you can add any elements that you want to a specific post. For example, if you’re working on a post that has multiple images, you can add several Image widgets. If a specific post requires a map, add a Map widget here. 

All of the changes you make to an individual post in Post Mode affect only that post. 

Connected Elements

Connecting elements are what give your blog power and ease of use. These elements ensure that every blog automatically contains important details including title, author and image, and that these details appear consistently in every post.

You’ll be asked to enter the main post details as soon as you create a new post. You can change this information later, but adding it from the start keeps your posts organized.

By default, post title, author and background image are connected. You can remove these connections or change them in Layout Mode, but we recommend keeping them to ensure your posts have all the information they need for SEO and to be found easily by users.

If you disconnect an element, you can reconnect it or connect it to a new element.  

Changing Connected Elements

There are two ways to change connected elements in your blog: By changing the content in Post Mode or by changing the connection in Layout Mode.

Changing Connections in Post Mode

Change the content of connected elements in one of the following ways: 

• Via the Settings Menu: Click to open the post details and then edit.
  
  
• Click the connected element (for example, post author) and edit the text in the popup that opens.

Learn more about Post Settings.

Changing Connections in Layout Mode 

You can replace connected elements, or remove them altogether, in Layout Mode. To replace the connected element, click on the blue Connected Data icon to open the Connect Data popup. From here, choose the connected element you want to use for this connection and then click Done.

To remove the connection altogether, click “none”. This will remove this connection for all posts in the blog, and the element will no longer appear. 

Learn more about Connected Data.

Manage Posts 

Go to Manage Posts to do the following:

• Create new posts
  
  
• Access post settings via the gear tool
  
  
• Search posts by title and author
  
  
• Sort posts by status – draft or published
  
  
• Preview, duplicate or delete posts
  
  
• Edit posts by selecting the editing tool, clicking on the post name or clicking on the post thumbnail
  
  
• Publish or republish posts

There’s infinite scrolling and a search function here, so posts are easy to find.

Post Settings 

Access the Post Settings for any post via the gear tool that appears beside the post name in Manage Posts. From here, you can scroll between posts via the arrows at the top of the page.

Post Settings is divided into three sections: Post Status, Post Details and Post Metadata. Here’s what you can do in each of these sections.

 Post Status 

From here, you can: 

• Unpublish or publish a post
  
  
• Find and set the post URL
  
  
• Change a post publish date (changing the date will affect the position of the post in the Manage Posts page)

For more, see Setting Post Status.

Post Details 

From here, you can add and edit the following main post details: 

• Post title
  
  
• Post author
  
  
• Post main image

By default, these details are required for every blog post, and connected to the layout so they maintain a consistent design.

For more, see Setting Post Details 

Post Metadata 

From here, you can do the following: 

• Set post thumbnail and alt tag
  
  
• Set post description
  
  
• Set post tags

For more, see Setting Post Metadata

Metadata is an important for SEO as it enables search engines to understand the content of a page. In the blog, the text you add in the Metadata fields is displayed in the All Posts and Recent Posts widgets and appears when posts are shared. It is highly recommended to fill in the metadata fields.

Blog Settings 

When you create a new blog, a pop up will appear that prompts you to name the blog and set a thumbnail, title and description for it. All of these details can be changed later in Blog Settings. This information is also used in RSS feeds.

Permissions 

Permissions for the blog work the same as on other pages.

Once users are added to a site, their names will populate the author dropdown list.

Adding Blog Widgets 

• The following blog widgets are available: All Posts, Recent Posts and Search Posts. This widgets make your blog accessible from any location on your site.
  
  
• Any blog widget can be added to any post on your site. For example, you can add the All Posts widget for your home page and to your blog.

Considerations 

• Draft or unpublished posts are not visible in the YDA editor.
  
  
• Draft or unpublished posts are not visible in the All Posts widget.
  
  
• For changes in Post Mode to be visible online, you must republish the post.
  
  
• For changes in Layout Mode to be visible online, you must republish the site.

Note: The update is irreversible, so before updating consider the following:

• Blog posts automatically take on the Global Design settings for text, images, background page, etc. However, you can override these settings in the Post Layout Mode.
  
  
• All post titles will be an H3, aligned left
  
  
• There may be minor spacing differences in the posts, so make sure to review each post before republishing.
  
  
• Date format is now month, date, year (i.e. July 11, 2019)
  
  
• The word "By" no longer appears before the author name
  
  
• The number of comments is not visible at the top of each post

Steps to Update to the New Blog Platform

If you are eligible to update to the new blog platform you will see an Update the Blog ribbon when you open the site editor. Follow the steps below to update:

1. Click Learn More under Update your Blog.
   
   
2. Click Update Now.
   
   
3. After updating, review the posts to ensure everything is correct.
   
   
4. Republish the site.

Tip: If you use blogs in your Team Templates, we recommend updating those templates to the new blog platform as well.

The table widget is easy to set up and design, so your clients can display information effectively. Add the widget to your site and then add content manually or via CSV and customize the font style and colors for the header, even rows and odd rows.  

This widget looks fantastic on mobile, and comes with three mobile layouts:  

• Scroll is excellent for large tables with several columns and rows.
  
  
• Squish is great for tables with just 2 or 3 columns.
  
  
• Collapse is good for tables with relatively few rows.

Some great table widget examples

Menu Items

How to build this table in your site

• Add a row with 2 columns and set the row background color to blue. 
• In the right column, add an image widget. Choose an image with a transparent background (PNG).
• In the left column, add 3 widgets: text, title and table. Add your content to the table.
• Set the header and row background color to transparent. Set the header font color to beige
• Set the even and odd row backgrounds to transparent and the font color to white.
• Set even column widget, the border to beige, and the alignment to center.
• For mobile, set the layout to Squish.

Product descriptions

How to build this table in your site

• Add a row with 2 columns. 
• In the left column, add an background image and set the position to cover.
• In the right column, add 4 widgets: shape, title, text and table. Add your content to the table.
• Set the header and row background color to black.
• Set the header and row color to white.
• Remove the border (set it to 0px) and set the alignment to left.

Contact Details

How to build this table in your site

• Add 2 rows. In the first row, add a background image and title widget.  
• In the second row, add a table widget. Add your content to the table.
• Set the background color of the header to light blue and set the text to bold and black.
• Set the even row background color to white and the odd row background color to gray. Set the text to black.
• Set the border to gray and the alignment to left. Turn on the frame shadow.
• For mobile, set the layout to Collapse.

Ingredients 

How to build this table in your site

• Add 2 rows. In the first row, add a background image and title widget.
• In the second row, add a table widget. Add your content to the table.
• Set the background color of the header to gray and set the text to bold and black.
• Set the row background color to white and the text to black.
• Set the border to gray and the alignment to left.
• Turn on the frame shadow and set the top margin to -65px.

You’ve been able to round corners on images and buttons for quite some time. Now, you can round corners on columns and inner rows, too. Rounding corners softens the look of your website, making information easier for site visitors to read and absorb. Read more about why rounded corners look great on websites here and here. 

It’s a subtle change that can make your sites trendier, more modern, and more readable.  

Use it to find any editor function or feature, simply and quickly.

Open Quick Access from the top bar or by clicking CTRL+ K / ⌘ + K. Type your query into the search bar to get quick access to any of the editor elements (including adding a widget).

Some of the things you can do with Quick Access: 

• Add widgets
  
  
• Open the Add pages popup
  
  
• Go anywhere on the left bar
  
  
• Access support articles
  
  
• Go to specific page
  
  
• And more 

logging into your account is very easy.

Simply head over to https://editor.webdesignapp.io/login then hit the login link at the top right to log into your dashboard.

I'm having trouble logging in

If you forgot your password, you can use our forgot password feature to get access back to your account. 

No worries: Your Web Design Studio Builder's got your back. Starting to work and need a road-map or want to have a last-minute check, our checklist has you covered. To make sure everything is in place, refer to our list below.

Make best use of the template 

The work on your site with Your Web Design Studio Builder starts at picking the template. A lot of creative design work was already done by our specialists backstage. The templates come with consistent styling from images and layouts to spacing and line-heights. There are still some extra steps you can take to make sure the template really brings your content out.

Layouts

Your fresh template will come with matching header, footer and navigation, but you have a multitude of options to change it. Depending on why you created a site, you can pick social media focused header, call-to-action buttons based header and so on. Don’t forget that you can have different layouts between desktop, tablet and mobile views.

Images and Colors

All of our templates have a vibrant color palette and rich array of images, so all that is left to do is re-color the site in your branding colors and pick the images that reflect your niche. When doing so, do not forget to make sure you have adapted all elements of the template to your style.

Make sure to visit every page and double-check that the color of the text elements and backgrounds are correct. Switch to desktop, tablet and mobile view to you do that.

Page Backgrounds

Don’t forget to replace the default page backgrounds that come with the template. Your Web Design Studio Builder gives you an option to set up individual background images per page, so make sure to change not only the main background image, but also individual page backgrounds.

Consistent branding

If your site accompanies your business or organization and you already have a branding package, make sure the site reflects that.

Fonts

If your company also has printed materials, such as brochures, leaflets or business cards for promotion, use the same fonts and colors of your site. When it comes to fonts, our rich built-in library will cover you for the majority of widely-used fonts. If the font is not available, you can use Google fonts or even embed your custom font on the site using @font-face technology.

Logo

Make sure your logo is in the header of your site. For most templates, you will just need to update the default logo of the template with your own one. Check both the header and the footer of your site.

For some templates, Your Web Design Studio Builder gives you the option to upload a larger image on desktop and a crispier, smaller version of it on mobile. This means that you need to update the logo separately for each device layout.

Favicon

Favicons are a great way to make your site stand out in the sea of tabs on your users’ browsers. It is always a great idea to upload a mini version of your logo as a favicon. If your logo is too big, just upload a small icon that matches the general design of your site in colors.

SEO optimization

For every site that you build with us, Your Web Design Studio Builder makes our best effort to have your pages load rocket-fast. We automatically resize the images for your site and optimize the code. When publishing a site, Your Web Design Studio Builder will submit the sitemap to Google and Bing to make sure it is indexed. But there is still a lot to be done.

Image optimization

We automatically resize and compress the images and show device-suited versions of the image. However, not every image can be optimized to the full potential by modern optimization tools. For instance, no compression tool will optimize the image that comes in 4000x7000 pixels. Since the majority of your users will not have such wide displays, simply upload smaller images.

Meta tags for search engines and social media

To make sure the preview of your page on social media and search engine snippets look good, remember to set the following:

• Site Title and Description
  
  
• Social Media Image
  
  
• Page Titles and Descriptions
  
  
• Blog Post Descriptions

Alt text

Search Engines cannot “see” the images on your site, but they do crawl the alt text you put on them. This is a great place to use some of the keywords for your site.

Alt texts are especially relevant for pages with a lot of images, but not a lot of content. Text is the main way to communicate with the search engine robots, so make sure not to miss such an opportunity.

A quick note: make sure that the alt text matches the image. Otherwise, you will hurt your SEO instead of helping it.

Building your links

Pre-launch, when your sitemap is not yet generated and Google did not yet crawl your site, is the best time to check that there are no broken links or missing pages.

URL redirects

If you had a site before and are now are switching to Your Web Design Studio Builder, check make sure your new site has a corresponding page for each of the pages on the old site to preserve the SEO ranking of the pages. If you want to get rid of certain pages, create a URL redirect from a missing page to an actual page on your site.

404 errors

It is hard to double-check every link that ever existed on your domain. So, in case there is a missing page on your site, create a custom 404 page. This is a great way to personalize your site and make sure your visitors don't get lost if they stumble across the 404 error. As an example, here is Your Web Design Studio Builder own official site's 404 page:

SSL certificate

Since July 2018, Google started to penalized sites without SSL certificates. SSL certificates are free with Your Web Design Studio Builder and can be installed with one click. After you install it, don’t forget to force our visitors to open the site through HTTPS connections.

Promote your message

If you set out building a site with the goal of bringing more attention to your business or cause, put it in the spotlight with the help of our tools.

Call-to-action buttons

If you have a business or promo site, make sure to place call-to-action buttons in the header, footer or homepage of your site for maximal exposure.

Personalization rules

Place relevant links on the popups or notification bars via personalization rules. This way, you can make sure the hottest leads will definitely see your promo materials.

Contact forms

It takes a lot of effort to deliver your message online, so make sure you hear the feedback! Do a quick test on your contact forms to make sure you receive the emails.

Legal aspects

Forgetting to style a row on the site is just sad, but forgetting to add a legal page will have a more far-reaching consequences. Don't forget to add:

• Cookie notification
  
  
• Privacy page
  
  
• Opt-in fields on contact forms

It is a great idea to double-check the legal requirements of the country your target audience is from in order to customize the cookie notifications and privacy page.

Google Webmaster Tools is a no-charge web service by Google for webmasters. It allows webmasters to check indexing status and optimize visibility of their websites. It has tools that let the webmasters:

• Submit and check a sitemap
  
  
• Check and set the crawl rate, and view statistics about how Googlebot accesses a particular site
  
  
• Generate and check a robots.txt file
  
  
• List internal and external pages that link to the site
  
  
• Get a list of broken links for the site
  
  
• See what keyword searches on Google led to the site being listed in the search engine results pages and the click through rates of such listings
  
  
• View statistics about how Google indexes the site, and if it found any errors while doing it
  
  
• Set a preferred domain (e.g. prefer example.com over www.example.com or vice versa), which determines how the site URL is displayed in search engine results pages

Set up a Google Account

If you already have a Google account, proceed to the next step. If you do not have a Google account, head over to http://google.com and click on the +You link at the top of the page. Follow the on-screen instructions to create your account.

Set up a Google Webmaster Tools (GWT) account

To set up Webmaster Tools, visit http://www.google.com/webmasters/tools and sign in with your Google account (If you have a Google Analytics account, you should use the same account).

On the main page, simply enter your website URL and click on 'Add A Site'. Once you have added your website, you will need to verify that the URL you added is owned by you. Choose from one of the many options to verify your site. Once you have verified your site, you are set. Your account should be authorized and ready to use. Though, when you’re setting up Webmaster Tools for the first time, it may take a few days for data to appear.

Color Picker is the function of your editor that lets you manage color scheme of text, background, overlays and more. You can choose a color from the color palette, input a HEX or RGB value or even create a custom gradient. Recent colors feature will help you keep your color scheme consistent and maintain a professional look and feel on your Site.

Guide

When working with the Color Picker, you have the following options:

Color style

Before you pick the color scheme, you need to choose where you want to use single color or a gradient.

If you are using single color option, you can pick a color from Recent colors tab or jump to Choose another color.

Gradient background will be an available option for row, column and widget backgrounds and image overlays. To apply a gradient, make sure to:

• Pick 2 colors of the gradient stops

            You can reverse the colors to adjust the stops positioning

• Choose gradient direction

            Center option will generate radial gradient

            Side options will create linear gradient

Recent colors

When picking a color, the recent colors menu shows a sample of colors that were recently used in your Site. This allows you to quickly pick colors that are already on your Site.

Choose another color 

Select a color's hue using the color palette on the right or the color panel. Alternatively, you can enter the HEX or RGB value of the color you want in text box below the vertical color gradient.

Opacity 

The opacity slider determines the transparency of an element. Keep in mind that as you reduce an element's opacity, whatever is behind it (background image or color) will begin to blend with that element.

Considerations

• Gradient is not available for text elements, so you will not see it in a Color Picker for text elements in widgets design editor of Global Design tab.
  
  
• When working with backgrounds, switching between Color and Image will set the settings on the previous option to null. To give an example, if you were using a color and changed the setting to Image, any color or gradient settings will be removed.
  
  
• Gradients override individual button backgrounds. To change them back, reselect the background for individual buttons.

Buttons that encourage visitors to Contact Us, Get a Quote, Register Now or any other action you want your site visitors to take can be fixed, visible and clickable on all site pages, regardless of where users scroll.

This way, you’ll keep site visitors focused on what matters most to your customers thereby increasing conversions from the website.  

A few Floating Button Recommendations 

• The floating button will appear on every page of the site.
  
  
• Its size and position can be customized per device.
  
  
• When setting the button for mobile, we suggest placing it a bottom corner of the screen, so visitors can click easily with one hand.
  
  
• If you’d like to display an icon rather than text, choose the appropriate layout.

We’re working on making more floating widgets, and will let you know as soon as they’re ready.

The new process means you’ll never have to worry about backing up blog content separately from your site. Since the new blog is integrated into the site, any time you restore a site version, it includes that version's blog and posts. 

For old blogs, the process remains unchanged.

Things to keep in mind 

• Restored blogs, as with restored sites, are only live after republishing.
  
  
• If a backup site version did not have a blog, then the blog will not appear in that version.
  
  
• As always, a new backup version is automatically created when you publish a site and when a previous backup version is restored.
  
  
• If a site’s blog was updated to the new blog platform, choosing a backup version from before the update will not bring back the old blog.

WARNING 

After a site has been translated, all content added to any language version of the site will not sync to the other language versions. For this reason, we recommend adding multiple languages as a final step, once you have completed building your site.

The following features are currently not available in multi-language:

• Personalization 
• Blog Posts
• Page title and descriptions. For more information, see SITE SEO SETTINGS.

Select Default Language 

The default language is the main language of your site. All other languages will exist in sub-directories while the default language uses the main domain.

We try to identify the default language of your content automatically. 

To manually set the default site language:

1. In the left panel, click Pages, and then click Add site languages or Manage site languages.
   
   
2. Next to the current default language, click Change, and select a default language.

Once you add multiple languages to your site, all new content needs to be translated from the default language version of your site. Once languages have been added, the default language cannot be changed.

Add a New Language 

To add languages to your site:

1.  in the left panel, click Pages, and then click Add site languages. 

2.  Click + Add languages, and select one or more languages.

     Note Some languages are available under multiple country flags (for example, Spanish).

3.  Click Done when you are finished. 

4.  Click Save.

5.  The language selector is added in a new row at the top of the site and you are immediately prompted to position it. This position is reflected in all language versions; review it on all devices. Click Done when you have placed the language selector.

Once you click Done, the new languages will be added to the site and any change you make in the location and/or design of the selector must be done in each language separately.

Disable or Delete Languages 

To disable a language, click the toggle next to the language.

To delete a language, click the X next to the toggle, and then click Delete. 

Disabling a language. This allows you to work on the content and translation for that language before making the language public and live on your site. If you want to publish the site without one of the languages, make sure to disable that language.

Deleting a language. This removes a language from the site and any links to this language will redirect to the default language. A backup version will be added automatically to your backup list in the site settings. 

Language Selector Design

The language selector appears in the navigation bar on all language versions of the site; it is what enables visitors to switch between languages.

To edit the design of the language selector:

1.  Click the language selector in the navigation bar, and click the Design tab to see layout options. Alternatively, in the left panel, click Pages, click Manage site languages, and then click the Design tab. 

2.  Select a layout. The layout you select affects the desktop and tablet view, mobile devices can only include the small prefixed language drop-down.

Automatic vs Manual Translation

By default, the multi-language feature automatically translates your site content into the new language using Google Translate. While this service is provided for free, Google Translate does not always provide the most accurate translations, so make sure to review and edit the content in the translated versions of your site. If you prefer to manually translate your entire site, disable the Use automatic translation for new languages toggle.

Edit Content in the New Language 

To select a different language version, click on the flag of your default language and select the language you would like to edit from the drop-down.

Any changes you make to any language version (for example, changing text, images, or adding/removing widgets) will not be reflected in the other versions of your site.

Add Pages and Popups

New pages can be added from the default language only. If you want to display a specific page in a specific language, add it to the default language first and then hide the page in the navigation menu. To add a page to all languages, first add it to the default language. Then switch to each translated version separately, in the left panel click Pages, select the page you want to translate, and click Translate in the drop-down.

Considerations

While site content is automatically translated, the following fields are not translated:

• Site/Page Title
  
  
• Site/Page Description
  
  
• Site/Page Keywords
  
  
• Alt-text (on images)

NOTE 

These fields are important for SEO, so make sure you translate them manually for each language. For more information on-page information, see Site SEO Settings.

• To display multi-language stores (that correspond with the translated versions of the site), enable the store multi-language feature (available for Advanced Stores and higher). For more on creating a multi-language store, see Getting Started.
  
  
• Text connected via Connect Data will not be automatically translated. To translate this text, disconnect the widgets from the Content Library and translate them manually.

Improve your site’s visibility to search engines and boost organic traffic by filling in the site’s SEO fields. This makes it easier for search engines to know what your sites are about so they can be displayed higher on search result pages (SERPs).

To edit your overall site's SEO:

In the left panel, click Settings, and then click SEO. You have the following options:

• Site Title. This is displayed by search engines in their preview of your site. It is important for both SEO and social sharing. Try to limit this to 60 characters.
  
  
• Site Description. Give an overview of the content and information the site provides. Search engines uses this to display as a description for the site. Try to limit to 160 characters.

          Note It is best practice for each page of your site to have a unique title and description. For this reason, we              recommend entering your page title and description individually in the Page Settings menu. 

• Site Keywords. These are terms related to your site (for example, pizza delivery, for a pizza shop). Separate keywords with a comma.

          Note Search engines no longer use keywords to impact website ratings. All keyword usage should be                        considered optional.

Site Title 

This is the most important tag for your site SEO. This tag tells people and search engines what your page is about. The site title appears in the title bar of the web browser and in search engine results.

The title tag should contain important keywords to help search engines determine what your page is about. Also, real people will be reading the site title when deciding whether or not to click on a search result, so make sure to make it people-friendly.

This field can be connected to the Content Library via Connected Data. For more information, see Connected Data.

Site Description

The site description may be used by search engines when they display the content of your site on their results page. So, while this field is not important for search engine rankings, it is very important for compelling users to click through to the site.

This description is your opportunity to advertise site content to people and let them know exactly whether your page contains the information they are looking for. Create a concise and compelling description that people will want to click on.

This field can be connected to the Content Library via Connected Data. For more information, see Connected Data. 

Site Keywords 

Major search engines do not use keywords to determine your site's ranking. In fact, on Bing.com, your site can be penalized for having overly "spammy" keywords. However, some smaller free directories and search engines may still use them to help categorize sites. All keyword usage should be considered optional.

Lazy Loading and Fonts 

Lazy loading of images and widgets improves page speed by loading images and widgets when they become visible on scroll. You can also enable an option to display default system fonts so visitors can start reading instantly while site fonts are loading.

NOTE 

Site may blink when fonts are loaded.

To enable lazy loading and fonts, click the Lazy loading of images & widgets and Show default system fonts while custom fonts are loading toggles.

Faster, Safer, Easier 

The Google Sign in button makes signing in simple and secure. You don’t need to remember a password and there’s no worry that your password will be compromised. Just click the Google Sign in button, choose the account that was used to register with Your Digital Agency, and you’re in.

Great white label, custom domain experience 

Clients logging into your custom white label domain can also use Google Sign in to enter the platform, making their experience smooth and simpler too.

Why Lottie Animations are great for your websites

• Focus your visitors. Draw their attention where you want it to go. An image is worth 1000 words; an animation is worth even more! 

• Scalable. Lottie animations are vectors that fit any screen size and device type. This means no pixelations, regardless of size.

• Light. Lottie animations are exported as JSON files, so they load quickly and won’t slow down your sites.
  
  
• Flexible. You can change the color of the animation directly in the Lottie editor, enabling you to give it the right look and feel for your site.

Light, Flexible and Fun - A Bit About Lottie Animations

Lottie is a React Native, Android and iOS JavaScript library developed by Airbnb that renders animations made in After Effects. The animations, exported as JSON files, render quickly, smoothly and beautifully on websites.

In the Lottie widget, you can choose animations from the collection of animations available at the Lottie website, or use animations that you create yourself and export to Lottie Files. Find a full explanation on how to create and upload animations, read this.  

Some cool ideas for integrating Lottie animations into your sites 

Note: We highly recommend that you don't use too many animations on a single same page in your site, to avoid confusing site visitors.

The posts will look almost identical once they are in Your Digital Agency’s blog, plus you’ll have the full flexibility of the Your Digital Agency editor and the Your Digital Agency blog for designing, managing, and optimizing them for SEO.

Give your clients a better blogging experience with Your Digital Agency

With the blog import feature, you can move clients - and their external blogs - quickly and easy to Your Digital Agency. The blog posts come with all of their content, everything from text and images to videos, author name and publish date. Once the posts are imported, you can publish them all at once or review them and publish them one at a time.

A few notes about the import

• Up to 300 blog posts can be imported from an RSS feed.

• The process can take a few minutes, depending on how many posts are in the feed.

• While the posts are being imported, you can continue editing the site (except the blog). You cannot publish or republish the site.

• Immediately after the blogs are imported, you can publish them all at once. Alternately, you can review and publish them individually. 

Why the new blog rocks

For anyone who needs a refresher, the new blog platform is much more flexible than the old one, making it easier for you and your clients to create great looking posts, optimize for SEO, and more. You have full design freedom over the content of individual posts, powerful management tools that enable you to update & search posts and SEO for every post that’s easy to implement.

Scroll down to see previews or go to the editor and find them in the new Events tab of your Sections panel.

Events Sections

Upcoming Concerts 

This Section is built using two Table widgets, one after the other.  Content in Table widgets can now include links,  so you can connect any field in the widget to a URL, popup, page anchor, etc. 

To build this section on your own, follow these steps:

1. Start with a row with one column. Add a background image to the row and toggle on the parallax effect.

2. Add the following widgets to the row, one on top of the other: Icon, Title, Table, Social Icons.

3. Select an X in the Icon widget, add a title to the Title widget and design the table as follows: Turn the toggle on for the first column and even column width. In the first column, set the font to 20 px, white and bold. Set the header color background to white with 60% opacity; set the font to 16 px, blue and bold. Set the even row background color to purple with 20% opacity. Set the odd row background color to white with 20% opacity. Set the row font to 16px, white.

4. To set the entrance animation: right-click on the table > entrance animation >fade in from left/right.

5. Copy the entire table and paste it immediately below.

School Calendar

Company Agenda

Upcoming Events 

Salon Events

Gallery Events 

Health Club Classes 

Theater Schedule

The widget also got a face lift with some design tweaks for social medias like Instagram’s stunning gradient, YouTube’s distinct red, and LinkedIn’s new font.

WhatsApp

Enable people to communicate directly with your client via WhatsApp, one of the world’s most successful mobile messaging and call apps.

Google My Business

This powerful platform enables consumers to search for businesses and services via Google Search and Maps. It’s a great tool for helping businesses be discovered and boost their local SEO.

Waze

Make it easier for site visitors to reach your client’s brick-and-mortar location quickly with Waze, the community-driven GPS and navigation app that helps people reach their destination as quickly as possible.

Benefits of adding links to social media accounts to your sites

Social media is hugely important today, and companies who maintain social media accounts should link them to their websites.

Here are some reasons why:

• Easier to stay in touch. Site visitors are more likely to follow a company on Facebook or Instagram than they are to sign up for a newsletter. So, adding social media icons gives an additional way for business to communicate with site visitors after they leave a site.

• Authenticity. Social media can give site visitors the feeling that a company is dynamic and authentic. While an Our Story page on the site may tell a company’s initial story, links to active social media accounts enable the story to continue.

• Multiple channels, one central location. Websites are a great place for gathering all social media channels in one spot. Think of your website as a transit hub for visitors who can then move onwards in the manner that's most convenient for them.

It can be used in conjunction with JavaScript code for Widget Builder or with individual responsive websites.  

By connecting these fields, you enable automatic syncing when these fields are updated, saving you time in optimizing your site performance. 

To get started with this new capability, open any page SEO settings and click on the Connect to data link under the SEO Title and SEO Description fields, and choose the relevant connection from the dropdown that appears.   

Boost Productivity with Connected SEO

This new capability can improve your productivity in several ways:

• Make SEO optimization automatic for customers building instant websites. 
• Enable you to keep SEO settings when resetting a site while keeping data.
• Save you time when you build new sites.

PWA is one of the most anticipated website trends for 2018, and is the first website builder to release PWA capabilities for all sites.

What are Progressive Web Apps? 

Progressive Web Apps (PWAs) provide site visitors with a smooth, app-like experience, loading instantly when a user re-enters the site, even if the device is offline, enable sites to launch via an icon on a user’s mobile device. PWAs update automatically when a site’s content is refreshed, and are only served via HTTPS, so they are always secure. They are another exciting step towards improving user engagement on mobile.

How users experience sites enabled with PWA   

When a user accesses a site enabled with PWA from their mobile device, an ADD TO HOMESCREEN button will be displayed below the site. After the user clicks the button, a site icon will be added to their homescreen. The next time the user wants to visit this site, they simply click the icon to re-enter the site quickly, even if their device is offline. 

Benefits of PWAs 

• Gives users faster, easier access to sites by enabling access to the site via a user’s mobile homepage, for a native app-like experience.
• Sites load instantly when users re-enter, providing a reliable mobile experience.
• Enables users to re-enter a site, even if they are offline.
• Creates a more engaging mobile experience, since mobile websites behave like natural apps.

Enabling PWA for your sites

To enable PWA on your sites, click the (i) in the editor, go to Experimental Features, and turn on Enable PWA settings. This enables you to activate PWA for any HTTPS site.

To activate PWA for a specific site, go to the Settings of that site and click the Progressive Web App (PWA) tab. Activate the PWA and then define the site’s PWA name, short name, icon and splash screen color. 

PWAs are supported on Chrome for Android; caching and offline is supported on Chrome for Desktop and Firefox.

The new beta version of iOS 11.3 will support caching to some extent, but not “Add to homescreen” yet.

These changes enable you to create richer collections with great functionality, quickly and easily. 

Use this capability to build: 

• Staff or team member lists
  
  
• Location lists
  
  
• Portfolios
  
  
• Service lists
  
  
• And more 

How does it work?

Connected Data syncs widgets on your site with data fields in the site’s Content Library. If these fields are connected to outside sources of information, they’ll be automatically updated when the external source is updated (you can even update just them and not the whole site...) or you can update them manually in the content library.

They serve as a single, consistent source of truth and information for the site. 

First things first - Filling your Content Library with content

It all starts with your Content Library, designed for easy data management, all in one place. This is where content (business info, text, images) must be stored in order to enable Connected Data. You can fill the Content Library manually, using the content collection form, or via the Content Library API.

Data used in Connected Data is stored in these areas:

• Business Info: Phone Number, Email Address, Social links and Business Address
  
  
• Business Text: Full paragraphs that you can add to the site
  
  
• Business Images: Logo and single images
  
  
• Collections: Galleries of images, each with a title and description, that you can connect to a gallery, slider, etc.

All of this data comes with a default or customizable label. The label is what binds the data in the Content Library to the site widget. You connect the widget by selecting the label of the content that you want.

Next step - Connecting widgets

Once your Content Library has data, you can start connecting widgets.

1. Right-click on a widget to open the context menu.

2. Click Connect to data.

*If you can’t see Connect to data in the context menu, it means this widget isn’t supported or you don’t have the right data for it in the Content Library. For example, if you don’t have any images in the Content Library, you won’t be able to connect an image widget.

3. In the Connect Data popup, choose the label of the data you want to connect and then click Done.

That’s all there is to it.

You can edit the Connected Data at any time via the Content Library, change the data that the widget is connected to, or remove the connection altogether.

How do I use it? (aka What's it good for?)

Scalable changes - Update once, update everywhere

When you pull content from the Content Library, you ensure that the content appears consistently throughout the site. If you want to update content sitewide, changing it in the Content Library ensures that it’s updated everywhere.

For example: Update logo

Let’s say your client changes their logo. Instead of going into every logo widget on the site and replacing the logo one image at a time, you can simply replace the logo in the Content Library.

1. Make sure the logo image in all devices and across the site is connected to the Logo label.

2. Change the logo in the Content Library.

That’s it. All images connected to the Logo label will be updated automatically, everywhere.

Use external resources to build sites faster

If you're managing your customer’s data in an an external CRM tool (for example, Salesforce, vCita) or using a customize contact form to collect client information, you can just pull this information into a template that you built that is already connected to data (see Customize Template, below). In one click, you’ll pull the required info and are ready to go.

Some recommendations

Use the Content Library! It allows for easy data management, all in one place, improving your site building, editing, and updating processes.

Customize your templates. To speed up your work process, we suggest that you connect widgets in your custom templates to identical labels. (If you’re using __ templates, you can save them as your own and add labels.) This customization makes switching templates and updating designs much more efficient.

Copy and save info that isn't in the Content Library. Content that's been added directly to a site, for example pages and custom paragraphs, will not be saved when you switch templates. So make sure to either add them to the library or save them elsewhere first.

Let the syncing begin!

A few examples of what you can do with it:

• Get a Slack or SMS notification when someone adds a site comment on YDA.
  
  
• Automatically create a task in Asana when a contact form is submitted on a YDA site.
  
  
• Push contact form submissions into a CRM system (like Salesforce, Zoho, etc.)

These are just a few examples. To access the YDA Zapier App, go to this link:

https://zapier.com/app/login?next=/developer/public-invite/4345/4dba4613799970ce208b0895e115d1b3/ 

Note: The Zapier integration requires your YDA API credentials (currently available for Legacy Pros with API access, Agency and Enterprise plans).

With Zapier, YDA has two events which can be used as a trigger:

• New or Updated Site Comment - When you get a new comment in your site, you can automatically send it to your task management system to make sure you don't miss it.
  
  
• New Form Response - Connect your contact form responses to any CRM and/or email service you use.

After an event triggers, you can do any Zapier action that uses their library of over 1500 actions/Zaps. This gives you endless possibilities of where this data can be used or pushed outside of YDA.

You can also push data (as actions) back into websites based on events from other systems. 

These actions currently are: 

• Update Content Library - For example, when you update any of your customer business info on a listing site and / or any platform you use, you can automatically update it in the Site Content library (and it will automatically update on the site).
  
  
• Add Collection Row - if you use collection in external service and want to add another item you can just use the Zapier App and add this item automatically to your site.  

Widget highlights

Image customizations

Draw attention to posts by customizing image size by device and adding hover effects.  

Full-text style controllers

With more control over how the post text looks, it’s easier to attract visitors’ attention. You can customize every text element, including blog title, post title, description and author name.

New & improved layouts

The new All Posts widget has four customizable layouts. Choose how many posts you want to show and the number of descriptive lines you want with each post. You can round the corners of each post and add a shadow. 

Some tips to keep in mind when customizing this widget 

• Keep post titles more or less the same length as multiple posts are shown at once.
• Choose great thumbnail images for your posts, as these are the images that appear in the All Posts widget. (Manage these images from the blog panel).
• If your blog has lots of posts, considering tagging the posts. This enables you to sort the ones you want to display in this widget according to specific tags.

Simply connect the widget to a Google public calendar and customize how it looks directly from the platform. The calendar looks great on mobile, which is really important when you consider how many people check calendars and schedules on the go.

Calendars are a perfect addition to so many types of sites: 

• Entertainment venues: Tourist attractions, zoos, concert venues and art exhibits – adding a calendar to these sites enables site visitors to see upcoming events at a glance.

• Schools: Help students, educators and parents by posting the school calendar directly on the school site. It’s a great incentive for visitors to bookmark the site.

• Nonprofits: Using a calendar to display fundraisers, special events and more is a great tool for promoting events.

• Gyms & community centers: Post upcoming classes that can be viewed at a glance. Add a contact form immediately below so visitors can sign up for a class.

• Restaurants: Post daily and weekly specials, holiday meals and more. Add an OpenTable widget on the same page, making it easy for visitors to make reservations.

Customizing the widget

All the content for this widget comes from Google calendar you select, so that’s where you’ll go to set events. For more on setting up a public Google calendar, read this.

As for the calendar’s style, this is customized entirely in the platform. You can set the color, font and style for the month and days of the week. When users click on a specific day, an event popup is displayed showing all the events scheduled for that day.

Our Widget Builder gives you the unique ability to build your own widgets to meet your customers’ needs. Now, the Widget Builder has even more options, with expanded content and design capabilities, so you can build more sophisticated widgets, with increased functionality, while maintaining a simple, consistent, user-friendly UI.

Roundup of the highlights 

You’ll find a variety of powerful Widget Builder improvements, all of them geared towards increasing the functionality, flexibility, and user-friendliness of the widgets you build. Here’s a list of what's new:

Conditional Display  

This enables you to display the relevant elements in the editor according to user selection. 

For example, if you build a widget that includes a Title, you can choose to show the Title editing component only if the user has added a Title. If the user doesn’t add a Title, the Title editing component will be hidden.  

Group

Improve the UI in both the Content and Design Editors by combining related components into logical groups. Choose one of four layouts (embed, container, side menu and expandable) for displaying the group. 

For example, you can place all the elements that relate to Settings in a Group and then choose to show the Group in a side menu or container.

First, choose which components belong in the Group. 

Then, choose the Group layout:

• Embed shows it directly inside the editor. 
• Container sets it in a white background in the editor.
• Side Menu displays when clicked to one side of the editor.
• Expandable displays when clicked inside the editor.

Layouts

Similar to the layout element in widgets (for example, in the Image Gallery), you can now create several possible layouts for your widget, so users can choose how the widget will be displayed on their websites.

Build the layouts in HTML and upload an image for each layout, to be displayed as a preview in the editor.

By adding multiple layout options, you enable widget users to decide how the widget appears.

Icon

You can now incorporate the Icon widget into any custom widget that you build. The icon selection comes from the standard icon library, so you’ll have hundreds of icons to choose from. This makes it easy to build a widget that features an icon and text, for example, quickly and easily. 

Date Picker  

Add a date picker to your widget to make it more timely and current. The date picker can display either a specific date or the current day. For example, you can use it to build a widget that lets visitors know whether a business is open at the specific time that they visit a site. 

Color Picker 

Your design flexibility is greater, as you can enable users to customize the color of any element you want. For example, you can now allow users to select the color of a button border, divider, image and more.  

CSS Slider

Add a slider controller to your widget and enable users to control elements according to pixels or %. For example, you can use the CSS Slider to control the padding around a button or image. 

Image Design Input

This input contains all the relevant editing elements for images, and includes width, height, border, corners, and shadow. You’ll save time when you build your widget, and enable maximum flexibility to users. 

Rounded Corners

You’ll have more design flexibility in any element with a corner, and enable widget users to adjust each corner of an element individually (or all four of them at once). 

Expanded Design Editor Inputs

You now have the same functionality in the Design Editor as you’ve had until now in the Content Editor, with the addition of several generic input fields including dropdown, toggle, radio buttons, and more. 

This enables you to create design configurations not provided by YDA by default. 

Build Better Widgets for Your Customers

When it comes to building customized widgets for your customers, the only limit is your imagination. 

Content inputs - https://www.duda.co/developers/widget-builder/content-inputs

Design inputs - https://www.duda.co/developers/widget-builder/design-inputs

It also saves time for your team and customers, as they no longer need to manually update live widgets, and enables greater consistency in all sites that have the same widget. 

Until now, widgets built with the Widget Builder could only be updated in live websites if customers or team members manually updated the widget. With auto-update, new widget versions are pushed effortlessly to all live websites. Just make sure the change doesn't break the widget, as it affects live sites.

So, if you add a new field to a Testimonial widget or fix a typo in an Image Effects widget, all of these changes will be automatically updated in all versions of the widget. Also, if the API you're using changes and you want the change to take effect immediately for all people using the platform, you can now implement the change in all live versions of the widget at once.   

More Widget Builder Improvements 

In addition to auto-update, we’ve also added functionality that enables you to change field types while preserving field values. For example, you can replace a toggle button with a checkbox, or a radio button with a dropdown, without having to re-enter the values.

For more about using the Widget Builder to build customized widgets for your site, go to the developer portal. 

Don’t be fooled by this widget’s simplicity. It opens a world of design possibilities.  

Use it to display new products, special events, team members and more. 

This widget is an Experimental Feature available for now exclusively to YDA.

To add it to your Widget panel, click the (i) at the top of the editor, click Experimental Features, turn on “Show experimental widgets in the widget panel”, and click Apply.

To add it to your Widget panel, click the (i) at the top of the editor, click Experimental Features, turn on “Show experimental widgets in the widget panel”, and click Apply.

You have several layout options to choose from, and can add as many tabs as you like (we recommend no more than four or five).

Each tab can contain a label, title, description, image and button, and each of these elements is fully customized. 

Tabs examples, to get you started

Friendly Tab Tips

Here are some simple tips to help you make the most out of this new design widget:

1. Arrange tabs in a logical order: Think about what order makes the most sense for users, and arrange the content accordingly. 

2. Support text with images: Images make tab content more attractive and easier for site visitors to understand at a glance.   

3. First tab is preselected: So make sure it’s the most important one. 

4. Use clear, short labels: Use plain language in the label, so users know exactly what to expect, and keep the text short. 

5. Capitalize with consistency: You may choose First Letter Caps or ALL CAPS for your labels. Whatever you do, make sure it’s consistent. 

6. Help users know where they are: Do this by customizing the Selected Tab & Hover in the Tab Design editor. 

These Sections appear in the following categories: Intro, About, Features, Plans, Promotion, Restaurant, Text & Image. To organize them into your own categories, simply save the sections you love as Team Sections. For more on managing Sections, read this Team Section overview.

Intro Section

This section features a bold round shape as a button, drawing extra attention to the primary CTA.

To recreate this section on your own, add a row with 2 columns and follow these steps:

1. In the left column, add a title, text and shape widget. Choose the circle shape and enter + in the widget's title area.  
2. In the right column, add an image as a background column. Add a shape widget, choose the triangle shape, set the color so it's the same color as the left column background, and set the left margin to -159px.

About Section

Creative companies deserve creative ways of displaying images. Rather than having a standard round or rectangular image, how about this bean-shaped one?

Feature Section

Here's a creative way of showing off a company's services and/or features.

To recreate this section on your own, add a row with 3 columns and follow these steps:

1. Add an inner row in each column. Set the inner row color to white and set an outer shadow. 
2. Add a shape, subtitle and text widget to each inner row. For the shape widget, set the color to gray and add a number in widget's title area. Set the left margin to -59px and the top margin to -30px.

Plans Section

Draw attention to the plan you want customers to choose with a subtle flag and short text. Because when it comes to websites, the little details matter a lot.

Promotion Section

Give an image a bit more pizzazz by displaying it in a unique shape. It’s a small effect that can have a big impact. (We used the shape widget to create a bold title on the left side of this section, too.)

Restaurant Section

You can use this section to highlight a specific area of your menu. 

To recreate this section on your own, add a row with 2 columns and follow these steps:

1. In the left column, add a slider background image and a shape widget. Choose the drop shape, set the widget's title to 100% and the description to ORGANIC. Set the alignment to right and the bottom margin to -40px. 
2. In the right column, add a subtitle, title and restaurant menu widget. Fill the widgets with your menu content.

Testimonial Section

To recreate this section on your own, add a row with 2 columns.

1. In the left column, add an icon and slider.  
2. In the right column, add a background color, image and 2 widgets: title and shape widget.

Text & Image Section

It doesn't take much to make an image stand out. In this section, a serrated circle is used to highlight the call to action. 

Start using this widget now, and your sites will be ready for the new year on January 1 (and every new year after that)!

Copyright best practices

• It's standard practice to have a copyright notice on a website. Not having one can make a site look less-than-professional.
• Copyright messages are generally added to website footers, but can be added anywhere you like.
• Copyright years should always be current. An out-of-date copyright can leave site visitors questioning the quality of the site they are visiting.

Help site visitors find exactly what they are looking for with the new accordion widget.

It’s a space-savvy design element that allows you to organize information on your site, and enables visitors to find more information about the issues they are interested in simply by clicking the relevant title, sentence or question.

The accordion widget is ideal for showing FAQs, product names and descriptions, services, dates and events, and more.

Awesome accordion ideas for your sites

There’s no limit to the number of ways you integrate an accordion widget into your sites. Here’s a few ideas to get you started:

FAQs: A classic way of presenting questions and answers on a site, in minimal space, is via the accordion widget. Answers are revealed in a click, so users see the information they want to see.

Product and services: Show multiple product or service titles on the page; interested users can choose the ones they want to read more.

Pricing plan: Display your pricing table in a nice, digestible manner, with add-ons and explanations visible on click.

You can also choose whether to display the time using a 12-hour clock (a.m./p.m.) or a 24-hour clock.

You’ll find this toggle on the left side of the widget’s content editor, immediately below the Working Days section.

You can choose how the popup will be displayed: on hover, on click, or always.

More conversion come with more people so bring them to your business!

So many types of sites are perfectly suited for this widget, including:

• Musician sites: Add clips, songs, or full concerts.
  
  
• Personal tutor sites: Add short tutorials to encourage sign up.
  
  
• Professional chef sites: Add a podcast with a recipe tutorial.
  
  
• Author and writer sites: Add an excerpt of the author reading from his or her latest novel.
  
  
• Personal coach sites: Add an audio clip from a recent conference. 

To add the Audio widget to any website, search for Audio in the widget panel. You can enter any public track URL hosted on SoundCloud or Mixcloud, or upload your own audio file to either one of these services and then enter its URL. Once you’ve added the URL, you’ll see multiple layout options to choose from to present your track.

Your Mixcloud layout options

Your SoundCloud layout options

You now can embed your own widget control panel directly into the editor.

This means that you, as a developer, do not need to rely only on the standard input options -- you can instead build with the unlimited power of the web.

The way this works is by embedding a page (via an iframe) you host into the widget editor. Then, within the website, you also add your own code to display the widget output. Since you control both the output and the widget control panel, you can have the user use the widget editor and communicate in the background to the widget on the website.

As you can tell, this is an advanced option, but it will give developers and others the possibility of building any widget they can imagine with their own backend service.

• When a sale or promotion is going to end
  
  
• How much longer until an event starts
  
  
• When a new product is going to launch

Add the Countdown widget anywhere on your website (for example, on the main image, in a popup or banner). Choose from several layouts, decide how to display time that has passed, and set the message that displays when the countdown is over.

Some eye-catching (and handy) countdown examples

Place the widget in the hero image of a landing page. Use a contrasting background as the frame color to highlight the counter.

Display the countdown on every page in a site by placing it in the header.

Collect more leads by building a sense of urgency on your contact forms. Add a counter and a call for action.

Add a counter to a popup to show that a specific sale won’t last forever.

Counting down is as easy as 1-2-3

The Countdown widget takes just a few moments to set up, and is a great way to add time-sensitive excitement to your site. 

Connected Data is available in both simple fields (such as Text and Images) as well as more complex ones (such as List and Image in List). Simply decide which fields you want to connect in the widget and then bind those fields to the right place in your Content Library.

What is Connected Data, anyway?

Connected Data is a great way to ensure that site data is up-to-date and synchronized with other sources on the internet. It’s important for creating websites that are reliable and consistent with other content on the web and great for making for scalable changes. Update information once and it is updated everywhere.

This is one of several improvements you’ll find in the improved context menu, streamlined to speed up your site-building process.

Add widgets inline

It’s easier to be accurate with the placement of widgets when you add them from the context menu. The new widget will simply be placed immediately below the widget added it from. You have four popular widgets to choose from right away, and can click on More widgets to open the entire widget menu. After adding the widget, simply edit as usual.

Widget can also be added from a column context menu and will be place at the end of the column.

Streamlined context menu

Your context menu has been reorganized to make common editing actions easier and quicker. All options to add something are now grouped together under + Add, including the new ability to add widgets.

Clear padding

Until now, you needed to go to the widget editor to clear widget padding. Now, you can do it directly from the context menu. It’s an easier way of resetting padding and aligning the widget.

Add the new WhatsApp widget to your sites and you’ll give visitors a new, super easy way of getting in touch with the site owner quickly, especially from mobile. This is one more opportunity to increase engagement and conversion from your website, making it easier to convert anonymous site visitors into customers.

When you add WhatsApp to your sites, you give visitors an easy channel for communicating with site owners: a single click opens the app on the visitor’s device. It’s an easy way of solving problems and answering questions about a product’s dimensions, weekend hours, an upcoming reservation, etc.

All you need is a number

Getting started with WhatsApp is easy. Simply add the widget to your site, enter your WhatsApp number, and you’re ready to receive messages from site visitors. The widget works both on mobile (WhatsApp’s natural environment) and desktop, so it covers all the bases.

WhatsApp is a great addition to many types of websites, including:

• Local services: Service providers who tend to work on the go (plumbers, carpenters, gardeners, etc.) can be hard to reach. Mobile is WhatsApp’s natural environment, so it’s a great channel for reaching services providers, anywhere.
  
  
• Hospitality industry: Travelers often depend on wifi when they are on the go. By including WhatsApp on tourist-oriented sites, you’ll make those sites more accessible to travelers who want to confirm a reservation, announce their time of arrival, etc.
  
  
• Online shops: Enables site visitors to make simple inquiries about size, colors, etc. A real-time conversation between a site owner and visitor can be all that it takes to close a sale.

A few words about WhatsApp

Free to install and use, WhatsApp is ideal for quick and easy mobile communications - both local and international. It’s a super convenient way of messaging, calling and sharing images.

• WhatsApp has more than 1.5 billion monthly users 
  
  
• These users send about 60 billion messages every single day
  
  
• WhatsApp is the most popular mobile messaging app in the world

Easy to set up and customize

This widget is simple to set up and looks fantastic on all devices. Simply load any images that you like, customize the label text and fonts (don’t forget to add alt text to support SEO) and choose the color that best emphasizes your images. To see the slider in action before publishing, click Preview.

So many great ways to use this widget

There are countless ways to use this widget - for everything from showing off home renovations to highlighting the effect of photograph filters. Here are some examples: 

• Handyman or home renovation website (before and after renovations)
  
  
• Beauty salon or stylist (before and after beauty treatment)
  
  
• Nutritionist or personal trainer (before and after training program)
  
  
• Landscaper or gardener (before and after landscaping)
  
  
• Photographer (photo editing services)
  
  
• Pet grooming, cleaner, orthodontist, dermatologist and more

Good for SEO, too

Not only does adding Before & After images engage site visitors by giving them something interesting to see on your websites, but keeping visitors on your site longer (also known as Dwell Time) is good for SEO, as it indicates to search engines that visitors like what they see.

By integrating Content Library data into your text, your entire site-building process is faster because you don't have to manually type elements that repeat themselves in the site. You also ensure that these sections are always up-to-date. If the elements change (for example, a phone number or address is updated in the Content Library), your entire site will automatically be updated too. 

How it works

While entering content in a text widget, type {{{ to open the Connected Data popup. From here, select the label of the data you want to insert. When you close the text widget, the data will appear as part of the regular text.

Connected Data - Making it easier for you to build sites at scale

As with all Connected Data functionality, inline binding is exclusively available to users with Team plans and higher. For more on how to use Connected Data to build sites easily and at scale, see this.

Some examples of what you can link 

• Link contact details to a contact’s team page, email or phone
  
  
• Link an email address to open an email
  
  
• Link menu items to a popup with ingredients
  
  
• Link document names to downloadable files
  
  
• Link addresses to navigation links or maps
  
  
• Link phone numbers to initiate a phone call

The link style is based on the Global Design settings, so it will be identical to other links on the site. If you like, you can customize the link style from the widget’s Design Editor. 

Want to add some professionally designed tables to your sites right now? Check out the 8 Table sections that are already in the platform. 

There are 8 brand-new Table widget Sections in the editor, distributed in several Section categories and designed to help you integrate handy, informative and eye-catching tables into your sites.   

Intro Category

This Section is great for displaying practical information on top of a striking image. You can add the Section as is or follow these steps to make it on your own.

• Start with 2 rows. In Row 1, add an image background and 3 widgets: Icon, Text, Title. Set the top and bottom spacing to 100px.
  
  
• In Row 2, add a Table widget. Set the top margin to -60px, so that the table overlaps the image background. On mobile, set the layout to Collapse.

Features Category

Multiple product table

In this Section, the table shows details about multiple products. The image on the left illustrates the content while the table on the right shows details. 

Single Product Table 

You can also use the Table widget to show off a single product. You can also add an icon to the texts - in this case, we’ve added a checkmark.

Product Quality Table

In this table, the first row is set off with a different background color, one that fits right in with the icon at the top.

Restaurant Category

Recipe

Tables are a great way to show organized information such as recipes, and this Section is example for your site. To build it yourself, follow these steps:

• Start with 2 rows. In Row 1, add a background image.
  
  
• In Row 2, set the background color to beige and add 1 column.
  
  
• Set the background color to white, round the corners to 10px, and toggle on the shadow. Set the top margin to -160px.
  
  
• In this column, add a Title and Text widget. Add an inner row, divide it into 4 columns, and add icons and text.
  
  
• Below the inner row, add a Table widget. In the header, set the background color to grey and set the text color to beige.
  
  
• Set the background color of the rows to white and the borders to gray, 1px.
  
  
• On mobile, set the Table Layout to Collapse.

Multiple Flavors

Another mouthwatering option, this one shows three categories of products and then lists the items in each category.

Plans Category

Tables are a classic way of presenting pricing options. In this Section, alternating background colors are used for even and odd rows, to help highlight the text. Instead of words in each column, you can simply copy and paste icons.

Contact Us Category

The widget also got a face lift with some design tweaks for social medias like Instagram’s stunning gradient, YouTube’s distinct red, and LinkedIn’s new font. 

WhatsApp

Enable people to communicate directly with your client via WhatsApp, one of the world’s most successful mobile messaging and call apps.

Google My Business

This powerful platform enables consumers to search for businesses and services via Google Search and Maps. It’s a great tool for helping businesses be discovered and boost their local SEO.

Waze 

Make it easier for site visitors to reach your client’s brick-and-mortar location quickly with Waze, the community-driven GPS and navigation app that helps people reach their destination as quickly as possible.

Benefits of adding links to social media accounts to your sites

Social media is hugely important today, and companies who maintain social media accounts should link them to their websites.

Here are some reasons why:

• Easier to stay in touch. Site visitors are more likely to follow a company on Facebook or Instagram than they are to sign up for a newsletter. So, adding social media icons gives an additional way for business to communicate with site visitors after they leave a site.
  
  
• Authenticity. Social media can give site visitors the feeling that a company is dynamic and authentic. While an Our Story page on the site may tell a company’s initial story, links to active social media accounts enable the story to continue.
  
  
• Multiple channels, one central location. Websites are a great place for gathering all social media channels in one spot. Think of your website as a transit hub for visitors who can then move onwards in the manner that's most convenient for them.

Simply connect a Photo Gallery widget to your client's Instagram account, and their up-to-date Instagram images will be displayed on the site, with no additional effort or maintenance. This means you don’t need to go into the site to update images. They’ll automatically update every time they update on Instagram creating a seamless connection between your client’s website and social media. 

The power of Instagram in 2020

Instagram is the world’s fastest growing social media platform, and has huge benefits for businesses of all types and all sizes. Here’s why:

• Instagram has 1 billion+ monthly active users. That makes it the third most popular social network in the world (after YouTube and Facebook).
  
  
• Instagram is increasingly popular among older audiences. Instagram has always been popular amongst younger ones, but the largest growing audience is older than 18, making it super important for businesses who market to this age category.
  
  
• 80% of Instagram users follow a business. And the number is growing all the time. This makes Instagram a great way for businesses to reach customers when they are not on their site, ultimately increasing engagement and conversion.  

Integration is easy and flexible

It takes just a moment to connect your site with Instagram and once you do, you forge a direct connection between your site and your client's social network. In addition, you ensure a ongoing source of high-quality images on your site. No need to update the gallery manually.

Just click Connect Instagram in any Photo Gallery and enter the Instagram account details. Once connected, you have all the design flexibility of the Photo Gallery widget. Choose the number of images you want to display at one time (you can show up to 100), how you want to display them, and more.  

Some gorgeous inspirations & examples

To start adding Instagram to your sites right now, open any site, add a Photo Gallery widget, and connect it to your client’s Instagram account.

You can use any section with Photo Gallery to have a beautiful Instagram gallery. In addition, here are some design ideas that you can recreate in your own sites (and will be added as sections too): 

With internal comments, you can have conversations on your sites that are only visible to team members. To allow your clients to see comments, simply mark them as public. 

This new distinction makes Site Comments even more powerful, as clients can get access to comment on the site while team members can communicate without their clients seeing the communications.  

Internal Site Comments Use Cases

Communicate during the design process – Internal comments enable team members to resolve issues quickly and accurately, directly on the site.

No need to delete Internal comments – In the past, we recommended deleting comments between team members to ensure clients wouldn’t see them in the Comments Log. Now, since comments that start as internal stay that way, there’s no need to delete them. 

Track communications on the site – Comments are automatically saved in the Comment Log, enabling a clear record of comments and responses. 

A single communication channel for your entire team – Communicate clearly with multiple team members in a single place: no need for emails, messages, phone calls, etc.

A few things to keep in mind

• Your clients won't know about this change.
• Internal comments are only available for plans with client communications (Agency and up). For more, see our plans page.
• If a comment starts as internal, that’s how it stays. Ditto for public comments. If you want to make an internal comment visible to clients, add a new comment and set it to public.
• You can filter Internal / Public comments in the Comments Log. You can also see the different between them on top of the website by the comment color indication (grey for internal and blue for public).
• When internal comments are added to a site, team members who have been selected to receive notifications for the site will be notified.

• Communication between team members 
• Getting feedback from clients as they review the site
• Making notes to myself while building the site
• QA process

Here are some of the features that have already been added, and a sneak peak of what we’ll be adding in the very near future:

Add clients before publishing 

Upload image

Save time & eliminate confusion with this feature, which enables clients and team members to upload images directly via a comment. If the comment is on a widget with an image (for example, an Image Slider or Gallery widget) the image can be replaced in a click by the team.

Webhooks

Stay on top of your site review process with webhooks notifications every time a comment is made or resolved. 

Resolve Date Indication

Track what’s been resolved (and what hasn’t) with the resolve date indication. It appears whenever a comment is resolved and shows who resolved the comment, and when.  

Minimize Site Comments - Coming Soon

Prefer a clean screen while building and editing your websites? The minimize feature enables you to remove the Site Comments right bar while you’re working on sites and bring it back when you want to use it.

Remember: Clients won’t see the Site Comments bar at all until you add them via Client Permissions so they don't have this option. 

Internal / Public Comments - Coming Soon

Control who sees comments with internal/public tags. Set the internal tag for private comments you only want team members to see and the public tag for comments you want clients to see.

Just getting started

Site Comments has only been live for a few months, but it’s already changing how people build, edit and review their sites. We’ve got more plans for the future, so stay tuned... 

Site Comments is a game-changing collaboration tool that enables you and your clients to communicate directly on top of their sites for a faster, easier, clearer review process. 

With Site Comments, clients make comments as they review their site, directly on the site. You and your team can respond to these comments - and implement changes - all in the same place. Selected team members and clients are notified whenever a comment is made or resolved, so tracking changes are smooth and easy. The result: you build and go live with the sites your clients want easily and more quickly.

With Site Comments, client feedback is: 

• All in one place: No need to collect comments sent via emails, phone, text messages, and handwritten notes.
• Clear & accurate: Because comments are made directly on the site, they are easy to understand. Clients don't have to explain which element they want you to change - they simply leave their comment directly on it.
• Fast & easy: By making the feedback process simple (no screenshots, no emails), clients are more likely to get back to you right away.
• Quick to implement: Making changes is easier when you view all comments at the same time, and in one place.

Where do I login to WebDesignApp to edit my website?

https://editor.webdesignapp.io/login

• Communication between team members
  
  
• Getting feedback from clients as they review the site
  
  
• Making notes while building the site
  
  
• QA process

The open beta is now over so we want to take this opportunity to share with you how we’ve improved Site Comments since it was released.

Here are some of the features that have already been added, and a sneak peek of what we’ll be adding in the very near future:

Save time & eliminate confusion with this feature, which enables clients and team members to upload an image via a comment. If the comment is on a widget with an image (for example, an Image Slider or Gallery widget) the image can be replaced in a click by the team.

Webhooks

Stay on top of your site review process with webhooks notifications every time a comment is made or resolved.

Video Tutorial

Resolve Date Indication

Track what’s been resolved (and what hasn’t) with the resolve date indication. It appears whenever a comment is resolved and shows who resolved the comment, and when.  

Minimize Site Comments - Coming Soon

Prefer a clean screen while building and editing your websites? The minimize feature enables you to remove the Site Comments right bar while you’re working on sites and bring it back when you want to use it.

Remember: Clients won’t see the Site Comments bar at all until you add them via Client Permissions so they don't have this option.

Internal / Public Comments - Coming Soon

Control who sees comments with internal / public tags. Set the internal tag for private comments you only want team members to see and the public tag for comments you want clients to see.

Just getting started

Site Comments has only been live for a few months, but it’s already changing how people build, edit and review their sites. We’ve got more plans for the future, so stay tuned...

Clients and teammates can add images directly to their comments, and these images can be uploaded directly from the comment to the site. This makes the feedback process easier and more accurate, saving the time and effort of sending images separately.

Adding images saves time & improves clarity

Site Comments makes the entire site review process simpler, easier and more accurate by enabling clients and teammates to leave feedback directly on top of sites. With this new capability, images can be added to comments, saving clients the trouble of sending them separately by email or (even more complicated) describing the image they want to use with words.

If the comment is made on a widget with an image (for example, an image slider, photo gallery, or single image widget) the team member can then replace the old one in a single click - directly from the comment.

So many ways to use Site Comments

Site Comments is a powerful tool that can seriously improve your workflow by enabling feedback directly on your sites. Use it to:

• Communicate with clients on their sites.
  
  
• Communicate with teammates as you build sites.
  
  
• Make notes to yourself while you build the site.
  
  
• Ask questions (and get answers) all in one place.
  
  
• And more!

Your website analytics show detailed information about how many visitors your site gets, where they are coming from, and which pages they visited. Analyzing this customer information can help you make more informed decisions to improve your website and your business.

Records and displays full statistics for your website, per device, so you can view exactly what users are doing on desktop, tablet, and mobile. You can view all of your stats in the stats section of your dashboard. 

View your stats

Log into your dashboard then click the stats icon underneath a website to view its stats. Otherwise, click the Stats tab in the upper-right corner.

receive stats summaries by email, please change your preferences in the Manage Users section.

Stats Selection

The top bar of the stats field allows you to select which site and time period you would like to view stats for.

Stats Tabs Summary

The various stats fields in the stats dialog display different information about the site.

Overview

The overview gives you the key information you need to know at a glance. You'll see user interaction and total visits to your site quickly and easily. This is a great way to check in to make sure your site is healthy and active.

Content Data 

Content shows you the pages that are visited the most. Based on your site's layout, this can give you a lot of information about what your visitors are looking for. If they visit a page way more often than another, you might want to consider making that page more engaging or informative.

Engagement

Engagement gives you a deep view of the exact actions your users take. You can see when and how many times users have called you, or find out which coupon is being used the most. With this knowledge, you can further optimize your site so visitors will take advantage of your business features more often and effectively.

Traffic Sources 

One of the most valuable pieces of information you can know is how visitors are getting to your site. Do most visitors type in your address directly? Or do they find you by search? This can affect how you run your marketing and website in many ways. For example, if search traffic is low, try targeting new or more relevant keywords.

Direct traffic is when someone types in your website URL to get to your site directly. Referral traffic is when a visitor clicks on a link from another to get to your site. Organic traffic is when you were found on a search results page. 

Browsers & OSs 

Discover what type of devices your visitors are using by checking out what browser and operating system they're on.

Geolocation

Learn where your visitors are located when they land on your website. See their location by Country, State, and City. The more you know about your visitors, the more you can provide relevant and engaging information when they visit your site.

Advanced Event Statistics

Your Web Design Studio Builder already tracks multiple events. You can see the following events tracked in your Your Web Design Studio Builder analytics dashboard:

• Click-to-Call
  
  
• Click-to-Email
  
  
• Click-to-SMS
  
  
• Mobile Map
  
  
• Coupon Clicks
  
  
• OpenTable reservations
  
  
• Form submissions

When adding a Google Analytics ID to a site, these events will be automatically tracked in your Google Analytics account as well.

inSites

Check the performance of active inSites you have created. Learn which Personalization rules have the most engagement and by which device.

Managing stats digest

You can control how frequently your statistics emails are sent out by going to the statistics digest option.

This will let you set the frequency and even allow you to send stats manually (Your Web Design Studio Builder users only). 

Troubleshooting & FAQ's

Why am I not seeing any stats?

Likely it's because a user has not yet visited the site - If you are using a mobile-only site, please double-check that the redirect is installed and is redirecting users to the correct site.

Are these stats real time? 

Almost - It takes 24 hours for stats to update.

Every store with 100 or more products now has access to selected apps in Ecwid’s App Market from directly inside the site store Control Panel. From this App Market, you can install free, freemium, and premium apps that provide additional store functionality. 

To access the App Market, simply click the Apps tab in your store Control Panel, and then click App Market.

Note that the Control Panel has had a nice facelift, too!

A few words about the App Market and its apps.

The apps that have been selected for the embedded App Market only affect the store. None of them will affect the website.

These apps were developed by third-party developers. For premium apps , payment goes directly to these developers. We are not involved in any way, and cannot grant refunds.

All related support issues must be directed to the app developers. We are not responsible in any way.

Happy Shopping!

Dynamic Pages enable you to build websites with multiple pages quickly. While you may not need them to build a site with just a few pages, if you’re working on a site with 20 recipes, 30 team profiles, or 500 housing listings, they might well be the perfect solution.

Regular Pages & Dynamic Ones: What's the Difference

When you build a site with Duda, you can use Regular pages or Dynamic pages. Regular pages are edited individually, each one with its own layout and content. Editing the layout of one page doesn’t affect any other page.

When you use Dynamic Pages, the process is different. Dynamic Pages allow you to design a page once and use it to create multiple page items that are displayed on the site. These page items are auto-generated according to content stored in a content collection*. 

*What’s a content collection? A content collection is a database where content is stored. A Google Sheets spreadsheet, for example, can be used in Duda as a content collection. When this type of collection is connected to Duda, its content can be used to fill your site.  

Change the layout of the Dynamic page and it changes on all generated page items. Change content in the data source and it changes in the corresponding generated page item. 

To understand the practical difference between these two types of pages, let’s consider how you would use them to build a site with multiple recipes.

Building a Recipe Site with Regular Pages 

Let’s say you want to build a website with 20 recipes built with regular pages. In addition to all the standard site pages (About, Contact, Homepage), you would create a page called Recipes and then create subpages, each with a different recipe.