在样式面板中改变元素外观.

学习 DXPR Builder搭建页面设置元素样式

一页上一个元素需要独特外观时请用 Style 面板：彩色卡片、淡显标志、活动配色的按钮。修改时每处变化即时显示在页面上。全站共用的样式，如全部按钮的颜色，请改主题。那里改一次，全站更新。

本视频按下面第一个配方操作：指针到达前将合作方标志淡显。

Before you start

  • 在 DXPR Builder 中打开页面；指向元素即显示带 More 的控制栏。刚接触构建器？请参阅您的第一页。
  • Save（对话框中）将修改保留在编辑器中。内容上方构建器工具栏上的 Save 保存页面并显示 "Saved field"。

此处的 Style 面板中的设置属于一个元素，保存在该页内容中，不在主题里。明年品牌色变更后，您手动着色的每个元素都保持旧色，直到您去改它。

  • 复用样式：用 More > Save as template 把排好样式的元素存为模板，或在 HTML classes 下给元素共用类。请参阅用户模板和HTML ID 与类。
  • 从色板选颜色（站点显示时）。色板来自主题调色板。色块复制颜色，因此之后调色板变更不会更新它。

配方：指针到达前淡显标志

一排合作方标志淡显后看起来更沉稳。本配方调暗一个标志，悬停时恢复。

  1. 悬停显示标志的 Image 元素，点击 More，再点击 Settings。
  2. 打开 Style 面板，将 Opacity 拖到 0.5。拖动时标志同步变淡。
  3. 打开下方的 Hover style 面板，将 Opacity 拖到 1。
  4. 点击对话框中的 Save，再点击工具栏上的 Save。
  5. 在构建器工具栏打开视图菜单（眼睛图标），选择 Preview 并指向标志。它变为全浓度，指针离开后重新变淡。

对该行每个标志重复以上步骤。

某图像元素的 Hover style 面板，Opacity 为 1，旁边是一排合作方标志，其中 DXPR 标志淡显为灰色，Drupal CMS 和 Drupal 标志保持全浓度

配方：活动配色的按钮

主题给按钮悬停色。您自己设置的 Background 也取代该悬停色，因此两者都要设。

  1. 悬停 Button 元素，点击 More，再点击 Settings。
  2. 在 Style 面板选择 Background 和 Font color。点击色块，或在颜色字段输入色值，如 #e4002b。
  3. 在 Hover style 面板选择深色 Background。
  4. 点击对话框中的 Save，再点击工具栏上的 Save。
  5. 在视图菜单中选择 Preview 并指向按钮。它变为深色。

某按钮的 Hover style 面板，深红色 Background 芯片，旁边是活动红 #e4002b 白字的 Book your spring course 按钮

What you see

文本元素 Style 面板，盒模型内边距 40 px，白色 Font color，藏青色 Background，旁边是白色文字的藏青色招生宣传框

对话框打开时，元素显示每处修改。在 Preview 中，淡显标志在指针下恢复全浓度，活动按钮变为深色。工具栏上的 Save 已保存，因此重新加载后两者保持。

各控件的取值

控件 范围 单位
Font color, Border color, Background 任意颜色，可半透明 颜色
Background image 媒体库图片或 URL
Background style, Background position, Border style 起始项 Theme defaults
Font size 0 到 100 px
Border radius 0 到 100 px
Opacity 0 到 1，步长 0.01
Drop shadow 0 到 5 级
Box model Margin -200 到 200 PX or %
Box model Padding 0 到 200 PX or %
Box model Border 0 到 50 px
Box model width × height 0 到 2000 PX or %

输入值超出范围会被截到最近的限值。盒模型及其锁定见间距页。

设置的行为

主题默认值

空颜色、0 位滑杆、Theme defaults 列表和显示 "-" 的盒模型边含义相同。DXPR Builder 什么都不写，由主题决定。因此 Opacity 为 0 不隐藏元素，Font size 为 0 保持主题字号。要回到主题样式，请在颜色选择器点击 Clear、把滑杆移到 0，或重新选择 Theme defaults。

设置落在哪里

除 Drop shadow 外，每个 Style 设置都存为元素的内联样式。内联样式优先于普通主题 CSS。仍有两者优先：标有 !important 的主题规则，以及 HTML classes 下同样带 !important 的 Bootstrap 实用类。

在某些元素上，设置作用于内部部件。Button 上美化按钮本身，Image 上美化图片，Link 上美化链接，Map 上美化地图框。

所有屏幕尺寸

样式设置没有断点。64 px 内边距在手机上也是 64 px。百分比值随页面宽度伸缩。各屏幕尺寸不同值请用响应式类，如HTML ID 与类页所示。

不透明度淡化内部一切

Opacity 作用于整个元素，淡化盒子、边框、文本及其内部一切。要在实色文本后放半透明盒子，请保持 Opacity 为 0，改选半透明 Background 颜色：颜色选择器有专用的不透明度滑杆。

两张相同的活动卡片：左张全浓度，右张 Opacity 0.5，页眉、标题和 Reserve a seat 按钮全部淡显

悬停样式

Hover style 是 Style 下方的独立面板，控件相同，自带盒模型。其值在指针悬停元素时生效。与 Style 值不同，它们本身标有 !important，因此优先于您的 Style 值、HTML classes 下的实用类和大多数主题规则。

只有 Drop shadow 渐显，用时 0.15 秒。其他悬停变化即时切换，除非主题给它们加动画。Bootstrap 按钮颜色渐变用时 0.15 秒。

手机和平板没有指针。那里的访客点击后才看到悬停样式，因此不要把必要信息放在其中。

有自己设置的元素

有些元素对同一事项有自己的设置。自己的设置优先，Style 控件无效。

元素 Style 中忽略 改用
环形计数器 Background、Font size、宽 × 高 General 中的 Background color 和 Dimension，Circle content 中的 Font size
进度条 Background、宽 × 高 General 中的 Back color、Front color 和 Bar height
分隔线 Background, width General 中的 Color 和 Length
数字计数器 Font size General 中的 Font size
图像 宽 × 高 General 中的 Image width 和 Image height
地图 宽 × 高 General 中的 Map width 和 Map height
跑马灯 宽 × 高 General 中的 Image width 和 Height
视频、本地视频 width General 中的 Video width
定位图层 宽 × 高 General 中的 Width 和 Height

If you don't see your change

  • 关闭对话框后修改消失。 您用 Cancel、关闭图标或 Escape 键关闭，设置被还原。请重新修改并点击对话框中的 Save。
  • 重新加载后修改丢失。 Save（对话框中）只保留在编辑器中。离开页面前请点击工具栏上的 Save。
  • 主题样式不变。 HTML classes 下的 Bootstrap 实用类或带 !important 的主题规则优先。请打开 General 面板移除类芯片，例如 Primary background，或向网站管理员询问主题规则。
  • 某个控件完全无效。 有些元素对同一事项有自己的设置。请参阅有自己设置的元素。
  • 按钮悬停不再变色。 您的 Background 取代了主题悬停色。请也在 Hover style 面板中设置 Background。
  • 文本随盒子一起变淡。 Opacity 淡化整个元素。请设回 0，改用半透明 Background 颜色。
  • Opacity 为 0 不隐藏元素。 0 表示 Theme defaults。请改在 HTML classes 下添加 Hide element (d-none) 类。

What's next?

  • 背景：在标题后放照片并保持标题可读。