tagDiv Composer教程

[NewsPaper]

浏览视频：https://www.youtube.com/embed/2GKDrpdzf ... ure=oembed

tagDiv Composer重要注意事项

tagDiv Composer是主题正常运行所需的插件，因此必须在每次主题安装或更新后激活它。
请不要在同一页面上同时使用 tagDiv Composer 和其他页面构建器，例如WordPress编辑器或WPBakery页面构建器。
请不要使用 tagDiv Composer 编辑最初使用 WPBakery 或其他页面构建器创建的页面。
如果您想在两个构建器之间转换，请遵循本指南。
请注意，您可以使用 tagDiv Composer 进行编辑，但只能使用 Cloud Templates。
当您使用我们的主题创建页面时，我们建议您使用我们定制的页面构建器，称为 tagDiv Composer。这个手工制作的前端页面构建器具有拖放功能。

您可以在编辑页面时按tagDiv Composer按钮访问 tagDiv Composer

LWR_Recording.png (28.67 KiB) 查看 527 次

或者当您通过按使用 TagDiv Composer 编辑按钮访问您的网站页面时

btnverdecomposer.png (79.44 KiB) 查看 527 次

主题将立即切换到前端编辑模式

Newspaper-tagDiv-Composer.jpg (329.03 KiB) 查看 527 次

您将在屏幕左侧看到页面和 tagDiv Composer 的前端预览。在此欢迎屏幕中，除了页面构建器功能之外，您还可以看到两个附加选项。它们允许您选择所需的页面模板和页头样式。

页面构建器有一个顶部控件区域，该区域提供以下选项：Add Element、View Page、Save Changes和Close按钮。

按Add Element按钮，将出现下拉列表，其中包含您可以添加到主页的所有元素。

tagDiv-Composer_Elements.jpg (340.66 KiB) 查看 527 次

您可以拖放这些元素中的每一个来创建所需的布局。

您必须首先从row开始，因为 tagDiv Composer 适用于行和列。您只需在页面上的空白区域中拖动row图标即可添加行。

拖动到页面后，如果单击该元素，屏幕左侧将打开一个设置面板。此功能适用于每个内容或结构元素，而不仅仅是行。

有关 tagDiv Composer 页面构建器中的额外帮助，您可以在短代码选项上启用/禁用视频工具提示。您只需将鼠标悬停在您不理解的设置上，视频就会出现在它旁边并自动播放并指示该设置的作用。

该按钮在打开时将显示为绿色，在关闭时将显示为红色

tooltip.png (1.14 MiB) 查看 527 次

行

行有两个特殊部分，旨在帮助您创建布局。将元素拖放到页面上的左上角后，您可以访问行设置或列配置：

访问元素的行将在左侧显示所选行的设置

row-1.png (614.42 KiB) 查看 526 次

row settings允许您选择行的布局，这意味着您可以拥有不同样式的一组列。

General行设置还包括列间距、对齐方式、背景、YouTube 视频背景、不透明度和拉伸行选项。

General选项卡还包括视口选项，允许您根据用户设备设置选项。使用此选项可为所选的每个设备设置单独的设置。

设备选择

tagdiv-composer-devices.jpg (2.18 KiB) 查看 526 次

第二个选项卡称为Divider分隔线，位于行设置下方，允许您以独特的样式在行之间放置分隔线。您可以为行的顶部或底部选择分隔符的类型，并且可以调整它们的宽度、高度、颜色、阴影等等。

Layout选项卡可帮助您创建高级布局，并根据您的偏好将列定位在行内。这些设置适用于已经知道如何操作行和列但需要对此过程进行更多自定义的高级用户。

CSS选项卡是页面构建器的重要组成部分，因为它允许您更改行的位置并调整行的边距、填充和边框。

您还可以设置背景图像或颜色、阴影、颜色叠加以及隐藏特定视口的特定行。使用它来显示或隐藏特定设备上的特定元素。

如果要创建更复杂的结构，可以直接在一行中添加不同的块，也可以在内部行中添加。

每个块都有自己的设置，在块设置指南中显示
将块添加到您选择的行/列后，您将实时看到它。这意味着您可以实时查看实际内容。更改其设置也会更改页面的实时表示形式，从而更轻松地查看每个设置的作用。

Deleting an element类似于删除行。只需将元素拖动到屏幕的右下角，或者只需点击块元素右上角的删除图标即可。

当您将元素或行的图标拖放到页面底部时，将出现此红色方块

delete.jpg (315.68 KiB) 查看 526 次

删除元素

如果要删除行或元素，可以从左上角的row按钮中获取它。

将其拖动到屏幕右下角的Drag here to DELETE框中，或选择该行并按键盘上的删除按钮，然后用鼠标选择YES。

您还可以使用右键单击菜单，您可以在其中访问不同的命令，包括删除选项。

内部行

如果您想创建更复杂的行和列结构以更好地控制内容，也可以将行结构化为称为Inner row的子细分。

块元素

块元素是用于在行内显示内容的内容元素。

访问Elements的图标将在左侧显示所选元素的设置

element.jpg (404.6 KiB) 查看 525 次

将块添加到您选择的行/列后，您可以看到实时呈现的实际内容。

更改其设置也会更改页面的实时表示形式，从而更轻松地查看每个设置的作用。

删除元素类似于删除行。只需将元素拖动到屏幕的右下角，或者只需点击块元素右上角的删除图标即可。

非常重要：简码和广告不会在 composer 屏幕的实时预览中呈现，因此，要查看它们应用于您的页面，您必须按保存按钮并在前端查看页面本身。

全宽内容

stretch row选项允许您将行宽更改为不同的大小，使您的内容成为全宽或从可用行大小中选择的固定宽度。

tagDiv-Composer_Row-Settings.jpg (339.42 KiB) 查看 524 次

主页

默认情况下，WordPress将博客页面设置为主页，这不是我们大多数人想要的，因为有时我们需要自定义页面。要更改 WordPress 默认设置，您必须：

步骤1 –创建新页面，转到页面>添加新页面
步骤2 – 设置页面标题，使用前端 tagDiv Composer 编辑页面来配置页面。添加所需的元素并选择所需的页面模板。
步骤3 –转到设置>阅读，并将新创建的页面设置为主页。

更多的视频资源
https://www.youtube.com/embed/4P6R3ipyv ... ure=oembed

https://www.youtube.com/embed/gWWEZTUw0 ... ure=oembed

https://www.youtube.com/embed/zCqg3BfQr ... ure=oembed