We are happy to announce BoldGrid Crio now includes Responsive Typography! Responsive typography means the font size changes to fit on the current user’s device. This way large headings won’t overwhelm the design on mobile, and small headings won’t get lost on desktop.

Using the new control, you can set unique font sizes for Large Desktop, Desktop, Tablet, and Mobile. We strongly recommend you add responsive typography as it improves website user experience. You can enter responsive font sizes for Main Text, Headings, Site Title, and Tagline.

WordPress Responsive Typography Example

We will now use Crio’s starter content to show how responsive typography improves website design. You can follow along using a free WordPress demo installation.

Start by opening the Customizer and click Publish to save the starter content. Next, open the Fonts panel. You will see the Headings have a starting font size of 19. This one value determines all 6 heading sizes based on a scale, as shown in our support article. We know it’s confusing, but luckily you don’t have to understand it – just change the number until you get a size that feels appropriate for your design.

Since each font family has a unique display, a 19 in one font won’t be the exact same height as a 19 in another. This example uses Source Sans Pro, a general purpose sans-serif font. If you have a font that’s more petite, you may need to increase these sizes.

The first size we will enter is for Desktop as it’s our current screen size. It’s easy to focus on the main CTA, but remember this control is for all headings. Be sure to scan down the page and check a few heading sizes. In this example, 24 is a good size for Desktop. Small Desktop and Tablet both look good at the default 19, so we can leave those inputs empty. On Mobile, anything from 14 to 17 would work. We used 16 in this example:

We are happy to announce our developers have added many new features to Crio, our WordPress Theme. In this article we’re going to highlight 4 new things you can do in BoldGrid Crio:

• Create Custom Button Designs
• Enable a Hamburger Menu style on all device sizes (instead of mobile only)
• Custom Sticky Page Header Templates
• Custom Footer Templates

Make sure your Crio theme is version 2.12.0 or higher and Crio Premium plugin is version 1.5.2 or higher to see all these new options.

Custom Button Designs

In the Customizer’s Design panel there is a new option for Buttons. Here you can create two button designs for use across your entire website – primary and secondary. Choose the background color from your color palette, or make it transparent by selecting the eraser icon. Change the shape, add a border color and thickness, update the typography, and more.

The primary and secondary designs can be completely unique, like in the image shown below. Transparent buttons will use the border color as the background on hover.

(this is an image so there are no hover effects)

When you click Publish in the Customizer, all primary and secondary buttons will update to use the new style. The active button designs also show in the Post and Page Builder for use on page and post content.

Hamburger Menu on Desktop or Tablet

Several of our forum users requested the ability to use a hamburger style menu on all device sizes. Now you can!

Start by opening the Customizer’s Design panel for the menu you want to work with. From the Hamburger Style panel, use the checkboxes to pick what devices use a hamburger style menu and which do not. Each menu location has a unique set of controls.

Custom Sticky Headers and Footers

Pro users can now make Custom Sticky Headers and Footers the same way as Custom Headers. Start by dragging and dropping each element where you want in the editor. Then open the Customizer and choose what pages or posts to display your new custom templates on.

Don’t have Crio Pro? Upgrade today!

Test Safely in the Cloud

Want to try out these new features without fear of breaking your live site? Launch a free WordPress site with Crio now to test safely in the cloud. Or test with your actual website by migrating it to Cloud WordPress. This way if you make changes you like you can take another backup and push the changes live with only a few clicks!

More New Features Coming Soon

More new features are coming soon including Hover Boxes, Responsive Typography, and a larger container size. Be sure to check back and keep Crio updated for the latest and greatest features!

We have all been there before. You login to your WordPress Dashboard, and to your dismay, there are updates available. Do I just hope for the best and click them? Do I create a staging environment to test the changes first in case something breaks?

Two key safety components of a WordPress website are backups and updates. Running updates on your WordPress website shouldn’t make you nervous. If it does, consider using a tool like Total Upkeep. Total Upkeep is a WordPress backup plugin that first takes a backup for safety and then installs updates for you. It will automatically restore the created backup if it finds any problems with the updates.

WordPress Backups and Updates

It’s important to keep a current backup of your website in case of catastrophic loss. Depending on the type of website you have, you may need daily backups but sometimes weekly is enough. It depends on how often you update content. If you have an e-commerce site you should absolutely be backing up daily.

Also, everything installed on your website should be up to date. This means WordPress Core, themes, and plugins – even if the plugin or theme is inactive. If you have inactive themes or plugins, now is a good time to re-evaluate if they need to be on the site. We recommend keeping 1 extra theme installed, like a Core default theme, for troubleshooting purposes.

WordPress Update Management for Core, Plugins, and Themes

Since backups and updates are so crucial for a safe and secure website, you should consider automating them. Nothing is worse than getting that dreaded email telling you that your site is down. But with Total Upkeep, that can be a problem of the past! You can tell the plugin to create a backup and then install updates. You can also configure automatic rollback in case the updates break your website.

