Adding Custom Design Templates

This section explains how you can prepare your own design templates and make them available to your customers.

A design template is a combination of website elements (banner, footer, sidebars, site-wide modules), page layout settings, and colors, which are applied to a site when it is created in the editor.

The editor provides a selection of 24 design templates, 16 of which are randomly generated, and 8, created by a graphic designer especially for Presence Builder.

Users can view the design templates and apply them to their sites in the editor, on the Design tab > Templates. Randomly generated designs are listed in the Generated section, and the templates prepared by the designer, in the Special section.

Preparing a Custom Design Template

The following site elements and settings can be saved in a design template:

  • The website layout: the location and size of the header, footer, content areas, and sidebars.
  • The banner image.
  • All site-wide modules.
  • The color scheme or individually selected colors.
  • The fonts.
  • The information about the borders and shapes of the page elements' corners.

To create a custom design template and add it to Presence Builder editor:

  1. Log in to the editor and start creating a site.
  2. Adjust the layout and design.

    If you need instructions on how to do this, refer to Presence Builder User's Guide, sections Changing Your Website Layout and Selecting Website Colors, Fonts, and Styles for Borders and Corners.

  3. Add the necessary site-wide modules and a banner.

    If you need instructions on how to do this, refer to Presence Builder User's Guide, the chapter Content: Text, Tables, Images, Video, Forms, and Scripts, and the section Changing the Website Header Elements.

  4. Save the design template: Go to the Design tab, and click Export Design.
  5. On the Presence Builder server, create a directory in /usr/local/sb/htdocs/templates/generic/presets/.

    The directory name should correspond to the desired name of the new template. For example: /usr/local/sb/htdocs/templates/generic/presets/my_mega_design.

  6. Extract the contents of the ZIP archive with the template into the directory you have just created.
  7. Prepare a thumbnail that will be shown in the editor: Make a screen capture of your design in the editor, resize the picture to 213 pixels in width and 151 pixel in height, and save it as screenshot.png.
  8. Upload the file screenshot.png to the directory /usr/local/sb/htdocs/templates/generic/presets/<your_template_name>.

The template will show in Design tab > Templates > Special section.

To delete a custom design template, delete the directory /usr/local/sb/htdocs/templates/generic/presets/<your_template_name> from the server.

 

Leave your comments on this page

Leave your feedback or question on this documentation topic below. For technical assistance, contact your hosting service provider or submit a request to Plesk support. Suggest new features for Plesk here. Discuss general questions on the Plesk forum. All offtopic comments will be removed.