The designer allows you to personalize the chosen template or theme. The designer offers a lot of possibilities for personalization and is therefore less easy to use than standard layout management. This page describes the features of the designer.
Navigate to Settings > Layout and click on the Designer tab. Then click Start. We recommend using a large screen (at least 1920x900 pixels) to work optimally with the designer.
The designer consists of the preview in the background, a window with the mobile view of your website and the design window.
Most people will visit your website with a smartphone. The mobile view gives you an example of how your website will look on a small screen. Make sure that the website does not become too wide so that a horizontal scroll bar is not displayed. All templates are mobile friendly by default, but the designer gives a lot of freedom so this can be disrupted.
The icons at the top allow you to view at different resolutions.
The Refresh icon allows you to refresh the scripting in the website to see the latest version.
The first button gives you an overview of your personalized designs.
- Add design
- With this button you can add a new design or copy a design from another webshop.
- After publishing, the design will be live and visible for your visitors.
- This will allow you to edit the name, comments and copy rights of the design.
- This action allows you to delete the design. This action cannot be undone.
Elements form the HTML structure of your website. After choosing an element, you will be presented with a web form that allows you to modify the properties of the element.
There are many elements and properties that can be customized with the web form. The main element is Webpage. This form will automatically modify the underlying CSS selector.
Properties that have already been customized are indicated by a green background in the form field. Leaving the value of a property blank will remove the property.
Some elements contain subelements. Clicking on the links will bring up a new form which can be used to modify the properties of the sub-element.
Properties of elements may only apply for certain screen sizes or in the print version. Clicking on the links adjusts the properties of the element for a particular medium.
Use this icon to save the design. This will not publish the design.
Allows you to modify the HTML structure of the website. You can add, move and delete objects.
There are visible objects (search function, shopping cart, language selection, navigation) and invisible containers that are used to structure the website. Containers are typically used to group elements or add backgrounds.
You can make adjustments to the structure by dragging elements or by using the Up/Down arrows. You can add a new element by clicking on Add at the bottom. To remove an element, click on the Delete icon.
The structure is automatically adjusted in the design examples. If the adjustment does not happen automatically, click Save in the design window and then Reload in the mobile view.
Allows you to modify the layout codes (CSS code) of the website. CSS - Cascading Style Ssheets is not a programming language but a style language that can be used to define the formatting of website elements.
Customizing CSS, is that something for a layman?
CSS can be easily learned. We recommend this method for users who want to personalize their own website and invest time to learn about CSS.
Useful links with information about CSS:
- W3Schools - tutorials to learn CSS
- CSS-Tricks - our favorite with lots of CSS information
Help on CSS customization
For CSS code modifications, our help desk cannot provide support. Adding CSS support would mean doing custom web design and that would make EasyWebshop much more expensive. However, we have some good contacts with web designers who can help with CSS customization for a fee.
We don't recommend letting web designers log into your webshop directly or with an administrator account. This sometimes leads to discussions about changes that were not wanted. Only let people log in to your shop that you trust! Instead, the web designer can create a Basic webshop and design the layout in this webshop. You can then copy the layout to your webshop with the copy function.
Here you can turn on and off the dark mode, full screen and syntax highlighting of the CSS code. There is also an option to make the design window transparent. The preferences relate to the design window; therefore, not to the website.
How do I change property X?
Changing the background
Choose the element you want, for example Webpage. At Background Image, click the Edit Image icon. Choose an image from the list or Upload a new image.
You can also purchase an image using the Gallery. If you want to use the image on a page, we recommend the Web format. For backgrounds, we recommend a Large format.
Click Insert to set the image as the background. After the background image is set, an icon Delete image also appears.
Choose the element Webpage and the sub element Buttons. In the form, properties such as color, size, border style, etc. can be adjusted.
The Buttons mouse-over sub element allows you to change the style of the buttons when the mouse is hovered over them. For example, the button can be given a lighter color.
The easiest way to change colors is in the CSS code. Color codes look like #ffffff or rgba(255, 255, 255, 0.5). With the latter notation, the last parameter (0.5 in the example) is the transparency.
Useful links to compose colors:
- Color Designer - easily generate color palettes
- Color Combos - assemble color combinations
You can change the font by selecting an element and adjusting Font in the form.
By default, all our templates have one font set for the main Webpage element. It is possible to set different fonts for different elements. We do not recommend this to keep things uncluttered.
- I still see the old version of the website
- This is usually because the old images are still in the cache of the web browser. A web browser (Internet Explorer, Firefox, Google Chrome...) saves web pages and images on your hard disk. This way, at your next visit, the page will load faster. When you visit the page, you will see the old version of the photo on your hard drive and not the live version on your website.
To solve this problem: navigate to the shop page and click Refresh page or Reload page.
You can also use the shortcut keys: F5 or CTRL + R (Command + R on Mac). The most recent version of the web page is now loaded.
- The favicon is not displayed
- Use a recent browser. In some old versions of Internet Explorer no favicon is displayed.
Also connect a domain name to your shop. Some browsers display the favicon of EasyWebshop if no domain name is connected.
Next page: Editing texts and webpages
- Product management
- Online store configuration
- Account and shop settings
- Payment methods and Payment Service Providers
- Invoices and Terms & Conditions
- Setting shipping costs
- Discounts and surcharges
- Registering and transferring domain names
- Multilingual shop
- Connecting to external platforms
- Personalized web addresses
- Managing multiple webshops (Multishop)
- Automatic emails to customers
- Designing a beautiful layout
- Order management
- Backups and exporting data
- Email and web mail
- Administrator accounts
- High quality photos
- Two-factor authentication
- Meta tags - Website verification
- Live chat
- Visitor analysis - Google Analytics
- Point Of Sale (POS)
- Form fields
- Digital or virtual products
- Symcalia reservation system
- Contacting the helpdesk