Using Total Upkeep for managing updates in WordPress is easy and intuitive. Once you open the Total Upkeep Settings you will find everything you need. Personally, I have a backup set to run every night and transferred to remote storage on Amazon S3. I store the last 7 copies there, with a single copy on my webserver for disaster recovery purposes. That way I have something to restore in a crunch. There is nothing worse for a website owner than downtime.

It only takes a few minutes to configure Total Upkeep for management of WordPress backups and updates. You can try Total Upkeep for free now to see all the available settings and options.

Having a website that loads quickly is more important than ever. According to Google, conversions can fall by up to 20% for every second delay in mobile page load. Most users expect a web page to load within 5 seconds.

How fast your website loads depends on several factors. First, there is the content on the page like text and images. Even the fonts used can cause extra load time. Then there is the code from the active theme and plugins installed on your site. WordPress has guidelines for developers and any theme or plugin in the WordPress repo has passed quality checks. Still, each theme and plugin is so unique they each affect page load times differently.

In this article we will show you some tips and tricks to increase page speed on your WordPress website.

Increase Web Page Speed

Both new and existing websites will benefit from the techniques in this article. Start by using a free online tool like PageSpeed Insights to test your page speed. We recommend optimizing the homepage first as it is likely the most visited page on your site. But keep in mind each page on your site will have a different page speed score.

Image Optimization in WordPress

Images are the most common type of website content, other than plain text. Each page and post on your website should contain at least one image. Images and other media are the biggest inhibitors to peak website speed so it’s important to have a plan.

There are plugins available to assist with image optimization, but you can take steps on your own. Less plugins are better for your website, and you may achieve similar results with our advice.

Limit Image Size

You should only use images in the exact size you need as bigger images take longer to load. Before uploading the image to the Media Library, use a service like tinypng.com or imagecompressor.com to decrease the file size.

The biggest images on your website will be background images. The recommended size for background images is 2000px in width and 1080px in height. Images intended to be the full width of the content area (not the full width of the screen) generally do not need to be more than 1500px in width.

Use WebP Images

Since the WordPress 5.8 release, you can upload WebP images into the Media Library. WebP images are on average 26-30% smaller than jpeg or png images in file size, without losing quality. Most modern browsers support WebP, including Chrome, Firefox, Edge, and Opera. There are many free online tools available for converting images to WebP. If you are converting less than 25 per day, Cloud Convert is a good option.

Lazy Load Images

Before WordPress 5.5, all page content loaded at the same time – on initial page load. This forced the browser to spend unnecessary resources loading images before the user could view them. Lazy loading means the browser only loads images when the user reaches them on the page.

WordPress now adds a loading=“lazy” tag implemented by the browser. However, this implementation is browser-based and not supported fully by all browsers. We recommend enabling Lazy Loading with a multi-purpose plugin like W3 Total Cache. W3 Total Cache’s implementation uses lightweight JavaScript. It will deliver a better user experience to your users who aren’t browsing with a compatible browser.

Use Website Caching

When someone visits your website, their browser downloads all page content each visit. Website caching tells the browser to store that content for the future, instead of loading it from the external source each time.

Our WordPress caching plugin W3 Total Cache includes a setup guide to help you enable the right options for your website.

Each setting has several options available to choose from. Each option will show the impact choosing it will have on your site so you can make an informed decision.

Plugins and Website Speed

For best website performance, try and limit the number of plugins installed. Remember to deactivate and delete any plugins you are not actively using. We recommend taking time to re-examining the plugins you have installed on your site. Are they all still necessary? Do you have two plugins doing the same task? Eliminating any excess code from your website will help with load times.

If you think a plugin may be causing performance issues, you can test them one by one. Deactivate all plugins and test the page speed. Then re-enable them one by one, doing a page speed test each time. This will show if one causes a drastic decrease in performance.

Recode and Redirect Links

When a link on your website changes, you should use a redirection tool to automatically take a visitor from the old page to the new one. These redirects take extra time as the browser is loading two unique pages. It’s faster to take them directly to the correct page.

Whenever possible, recode the links in addition to using a redirection plugin. Redirections are still needed for search engines and users who bookmarked the old page. 

 

Thanks for reading – we hope you found this information helpful! Please let us know in the comments below what you’ve personally found to help increase page speed on your site.

BoldGrid makes it easy to create a website in a few hours with our drag and drop WordPress Page Builder plugin. This article will provide some tips for working with Blocks in the Post and Page Builder. Keep in mind your WordPress theme controls the Customizer and the editor creates the page content.

Don’t Delete Columns

It’s ok to have empty columns – they should not be deleted!

Each row in a BoldGrid Block needs to have 12 columns total on each of the 3 device sizes shown in the editor. When working with the starting design it’s important to keep the basic structure intact. If you delete a column, you will be removing an essential piece of code which can lead to problems down the road.

Instead of deleting the column, use the Clear Contents option. Then drag and drop the empty column out of your way. Otherwise, hover between that column and the one to the left of it until horizontal arrows appear. Click and drag the line to the right to merge the two columns into one.

