如何在WordPress的Astra主题及Elementor中修改文字与背景颜色

一、用Astra主题自带功能修改 #

• 进WordPress后台，找外观 > 自定义，展开颜色选项（Astra的Customize里有专门的颜色面板，可能你之前没找全）：
  • 能设置全局的正文文字颜色、标题颜色、背景颜色（包括网站背景、内容区域背景等）
  • 还可针对导航栏、按钮、表单等组件单独调颜色
• 如果是特定页面的局部颜色，部分页面编辑器顶部会有Astra设置，点进去就能调整该页面的背景或文字颜色

二、用Elementor页面构建器修改 #

Elementor能精准控制单个页面或组件的颜色，操作更灵活：

• 打开Elementor编辑目标页面，选中要改的模块（比如段落、标题、整个section）：
  • 左侧面板切到样式标签，找颜色选项，直接改该模块的文字颜色、背景颜色（支持纯色、渐变、图片背景）
  • 要设置整个页面背景，选中最外层的Section，在样式里调背景就行
• 想统一Elementor组件的全局样式，进Elementor > 站点设置，在颜色面板里设全局的文字、背景、链接等颜色，所有Elementor创建的组件都会自动套用

三、自定义CSS的操作方法 #

如果以上工具满足不了需求，就用自定义CSS：

方法1：通过Astra主题添加 #

• 后台进外观 > 自定义 > 额外CSS，在输入框里加CSS代码：
  • 修改全局正文颜色：body { color: #333333; }
  • 修改网站全局背景：body { background-color: #f5f5f5; }
  • 修改文章内容区：.ast-single-post-content { color: #444; background-color: #fff; }
• 输完代码点发布就生效

方法2：通过Elementor添加局部CSS #

• 在Elementor编辑页面，选中目标模块，左侧面板切到高级标签，找自定义CSS输入框，加针对该模块的CSS：
  • 比如改某个标题颜色：selector { color: #ff4500; }（selector是Elementor专属选择器，只会作用于当前选中的模块）

注意事项 #

• 颜色值可以用十六进制、RGB或颜色名称，比如red、rgb(255,69,0)
• 按F12打开浏览器开发者工具，能定位要修改的元素，获取对应的CSS类名，再写精准样式

内容的提问来源于stack exchange，提问作者anon