Compliasis Pro Docs

lib/gutenberg/front-end.css

This file is where you edit the CSS for content blocks in the WordPress Gutenberg editor.

Blocks

The theme has customized color options for the paragraph block and additional custom blocks via the Mobile Atom Blocks plugin.

Paragraph Block Color Options

Compliasis Pro has paragraph color options for text and backgrounds that complement the theme’s color schemes. Again they are optimized for accessibility. A custom color picker is also available. Be mindful of contrast ratios and viewability by your color blind users if you use custom colors.

Custom Blocks

In addition to WordPress’ built-in editor blocks, the theme can use a variety of custom blocks built with React JS. They are available in a free companion plugin (Mobile Atom Blocks) that complements the theme:

• Tutorial Card – with title, image, sections list, and instructions (below)
• Author Card – with title/name, image, credentials, and bio (bottom of page)
• Dialable Phone Number – To use the block, copy and paste this number into the block: 555-555-5555 . Then edit the phone number.

Example of Tutorial Card – React JS

Section 1 – JS Library

Section 2 – Views

Section 3 – States

Section 1
React is a JavaScript library for building user interfaces.

Section 2
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

Section 3
Build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Page Templates

Compliasis Pro comes with Page Templates you can apply to your pages.

In addition to the default template, there are landing page (see the Purchase page in our top navigation menu) and blocks page (all formatting other than header and footer are removed so you can design the page as you want via blocks) templates.

Select them under the Document tab on the right hand side of the page editor.

404 and Search Not Found Pages

The theme’s 404 and Search Not Found pages have an image and message coded into them to make them more interesting and useful for your audience. If you would like your own design and content for the pages we recommend the Genesis Widgetized Not Found & 404 plugin. You can edit the pages by placing widgets into a blank page via the Theme Customizer.

Cookies Notification

We recommend providing a cookie notice at the top of your page to comply with Europe’s GDPR regulations. The Cookie Notice plugin is a good solution. Jetpack also offers one via a widget and is what we use on this site.

Customization available via WordPress itself

You have many customization options that are baked into the WordPress content management system.

Custom Fields

<

Schema

WordPress’ custom fields give you greater control over the content of your website. However, that isn’t their only benefit.

Using them also gives you the ability to be more transparent with your site’s visitors and search engines. Custom fields let you add information in the form of meta-data that would not normally be displayed.

This includes schema markup. By using it you can change the way your search engine results, SERPs, appear in search engines. You are also giving them more information about the type of content in your page or post.

You may find it easier to use a plugin for schema markup rather than custom fields.

Head Schema

Detailed schema data can be added to your site’s head to help search engines know more about your organization. SEMrush has a helpful article on what to include in your schema. And Kalicube has a schema markup generator to write a JSON-LD script with your data. You can then paste it into your header in via the Theme Customizer.

Recommended Plugins

Yoast SEO

There are default SEO Theme settings (above) you can use for document (page or post) title, meta description, meta keywords or phrase, etc. However, the free and professional versions of the Yoast SEO plugin (below) are the industry standard for search engine optimization in WordPress. They also give you more ways to improve and customize your schema.

You can learn more here. Their beginners guide is a good place to start.

Genesis Simple Edits

As the name implies Genesis Simple Edits is a simple plugin. Via the author StudioPress:

“This plugin creates a new Genesis settings page that allows you to modify the post-info (byline), post-meta, and footer area on any Genesis theme. Using text, shortcodes, and HTML in the text boxes provided in the admin screen, these three commonly modified areas are easily editable, without having to learn PHP or write functions, filters, or mess with hooks.”

It is the best way to edit the copyright message in the footer.

Genesis Simple Share

Genesis Simple Share is a plugin that lets you add share buttons to your posts, pages, etc. Jetpack also has this functionality.

Jetpack

Jetpack is a multipurpose plugin from Automattic, the parent of WordPress. The free version provides:

• Security enhancements
• Performance enhancements
• Various marketing integrations
• Social share buttons
• Additional widgets
• Sitemap generation and submission
• Lazy image loading

Learn more here.

Additional recommended plugins

• Accessibility by Userway
• Cookie Notice (see above)
• Smush Image Optimization and Compression

The Accessibility by Userway plugin is a good option for maximizing your site’s accessibility without changing the theme’s code. Users can select the “Man” icon to the right of the menu and customize your site’s accessibility to best suit themselves.

Optional Plugins

Simple Social Icons

The Simple Social Icons plugin, as the name implies, is a simple way to display icons linking to your social media accounts. After installing the plugin you add them via a widget.

Genesis Connect for WooCommerce

Via StudioPress, the plugin authors:

“This plugin replaces WooCommerce’s built-in shop templates with its own Genesis-ready versions…

To allow easy customization of these templates, and ensure that you do not lose your customizations when the plugin is updated, you can place your own copies of these templates in your child theme’s ‘woocommerce’ folder and customize these copies as much as you like.”

---

Genesis Parent Theme Documentation

Access information from the parent theme documentation.

---

Reuben Walker

Reuben is Ringmaster of Mobile Atom Media and its division Mobile Atom Code. In addition to his content specialties, he is also a full-stack developer.

An ABJ graduate of the University of Georgia and MA graduate of Georgia State University, he lives in Orlando, FL, with his wife and English labrador. He received his full-stack certification from the University of Central Florida.

For great curated and original content on entrepreneurship, content, design, and code, follow him on the social media platform of your choice via the icons in this site’s footer. Or join the 42,318+ followers of his Flipboard Magazines.

Share this:

• Twitter
• Tumblr
• LinkedIn
• Reddit
• Pinterest
• Facebook
• More

• Print
• Pocket
• WhatsApp
• Telegram