Prismatic v1.0

Documentation

Theme setup
Styling the theme
Adding pages and content
Header and Footer
Templates

1. Theme setup

Unzip the package you’ve downloaded from ThemeForest.
Log in to your WordPress admin panel.
Go to Apparance → Theme and click the tab called Install Themes (at the top of the page).
Now click the Upload link and click the button Choose File.
In the dialog window, navigate to the folder that you just unzipped and double click the file prismatic.zip.
Click on Install Now.
Wait till you see the message “Theme installed successfully”.
Click the Activate link – it’s done!

Note: If you are new to WordPress and haven’t installed it yet, I recommend reading the official WordPress installation instructions. If you should have trouble with the theme installation, I recommend reading the official WordPress Theme documentation.

Now we can start to fill your site with content and then set up some options for the theme.

2. Styling the theme

Note: If you’re unfamiliar with the new WordPress SiteEditor, I recommend reading the official WordPress Site Editor documentation first.

To visit the Site Editor, follow these steps:

Start from your site’s dashboard.
Locate Appearance on the left side.
Click on Editor.

Here, click on the Styles section to choose a color scheme.

To enter the theme settings, just click on the preview window of your site on the right. Then click the Styles button on the top right.

This panel lets you change the Typography, Colors, Layout settings (like default padding and content width), and the default style of default WordPress blocks. When you’re done adjusting your settings, hit the Save button.

3. Adding pages and content

To add a page, click on Pages → Add New.

Pre-built pages

On the edit screen of a newly added page, you’ll see a popup that offers you pre-built pages. If you want to use one of them, simply click one and it will be automatically inserted.

Page Templates

In the settings panel on the right side of your page editor, under the Page tab, you can choose one of 4 templates.

The Default template displays the content with a the header and footer template parts automatically added to the page.
The Blank template displays only the content without header and footer. Use this template if you want to create a unique page layout that doesn’t make use of generic the header and footer template parts (e.g. if you need them to be in a different color, or the header overlayed on top of a banner just for one page).
The No Header template displays only and content and footer, without the header. Use this template if you want to create a unique page layout that doesn’t make use of generic the header template part (e.g. if you need the header to be in a different color, or overlayed on top of a banner just for one page).
The No Footer template displays only and header and content, without the footer. Use this template if you want to create a unique page layout that doesn’t make use of generic the footer template part (e.g. if you need the footer to be in a different color).

Block root padding

Unlike the WordPress default themes, this theme does not set an automatic inner content width for content that is added to pages. If you want to add content that automatically uses the inner content width (that can be configured in the theme settings), please add a Group block to your page or use the Group with padding and inner content width block pattern that you can find in Block Inserter → Patterns in the Layout section. Otherwise, use the other block patterns that come with the theme.

Block patterns

If you want to build the page using block patterns, click the Block Inserter button on the top left of the screen. Here you can either use the search function or click on Patterns and choose one from the many block pattern categories. Clicking on a block pattern inserts it right where your cursor is in the editor.

Note: If you are new to the concept of Block Patterns, I recommend reading the official WordPress Block Pattern support article.

Rounded dividers

The pre-built pages of the theme already have the rounded dividers included that you can see throughout the demo. To add rounded dividers yourself, you have to add the block pattern called Masked Group, by clicking the Block Inserter button on the top left of the screen and then selecting the Masked Group block pattern that’s in the Layout category.

When you do that, please be aware where you insert this block pattern. It should be at the root level of the page and not inside other blocks to avoid layout inconsistencies. You can check the structure of your page by clicking the Document Overview button on the top left and then see the structure in the list view.

Once you see the empty Masked Group, you can add any block pattern or custom content by clicking the Plus (+) icon inside the group. In the Document Overview, make sure your content is always inside the second Masked Group. This ensures the rounded corners work on the top and bottom of your page section.

Changing the divider background color

Once you added your content inside Masked Group Container → Masked Group → Masked Group, you can change the background color behind your content by clicking on Masked Group Container and selecting a background color in the block settings on the Settings panel on the right side of the editor. This changes the color of the corners on the top and bottom. Make sure you pick a color that matches the sections that sit before and after your new section. Should the top section section have a different color than the bottom section, you can click on the first Masked Group inside of Masked Group Container and select another background color. This color will only be displayed at the bottom right corner. This way you can build unique layouts that look amazing.

Background elements

Some block patterns include so called “Background Elements” or short “BG Elements”. These elements are forms that can be added for decoration purposes.

