Elementor-Tutorial

Leitfaden für globale Elementor-Einstellungen:So verwenden Sie die Elementor-Site-Einstellungen für Ihre gesamte Website

Elementor Pro全局风格设置是一个整体设置只有安装了Elementor Pro才可以进行全局设置类似主题的主题设置它可以帮助你预设好整体的网站颜色风格字体样式以及布局和元素预设等内容这些将大大减少你后期网站制作的工作量

Zum Beispiel,我们可以设置好几个全局的颜色然后在设置内容颜色的时候就直接全责这些全局颜色

本篇教程将介绍Elementor网页编辑器的全局样式与设置的常用功能譬如设置全局的字体颜色页面内容宽度元素默认间距等等

进入【站点设置】

安装激活好Elementor Pro之后进入任意页面的Elementor编辑器窗口点击左上角的按钮然后点击下图中所示的site settings

Elementor的全局样式与设置

然后你便能看到如下的配置选项了

Elementor的全局样式与设置

Design System/设计系统

对全局颜色和全局字体进行设置

Global Colors全局颜色设置

设置全局颜色最大的好处是你可以快速切换网站的颜色风格比如像我现在网站以绿色为主如果我想更换成蓝色风格的只需要修改全局颜色里面的颜色设置就可以快速的将网站颜色风切换过来这要求你在设计制作页面时所有的颜色都是通过全局颜色来配置的如果是手动添加的颜色那么还是需要手动去修改

全局颜色设置和使用的方法如下

你可以通过站点设置里面的全局颜色设置几个常用全局颜色

Elementor的全局样式与设置

全局里面的里面包含了系统颜色和自定义颜色系统颜色只有四个不可以删除但是可以修改

自定义颜色可以根据你的需求增加和重新命名

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

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

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

Global Fonts全局字体设置

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

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

全局字体有四个系统字体设置不可以删除但是可以修改

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

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

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

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

Theme style全局主题样式设置

可设置字体按钮、Bild、表格字段的样式

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

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

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

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

Typography/文本排版

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

Elementor的全局样式与设置

Button全局按钮设置

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

Elementor的全局样式与设置

Images全局图像设置

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

Elementor的全局样式与设置

Form Fileds全局表单字段设置

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

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

Elementor的全局样式与设置

相关教程

Setting设置

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

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

Elementor的全局样式与设置

相关教程

Background全局的背景设置

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

Elementor的全局样式与设置

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

  • content width/内容宽度用于设置网页内容区域的默认宽度默认值是1140px当你想网站页面更宽一点或更窄一些就调这里
  • widget space/小工具间隔可以理解为元素快之间的间距默认是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则表示继承主题的设置。Auch,不同主题还会提供不能的布局选项请按需调试使用吧
Elementor的全局样式与设置

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

Elementor的全局样式与设置

Lightbox灯箱设置

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

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

Custom CSS自定义CSS

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

Elementor的全局样式与设置

Um Redaktion

Die Redaktion von kuajinggu besteht aus einem Team von WordPress-Experten,Angeführt von Dylan,In WordPress、virtueller Host、E-Commerce、Über 10 Jahre Erfahrung in SEO und Marketing。kuajinggu wurde in erstellt 2014 Jahr,Derzeit die größte kostenlose WordPress-Ressourcen-Website der Branche,Wird oft als die Wikipedia von WordPress bezeichnet。