Announcement Title

  • Your first announcement to every user on the forum.
Resource icon

主题 IgnitionDeck 主题设置

1687325729551.png

IgnitionDeck 插件为 WordPress Gutenberg 编辑器提供了 2 个块:一个Featured Project 块和一个Project Grid 块。通过在块编辑器中搜索“IgnitionDeck”可以找到这两个块。

这些块可用于页面、帖子和其他启用块的区域。多个块也可以在同一页面或帖子上使用。


特色项目块​

file-BfiyyXo2ek.png
这是在主页上展示单个项目或在每个项目类别中突出显示项目的好方法。该块将显示项目标题、特色图片、简短描述、元数据(项目目标、进度等)、项目按钮以及社交媒体链接。

图像可以设置为出现在块的右侧或左侧,文本出现在另一侧。文本和按钮可以自定义颜色。

要使用块:​

  1. 通过搜索“IgnitionDeck”找到并选择“特色项目”块。按“特色”或“项目”搜索也可以。页面上将放置一个空白块。
    file-0yhb21eHUH.png
  2. 从侧边栏的“选择项目”下拉菜单中选择要显示的项目:
    file-8NKQ0xH22Y.png
  3. 该项目将以默认外观插入到块预览中。
  4. 选择颜色设置下拉菜单以更改块内容项的颜色。
    file-AT2pCySfhv.png
    有 5 个区域可以自定义:标题、描述、按钮、按钮文本和元数据。
    file-DJUJiJM5s7.png
  5. 在“布局设置”下拉菜单下将图像外观设置为向右或向左
    file-nNZVf3EVzA.png
  6. 对要在页面上显示的任何其他项目重复步骤 1-5。
  7. 发布并享受!

项目网格块​

项目网格块可用于创建自定义主页,将项目分类到专门的部分,创建过滤项目类别页面,创建页面来展示成功或正在进行的项目。

网格将显示项目标题、特色图片、简短描述、元数据(项目目标、进度等)、项目所有者、项目按钮、项目类别、剩余天数以及成功/失败标志。可以自定义网格以显示 1 到 6 列,并且可以设置为固定数量的项目或一次显示所有项目。网格支持自定义颜色选项,以及打开/关闭各种元素的能力。

要使用块:​

  1. 通过搜索“IgnitionDeck”找到并选择“特色项目”块。按“网格”或“项目”搜索也可以。页面上将放置一个空白的网格块。
    file-NYxb1gHqx7.png
  2. 选择要显示的项目的项目状态。有四 (4) 个选项:
    file-MMiHDxgg2x.png
    1. 全部 - 站点上的每个项目,无论该项目是打开/关闭、达到其目标还是失败。
    2. 活跃——只有目前开放接受认捐的项目
    3. 成功——已达到资助目标的项目。这些项目也可以打开/关闭。
    4. 失败——未达到筹资目标的项目。
  3. 接下来,可选择按项目类别过滤项目网格(在项目 » 项目类别中设置)。
    file-TfwgEz3qij.png
  4. 设置要显示在网格中的列数。网格支持 1 到 6 列。
    file-qQ298fUiZL.png
  5. 设置要在网格中显示的项目数。有两个选项可用:所有项目或最多接受 50 个项目的滑块。列数的倍数是获得令人愉悦的布局的一个很好的经验法则(即在 4 列中显示 16 个项目创建 4 个偶数行):
    file-bdxeJXMQtc.png
    注意!如果网站上有数百个项目,显示所有项目可能会导致页面加载缓慢。
  6. 使用标题级菜单设置项目标题的大小。标题将使用网站/主题的默认字体和大小样式。
    file-phirRxPTKi.png
  7. 可以设置隐藏/显示项目元素的其他选项,包括显示摘录(项目简短描述)、显示图像(项目特色图像)和显示徽章(成功/失败标志)
    file-KNEXpyegaA.png
  8. 最后,选择“颜色设置”下拉菜单以更改块内容项的颜色。
    file-XOfJvNTFXq.png
    有 6 个区域可以自定义:标题、描述、项目栏、类别标签、徽章和元数据。
    file-ydA8G0A48v.png
此外,所有元素都分配有一个类,可以使用 CSS 作为目标,以逐个项目地隐藏单个元素。例如,如果显示所有活动的、开放式的项目,但您不想显示剩余天数(正在进行的项目为 0 天),您可以使用以下 CSS 隐藏该元元素:

/* 隐藏剩余天数 */
.idcf-grid-projects-block-single-info-days {
显示:无;
}

这可以通过识别单个项目来进一步确定:

/* 隐藏项目 5 的剩余天数 */
.idcf-grid-projects-block-single-5 .idcf-grid-projects-block-single-info-days {
显示:无;
}

在安装 Stellar 主题之前​

要安装这个主题,您必须有一个工作版本的 WordPress 和IgnitionDeck 众筹插件已经安装、注册和设置。

在“设置”>“阅读”>“首页显示”中设置您的主页内容。要像演示一样创建主页,请选择“最新帖子”。

在项目网格之上​

主场英雄​

file-AxneivKl1o.png

英雄单位有 3 个选项可用:

  1. 默认设置的静态图像。将此图片替换为您自己的图片(推荐尺寸 1920 x 920 像素),或
  2. Home Hero Section 小部件添加基于文本的小部件,或者
  3. 使用像 Revolution Slider 这样的滑块插件来添加像 Stellar 演示那样的动作按钮。
对于 静态图像,使用将打开媒体库的添加图像按钮选择您的图像。您可以选择已上传的图像或使用“添加媒体”上传选项添加要使用的新图像。