You can either use a block that already includes them, you can modify the elements, or you can start with a block pattern that has non and then add them.

You can add a BG Element, by creating a group that includes the content you want the BG element to be attached to and then adding a CSS class to it by clicking on the Block settings of the group, opening the Advanced panel, and adding the class to the Additional CSS Class(es).

You can find the class names in our BG Element Library for easy copy and pasting.

Each class has multiple parts to it that modify the BG Elements. A class could look like this:

theme-bg-element-d1-sm-ntl-primary

Let’s analyze each part of the class name:

theme-bg-element is the prefix for all BG element classes.
d1 is the name and version of the BG element. The letter is the for identifier and the the number changes the rotation of the element.
sm is the size of the element. There are 4 different sizes:
- xs = extra small
- sm = small
- md = medium
- lg – large
ntl it the position and offset of the element.
The “n” can also be omitted or replaced with a “p”:
- n = negative
- (no letter) = default
- p = positive
- tl = top left
- tr = top right
- bl = bottom left
- br = bottom right
primary is the color of the element:
- base
- base-600
- contrast
- primary
- primary-300
- secondary
- secondary-300
- tertiary
- tertiary-300
- white/10 = transparent white
- back/10 = transparent black
BG Elements that are not forms but images (e.g. the dotted patterns) need to be assigned different color names:
- muted = transparent gray
- dark-muted = transparent light gray

4. Header and Footer

To change the header or footer of your site, please open the Block Editor by going to Appearance → Editor and click on Patterns. Here you can scroll down to the Template Parts section to edit them.

Editing template parts

Note: An extensive documentation about template parts can be found in official WordPress Block Pattern support article.

Changing the Header or Footer template parts applies them to all templates site-wide, excluding the Blank, No Header, and No Footer templates that you can assign to pages. However, you can also create new template parts if you need alternative headers or footers that you can add to custom templates.

Creating new template parts

If you want to create custom template parts (e.g. a differently styled header or footer) to be later used in a custom template, go to Appearance → Editor and click on Patterns. Then click on the + icon to add a new template part, give the template part a name (e.g. “Dark Header”), and select the area for which the part is supposed to be used in.

In the Template Part Editor, you can either create the part from scratch, or you can use pre-built block patterns that comes with the theme for header or footer, by clicking the Block Inserter button on the top left of the screen and adding a pattern from the Header or Footer section under the Patterns tab.

Once you have your template parts set, they can be used in custom templates.

Creating custom templates

Note: If you’re unfamiliar with templates, I recommend reading the official WordPress documentation about the Template editor.

To create custom templates (e.g. you want a template that uses a dark version of the header and footer), go to Appearance → Editor and click on Templates. Then click on the + icon to add a new template, and select the Custom template option. In the next dialog, you can give the template a name (e.g. “Dark”).

In the template editor, you can either choose the pre-built page template pattern or create one from scratch.

You can use the Block Inserter button on the top left of the screen to search for template parts or you can insert or build blocks directly in the template editor.

Custom Header and Footer blocks for unique page layouts

If you ever want to color the background of the header or footer differently and don’t want to create a whole new template or create template parts, I recommend adding a new page and assigning it the Blank template. This template only displays the page content without the Header and Footer template parts. Here you can now add your own header and footer. The theme comes with pre-built header and footer block patterns that you can find under Block Inserter → Patterns in the Header or Footer sections.

Synced Header and Footer blocks

In case you want to create pages with different background colors for the header or footer, I recommend either creating templates with differently styled headers or footers, or creating synced header or footer blocks.

To do that, you can use a non-rounded header or footer from the patterns library and then turning it into a synced block.

Note: If you’re unfamiliar with the concept of synced block patterns, I recommend reading the official WordPress Pattern documentation first.

You can then use the Masked Group block pattern (as described earlier) at the top of a page, with the Blank template assigned to it, to add rounded dividers to the header or footer.

Overlay header

The theme comes with overlay header template parts that you can use to create templates with. Overlay headers are positioned on top of blocks that follow it. When using an overlay header, I recommend adding more top padding to whatever block comes after it to make space for the header.

You can either make templates with the overlay header template part, or turn it into a synced pattern that can be used on a page with the Blank or No Header template assigned to it.

5. Templates

To edit the themes different templates, go to Appearance → Editor and click on Templates. Here you can click on a template to edit it or add new custom templates by clicking the + icon.