Mai Theme Version 2 Tips

If you haven’t seen the training videos, start there first.

Start with a group block

When building page sections always start with a group or cover block then put other blocks inside it.

• Start with a group block or cover block
• Place headings, paragraphs, column block and post grid blocks inside the group or cover block.

Margin, padding and overlap

• Padding is called spacing
• Margin has an overlap option which breaks out of the box
• Group block is used to control the row’s width, padding and background color or backgrounds
• It’s not just container blocks that have margin, padding and overlap options. Even paragraphs and headings have margin and padding options
• Overlap is in the margin top and bottom drop-down selector

Page layout options, boxed container & sidebars

• Narrow
• Standard
• Wide
• Left sidebar
• Right sidebar

Find page layout settings in: Customize > Theme Settings > Site Layouts, and under the Genesis button in the post editor sidebar.

Customize > Theme Settings > Site Layouts

• Enable boxed or full width layout.
• And set page layout options for posts, pages, archives, and custom post types etc.

Page layout options hierarchy & drill down

1. First set default for the whole site. These are the top settings in the dialogue. If all the settings below are set to default, they will inherit this very top setting.
2. Then, as you move down the list, override the default setting for posts, pages, category listings, author archives etc.
3. Then as you build any individual page or post you can override all previous settings via the layout options in the Genesis sidebar.

Getting the hierarchy right means you set site-wide options at the top of the settings dialogue. Then set most options lower down to default. You only need to override the default options for pages, posts, or archive pages when you need to deviate from the default settings by adding a sidebar or changing the default width etc.

Heading and paragraph styles

Heading & Paragraph have these settings

• Default style & subheading (all caps)
• Text size: S-M-L and custom
• Headline background color (colored box)
• Headline text color
• Headline width setting S-M-L
• Spacing (margin top and bottom)

Paragraph has extra settings of

• Heading bold
• Drop cap

Image

Image has margin settings of top, bottom left & right. Top and bottom settings have overlap option which pushes the image out of its container using a negative margin.

Post Grid

Post grid has alternate image setting which positions featured image left, right, left, right.

Hide Elements

Select elements to hide on this page.

• Before Header
• Site Header
• Sticky Header
• Transparent Header
• After Header Menu
• After Header
• Page Header
• Breadcrumbs
• Featured Image
• Entry Title
• Header Meta
• Entry Excerpt
• Footer Meta
• After Entry
• Before Footer
• Footer
• Footer Credits

Mai shape divider

Mai Divider is a shape that sits above or below a group block giving the row an angled, curved, or wavy top and bottom edge. Shape dividers have a background color but not a background image. These shapes are a popular feature that have popped up everywhere recently.

Width, margin, and padding

In Mai Theme, many WordPress blocks have additional settings. Group block and cover block have width, margin and padding settings which are not present in the standard WordPress block editor.

Many blocks have an overlap option that adds a negative margin enabling you to overlap one container on top of another.

Mai Theme Special features include…

• Settings in the customizer
• Template Parts (block-based widget areas)
• Mai Post Grid, Mai Term Grid
• Mai icon
• Mai Divider (shapes)

 CSS Classes

• Search: search
• Button: button

Shortcodes

• Put icon in navigation bar: use shortcode
• shortcode adds a nicely styled navigation bar inside your post or page
• Mai Avatar shortcode places any avatar anywhere you can place a shortcode
• Back to top shortcode adds a jump link that jumps back to the top of your post

Mai Menu Shortcode

You can add a menu styled like the after-header menu using shortcodes. You can also add shortcode to the mobile menu template part to build your own mobile menus.

Align single menu item

Give menu item CSS Class

• Has-auto-margin-left
• Has-auto-margin-right

After header menu alignment

The navigation bar that displays below the logo and header navigation, can be aligned left, center or right. You can also set this menu’s mobile menu breakpoint. Go to: Customizer > Theme Settings > Menus

Template parts

Template parts are the new widget areas. Before header, after entry and footer are examples of template parts. The important point is that you can now design elements such as your footer using WordPress blocks. This gives you much more control than dragging widgets into widget areas.

• Go to: Customize > Appearance > Template Parts
• Edit the template part where you want to add your content
• Build your row or block of content, using the block editor, just like any other section of your page or post

The content you add to any template part will display on every post and page of your site. To hide that content on a specific page or post use the hide elements option in the post editor settings sidebar.

Widget Areas

Mai Theme 2 only has one widget area, sidebar. You can use reusable blocks in the sidebar widget area.

Site Identity

• Logo Spacing is the height of the header top navigation area
• Logo width is also available
• Show or hide tagline

Site Header

Customizer > Theme Settings > Site Header

• Sticky
• Transparent

Site header affects the logo and header navigation area.

If you enable the transparent header, it will make the logo and header navigation background transparent on pages and posts that have a Mai Theme page header set. It will also work on pages and posts that have a full width group block or full width cover block as the first block on the page.

Page Header

Customizer > Theme Settings > Page Header

The page header is a simple hero header area that can be displayed on pages, posts, custom post types and content archives. The hero header displays the post title and description text, on top of a colored background or on top of an image background.

To add description text below the post title…

As you build your page or post, look for the settings sidebar, it has the cogwheel icon in the top right of your post editor screen. In the settings sidebar choose the page tab. Scroll down to the page header tab and click the arrow to expand or open the dialogue box.

In the description box, type the text you want to display under the post title in this page’s header. Here you can also select a specific image that overrides the default page header image.

The page header contains…

• Post title
• Description
• Image: default image, featured image or an image chosen as you write your post
• Bottom shape divider

Page header settings include…

• Enable on (pages, posts, archives, custom post types)
• Default image (can be overridden on a per post basis)
• Vertical spacing (padding above and below post title and description)
• Text align: Left, Center or Right
• Background color or overlay color
• Overlay opacity
• Default text color
• Divider style or shape: angle, curve etc

The settings above are the default settings but you can fine tune the settings for…

• Archive pages
• Posts
• Pages

Go to: Customize > Theme Settings > and select Content Archives or Single Content.

Here you can set the page header to use the page or post’s featured image instead of a site wide default image. You can also set a different header background color for posts, pages, and archive pages.

Please note: homepages do not use Mai Theme Page Header

Mai Theme page headers are quite simple and do NOT include a button.

If the homepage header of your Mai Theme contains a button or looks elaborate, it is probably not a Mai Theme page header. Most home page headers are built by placing headlines, paragraphs, and buttons etc inside a group or cover block.

Mai Post Grid block and Mai Term Grid block

The post and term grid blocks enable you to build grids of pages or posts and display those grids in any page or post on your site. The Mia Theme grid blocks are enormously powerful, and they look great.

Luckily, Mai Theme have built a comprehensive web page including videos, showing you how the post grids work.

If your website contains blog posts, I recommend you set aside some time to learn how they work.

There are a lot of settings, don’t try memorizing everything. Just return to the instructions as and when you need to. And remember, you can build grids of blog posts and pages.

Mai icon

Mai Theme has an icon block and icon shortcode. The icons come from Font Awesome, so you have thousands of icons to choose from. Use the Mai icon block to add icons to your pages and posts. Use the shortcode to add icons to your navigation bars etc.