对于 Slider Shortcode,大多数滑块插件(如 Revolution Slider)都会生成一个简码,您可以在从菜单中选择此选项后将其插入到此处的字段中。确保您的简码格式正确,例如使用 Revolution Slider:[ rev_slider slide-name ]

对于 Home Hero Section Widget,在 Home Feature Options 菜单中做出并保存您的选择后,导航至 Appearance > Widgets 菜单。

在此处选择您要使用的小部件。Stellar 演示在此区域使用 500 Content Wide(自定义)小部件 。使用您希望包含在此区域中的内容填写字段。标题将以比文本字段中的常规内容更大、更粗的字体显示。

重要提示:您必须设置内容高度,以确保页面下方的内容不会卷起超过此区域。

使用下拉菜单设置您是要将带有图像的内容置于右侧、左侧还是居中(图像将出现在文本之前)。

如果您希望添加图像(添加图像:定位在前景中并根据之前的下拉菜单选择对齐)或背景图像(添加背景图像),请先保存小部件以保留您的设置,因为您将离开此设置页面暂时。单击添加图像并从媒体库中选择或上传图像。

您还可以设置文本和/或背景的颜色(如果您没有使用背景图片)以突出显示该区域。如果您不在此处设置颜色,将使用主题默认值。

或者,在顶部(推荐)和/或底部添加一些填充,以将内容设置为远离小部件区域的边缘。

最后,添加您希望包含在该区域中的文本。

Stellar Demo 在这里使用了两个按钮,它们使用了主题中内置的按钮样式。您可以通过向链接添加类来设置这些。例如:

<a href=”http://yoururl.com/?create_project=1″ class=”button”>创建你的项目</a><a href=”http://yoururl.com/projects/” class=”按钮边框”>浏览项目</a>

保存您的更改。

小部件的下一部分全部在站点管理员的外观 > 小部件屏幕中配置。

主页热门内容小部件​

英雄单元下方和项目网格上方的部分是主页顶部内容小部件区域。在 Stellar 演示中,您可以在此区域使用多个小部件。

带有徽标的栏使用 500 Content Wide (custom) Widget。所有设置都保留默认值,并且使用代码 <img src=”path-to-image” /> 添加图像,而不是使用添加图像字段。它设置为 110 像素高,并应用了“logocontainer”的 CSS 类。

file-2wzjyyKNdc.png


接下来是另一个 500 Content Wide(自定义)Widget 集,高度约为 350 px。使用的图像高度为 300 像素并且右对齐。顶部添加了 30 像素的填充,以将图像和文本推离小部件的顶部。

如果您希望添加图像(添加图像:定位在前景中并根据之前的下拉菜单选择对齐)或背景图像(添加背景图像),请先保存小部件以保留您的设置,因为您将离开此设置页面暂时。单击添加图像并从媒体库中选择或上传图像。保存您的更改。

在此之下,项目网格将自动填充为 4 列。将在此处显示的项目数在外观 > 500 设置 > 主页上显示的项目中设置。将其设置为 4 的倍数。

在项目网格下方​

家庭内容小部件
stellar_featuredwidget

在演示的项目网格下方是 Stellar Feature Widget。此小部件显示 3 列,其中包含标题、Font Awesome 图标和文本内容。该演示使用这些小部件中的 2 个来设置 2 行,每行 3 列。

请务必设置一个高度,这样下面的内容就不会卷到小部件区域上。该演示在此处设置了 2 个 Stellar Feature 小部件。第一个高度为 320 像素,顶部和底部的填充为 40 像素。下一个小部件的高度为 240 像素,底部只有 50 像素的填充。

图标字段使用 Font Awesome 图标。可以在此处找到可用图标的便捷备忘单:http://fontawesome.io/cheatsheet/。 使用备忘单提供的格式fa-icon-name输入图标 。您也可以将这些字段留空,这样就不会显示任何图标

接下来为每个功能添加一个标题。您可以使用外观 > 自定义 > 颜色进一步设置标题和图标的样式。次要深色应用于图标和功能标题。

添加您的内容。您可能需要调整小部件的内容高度,以确保此处的文本不会被截断。最后保存小部件。重复第二个和您在此处添加的任何其他特色小部件。

接下来是 Stellar CTA(号召性用语)小部件

向小部件添加高度。如果您的小部件有标题和单行文本,140px 是一个很好的高度。如果文本被截断,请增加高度。

使用与 Feature Widget 图标相同的格式添加标题、文本和 Font Awesome 图标。设置文本颜色将为标题和内容文本设置样式。

为您的按钮和一些按钮文本添加一个链接。此按钮的一个流行选项是创建项目的链接,可以使用http://your-domain.com/dashboard/?create_project=1进行设置。

页脚小部件​

最后,页脚小部件区域有 4 列,第 1 和第 4 列较宽,第 2 和第 3 列较窄。这是添加附加链接或为您的时事通讯插入注册表单的好地方。

演示中的第一个小部件是一个常规文本小部件,带有使用 <img src=”path-to-image.jpg” /> 添加的徽标

第二个和第三个小部件使用自定义菜单小部件。您可以先在外观 > 菜单中设置要在这些区域中使用的菜单。然后添加小部件并选择您希望在此处显示的菜单。

第四个小部件再次使用文本小部件来创建 MailChimp 订阅表单。以这种方式使用小部件需要您首先在 MailChimp 帐户中设置嵌入表单,然后将生成的代码复制并粘贴到文本小部件中。请参阅 MailChimp 的文档,了解如何创建订阅表单;为获得最佳效果,请使用 MailChimp 选项提供的简单布局设计。

如果您不想使用前 3 列中的任何一列,则需要在您不想使用的列中输入一个“空”文本小部件,否则小部件将向左滑动以填充空白区域。使用文本小部件并输入 进入内容区域以创建“空”小部件。
顶部