Elementor Tutorial

Elementor Global Settings Guide:How to use Elementor site settings for your entire website

Elementor Pro global style settings are an overall setting,Only installedElementor ProOnly then can you make global settings,Theme settings for similar themes,It can help you preset the overall website color style,Things like font styles and layout and element presets,These will greatly reduce the workload of your post-production website。

for example,We can set several global colors,Then when setting the content color, you are directly responsible for these global colors.

This tutorial will introduce the common functions of global styles and settings of the Elementor web editor.,For example, setting the global font、color、Page content width、Default spacing of elements, etc.。

Enter [Site Settings]

After installing and activating Elementor Pro,Enter the Elementor editor window of any page,Click the button in the upper left corner,Then click on site settings as shown in the image below

Elementor的全局样式与设置

Then you can see the following configuration options。

Elementor的全局样式与设置

Design System/Design System

Set global colors and global fonts。

Global Colors全局颜色设置

设置全局颜色最大的好处是你可以快速切换网站的颜色风格,For example, my current website is mainly green,If I want to change to the blue style, I only need to modify the color settings in the global color to quickly switch the website color style.。This requires that when you design and create the page, all colors are configured through global colors.,If the color is added manually,Then you still need to modify it manually。

How to set and use global colors is as follows:

You can set the global color through the site settings,Set several common global colors。

Elementor的全局样式与设置

The global one includes system colors and custom colors.,There are only four system colors,Cannot be deleted,But it can be modified。

Custom colors can be added and renamed according to your needs。

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

设置全局颜色之后你可以在Elementor 任意元素的颜色设置中调用设置好全局颜色

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

Global Fonts全局字体设置

与全局颜色一样全局字体可以自定义添加多个当你设计页面时按需选用全局字体能够提升效率也方便后期统一更换

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

全局字体有四个系统字体设置,Cannot be deleted,But it can be modified。

同时你可以增加自定义的全局字体

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

针对某一个全局字体你可以设置字体尺寸重量大小写转换样式(斜体等)装饰(下划线上划线等)行高字母间距单词间距这些内容

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

Theme style全局主题样式设置

可设置字体、button、picture、表格字段的样式

have to be aware of is:通常主题本身都提供了类似的字体配色功能两者同时使用可能会令你混乱需要你自己进行对比试验

由于每个主题与elementor的兼容性有所不同没有一概而论的方案,at the same time,See below,elementor也提供了禁用本身的颜色与字体的功能而选择继承主题的配置通过这两个选项也可以帮助你调试样式

Elementor全局设置指南:如何为整个网站使用 Elementor 站点设置

有时候主题和Elementor的全局样式设置要搭配着使用如果你用的是Hello Elementor主题那就不需要担心这个问题因为它是Elementor官方配套主题

Typography/文本排版

在【排版】里面你可以设置网站的内容的文本颜色字体风格段落间距链接的颜色字体风格以及悬停效果H1-H6标签的颜色字体风格并且你可以直接使用全局设置里面的设置好的颜色和字体来设置这些排版风格

Elementor的全局样式与设置

Button全局按钮设置

你可以对按钮的文字排版文字投影常规颜色的背景色hover悬停时的文字颜色背景色边框类型与颜色边角半径内距进行设置

Elementor的全局样式与设置

Images全局图像设置

对图片可以配置常规和悬停时的边框边角半径透明度投影css滤镜以及从正常到悬停效果的过渡时间

Elementor的全局样式与设置

Form Fileds全局表单字段设置

当网站使用表单时譬如外贸网站常用的联系表单询盘表单可以使用此处配置表单字段的样式

诸如字段标题的颜色排版字段本身的排版常规以及输入情况下的字体颜色背景色投影、frame、边角半径以及内距

Elementor的全局样式与设置

Related tutorials:

Setting设置

Site Identity站点标识设置(LOGO及图标设置)

在这里可以上传网站的名称、describe、logo以及站点图标

Elementor的全局样式与设置

Related tutorials:

Background全局的背景设置

此处可设置网页的背景色纯色或渐变色均可也可以设置背景图片并且还能单独设置移动端的背景色

Elementor的全局样式与设置

Layout默认布局设置(移动端断点)

  • content width/内容宽度用于设置网页内容区域的默认宽度,The default value is 1140px,当你想网站页面更宽一点或更窄一些就调这里
  • widget space/小工具间隔可以理解为元素快之间的间距,The default is 20px
  • Page title selector/页面标题选择器这里是服务于隐藏页面标题功能的如果你的主题的页面标题的样式选择器不是entry-title那么你就需要更改此处了如果你用的hello elementor主题此处也不用改只有当你发现使用隐藏标题功能不生效时才需要考虑修改这里
  • Stretched Section Fit To/拉伸部分以适用在使用elementor的section时有一个stretch setion的开关用于拉伸对样setion到指定的宽度此处就是用于指定宽度的只是这里输入的是父元素选择器拉伸的部分将与之相适应(例如#primary / .wrapper / main等)留空以适应页面宽度默认是body基本不用改这里
  • default page layout/页面默认布局用于设置页面的默认布局默认是全宽(elemlentor full width)它包含页头页脚如果设置为elementor canvas页面上就不会有页头页脚了而是一张空白的画布如果选择theme则表示继承主题的设置。also,不同主题还会提供不能的布局选项请按需调试使用吧
Elementor的全局样式与设置

breakpoints/断点你可以人为添加断点用于为网站适配不同分辨率的设备也就是常说的响应式

Elementor的全局样式与设置

Lightbox灯箱设置

可以理解为图片的弹出窗Global Lightbox 选项卡使您能够调整以下设置

  1. 图像灯箱滑动开关以全局启用或禁用灯箱
  2. 计数器仅适用于多图像画廊如果设置为是则将图像计数添加到灯箱的左上角。For example,如果图库包含 6 pictures,则计数器将显示 1/6、2/6 等以指示“第 6 张图片”“第 6 张图片中的第二张”等
  3. Fullscreen如果设置为Yes添加一个可点击的图标以允许用户在全屏灯箱中打开图像
  4. Zoom如果设置为Yes则添加一个可点击的图标以允许用户放大灯箱中的图像放大图像后您将能够平移视图并滚动图像的不同区域
  5. 分享如果设置为分享功能将添加到灯箱允许用户在 TwitterFacebook 和 Pinterest 上分享图像或将其下载到他们的计算机上
  6. title可选择在灯箱中的图像下方显示标题。fromNoneTitleCaptionAltorDescription中选择
  7. describe可选择在灯箱中的图像下方显示描述。fromNoneTitleCaptionAltorDescription中选择
  8. background color选择灯箱的背景颜色和不透明度
  9. UI 颜色:chooseUI 颜色这会影响灯箱箭头和点导航关闭按钮等
  10. UI 悬停颜色:chooseUI 悬停颜色当用户将鼠标悬停在每个按钮上时这会影响灯箱箭头和点导航关闭按钮等

Custom CSS自定义CSS

当已有的设计配置都无法满足你的需求时你可以额外添加css来定义样式前提是你得学会怎么写css

Elementor的全局样式与设置

About Editorial Department

kuajinggu’s editorial staff is a team of WordPress experts,Led by Dylan,In WordPress、virtual host、e-commerce、Over 10 years of experience in SEO and marketing。kuajinggu was created in 2014 Year,Currently the largest free WordPress resource website in the industry,Often referred to as the Wikipedia of WordPress。