The Display tab in the Trellis settings will help you to adjust some of the built-in customization settings available with the framework. To find these settings, navigate to Appearance → Mediavine Trellis → Display.

This article will briefly explain each of these settings for easy reference.


Change Font Size

This will update your theme's body font size. The body font refers to the overall text used throughout the site but does not refer to headings.

The four options for body font size are as follows:

Small (16px)

Medium (18px)

Large (20px)

X-Large (22px)



H1 Font Size

(Note: this setting is not available for the Birch or Wisteria child themes.)

This allows you to choose the size of your largest heading. The four options are as follows:

Small (24px)

Medium (36px)

Large (42px)

X-Large (56px)


Apply H1 Size to All Headings

(Note: this setting is not available for the Birch or Wisteria child themes.)

This will set your heading font sizes, (for headings H2-H6), to cascade down in size, relative to what you have selected for the H1 font size option.


Body Font

This sets the main body font that will display on the site. The body font refers to the overall paragraph text used but does not refer to headings.

A selection of Google fonts and web-safe fonts are built into Trellis. Choose a web-safe font for best performance. There is an option to add custom fonts, but this is not recommended for the sake of speed.


Heading Font

This sets 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. There is an option to add custom fonts, but this is not recommended for the sake of speed.


Custom Font Loading Method

This setting will appear if you select a Non-Web Safe Font. For detailed information on this setting, please refer to this help article.


Layout Space

This will update the space around page elements, meaning the padding and margins between objects on the page. The two options are as follows:

  • Comfortable (more space, default). Choose if you want to see more content above the fold.

  • Compact (less space). Choose if you want a little more breathing room for your content.


Primary and Secondary Colors

Primary Color affects theme features like links, buttons, and other elements. The hover state of these elements will be determined by your Secondary color selection.

Secondary Color affects theme features like hover effects, alternate buttons, and other elements.


Enter a six-digit color hex code for each of these two settings.


Background and Accent Color

(Note: this setting is not available for the Bamboo child theme.)

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



H1 Color

(Note: this setting is not available for the Wisteria and Birch 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 is #000000, or black.


Apply H1 Color to All Headings

(Note: this setting is not available for the Wisteria and Birch child themes.)

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


Post Meta Display Top and Bottom

These allow you to select which post meta to display in the post header and footer, respectively.

For the Top display, you can show the comment count, author, date, categories, and/or Yoast breadcrumbs.

For the Bottom display, you can show the author, date, categories, and/or Yoast breadcrumbs.



Post Meta Date Display

This setting allows you to choose either the Published Date, Modified Date, or both to display in your post meta data. For more info, please see this help article.


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, or .png file formats.

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

For Trellis Core, Bamboo, and Birch: Logo will display inline with the main navigation.

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


Change Logo Height

This will update the maximum logo height in the header.

The Logo Height options are as follows:

Small (50px)

Medium (75px)

Large (100px)

Extra Large (150px)


Please note: 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.


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

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 mobile devices will increase Largest Contentful Paint (LCP), one of Google's Core Web Vitals, so you might want to enable this if that is a concern.


Featured Image Size

This setting will select which featured image crop to use on the homepage and article feed pages.

Whichever option you choose will be site-specific - experiment and decide which crop works best for your images.

  • Trellis Square: Square

  • Trellis 3x4 : Portrait

  • Trellis 4x3: Landscape

  • Trellis 16x9: Wide landscape

  • Full Size: Full resolution

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.

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?