Check for Narrow Columns

When content appears in a narrow column on smaller screens, you may need to increase the column width. Click each device icon in the editor toolbar and when you see content wrapping early, hover in the column. The horizontal drag handles will appear – click and drag the line to the right but keep the column in one row.

If this doesn’t solve the problem, you should check for padding or margin on the element and its containers. Hover over the element and you will see 3 popovers – orange for the element, blue for the column, and yellow for the row. Starting with the element itself, check each one for margin or padding and set to 0. If other parts of the block design change unexpectedly, use the undo button or press ctrl+z.

If there are problems with multiple columns it may be easier to make a new row and start over.

Practice First

If you’re new to the Post and Page Builder, we recommend using the Clone function to create a practice Block. This way you can test any controls you’d like without worry, as you’ll delete it before publishing the page. Once you find a design you like, start making the changes on the cloned Block. Recreating the design also increases your mastery of the Post and Page Builder.

For more complex changes, we recommend using a WordPress testing environment. You can use a WordPress backup plugin like Total Upkeep to clone your live website to staging in a few clicks. Then you can make any changes you want without risk of breaking your live website. Try new designs, plugins, or even a new theme safely.

Different Designs for Different Devices

Depending on the content used, it can be tricky to make a block look good on all screen sizes. It might be easier to create two blocks – one for mobile and one for desktop – using the Responsive Utilities. You can select a single element or an entire block and choose what devices it shows on.

As you are designing your website, keep the phrase “mobile-first” in mind. Google uses mobile-first indexing, meaning they only look at your mobile website. And depending on your target audience, mobile users likely outnumber desktop users. So it’s important to include the same information on all versions of the block as you change the layout.

The device visibility controls can also be used with the Custom Page Headers feature in Crio Pro to create separate header layouts for different devices.

Working with Background Images

Background images should enhance the design but not contain any vital information. Any words in images should also appear on the page so search engines can use it to determine what the page is about. Showing a background image in the initial viewport for a user can increase page load times. You may want to consider hiding background images on mobile devices to improve page speed.

Any images below the initial viewport of the user should be lazy loaded. While WordPress Core lazy loads images by default, there are better solutions. WordPress announced they are refining core’s approach with changes coming in WordPress 5.9. Instead, we recommend using a WordPress caching plugin like W3 Total Cache. It provides lazy loading plus other website performance tools like page and browser caching. Use the simple setup wizard for clear, immediate results.

 

Thanks for reading, we hope you’ve found this article helpful. If you’d like to learn more, you can read about creating custom Blocks. Please let us know in the comments below if you have questions about working with Blocks in the Post and Page Builder. Or create a post in our forums if you’d like to share your URL.

The WordPress header contains some of the most important website elements. Prominently displaying your company name or logo will assure visitors they have found the correct site. A clear navigation menu will make it easy to find your content – you don’t want to frustrate potential customers!

With WordPress websites, your main content is in the pages and posts found in the admin dashboard. The header, footer, and sidebar areas are generally controlled by your WordPress theme. Many WordPress themes only provide one header layout. This means changing the WordPress header design could require custom coding. Otherwise you’ll have to change themes entirely. It can be very frustrating to find your theme doesn’t grow with you as your needs change.

BoldGrid built our Crio SuperTheme on a flexible framework to help avoid this problem. BoldGrid Crio includes 9 bundled layouts yet there are hundreds of custom possibilities. And you can change your header layout at any time without a complete website redesign. Crio features 3 ways to design your WordPress header, making it easy for both new and advanced users.

Use a Bundled WordPress Header Layout

If you’re new to WordPress, we recommend using a pre-designed layout found in the Customizer. They will work for any type of website and can be further customized without the need for coding.

Each can include your site title, logo, tagline, navigation menu and social media menu. There is even a side header available.

Create a Custom WordPress Header Layout

If you want a different design, you can create your own unique layout from the Customizer. Start by clicking the CUSTOM layout option to open the Custom Header Layout panel. Keep in mind your starting layout may not match what’s shown here.

You can set the header to be on the top or either side of the screen. Use as many rows as you need, with as many elements (Menu, Branding, or Widget Areas) as you want. Using the Device Icons you can set different widths for each column based on screen size.

You can also read our full documentation on custom Crio header designs.

Create a Custom Page Header

Advanced users can take advantage of Crio Pro’s Custom Page Header feature. Instead of designing from the Customizer, you’ll use a drag and drop WordPress page builder. With Custom Page Headers you can use a different WordPress header on each page if you want!

The Post and Page Builder has more design elements than the Customizer, like icons and gradients. You can create a transparent header using this feature, or an empty one to effectively hide the header on a page.

You’ll also have increased control over the responsive design of your WordPress header. Mobile web design is more important than ever since Google stopped indexing desktop websites in March 2021. Our video below shows how you can create different Custom Page Headers for different device sizes.

For further instructions, please read our full documentation on Custom Page Headers.

We hope you’ve found this article helpful, please let us know in the comments what you think about when designing a WordPress header.