Messy template

The most sophisticated template featuring numerous options to personalise the appearance and style of the design. Free to move the content containers with the drag and drop interface.
Updated 2 months ago

  • Extraordinary placement of navigation items.
  • All objects (images, videos, texts, gifs etc.) can be placed wherever you want.
  • The ability to fully customize the layout on the desktop and keep a mobile-friendly version on other devices.

  • Option to add background video or background image gallery.
  • Option to enable grid layout - entries are organized in columns keeping the website responsive at all times.
  • Shop add-on (available only using Shop hosting plan).

All the design options are grouped into the logical sections, see the complete list  of the input fields below.

General font settings

  • Color: base text color.
  • Font face: base font family.
  • Google web fonts: base font family from Google Fonts.
  • Font size: base font size.
  • Font weight: base font weight.
  • Font style: base font style.
  • Font variant: base font variant.
  • Line height: base line height.

Hyperlinks

This group of settings defines the design of all the created links:

  • Link color: text color of link.
  • Visited link color: text color of already visited link.
  • Link color when hovered: text color of link on mouse hover.
  • Link color when clicked: text color of link on mouse down.
  • Link decoration: appearance of decorative lines on link text.
  • Link decoration when hovered: appearance of decorative lines of link text on mouse hover.
  • Link decoration when clicked: appearance of decorative lines of link text on mouse down.

Background

  • Background color: background color of the website.
  • Is background image enabled: allows to set the image as a websites background.
  • Background image: option to upload an image file to use as a websites background.
  • Background tiling: background image tiling options (horizontally / vertically).
  • Background alignment: background image alignment options.
  • Background position: background image positioning options (fixed / filled / scroll along with content)

Thumbnails

Thumbnails can be turned on by setting the section type to "Thumbnails enabled"  and adding more than one images to the background gallery.

  • Thumbnail container width: width of the thumbnail container. This must be set as percentage. i.e. 60%.

Page layout

This group of settings is responsible for the whole website design layout:

  • Background button type: background gallery buttons type (dark / bright).
  • Centered layout:  sets the website content to the center or the web browser window.
  • Centered content width: content width if layout is centered. 
  • Centering guides color tone: color tone for centering guides (dark for bright background colors, bright for dark background colors).
  • Responsive layout: enables responsive layout for small screen devices (mobile devices).
  • Grid layout: enables the content entries to be organised in columns. Column count can be changed under section settings.
  • Centered contents: page heading, menu items and section entries are horizontally centered to the web browsers window.
  • Heading margin: margin around websites heading or logo.
  • Menu margin: margin around navigation menu.

Page heading

This group of settings defines the design related to the websites heading or logo:

  • Heading position: heading position fixed or absolute. Fixed always stays in one place, absolute moves together with content.
  • Logo image: option to upload an image file to use as a websites logo (displayed image will be half of the original size, full size will be used for hi-res displays).
  • Color: color of the heading text.
  • Font face: font family of the heading text.
  • Google web fonts: font family of the heading text from Google Fonts.
  • Font size: font size of the heading text.
  • Font weight: font weight of the heading text.
  • Font style: font style of the heading text.
  • Font variant: font variant of the heading text.
  • Line height: font line height of the heading text.

Main menu

  • Menu position:  menu position (fixed scroll along the content / absolute)
  • Font face: menu font family.
  • Google web fonts: menu font family from Google Fonts.
  • Font size: font size of the menu text.
  • Font weight: font weight of the menu text.
  • Font style: font style of the menu text.
  • Line height: font line height of the menu text.
  • Color: text color of the menu.
  • Color when hovered: text color of menu item on mouse hover.
  • Color when selected: text color of selected/active menu item.
  • Decoration: appearance of decorative lines for menu items.
  • Decoration when hovered: appearance of decorative lines for menu items on mouse hover.
  • Decoration when selected: appearance of decorative lines for selected/active menu item.

Submenu

  • Font face: submenu font family.
  • Google web fonts: submenu font family from Google Fonts.
  • Font size: font size of the submenu text.
  • Font weight: font weight of the submenu text.
  • Font style: font style of the submenu text.
  • Line height: font line height of the submenu text.
  • Color: text color of the submenu.
  • Color when hovered: text color of submenu item on mouse hover.
  • Color when selected: text color of selected/active submenu item.
  • Decoration: appearance of decorative lines for submenu items.
  • Decoration when hovered: appearance of decorative lines for submenu items on mouse hover.
  • Decoration when selected: appearance of decorative lines for selected/active submenu item.
  • Positon X: submenu X position indentation.
  • Positon Y: submenu Y position indentation.
  • Submenu is allways open: option to keep submenu always open or when parent menu item is active.
  • Submenu is hidden: option to hide submenu.

Entry heading

  • Color: text color of entry heading.
  • Font face: entry heading font family.
  • Google web fonts: entry heading font family from Google Fonts.
  • Font size: font size of entry heading.
  • Font weight: font weight of entry heading.
  • Font style: font style of entry heading.
  • Font variant: font variant of entry heading.
  • Line height: font line height of entry heading.
  • Margins: entry heading margins form other elements in page.

Entry layout

  • Entry text max width: defines the maximum width entry content can take.
  • Default gallery type: sets the media gallery default type.
  • Space between images in row and column: horizontal/vertical space between images when gallery type is set to row/column.
  • Space between images and image navigation: vertical space between gallery and navigation (image numbers below) when gallery type is set to "slideshow".
  • Empty space below gallery: gap between the gallery and the description content below.

Additional text

  • Color: color of additional text.
  • Font face: additional text font family.
  • Google web fonts: additional text font family from Google Fonts.
  • Font size: font size of additional text.

Social media buttons

  • Button color: color of social media buttons.

Custom CSS

  • Custom CSS: CSS code can be inserted here, basic CSS knowledge required. Any existing CSS definitions will be overwritten. For more information visit our Wiki.

Other settings

  • Reset design: all the manual changes made in Design section will be reset to the template default values.
Did this answer your question?