使用Smart Slider 制作页面滚动横幅

如果想要在wordpress网页上添加滚动横幅,我推荐使用smart slider这款插件,相比其他的slider插件,这款插件的交互更加清晰便捷,而且功能也十分强大。

首先创建一个简单的三张图片的滚动横幅体验一下。

点击NEW SLIDER,我更喜欢全宽度的网页,所以选择全宽度,起个名字,其他参数我保持默认,点击创建。

然后点击NEW SLIDE 添加合适的图片。

如果你想制作更加精良的滚动横幅,下面的内容才是这款插件的亮点。

滚动页面,下方可以看到选择slider的设置项目,一共有两行,上面一行是slider的控制参数,下面一行是组件的参数。

可以调节的参数很多,需要细细摸索。如果你熟悉js,可以在developer栏中添加js控制程序。

控制组件如果没有太多需求可以保持默认。

下面我们来看一下怎么编辑slide,点击我们刚才创建的任意一个slide,编辑slide。

可以看到可以编辑的内容是相当丰富的。

每一个slide由background和上面的元素组成,其实刚才我们创建的时候添加的图片就是背景图,我们可以继续在背景图上添加内容。

编辑slide的编辑器使用的是类似ps的图层的概念,可以在一层一层的添加内容。

要对内容进行定位首先要添加一个结构层,其实就是使用盒子模型创建布局。

这里我添加一个特殊布局。然后添加各种层到slide,然后拖动层到想要添加的布局中。

默认的布局可能不符合你的要求,这时你可以调节布局比例。这类似于bootstrap的网格,布局被划分为行和列,通过调整行中列的比例进行控制。

此时,你就拥有了一个内容丰富的slide了。

当然我这里只是粗略的走了一个过程,各种动画和布局还是需要细节调整的,除了图片,你甚至可以添加通过视频链接添加视频层,虽然只支持youtuve和vimeo。

然后我们就可以使用短代码将创建的slider添加到页面中了。

 

使用Elementor设计页面

wordpress什么都好,就是页面自定义程度太小,很难做出布局合理好看的页面。有定制需求时,只使用主题限制又太多。最好的办法还是自己设计页面,今天找了几个自定义布局的插件不是很满意,直到找到Elementor才解决了我的需求。

Elementor 采用行列进行布局,行列可以相互嵌套,组件需要放在列中,向行中添加组件的时候会自动添加列。自带的组件基本够用。

如果只是可以进行行列布局,那和我之前尝试的插件没有什么太大的区别。Elementor强大就强大在可以定义行列和组件的各种属性。

比如想要在图片上方叠加文字,我们可以将图片和文本框放在同一个列中,然后调节文字的外边距为负值,这样就可以实现叠加效果。

当然这样只能满足指定页面大小的布局,当页面大小发生改变时布局就会变乱,暂时我还没有找到解决的办法。

Elementor可以分别为电脑、平板和手机设计样式,为了更好的显示效果,最好为每种设备都专门设计布局。

配合上其他组件,Elementor基本可以满足对页面的自定义需求。