5分钟生成10篇英文软文article forge软件试用

该案例研究网站不再启动和运行。

google广告开户

如今,建立一个从所有其他同类网站中脱颖而出的摄影网站可能是一件困难的事情——这就是为什么当我妻子需要建立一个新网站时,我花了很长时间试图弄清楚如何让它变得与众不同。 最后,她自己构思和设计,我简单地实施了她的想法。 结果是一些独特而令人难忘的东西,只有通过使用我们在 WooThemes 提供的一些很棒的工具才能实现。

网站主页与 Canvas 的默认外观之间的比较
网站主页与 Canvas 的默认外观之间的比较

利用画布

作为开发人员,在 WordPress 中构建定制设计的网站时,选择 Canvas 作为您的基本主题几乎是不费吹灰之力 – 考虑到它的各种钩子和过滤器。 这正是我在这里所做的,我使用我设置的子主题处理了所有自定义。

主页的设计需要相当有创意地使用 CSS 和图像来使事情看起来恰到好处——为了实现“悬挂”宝丽来效果,我充分利用了 CSS 定位和 transform 属性来处理每个迷你滑块的旋转,选择将 CSS 应用于每个迷你滑块的父元素,以便每个子元素旋转到完全相同的角度。

下面是一个使用 CSS 的例子 positiontransform 在其中一个滑块上:


#polaroid {
  position: absolute;
  top: 55px;
  left: 44px;
  transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);
}

同位素的砌体布局
同位素的砌体布局

Canvas 的产品组合功能完全适合该网站的需求——我只是使用由 Isotope jQuery 库提供支持的砌体布局对单个拍摄页面的布局进行了一些 CSS 更改以及一些大的修改。

使用 WooSlider

WooSlider 非常强大,而且非常容易定制,正如我在这个网站上工作时发现的那样。 为了创建主页滑块,我按照我们使用 WooSlider API 的指南创建了我自己的自定义幻灯片类型,它可以准确地显示我需要的图像显示方式。

我这样做的主要担心是在网站的主页上有四个滑块会大大增加页面加载时间,但最后我没有什么可担心的,因为 WooSlider 允许您在一个页面上拥有任意数量的滑块不影响整体加载时间。

整合 Instagram

因为这是一个摄影网站,所以在某种程度上整合 Instagram 是有意义的。 幸运的是,WooDojo 带有一个内置的 Instagram 小部件,可以轻松显示您的照片。 我需要做的就是修改 WooDojo 提供的默认 CSS,一切顺利。 很简单。

WordPress divi主题
由 WooDojo 提供支持的 Instagram 小部件
由 WooDojo 提供支持的 Instagram 小部件

减轻负担

对于任何摄影网站,都会担心不断加载大图像以及这将如何影响用户体验。 在这个网站上,有两个主要的区域加载了大量的图像并且它们都需要快速加载:主页滑块和单独的拍摄页面。 幸运的是,这两个区域的图像尺寸都不大,所以唯一的问题是每个页面上都需要加载很多。

为了解决这个问题,我使用 WordPress’ 创建了两个新的图像尺寸 add_image_size() 函数并使用了 WooFramework 的 woo_image() 功能以适当地显示它们。 结果是所有加载的图像在服务器上的大小都正确,因此不会执行不必​​要的过度加载。

#WooFTW

虽然还有其他工具可以用来创建相同的效果,但我发现 Canvas、WooSlider 和 WooDojo 的组合是一个非常强大的组合。 如果没有这些工具提供的巨大定制潜力,实现这样的网站将变得更加困难。

访问 catherinelashbrooke.com

您想成为我们博客的特色吗? 分享您使用 WordPress 和我们的产品的经验,如果我们相信这将使我们的社区受益,我们将发布它。 联系我们。
cta-banner-10-产品页面-v2_2x

5分钟生成10篇英文软文article forge软件试用
tiktok