Cadenza Presets represent a selection of Customizer options designed to support each of Cadenza's Themes. For each Cadenza Theme, there is a corresponding Customizer Preset. In other words, if your website is based on the "Gustav" theme, then your Theme Preset should also be "Gustav". Selecting a Preset with a different name than your theme can cause unexpected results!

However, if you want to completely customize your site yourself, you can select either the Default or the Default Dark Preset and start from scratch, and make your own customizations.

General

Under the General tab, you can set things like fonts, colors and add your social network links.

Layout

All Cadenza sites are based on a full 1200 pixel width layout. Changing these settings will likely break the theme layout, so you will likely want to leave these settings alone unless you are making your own customizations.

By default, a "Scroll to Top Button" is activated. This is a small button that appears at the bottom of your site that lets visitors quickly jump back to the top of your page. You can deactivate this at anytime by selecting the option "Disabled" from the drop down menu.

Background

All Cadenza sites have a neutral background color and no background image, but you can select and set either here. Backgrounds fill the area outsite of the content areas of your website. Bear in mind that any full width elements will fill the entire window, so your background colors or images may not be visible on those pages or those areas.

Accent Color

The Accent Color is picked up by some elements throughout your site such as links, buttons, or link hover states.

Headings

Headings are used a titles and sub titles for your written content or page sections and are identified as H1 through H6. H1 is the most important, and largest, H2 is a secondary heading, and so on, each subsequent number being smaller in size than the previous (H1: biggest, H6: smallest).

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Under these settings, you may change the font color and/or font family of your headings. Use the color picker to select another color, or enter a hexidecimal color value in the text field.

For Font Family options, you can select any font from dozens of supported Google Fonts. Many of these are display or handwritten font styles may not work very well on your site, unless that's the desired look. You may want to preview fonts on Google before making any changes: https://fonts.google.com

Font sizes can vary greatly when changing font families, even though you use the same font size value. If you make a change to your heading font family, double check to make sure that the variable sizes for each heading still looks good on your website, and make any necessary changes to the values.

Text

Text refers to all written content on your website, except in heading and footer areas, captions or other special text areas. You have the same options to alter the text color, font family, and font weight.

Social Links

Use this area to enter the URLs for any social networks including: Facebook, Twitter, Google, LinkedIn, Yelp, Xing, Pinterest, Tumblr, Vimeo, YouTube, Flickr, Instagram, Skype, Dribbble, 500px Blogger, GitHub, RSS and Email. By default, all Cadenza sites displays Monochrome icons, but you can select Branded to display them in colors normally associated with each respective service.

Social icons can appear on your Top Bar, Header, or Footer, depending on your selected settings.

Header

The Header Customizer settings control the Top Bar, Main Header and Navigation Menu.

Top Bar Layout

The Top Bar is an optional header that displays above the main header. It can be defined into one or two columns and can contain combinations of Text, Social Icons, and a Custom Menu,

Top Bar Style

This open lets you define the Background Color and Opacity of your Top Bar, or apply a Gradient to your color. You'll want to select Text and Link colors to complement the color you select for your background.

Header Layout

This area determines where your Navigation Menu (Nav) will appear in relation to your Site Name or Logo. Options include: None, Nav Bottom, Nav Right, Nav Left, Nav Centered, Nav Centered + Inline Logo, Nav Vertical Left, and Nav Vertical Right.

Adjust the Padding to increase or decrease the spacing around the interior of the Header.

You can also select how a Fixed Header responds when your page is scrolled. A Fixed Header means that your header is always visible when you visitors scroll your page. You can Disable this effect, choose to have a smaller Header Fade In, let your Header Shrink down some, or just have it Fixed in place.

Header Style

Choose a background color and its opacity for your Header here, and/or apply an optional gradient. You can also choose a background image for your Header and decide how that background image should fill your Header area. Select Text and Link colors that provide good contrast. Header link colors are NOT the same as Nav colors, explained in the following section.

Header Logo

Select your Header Logos in this area. Read this article to learn more about Header Logos.

Nav Layout

Make selections for how your Nav Menu looks and behaves in this area. You can adjust the spacing between items if things get too crowded, or you may want to spread them out a little more, and add or remove a Search Icon. Choose what link small device users see when viewing your Nav - a Menu link or the "Hamburger" icon - and decide what size device triggers this menu.

Nav Style

Set the Submenu Indicator to alert visitors that more menu items are available under certain links, and choose a Background Color or Image.

You can select the Font family from dozens of Google Fonts, select the Font Weight and Format it to be Regular, All Uppercase, Capitalized or all Lowercase, and select the Font Size in pixel values.

Content Background

Change the Background Color of the content area and set its Opacity. Adjust Text color color provides enough contrast (edit under the General tab).

Alternatively, set a Background Image, how it fills your content area and its behavior when the page scrolls or scales.

Blog Layout

These settings determine if your Post pages (Blog) contain Sidebars, which posts will have them, their positioning and size. You can also declare what Metadata to include, such as Author, Post Date and Comment Count.

