• How to Build a Testimonial Pattern

    Like most business owners, you work hard to create a website that represents your company well—and that should be a priority.

    But what happens when potential customers visit your site? Are they able to learn about your products or services quickly and easily? Or do they need to dig through a lot of text to find the information they’re looking for?

    One way to make it easier for visitors to learn about what you have to offer is by using testimonials on your website. The WordPress block editor makes it easy to showcase kind and encouraging words from customers.

    How to Build a Testimonial Pattern

    The Frost WordPress theme includes several patterns, and none may be more critical than testimonials. These allow you to establish trust, show success and convert prospects into customers.

    Testimonials - Frost WordPress Theme

    The patterns in Frost have a beautiful design, and you can add them to your website with just one click. Here are the simple instructions:

    1. In the block editor, click + button, click Browse all, go to the Patterns tab, select General, and choose the testimonials option you prefer.
    2. Customize accordingly: Heading, Paragraph, Color.

    However, you might want to understand how to build these testimonials with blocks and the WordPress editor. Believe it or not, it’s quite easy:

    1. In the block editor, click + button and insert a group block. In Frost, the alignment on the group block is set to Full width.
    2. Inside the group block, click + button, add a columns block, and set the number of columns. In Frost, the alignment is set to Wide width.
    3. Inside each column, you can write/customize the testimonial with the block settings for the Heading and Paragraph blocks.
  • Welcome to a Single Post with a Featured Image Cover

    Qorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus arcu bibendum at varius vel pharetra vel turpis. Integer eget aliquet nibh praesent tristique magna sit amet. Urna et pharetra pharetra massa massa ultricies mi quis. Velit scelerisque in dictum non consectetur aerat.

    Adipiscing at in tellus integer feugiat scelerisque varius morbi enim. Non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Maecenas sed enim ut sem viverra. Pulvinar pellentesque et habitant morbi tristique senectus. At consectetur lorem donec massa sapien faucibus et molestie. Diam vel quam elementum pulvinar.

    Sample Heading

    Nec nam aliquam sem et tortor consequat id porta nibh. Viverra maecenas accumsan lacus vel. Blandit massa enim nec dui nunc mattis enim. Consequat mauris nunc congue nisi vitae. Sed elementum tempus egestas sed sed. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Vulputate eu scelerisque felis imperdiet. Enim nec dui nunc mattis enim. Lobortis mattis aliquam faucibus purus in massa tempor nec.

    “We deliver everything our clients hope for, specializing in modern design, soaked in simplicity, and cultivate living spaces that are sophisticated and absolutely breathtaking.”

    Brian Gardner, Founder & CEO

    Augue lacus viverra vitae congue eu consequat ac felis. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Dictum consectetur a erat nam at. Nec tincidunt praesent semper feugiat nibh sed. Aliquam ultrices sagittis scelerisque purus semper eget duis. Dolor morbi non arcu risus quis. Ipsum a arcu cursus vitae congue mauris rhoncus.

    Another Heading

    Sit amet nulla facilisi morbi tempus iaculis urna. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra. Pharetra pharetra massa massa ultricies mi. In fermentum posuere urna nec praesent semper.

    Ut sit amet augue ipsum. Maecenas tempus eros in pellentesque sodales. Pellentesque porta sollicitudin felis sed ultricies. Suspendisse sed odio arcu. Cras blandit vulputate fringilla. Curabitur pellentesque porta hendrerit. Vivamus dolor massa, accumsan maximus nibh vitae, consequat porttitor ipsum. Nulla lobortis sollicitudin sapien, ut eleifend enim porta et.

  • Custom Colors, Gradients, Duotone Filters

    When it comes to website design, color is one of the most critical factors. Colors set the tone of a website and influence the overall perception of a website. Therefore, when creating an effective website design, it’s essential to use colors that reflect your brand and support your message.

    WordPress provides new methods inside theme.json for setting custom color elements: palette, gradient, and duotone filters. Enabling/disabling core color options can be set to true/false in the following:

    "settings": {
    	"color": {
    		"custom": true,
    		"customDuotone": true,
    		"customGradient": true,
    		"defaultGradients": true,
    		"defaultPalette": true,
    	}
    }

    Color Palette

    The Frost WordPress theme sets six custom colors: Black, Primary, Secondary, Tertiary, White, Gray. Here is the code used in theme.json:

    "settings": {
    	"color": {
    		"palette": [
    			{
    				"name": "Black",
    				"slug": "black",
    				"color": "#000"
    			},
    			{
    				"name": "Primary",
    				"slug": "primary",
    				"color": "#990099"
    			},
    			{
    				"name": "Secondary",
    				"slug": "secondary",
    				"color": "#0099ff"
    			},
    			{
    				"name": "Tertiary",
    				"slug": "tertiary",
    				"color": "#00cccc"
    			},
    			{
    				"name": "Gray",
    				"slug": "gray",
    				"color": "#eee"
    			},
    			{
    				"name": "White",
    				"slug": "white",
    				"color": "#fff"
    			}
    		]
    	}
    }

    Gradients

    The Frost WordPress theme sets three custom gradients: Black to Primary, Black to Secondary, Black to Tertiary. Here is the code used in theme.json:

    "settings": {
    	"color": {
    		"gradients": [
    			{
    				"name": "Black to Primary",
    				"slug": "black-primary",
    				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--primary) 100%)"
    			},
    			{
    				"name": "Black to Secondary",
    				"slug": "black-secondary",
    				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--secondary) 100%)"
    			},
    			{
    				"name": "Black to Tertiary",
    				"slug": "black-tertiary",
    				"gradient": "linear-gradient(135deg,var(--wp--preset--color--black) 50%,var(--wp--preset--color--tertiary) 100%)"
    			}
    		]
    	}
    }

    Duotone Filters

    The Frost WordPress theme sets three duotone filers: Black and Primary, Black and Secondary, Black and Tertiary. Here is the code used in theme.json:

    "settings": {
    	"color": {
    		"duotone": [
    			{
    				"name": "Black and Primary",
    				"slug": "black-and-primary",
    				"colors": [ "#000", "#990099" ]
    			},
    			{
    				"name": "Black and Secondary",
    				"slug": "black-and-secondary",
    				"colors": [ "#000", "#0099ff" ]
    			},
    			{
    				"name": "Black and Tertiary",
    				"slug": "black-and-tertiary",
    					"colors": [ "#000", "#00cccc" ]
    			}
    		]
    	}
    }
  • Create a Podcast Episode Page

    Podcasts are a great way to share your knowledge and expertise with the world. However, if you’re just getting started, setting up and maintaining your podcast can be daunting; you have to deal with costly equipment and software and the time commitment required for research, recording sessions, and editing episodes on top of other responsibilities.

    The Gutenberg block editor for WordPress allows users to create and edit their content in an easy-to-use, visual interface. They can rearrange blocks of text, images, video, or audio by dragging them around on the page.

    WordPress is an excellent solution for DIY podcasters looking to get online quickly and build their audience with minimal effort and cost.

    Frost Patterns

    The Frost WordPress theme is chock-full of well-designed and functional block patterns that allow users to craft a beautiful page with just one click.

    One of those patterns is the Podcast Episode, ideal for DIY podcasters looking to keep things simple with their website. Here are examples:

    Sample Podcast Episode, Black Background

    Podcast Episode Pattern - Frost WordPress Theme

    Sample Podcast Episode, White Background

    Podcast Episode Pattern - Frost WordPress Theme

    The Podcast Episode block pattern includes the following blocks: Columns, Image, Heading, Paragraph, Audio, and Buttons—all wrapped in a Group.

    The Frost theme offers two options with the Podcast Episode block pattern:

    • Black background, image on the left, and heading, paragraph, audio, buttons on the right.
    • White background, image on the left, and heading, paragraph, audio, buttons on the right.

    How to Create a Podcast Episode Page

    Creating a podcast episode page with WordPress and Frost is easy and can be done with just a few steps:

    1. In your WordPress dashboard, go to Pages > Add New.
    2. On the right side of your screen, go to Page > Page Attributes and select the No Title page template.
    3. In the block editor, click + button, click Browse all, go to the Patterns tab, select General, and choose the color option you prefer.
    4. Customize accordingly: Image, Heading, Paragraph, Audio, and Buttons.
    5. Below the podcast episode block pattern, add show notes, transcript, or anything else that is relevant.
    6. Publish your podcast episode page and share it with everyone.
  • Create a Split-Screen Splash Page

    A splash page introduces a website or product with a graphical element. It directs the user to explore the site further or take immediate action, such as signing up for an email list or connecting on social media.

    Perhaps your website is not fully developed, or the content is a work in progress. In this case, a splash page is a perfect way to build momentum and establish an audience.

    This guide will help you create a split-screen splash page using the Frost WordPress theme. Use it as a temporary solution or as a landing page.

    View Split Page Patterns | View Sample Page

    Here are some examples of split-screen splash pages created with Frost:

    Split-Screen Splash Page - Frost WordPress Theme

    Creating a splash page with Frost is simple. Here are the steps:

    1. In your WordPress dashboard, go to Pages > Add New.
    2. On the right side of your screen, go to Page > Page Attributes and select the Blank page template.
    3. In the block editor, click + button, click Browse all, go to the Patterns tab, select Page, and then choose between the option you prefer: Cover on left, text on right or Text on left, cover on right.
    4. Customize accordingly: Image, Heading, Text, and Buttons.
    5. Publish your splash page and share it with everyone.
  • How to Build a Block WordPress Theme

    Note: This page is a work in progress and will be updated often.

    WordPress 5.9 was recently released, and with it came full site editing. At the highest level, full site editing provides a collection of features that allow users to leverage the editor to build their site from header to footer.

    As we enter this new frontier, a unique theme style is being built, taking advantage of everything WordPress offers. For example, block themes use blocks instead of traditional page content for posts and other parts.

    This allows users to create layouts with ease and edit every aspect of the website using just one tool. There’s no limit placed on what kind of design element a website can have with block themes.

    Building a Block WordPress Theme

    Block themes are a new paradigm when it comes to building with WordPress. To take advantage of full site editing and its features, you’ll need to start with the following files/folders inside your theme:

    • functions.php
    • style.css
    • theme.json
    • templates
    • parts
    • patterns

    Templates

    Similar to classic WordPress themes, block themes allow for templates to control specific page types on a website. While classic themes have traditionally required .php files, block themes utilizes .html files.

    Examples of files that work inside of block themes: index.html, single.html, page.html, home.html, archive.html, author.html, search.html, 404.html. These files should be included in a /templates/ folder inside of a theme.

    Block templates are made up of a list of blocks and template parts such as header.html, footer.html, sidebar.html.

    View example templates in the Frost theme.

  • Create a Link Page for Instagram

    Instagram has quickly become one of the most popular social media channels for designers, developers, and businesses of all sizes.

    It’s a great way to connect with potential clients and showcase your work in an engaging, personal way. So why not make it easy for that to happen?

    Read Article →
  • Theme.json and Standardizing Font Sizes

    With WordPress 5.8, it is now possible to configure the editor through a new mechanism: theme.json. This addition means that themes can provide more control over what editors should do when editing posts or pages on your website (change font size, color schemes etc.).

    With the addition of theme.json, theme authors can also control these settings on a per-block basis, which wasn’t possible before. The top-level applies to all blocks that support the relevant setting, but a specific block’s settings could override it by being more specific.

    Read Article →