博客资讯

Blog资讯

Joomla教程:如何使网站与SP页面构建器完美地响应

什么是SP页面构建器,不需要解释。你能用它做什么,也不需要描述。你今天唯一需要知道的是,让你的Joomla网站完全响应SP页面构建器是多么的简单。根据响应设计的原则,网站应该适应不同的分辨率,支持从智能手机、平板电脑到台式机等各种设备。SP页面构建器的所有插件都带有特定于设备的响应选项。我们将看一看其中的几个。

在本文中,我们将演示如何通过SP页面构建器调整站点的响应性,使其在任何设备(桌面、平板、移动)上完美地加载。在这里,我们将看到对不同网站的一些调整。

使用SP页面生成器创建的每一行都具有向其应用不同形状的功能。为此,您需要转到行选项>样式启用形状>将其设置为“是”,您会在下拉列表中找到10种以上的不同形状。我们将为我们的小实验选择“滴水”。现在为桌面选择所需的颜色,高度和宽度。

SP page builder

我们选择移动视图。如果您将相同的值设置为“桌面”,则会看到该布局变得特别的怪异。

移动试图

要解决这个问题,我们需要调整移动视图的值 - 点击底部的移动图标。正如你在下面的图片中看到的,我减小了移动视图的高度。现在,这款外形在所有移动设备上看起来都很完美

移动试图的值

我们来看看这个设置在Tab视图中的外观。

Tab视图的外观

它看起来很好。所以我们会保持原样。但是,如果您觉得形状已损坏,请根据需要调整这些值。

调整标题:标题或文字

您可以对SP页面生成器的所有文本内容做同样的事情。让我们以Heading插件为例,将字体大小设置为56,将行高设置为60,将margin-bottom设置为30.您将看到它在桌面上的外观,是否完美呢?

调整标题文字

但现在看看具有相同值的移动视图。不太好!

移动试图

我们可以通过调整这些值来解决这个问题。我将字体大小,行高和底部边距的值设置为40,35和15.现在,请参阅下图中的移动视图。所有元素的组合是完美的,对吗?

调整字体大小

调整特色部分

Feature Box插件让我们可以自由调整包括标题行字体大小和高度,标题页边距和顶部,图标大小和行高,边距和填充,内容字体和大小等多种功能的响应能力。今天我们会让图标响应不同的设备。我们的桌面主图标大小为30。

Feature Box

如果将尺寸保持在30,则在移动设备上看起来太小。

SP page builder

我们希望我们的用户专注于图标,以便我们将尺寸增加到40.它将使图标更易于用户看到。如果你想要,你可以对所有其他图标做同样的事情。

现在,如果我们看看Tab视图,我们会看到图标相对较大。这符合我们的要求。所以,我们会保持原样。

Tab视图

相关设置流程

您可以从以下方面找到一些针对移动设备,平板电脑和桌面的非常有用的自适应设计选项: 

  • 行选项>响应>隐藏在手机/平板电脑/桌面上
  • 行选项>样式>填充和边距
  • 列选项>常规>填充和边距
  • 列选项>高级>平板电脑和移动版面和可见性选项
  • 插件(上述几个不同的选项)

结论

我希望你已经清楚了解本指南提供的响应式网页设计选项。我们想说的是,SP页面生成器是一个了不起的页面构建工具,它可以让你的网站以非常简单和容易的方式响应。当你手上有SP页面制作器时,在每个设备上精美和功能性地呈现内容是非常容易的。花点时间熟悉SP页面生成器的响应性设置,您将在未来感谢您。

说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
加载评论... 注释将在之后刷新 00:00.

第一个发表评论

joomlass-logo31.png

Search