Mashup 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
  • Option to add background video or background image gallery
  • 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)

Page layout

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

  • Centered layout:  sets the website content to the center or the web browser window.
  • Entry text max width: width of texts in the entries. This does not apply to the width of images.
  • How far content is from page top: the vertical distance between the top of the page and the content area.
  • How far content is from sidebar: the horizontal distance between the menu and the content area.
  • Responsive design enabled: sets whether layout should be responsive (adapts to all screen sizes).
  • Mash-up columns: column count for Mash-up section.

First page

  • Image size ratio: images in the first page layout will be resized by this ratio. Think of it as percentage, e.g., 0.7 = 70% of the original image size.
  • Images have shadows: sets the shadow for images in Mash-up section.
  • Images wiggle on mouse-over: images from Mash-up section wiggles on mouse hover.

Sidebar

  • Width: width of the sidebar.
  • Left margin: how far the sidebar is from the left side of the screen. This gets ignored, if centered layout is enabled.
  • Top padding: how far the header is from the top of the screen.
  • Space between header and menu: how far the menu is from the header text or header image. 
  • Is transparent: sets the sidebar background transparent, if set, background color is ignored.
  • Background color: background color of the sidebar.
  • Logo image: option to upload a logo image file.
  • Heading text color: color of the site heading in the sidebar.
  • Heading font: font family of the site heading in the sidebar.
  • Google web fonts: font family from Google Fonts for the site heading in the sidebar.
  • Heading font size: font size of the site heading in the sidebar.
  • Heading font weight: font weight of the site heading in the sidebar.
  • Heading font style: font style of the site heading in the sidebar.
  • Heading font variant: font variant of the site heading in the sidebar.
  • Heading line height: line height of the site heading in the sidebar.

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.

Main menu

  • 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 opened: 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 opened: 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 opened: appearance of decorative lines for selected/active submenu item.

Entry layout

  • Space between entries: margin between entries.
  • 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.

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?