Archive Layout

Archive pages are indexes of your Post Categories, displaying 10 posts per page. These settings determine if an excerpt is shown on your archive pages or if you want the full text instead. You can also change the lanugage of the "Read More" link and select whether you want the Featured Image to display, and if so, how.

Post Layout

Use these settings to position the Featured Image within the Post, or decide to not display it at all. 

You can also show or hide Post Categories, Post Tags, Prev/Next Post Links and Author metadata.

WooCommerce Layout

The settings apply to Woo Commerce pages only. Cadenza does not currently support Woo Commerce.

Lightbox

This setting simply Enables or Disables Lightbox functionality.

Footer Widgets Layout

Footer Widgtes are optional widgets areas that you can activate by adding them to your Footer Widget Areas.

If you do use Footer Widgets, then this setting determines which pages you want to display your Footer Widgets on: All Pages, or the Homepage Only.

Footer Widgets Style

This open lets you define the Background Color and Opacity of your Footer Widgets, or apply a Gradient to your color. You can also choose a background image for your Footer Widgets and decide how that background image should fill your Footer Widgets area. You'll want to select Text and Link colors to complement the color you select for your background.

Footer Layout

Define your Footer into one or two columns and can contain combinations of Text, Social Icons, and a Custom Menu,

Footer Style

Choose a background color and its opacity for your Footer here, and/or apply an optional gradient. You can also choose a background image for your Footer and decide how that background image should fill your Footer area. Select Text and Link colors that provide good contrast. 

Footer Parallax

This setting applys a Parallax effect to your Footer itself, to determine how it behaves when your page is scrolled.

The Widgets options here provide you with an alternative method for managing the Widgets on your Cadenza website. It is possible to select and manage all Widgets and Widget Areas within this Customizer setting.

However, we highly recommend utitlizing the Widget area found by navigating to Appearance > Widgets instead.  The main Widget management screens give you much more screen space to navaigate and select items for your Widget Areas.

Read this article about Adding Widgets to Widget Areas for more information.

Although rare, sometimes you may find it necessary to add code to your Cadenza website. This may be especially true is adding third party connections that require code snippets be added to the Head, Header or Footer of your site.

If required, carefully follow any instructions for adding additional code, and paste it into the required blocks available for the following:

• Javascript Code
• Head Code
• Header Code
• Footer Code

There are only a few Settings to manage under this option:

Site Identity

Enter or edit your Site Title here.

Tagline

If you have a tagling for your organization, enter it here. Your tagline will appear in your browser bar and in your Search Engine results. Taglines do not appear in your site Header.

Site Icon

Site Icons are what you see in browser tabs and bookmark bars and when you save your site as an icon shortcut (app) on your mobile device. Use this area to upload an image file.

Read this article to learn more about Site Icon image files.

Homepage Settings

Here you can choose what’s displayed on the Homepage of your Cadenza website. By Default, Cadenza websites designate a static page (Home).

The Post page is another default page that will display ALL of your posts.

The Menus option here  provides you with an alternative method for managing the Menus on your Cadenza website. It is possible to add and manage all Menu links within this Customizer setting.

However, we recommend managing your Menus by navigating to Appearance > Menus instead. The main Menu management screens give you much more screen space to navaigate and select items for your Menus.

Read this article about Managing Menus for more information.

General Theme

These settings override The Events Calendar default styles, so that you can apply some of your own colors for Accents and Highlights.

Global Elements

Changes additional colors settings for Links, the Filter Bar and Buttons. You can also upload a custom image to serve as the Map Pin!

Month/Week View

Use these settings to change the Calendar Table Color and the Calendar Highlight Color to match your organization's color scheme.

List-style Views

Change the Price Background Color setting here.

Photo View

Sets a custom Photo Background Color.

Single Event

For Single Event Details, change the Post Title and Details Background Color.

Widgets

Use these settings to alter the Header Color and Date Bar Color on the Calendar Widgets.

Use this option to apply custom styles to an existing Gravity Form.

Each form may be custom styled. First select the form from the Select Gravity Form menu option. Navigate to the page where your form appears on your site to preview your customizations.

The following Gravity Form elements may be styled: General Settings, Form Wrapper, Form Header, Form Title & Description, Field Labels, Sub Lables, Placeholders, Field Description, Text Fields, Dropdown Fields, Radio Inputs, Checkbox Inputs, Paragraph Textarea Fields, Section Break, Title & Description, List Field, Submit Button, Confirmation Message and Error Message.

***Note, you can also apply styles to Gravity Forms using the Page Builder Form Styler Modules.

This area should only be used by experts!

If you are comfortable writing or adding CSS, and feel the need to add some of your own, then use this option to enter your CSS code.

The edit field automatically highlights code syntax and invalid CSS code and errors are shown. Invalid CSS code is usually ignored, but failing to properly close statements or correct errors may produce undesirable effects.

If you choose to update your CSS with code errors, you could possibly break your site, so proceed with extreme caution.