Oxygen Builder Basic Elements基本要素

Oxygen Builder Basic Elements基本要素

　　Oxygen Builder的基本元素可以在“ +Add ”->“ Basics ”中找到。所有可能的网页设计都可以通过将这些元素组合在一起来创建。本文，晓得博客为你介绍Oxygen Builder Basic Elements基本要素。

Container容器

　　容器元素允许您创建设计的结构和布局。通常，页面上的所有内容都将驻留在容器元素中。删除容器元素也会删除嵌套在其中的元素

　　1、Section部分——Section元素将内容限制在Page Width内。在Oxygen 3.4及更高版本中，您可以将形状分隔符插入到截面中。

　　2、Columns列——Columns元素使创建响应式基于列的布局变得容易。

　　3、Div元素——Div元素是一个通用容器。通常，在为其设置特定样式选项之前，它对页面布局没有影响。

　　推荐：Oxygen Builder页面构建器Gutenberg Integration古腾堡集成

TEXT文本

　　Oxygen提供四种类型的文本元素。要编辑任何文本元素中的文本，请双击该文本。

　　1、Heading标题——Heading元素是使用HTML标题标签（h1、h2、h3、h4、h5和h6）的文本元素。它们通常用于帮助组织网页内容的标题、标题和副标题。它们不仅使用户更容易浏览网页，还可以帮助搜索引擎机器人了解您页面上的内容结构。

　　2、Text文本——Text元素是一个仅包含文本的Div元素。可以使用在编辑文本时出现在屏幕顶部的格式工具栏将基本格式应用于此文本。

　　3、Rich Text富文本——富文本元素允许使用WordPress TinyMCE编辑器将扩展格式应用于文本。

　　4、Span元素——Span元素允许创建仅适用于被Span包裹的文本部分的特殊样式。要创建Span元素，请双击Heading或Text元素以编辑其文本。然后突出显示您希望使用Span换行的文本部分，然后单击格式工具栏中的<span>。

　　推荐：Oxygen Builder页面构建器布局间距概览

Links链接

　　Oxygen Builder提供三种类型的链接元素。这些元素创建指向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。可以在所有链接元素的基本样式选项卡顶部的URL字段中设置链接URL。您可以输入任何URL，或单击设置按钮以浏览并将链接URL设置为您网站上的现有内容。

　　1、Text Link文字链接——Text Link元素就像一个带有指向另一个URL的超链接的Text元素。可以在Manage->Settings->Global Styles->Links更改默认链接颜色。

　　2、Link Wrapper链接包装器——Link Wrapper元素允许您为一组元素创建单个链接。放置在链接包装器中的所有元素都可以作为链接的一部分进行点击。

　　3、Button按钮——Button元素类似于Text Link元素，不同之处在于它显示为按钮而不是纯文本。按钮的简单样式选项在“基本样式”选项卡中可用。

VISUAL视觉的

　　视觉元素用于向页面添加图形元素。

　　1、Image图片

　　在基本样式选项卡的图像URL字段中指定图像的URL。单击图像URL字段旁边的浏览以从WordPress媒体库上传或选择图像。这将导致在您的设计中加载完整尺寸的图像，无论图像的显示尺寸如何。

　　您可以使用媒体库选项来确保在您的设计中仅加载最大的必要版本的图像：接下来，使用尺寸下拉菜单选择您想要使用的图像尺寸。通过这种方式加载图片，只要您没有在Size下拉菜单中选择最小尺寸，图片就会使用srcset属性根据视口大小确定要加载的版本，从而缩短页面加载时间。

　　2、Video视频

　　视频元素是一种在页面中嵌入视频并确保它们具有响应性并保持其纵横比的方法——即随着浏览器窗口的缩小，视频也会缩小，同时保持其比例。要嵌入YouTube或Vimeo视频，请将视频的URL粘贴到基本样式选项卡中的YouTube/Vimeo URL字段中。这不得用于自托管视频。

　　要添加自托管视频，请单击“手动粘贴iframe代码”复选框。然后，您可以粘贴以下代码并将{your-video-url}替换为您的视频的URL：

<iframe src="<video url goes here>" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

　　您还可以控制视频纵横比或手动粘贴iframe代码以嵌入来自其他提供商的视频。

　　3、Icon图标

　　Icon元素显示一个SVG图标并提供各种样式选项。要选择图标，请在基本样式选项卡的图标字段中键入文本以搜索可用图标。

　　推荐：什么是VSO垂直搜索

Other其他

　　1、Code Block代码块——代码块元素允许您在页面中嵌入自定义HTML、PHP、CSS和JavaScript代码。

　　推荐：Oxygen Builder页面构建器教程