iXiNX Club开放性测试进行中,欢迎体验反馈,如有任何问题均可联系管理员
iXiNX Club主要为自用型文档社区,同时也开放共用文档,欢迎爱好者加入并共享内容,翻译文档

首页和页面生成器:如何使用Elementor Builder构建主页?

版主: Code

回复
F
Foxiz
一级成员
帖子: 40
注册时间: 2024年 11月 5日 18:28

首页和页面生成器:如何使用Elementor Builder构建主页?

帖子 Foxiz »

该主题与Elementor最为兼容,主题集成基于免费的Elementor版本。您无需购买Elementor Pro版本。这是WordPress的最佳构建器,拥有超过200万活跃用户。 Foxiz支持该插件的所有布局。

要使用Elementor,您需要安装并激活插件:

https://wordpress.org/plugins/elementor/

创建一个页面以使用“Elementor”

首先,请按照以下步骤操作:
  1. 导航至页面 > 添加新内容。
  2. 添加页面标题,即:主页。
  3. 单击“使用Elementor编辑”按钮切换到构建器。
    el-1-2.jpg
  4. 该网站将重定向到另一个 URL,并且该面板将出现在页面上。
    elementor-1024x374.jpg
重要步骤:设置全局布局

Foxiz使用1240px网格系统。这意味着您的网站内容的最大宽度为1240px(不包括左右边缘间距)。

elementor块

Foxiz支持elementor的多种块布局,您可以在“Foxiz Blocks”类别中找到所有这些布局:
Blocks.jpg
您可以在搜索栏中输入foxiz或关键字: gird、heading、list、plan、overlay、small ……来查找您需要的块
创建您的部分
  1. 单击“Add New Section”按钮创建您想要的部分。您可以根据需要创建任意多个部分。
    Add-New-Section.jpg
  2. 选择您的结构:为您的部分选择结构。一个部分可以设置为全宽并遍布整个屏幕,或者带有侧边栏的内容区域,或者您也可以将每个部分分成几列。
    Select-your-structure.jpg
  3. 创建部分后,您可以将块拖放到内部。
    drag-drop-1024x374.jpg
创建全宽部分(无嵌套内部部分):
  1. 选择您的结构:为您的部分选择结构。
    Section-full-1024x276.jpg
  2. 单击左侧面板底部的“Layout”图标。
    Layout-2.jpg
  3. 在“Columns Gap”选项下 ,选择 “Custom”。“Custom Columns Gap” 选项 输入该值 “20”
    custom-gap.jpg
  4. 创建部分后,您可以将块拖放到该部分。
创建一个包含内部部分的部分:

使用的内部部分用于在部分内创建嵌套列。这样您就可以创建复杂的布局。
  1. 选择您的结构:为您的部分选择结构。
    Section-full-1024x276.jpg
  2. 单击左侧面板底部的“Layout”图标。
    Layout-2.jpg
  3. 在“Columns Gap”选项下,选择“No Gap”。
    No-Gap.jpg
  4. 创建部分后,单击左侧面板右上角的“菜单”图标。向下滚动到“BASIC”并找到“Inner Section”块,然后将“Inner Section”拖到您的部分。
    Inner-Section.jpg
  5. 在“Content Width”选项下,选择“Full Width”。在“Columns Gap”选项中,选择“Custom”。在 “Custom Columns Gap” 选项中输入该值 “20”。
    Layout-Inner-Section.jpg
  6. 默认情况下,您将获得一个包含两列的部分。您可以通过右键单击列手柄图标来添加或删除列。
    Edit-col-inner-1024x318.jpg
  7. 创建部分后,您可以将块拖放到该部分。
我们建议您仅设置内部部分的列间隙值。为父部分选择无间隙,以避免布局中出现过大的间距。
创建一个带有侧边栏的部分:

此部分将在内容的左侧或右侧显示任何侧边栏:内容的 66.7% 宽度 + 侧边栏的 33.3% 宽度。
  1. 选择您的结构:为您的部分选择结构。
    Section-sidebar.jpg
  2. 单击左侧面板底部的“Layout”图标。
    Layout-2.jpg
  3. 在“Columns Gap”选项下 ,选择 “Custom”。在 “Custom Columns Gap” 选项中输入该值 “20”。
    custom-gap.jpg
  4. 单击侧栏列“33.3% 宽度”编辑按钮。
    Edit-col-sidebar-2.jpg
  5. 选择“Advanced”选项卡。
  6. 在CSS类输入字段中输入is-sidebar并输入rb-sticky以使其具有浮动性。
  7. 添加左边距值为:20或10(取决于你自己的设计)
    is-sidebar.jpg
  8. 创建部分后,您可以将块拖放到该部分。
不要忘记删除平板电脑和移动设备侧边栏上的左侧间距。
您没有权限查看这个主题的附件。
回复