When Trellis is the active theme, you can find these settings by logging into your WordPress site and navigating to Appearance → Mediavine Trellis → Display

Change Font Size

This will update your theme's body font size with one of the four options you select. The body font refers to the overall text used throughout the site, but does not refer to headings.

The default setting for the body font size is 18px.

Body Font

This value is used to set the main body font that will display on the site. The body font refers to the overall paragraph text used throughout the site, but does not refer to headings.

A selection of Google fonts and web-safe fonts are built into Trellis Core. Choose a web-safe font for best performance.

Heading Font

This value is used to set the heading font on the site (H1-H6).

A selection of Google fonts and web-safe are built into Trellis Core. Choose a web-safe font for best performance.

Custom Font Loading Method - (This setting will appear if you select a Non-Web Safe Font)

Favor CLS Score:

If a websafe font loads before a custom font, the websafe font will be displayed for the duration of that page view. This ensures that your text content will be visible for users with slower connections and the websafe font will remain the font that loads for these users, instead of your custom font choice.

Favor Custom Font:

If a websafe font loads before a custom font, the browser will switch fonts once the custom option loads. (This may occur 1-2 seconds later and can potentially cause layout shift).

(Default: Favor CLS Score.)

H1 Font Size - (Not available in all child themes)

This will determine the size of the H1 headings across your site. Line heights will adjust automatically to accommodate the font size selection.

Apply H1 Size to All Headings - (Not available in all child themes)

If enabled, this setting will adjust the size of all headings, H1-H6, relative to the H1 font size setting. Line heights are automatically updated for each size.

H1 Color- (Not available in all child themes)

This will determine the color of the H1 headings across your site. Enter a hex code value to adjust the color of all H1 headings, including those in the content.

The default hex code is #000000

Apply H1 Color to All Headings- (Not available in all child themes)

Force the color of all sub-headings (H2 - H6) to inherit the H1 font color selection.

Layout Space

This will update the space around page elements.

The space around elements refers to padding and margins between objects on the page. There are three options here:

  • Comfortable (more space)

  • Cozy (default space)

  • Compact (less space)

Choose Compact if you want to see more content above the fold. Choose Comfortable if you want a little more breathing room for your content.

Primary Color

This will set the color of some primary theme features like links, buttons and other elements. Choose one of the defaults from the dropdown menu, or enter your six-digit color hex code.

The hover state of these elements will be determined by your Secondary color selection.

Secondary Color

This will set the color of some secondary theme features like hover effects, alternate buttons and other elements.

Choose one of the defaults from the dropdown menu, or enter your six-digit color hex code.

Background Accent Color - (Not available in all child themes)

This will set the background color of some page elements like page and post headers.

Post Meta Date Display

This value will determine which date to display in the post header. The Post Meta Date will display in the post header container. The user can display Date Modified, Date Published, or both Date Modified and Date Published.

Meta tags for both Date Modified and Date Published will be added to the <head> of the document regardless of the setting.

Enable Search Bar

Enabling this adds a search bar to the site header. The search icon will display inline with the main navigation. When clicked, the search field will display in the header.

Site Logo

This setting will determine what image is used as your logo in the site header.

We recommend using .jpg, .png. or .svg formats. Use .svg for best display and performance.

If a logo is not added here, Trellis will display the site title instead.

  • Trellis Core: Logo will display inline with the main navigation.

  • Wisteria: Logo will display next to the sticky post on the homepage, and inline with the main navigation on posts and pages .

  • Bamboo: Logo will display centered above the main navigation.

Change Logo Height

This will update the maximum logo height in the header. The actual logo height might be limited by the width of your logo. If the setting doesn't appear to be changing the logo height, it might be due to the logo width being restricted to allow space for the main navigation in the header.

The Logo Height options are:

Small (50px)

Medium (75px)

Large (100px)

Extra Large (150px)

Display Featured Images

Trellis does not display featured images in the post by default. If you're migrating from a theme that does this, and you think it's beneficial to have that feature, you can enable this setting.

If checked, the featured image will be displayed before the post's content.

Hide Featured Image from Small Screens

Since Trellis 0.13 you can enable this option to hide featured images on posts when the user has a device with a screen width lower than 600px (e.g. Mobile). Displaying featured images to a mobile device will increase Largest Contentful Paint (LCP), one of Google's Core Web Vitals.

(Default: Disabled)

Featured Image Size

This setting will select which featured image crop to use on the homepage and article feed pages. There is no wrong answer here; experiment and decide which crop works best for your images. If your Featured Images aren’t being affected by these different settings after you install Trellis, you may need to use the Regenerate Thumbnails plugin for your featured images. <!—Link to Regen Thumbnails article—Check out this help article that walks you through how. —>

  • Trellis Square: Square

  • Trellis 3x4 : Portrait

  • Trellis 4x3: Landscape

  • Trellis 16x9: Wide landscape

  • Full Size: Full resolution

NOTE: We've added a full resolution option here (Full Size) for publishers who do not want their images resized. If you use the Full Size setting be sure to properly size your images prior to upload in order to ensure that your page speed scores do not suffer.

Did this answer your question?