WoodMart Theme Color and Font Styles Setting Guide

WoodMart As a powerful WooCommerce theme, there are flexible color and font control panels that allow sites a high degree of customization while maintaining a uniform tone. The following article will take you step-by-step through the process of color matching andfont settingYou don't need to write code to realize the exclusive style that belongs to your brand.

图片[1]-WoodMart 主题颜色与字体样式设置全攻略

I. Enter the theme settings panel

The first step is to open the theme settings:

  1. Login to WordPress Backend
  2. Click on [WoodMart] in the left menu
  3. Select [Theme Settings] to enter the theme settings interface.
图片[2]-WoodMart 主题颜色与字体样式设置全攻略

This is the core area for all appearance controls, including colors, fonts,header and footer,Button Styleetc. settings.

II. Adjustment of the site-wide color scheme

Select [Colors] in Theme Settings and you will see several color controls.

1. Primary color setting (Primary Color)

Primary colors are used for buttons,link (on a website), event labels, and other highlighted elements. It is recommended to choose colors that are consistent with your brand, such as branded blue, branded red, etc.

  • Go to Colors > Primary color
  • Enter the color code or use the color swatch to select the color you want.
  • Click [Save Settings] after making changes
图片[3]-WoodMart 主题颜色与字体样式设置全攻略

2. Background and text color

You can set them up separately:

  • Page background color (Background)
  • Link color (Links)
  • Link Hover Color (Hover)
图片[4]-WoodMart 主题颜色与字体样式设置全攻略
  • Text color can be found in theTypographyset up in

Make the site more coherent and easier to read by tweaking the details.

Third, set fonts and typographic style

Font selection is also in the same theme panel:

  1. Go to the [Typography] module
  2. Fonts can be set individually for different areas, including:
    • Text font (body text)
    • Title font (title)
    • Custom fonts (custom areas)
图片[5]-WoodMart 主题颜色与字体样式设置全攻略

1. Text font setting

  • Typography > Text font
  • Select fonts provided by Google Fonts
  • Setting font size, line height, font weight, etc.
图片[6]-WoodMart 主题颜色与字体样式设置全攻略

Simple and clear fonts are recommended, e.g. Inter, Roboto, Lato, Noto Sans.

2. Title font settings

  • Typography > Headings
  • Different levels (H1-H6) can be individually set font, size, thickness

You can choose more stylized fonts for headlines, such as Playfair Display, Montserrat, etc., to enhance the visual hierarchy of the page.

图片[7]-WoodMart 主题颜色与字体样式设置全攻略

summarize

WoodMart theme settings are flexible enough, but if you want to customize some colors or fonts that can't be set in the backend, you can use thesubthemeAdd custom CSS so you don't lose your changes even when the theme is upgraded. WoodMart's color and font settings are flexible and intuitive, making it easy to create a beautiful, recognizable e-commerce site with no design experience.

Recent Updates


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:托尼屎大颗
THE END
If you like it, support it.
kudos143 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments