用户登录

文字的下面再添加一排新的内容 .. 类型可以是 In Container ..

然后在这排内容里面,再添加一个相册 .. 搜索一下 gallery .. 添加一个 Image Gallery .. Image Source ,图像来源选择 Media Library,就是网站的媒体库 .. 我提前已经在媒体库里面上传了一些图片 .. 并且设置了图片的标题 .. 还有图片的描述 ..

Gallery type,相册的类型选择 Image Grid Style .

Display Title / Caption .. 显示标题与描述 ..

Layout,布局选择 Constrained Fullwidth ..

勾选一下使用 Masonry Style ...

Item Spacing,项目之间的间隔 .. 可以设置成 8 像素 ..

Gallery Style .. Meta overlaid .. bottom left aligned ..

Load in Animation,加载动画 .. 选择 Perspective Fade in ..

然后可以再去选择在这个相册里面要使用的图像 ..

在选择图像的时候,可以设置它的 Masonry Sizing,就是 Masonry 风格的尺寸 ... 我们可以根据图片原本的尺寸选择合适的 Masonry Sizing .. 这张图片选择 Wide & Tall .. 保存一下 ..

再选择一张图片 .. 这个图片的 Masonry Sizing 选择 Regular .. 默认是一个小的正方形 ..

这张人像是垂直的 .. 所以它的 Masonry Sizing 可以选择 Tall ...

再添加几张图像 .. 保存一下修改 .. 再 Update 一下这个页面 .. 关掉编辑器 .. 可以再预览一下刚才创建的这个 Image Gallery ..

点开一张图像,会在当前页面显示这个图片的原始尺寸 .. 使用相册上的导航,可以浏览这个相册 ..

在这个相册的底部,可以再添加点边距 ... 先关掉相册 ..

然后编辑一下这个相册所在的这排内容的配置 .. 在 padding bottom 里面,添加一个 8% .. 保存修改 ..

更新页面 ... 关掉编辑器 .. 再预览一下 ..

相册《 商业网站案例:作品展示 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点