{"id":15744,"date":"2018-09-19T15:24:38","date_gmt":"2018-09-19T19:24:38","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?page_id=15744"},"modified":"2024-02-05T09:37:56","modified_gmt":"2024-02-05T14:37:56","slug":"customizing-your-new-crio-website","status":"publish","type":"page","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/customizing-your-new-crio-website\/","title":{"rendered":"Customizing Your New Crio Website"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><div class=\"boldgrid-section background-infinite landing-first-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-7\">\n<div class=\"sc-breadcrumb\"><script type=\"text\/javascript\">\n            var breadcrumb = document.querySelector(\".sc-breadcrumb\");\n            if (breadcrumb !== null) {\n                breadcrumb.parentNode.removeChild(breadcrumb);\n            }\n        <\/script><\/div>\n<\/div>\n<div class=\"col-xs-12 col-sm-12 col-md-4 col-md-offset-1\">\n<div id=\"inner-rd\"><\/div>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-7 col-sm-8 col-xs-12\">\n<h2 style=\"margin-top: 0px;\" id=\"customizing-your-new-crio-website\">Customizing Your New Crio Website<\/h2>\n<hr class=\"orange\">\n<p><strong>The Customizer tool allows you to visualize your changes as they would be seen to web visitors without affecting the live site.<\/strong><\/p>\n<p>The <a href=\"\/crio-wordpress-theme-framework\/\">BoldGrid Crio<\/a> Customizer allows you to make changes to the whole site at once, instead of one page or post at a time. Design elements like colors, fonts, and container type can be set globally, with the option to change a single instance as needed with the Post &amp; Page Builder plugin. BoldGrid Crio comes with the tools to make multiple header, footer, and blog page layouts, simply click each option until you find the perfect one. Customizing your new or existing WordPress site has never been easier!<\/p>\n<div class=\"mod-space-1x\"><\/div>\n<\/div>\n<div class=\"col-xs-12 col-sm-4 col-md-4 col-md-offset-1\">\n<div class=\"plugin-sidebar inner-sidebar\">\n<div class=\"mod-space-1x\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2018\/09\/icon_crio_128x128.png\" alt=\"\" width=\"225\" height=\"225\"><\/p>\n<div class=\"mod-space-1x\"><\/div>\n<\/div>\n<p class=\"text-center\" style=\"margin-bottom: 20px;\"><a class=\"button-primary\" href=\"https:\/\/www.boldgrid.com\/get-pro-crio\/\">See All Premium Features<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row boldgrid-wp\">\n<div class=\"col-md-4 col-xs-12 col-sm-4\">\n<div class=\"mod-space-2x\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/themes\/benchmark\/images\/rd\/bg-getting-started-keys.svg\" alt=\"Onboarding Tutorial Videos\" width=\"300\" height=\"300\"><\/p>\n<\/div>\n<div class=\"col-md-8 col-xs-12 col-sm-8\">\n<h2 id=\"onboarding-video-tutorials\">Onboarding Video Tutorials<\/h2>\n<p>We want to make sure you have all the resources available for a smooth experience. We recommend checking out our video tutorials on YouTube to complement the written guide. These tutorials provide step-by-step instructions to help you navigate through the customization process. Whether you&rsquo;re a seasoned WordPress user or a beginner, our videos cater to all levels of expertise. They offer practical insights that might make the customization journey more straightforward. Feel free to <a href=\"https:\/\/www.youtube.com\/BoldGrid\" target='_blank\"'>explore our YouTube channel<\/a> for additional support.<\/p>\n<hr class=\"orange\">\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<iframe loading=\"lazy\" title=\"Crio Theme - Intro to the Customizer\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/6XTWJ0F8vc4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<div class=\"mod-space-1x\"><\/div>\n<\/div>\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=_kn0T6GA1GI\" target=\"_blank\" rel=\"noopener\">Responsive Font Controls<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=11naufrf3LU\" target=\"_blank\" rel=\"noopener\">Working with Headers and Footers<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=JIXWSqI2Kzw\" target=\"_blank\" rel=\"noopener\">Working with Menus<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=n0rTCoL2bZ0\" target=\"_blank\" rel=\"noopener\">Working with Color Palettes<\/a><\/li>\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=6XTWJ0F8vc4&amp;list=PLqNQzP6vlTnwaD9-_1LB6PzpUW_TUciBW\" target=\"_blank\" rel=\"noopener\">More Videos<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section background-infinite\">\n<div class=\"container\">\n<div class=\"row boldgrid-wp\">\n<div class=\"col-md-8 col-xs-12 col-sm-8\">\n<h2 id=\"header--footer-customization\">Header &amp; Footer Customization<\/h2>\n<p>It&rsquo;s easy to select the perfect layouts with BoldGrid Crio since we include the tools to make multiple header, footer, and blog layouts out of the box. Changes in layouts are shown immediately in the live preview but the front of your site remains the same until you save. The header of your website can be on the top, right, or left, with exact width control for right and left sides. BoldGrid Crio also has multiple header background options with extra features like overlay colors for video and images.<\/p>\n<hr class=\"orange\">\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-your-site-title-logo-and-tagline-in-boldgrid-crio\/\">How to Edit the Site Title and Tagline<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/customizing-the-header-design-in-boldgrid-crio\/\">How to Change the Header Design<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-change-the-header-background-in-boldgrid-crio\/\">How to Change Header Background<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/custom-header-templates\/\">How to Create Custom Page Headers<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/customizing-the-footer-design-in-boldgrid-crio\/\">How to Change the Footer Design<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-change-the-footer-colors-in-boldgrid-crio\/\">How to Change the Footer Colors<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-header-and-footer-widgets-in-boldgrid-crio\/\">How to Work with Header and Footer Widgets<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/using-device-previews-in-the-customizer\/\">How to Use Device Previews<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"col-md-4 col-xs-12 col-sm-4\">\n<div class=\"mod-space-2x\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-15515\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/themes\/benchmark\/images\/rd\/icon-themes.svg\" alt=\"Header and Footer Customization\"><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row boldgrid-wp\">\n<div class=\"col-md-4 col-xs-12 col-sm-4\">\n<div class=\"mod-space-2x\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-15515\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/themes\/benchmark\/images\/rd\/icon-pages-menus.svg\" alt=\"Menus\"><\/p>\n<\/div>\n<div class=\"col-md-8 col-xs-12 col-sm-8\">\n<h2 id=\"menus\">Menus<\/h2>\n<p>BoldGrid Crio has powerful controls for menu designs. You can control design elements like background, border, spacing, and font to give you granular control over your menu items. There are four options for menu locations and each one can have unique styling. We have you covered on mobile devices as well! There are over 30 mobile menu options complete with animation and color controls.<\/p>\n<hr class=\"orange\">\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-menus-in-boldgrid-crio\/\">Working with Menus<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-menu-fonts-in-boldgrid-crio\/\">Working with Menu Fonts<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-change-the-menu-background\/\">How to Change the Menu Background<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-adjust-the-menu-padding\/\">How to Change the Menu Padding<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-change-the-menu-border\/\">How to Change the Menu Border<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/adding-margins-to-menu-locations\/\">How to Add Margin to the Menu<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/changing-the-menu-link-styles\/\">How to Change the Link Styles<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-change-the-spacing-for-menu-links\/\">How to Change the Link Spacing<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/changing-the-active-link-style-in-menus\/\">How to Change the Active Link Style<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/changing-the-mobile-menu-button-style\/\">How to Change the Mobile Button Style<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-use-device-visibility-with-menus\/\">How to Use Device Visibility with Menus<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/mega-menu-items-in-boldgrid-crio-premium\/\">How to Create a Mega Menu Item<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section background-infinite\">\n<div class=\"container\">\n<div class=\"row boldgrid-wp\">\n<div class=\"col-md-8 col-xs-12 col-sm-8\">\n<h2 id=\"posts--pages\">Posts &amp; Pages<\/h2>\n<p>BoldGrid Crio helps make posts and pages look professional and consistent. There are dozens of blog layouts you can create using our custom tools. Container type can be set to fixed or full-width to ensure consistent spacing across the entire site. Post and page title controls allow for more complex heading designs created with Blocks in the Post and Page Builder.<\/p>\n<hr class=\"orange\">\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-create-a-post-or-page-in-crio\/\">How to Create a Post or Page<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/using-the-homepage-settings\/\">Using the Homepage Settings<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/using-the-homepage-settings\/\">Using the Homepage Settings<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/customizing-your-blog-page-with-boldgrid-crio\/\">Designing the Blog Page<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-container-types\/\">Working with Container Types<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/customizing-your-blog-posts-with-boldgrid-crio\/\">Designing the Blog Posts<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/using-categories-and-tags-in-blog-posts-with-boldgrid-crio\/\">Using Categories and Tags<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/customizing-the-page-layout-with-boldgrid-crio\/\">Designing the Page Layout<\/a><\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/boldgrid-crio-supertheme-product-guide\/customizing-the-comments-design-in-boldgrid-crio\/\">Designing the Comments<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"col-md-4 col-xs-12 col-sm-4\">\n<div class=\"mod-space-2x\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-15515\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/themes\/benchmark\/images\/rd\/bg-getting-started-blocks.svg\" alt=\"Posts and Pages\"><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row boldgrid-wp\">\n<div class=\"col-md-4 col-xs-12 col-sm-4\">\n<div class=\"mod-space-2x\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-15515\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/themes\/benchmark\/images\/rd\/bg-vector-icons-lights.svg\" alt=\"Colors and Typography\"><\/p>\n<\/div>\n<div class=\"col-md-8 col-xs-12 col-sm-8\">\n<h2 id=\"colors--typography\">Colors &amp; Typography<\/h2>\n<p>BoldGrid Crio adds controls for color and fonts that will change elements across your entire site at once with a single click. Any changes you make are shown immediately in the live preview but the front of your site remains the same until you save. This way you can try out as many designs as you want until you find the perfect one. Use the &ldquo;Suggest Palette&rdquo; feature to have BoldGrid Crio automatically recommend beautiful color schemes and save the palettes you like for later use.<\/p>\n<hr class=\"orange\">\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/customizing-the-color-palette\/\">Changing the Color Palette<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/changing-your-site-background-in-boldgrid-crio\/\">Changing Your Site Background<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-fonts-in-boldgrid-crio\/\">Working with Fonts<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-heading-font-sizes-in-boldgrid-crio\/\">Working with Headings<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/site-content-design-tools-in-boldgrid-crio\/\">Working with Site Design Tools<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"boldgrid-section background-infinite\">\n<div class=\"container\">\n<div class=\"row boldgrid-wp\">\n<div class=\"col-md-8 col-xs-12 col-sm-8\">\n<h2 id=\"advanced\">Advanced<\/h2>\n<p>BoldGrid Crio provides many features for those wanting to work beyond the front end. Advanced users can add more default layouts for the header, footer, and blog page by using the configuration file. There are also granular controls for margin, padding, border, border radius, and box shadow for the header and footer.<\/p>\n<hr class=\"orange\">\n<div class=\"row\">\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/working-with-advanced-customizer-device-controls\/\">Using Advanced Customizer Controls<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/using-the-custom-css-and-js-editor-in-boldgrid-crio\/\">Using Custom CSS and JS<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"col-xs-12 col-sm-6 col-md-6\">\n<ul>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/how-to-use-advanced-design-controls\/\">How to Use Advanced Design Controls<\/a><\/li>\n<li><a href=\"\/support\/boldgrid-crio-supertheme-product-guide\/using-the-blog-page-advanced-settings-with-boldgrid-crio\/\">Using the Advanced Blog Page Settings<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"col-md-4 col-xs-12 col-sm-4\">\n<div class=\"mod-space-2x\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15515\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/themes\/benchmark\/images\/rd\/icon-advanced.svg\" alt=\"Advanced Controls\" width=\"800\" height=\"72\"><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Customizing Your New Crio Website The Customizer tool allows you to visualize your changes as they would be seen to web visitors without affecting the live site. The BoldGrid Crio Customizer allows you to make changes to the whole site at once, instead of one page or post at a time. Design elements like colors, [&hellip;]<\/p>\n","protected":false},"author":529,"featured_media":0,"parent":15732,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page_support-landing.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"class_list":["post-15744","page","type-page","status-publish"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/pages\/15744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/529"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=15744"}],"version-history":[{"count":27,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/pages\/15744\/revisions"}],"predecessor-version":[{"id":124145,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/pages\/15744\/revisions\/124145"}],"up":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/pages\/15732"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=15744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}