Important Notice: Although changing the primary and secondary colors of your Blockstrap theme via Customizer settings is possible, using the Full Site Editing (FSE) editor is highly recommended for greater control and consistency in your site’s design. For a detailed guide on changing colors through the FSE editor, please refer to this other guide.
Step-by-step instructions:
- Log in to your WordPress Dashboard:
- Navigate to your WordPress website’s admin login page, typically located at
yourdomain.com/wp-login.php
. - Enter your username and password, then click “Log In.”
- Navigate to your WordPress website’s admin login page, typically located at
- Access the Customizer:
- Once logged in, find the “Appearance” tab on the left-hand side of the Dashboard.
- Click on “Appearance” to expand the menu, then select “Customize.”
- Navigate to the AyeCode UI settings page:
- In the Customizer, locate and click on the “AyeCode UI” section.
- In the Customizer, locate and click on the “AyeCode UI” section.
- Change the primary color:
- Locate the “Primary Color” setting, which controls the default color for various Bootstrap elements, such as buttons, links, and more.
- Click on the color picker box next to the “Primary Color” label.
- Choose your desired color using the color picker, or enter a specific color code (e.g., HEX, RGB) in the provided input field.
- The preview in the Customizer should update to reflect the new primary color.
- Locate the “Primary Color” setting, which controls the default color for various Bootstrap elements, such as buttons, links, and more.
- Change the secondary color:
- Locate the “Secondary Color” setting, which controls the secondary color for Bootstrap elements.
- Click on the color picker box next to the “Secondary Color” label.
- Choose your desired color using the color picker, or enter a specific color code (e.g., HEX, RGB) in the provided input field.
- The preview in the Customizer should update to reflect the new secondary color.
- Locate the “Secondary Color” setting, which controls the secondary color for Bootstrap elements.
- Save your changes:
- Click the “Publish” button at the top of the Customizer to save your changes and make them live on your site.
- Click the “Publish” button at the top of the Customizer to save your changes and make them live on your site.
- Verify your changes:
- Visit your website and ensure that the primary and secondary colors of the Bootstrap elements have been updated to your chosen colors.
Congratulations! You have successfully changed the primary and secondary colors of your Blockstrap theme using the AyeCode UI settings page within the Customizer options on WordPress. Your site should now display your customized color scheme, providing a unique and personalized appearance.
Should you require more granular control over AUI colors, please change colors through the FSE editor as explained here.