{"id":4273,"date":"2020-05-19T08:04:16","date_gmt":"2020-05-19T12:04:16","guid":{"rendered":"https:\/\/www.boldgrid.com\/support\/?p=4273"},"modified":"2023-06-14T13:07:29","modified_gmt":"2023-06-14T17:07:29","slug":"changing-colors-through-the-wordpress-customizer","status":"publish","type":"post","link":"https:\/\/www.boldgrid.com\/support\/boldgrid-themes\/changing-colors-through-the-wordpress-customizer\/","title":{"rendered":"Changing Colors through the WordPress Customizer"},"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\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4775 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/1-3313870454_670851e33e_z-300x201.jpg\" alt=\"Customizing colors with the WordPress Customizer has never been easier or faster.\" width=\"300\" height=\"201\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/1-3313870454_670851e33e_z-300x201.jpg 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/1-3313870454_670851e33e_z-250x167.jpg 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/1-3313870454_670851e33e_z-550x368.jpg 550w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/1-3313870454_670851e33e_z-269x180.jpg 269w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/1-3313870454_670851e33e_z-449x300.jpg 449w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/1-3313870454_670851e33e_z.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>Choosing a color palette for your <a href=\"https:\/\/www.boldgrid.com\/wordpress-themes\/\">WordPress theme<\/a> can have a far-reaching effect on the success of your website. Finding a balance between the color and content of your site can encourage your visitors to stay on your site for longer sessions. <strong>Changing colors<\/strong> can ultimately improve the authority of your business, or, for designers, make your WordPress website more attractive to new customers.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p>The BoldGrid <a href=\"https:\/\/www.boldgrid.com\/wordpress-website-builder\/\">website builder plugin<\/a> and themes supplement the WordPress Customizer with extended functionality for color selections in your WordPress theme. You are now able to click, drag, and rearrange colors manually or choose from automatically generated color palettes.<\/p>\n<p>The advantage of <strong>changing colors<\/strong> with color palettes instead of single colors means that if your logo or other branding materials change then you can quickly adjust all the colors of your site to match instead of editing each color separately.This can be a huge time saver for you when using BoldGrid Themes. Color palettes is not something that other themes usually have.<\/p>\n<p>If you are a casual visitor and are interested in getting started using BoldGrid Inspirations as your WordPress website builder, download the plugin today to start your journey to <a href=\"https:\/\/www.boldgrid.com\/\">create a WordPress website<\/a>.<\/p>\n<p>Follow along with steps below to see how easy it is to customize colors in your WordPress theme. If you have not already logged into WordPress, go ahead and log in now so you can follow along with the steps.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_14.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4274 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_14-300x240.png\" alt=\"Customize link from WordPress admin\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_14-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_14-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_14-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_14-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_14.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_14.png -->Click the <strong>Customize<\/strong> button.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_16.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4277 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_16-300x240.png\" alt=\"Colors panel in Customizer\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_16-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_16-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_16-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_16-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_16.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_16.png -->Choose <strong>Colors.<\/strong>\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_17.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4278 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_17-300x240.png\" alt=\"Click and drag to re-arrange colors\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_17-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_17-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_17-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_17-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_17.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_17.png -->Click and drag colors in the <strong>Active Palette.<\/strong><br>\nDepending on the theme, you will see between 3 and 6 colors.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4284 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-300x240.png\" alt=\"Click to change individual color\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_22.png -->Click on an individual color to change it.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<li><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/4273_Selection_02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4628 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/4273_Selection_02-300x240.png\" alt=\"Color picker\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/4273_Selection_02-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/4273_Selection_02-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/4273_Selection_02-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/4273_Selection_02-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/4273_Selection_02.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_22.png -->Use the hexadecimal value for complete accuracy, or choose from the color picker for an approximate value.\n<div style=\"clear: both;\"><\/div>\n<\/li>\n<\/ol>\n<p>Colors in your theme will change live in the preview window on the right.<\/p>\n<h2 id=\"using-color-palettes\">Using Color Palettes<\/h2>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_18.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4285 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_18-300x240.png\" alt=\"Click suggest palettes\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_18-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_18-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_18-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_18-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_18.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_18.png -->As mentioned, you can re-arrange the colors in the active palette and assign different color values, but you can easily get a whole different palette automatically by choosing <strong>Suggest Palettes<\/strong>. Click through the different palettes and notice how the colors on your site change.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"clear: both;\"><\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_19.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4286 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_19-300x240.png\" alt=\"Save a favorite palette\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_19-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_19-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_19-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_19-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_19.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_19.png -->If you like a certain palette, but you would like to try other ones, click the pin button to save your current palette.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"clear: both;\"><\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_20.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4287 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_20-300x240.png\" alt=\"List saved palettes below\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_20-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_20-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_20-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_20-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_20.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_20.png -->You will see a list of your saved palettes at the bottom of the color menu.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"clear: both;\"><\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<h2 id=\"how-color-locking-works\">How Color Locking Works<\/h2>\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4288 size-medium\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-1-300x240.png\" alt=\"Click the lock to lock color\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-1-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-1-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-1-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-1-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/09\/4241_Selection_22-1.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><!-- \/home\/christopher\/Pictures\/4241_Selection_21.png -->With suggested color palettes, you get four complimentary colors at a time. If you like one or more of those colors more than the others, you can lock the colors you like and click the <strong>Suggest Palettes<\/strong> button. You will then receive suggestions based on the colors you locked.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div style=\"clear: both;\"><\/div>\n<div class=\"boldgrid-section\">\n<div class=\"container\">\n<div class=\"row\">\n<div class=\"col-md-12 col-xs-12 col-sm-12\">\n<p><a href=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/generalBG_Selection_01.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-medium wp-image-4631\" src=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/generalBG_Selection_01-300x240.png\" alt=\"Save &amp; Publish\" width=\"300\" height=\"240\" srcset=\"https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/generalBG_Selection_01-300x240.png 300w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/generalBG_Selection_01-250x200.png 250w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/generalBG_Selection_01-225x180.png 225w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/generalBG_Selection_01-375x300.png 375w, https:\/\/www.boldgrid.com\/support\/wp-content\/uploads\/2016\/10\/generalBG_Selection_01.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>Make sure to click <strong>Save &amp; Publish<\/strong> when you are done editing.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p>Now you are familiar with changing colors in the WordPress Customizer as part of our <a href=\"https:\/\/www.boldgrid.com\/wordpress-website-builder\/\">WordPress website builder<\/a> series. In the next article you will learn about <a href=\"?p=4331\">editing the background of theme through the WordPress customizer<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Choosing a color palette for your WordPress theme can have a far-reaching effect on the success of your website. Finding a balance between the color and content of your site can encourage your visitors to stay on your site for longer sessions. Changing colors can ultimately improve the authority of your business, or, for designers, [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"Changing Colors through the WordPress Customizer | BoldGrid","bgseo_description":"Changing colors can be accomplished by clicking, dragging, or choosing from auto-generated color palettes right from the WordPress customizer.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[764],"tags":[29,92],"class_list":["post-4273","post","type-post","status-publish","format-standard","hentry","category-boldgrid-themes","tag-customizer","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/4273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=4273"}],"version-history":[{"count":21,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/4273\/revisions"}],"predecessor-version":[{"id":92130,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/4273\/revisions\/92130"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=4273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=4273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=4273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}