The following tutorial will help you build and refine a FBW from scratch using the Kinja editor. There are four important parts of the FBW:

  1. Base Image
  2. Overlay Image (optional)
  3. Anchor Links with custom social share (optional)
  4. Parallax Effect (optional)

Base Image

The full bleed widget consists of at least one image (a base image) so before you get started make sure you have one. A secondary image can be added as an overlay but we’ll get to that later. Since the primary goal of the full bleed widget is to add a large visual element to your featured post it is recommended that you use a very large image asset:

We’d recommend an image that is at least 800px tall and at least 3000px wide.

However this is not a hard requirement and you should feel free to experiment with different sizes. The idea is that this widget should meet your creative needs and not force you into a preconceived design constraint. You must select the featured template for the FBW option. We do not support the FBW in default posts. Let’s check one out with just the base image:

An example of the FBW using just the base image.

When the image enters the viewport a subtle fade-in effect is applied. Shall we make one? To enable the FBW select it from the new dropdown menu in the editor:

Selecting the insert FBW option will place the FBW where your cursor is and open an image upload modal. Once you have uploaded the base image asset you can preview it by saving as a draft. If you don’t require an overlay then you are done! Voila!

An example of the FBW using a transparent PNG as a custom blockquote.

Overlay Image (optional)

This optional element fades in once the base image scrolls into the viewport. So the base image would fade in and then reveal the overlay image. The overlay is vertically and horizontally centered over the base image. There is some nice subtle movement to the overlay and makes for a pretty cool visual lift to your content. Some uses could be to include a blockquote with a custom font (see below) or titles to denote the FBW as a new section break.

The overlay image is currently capped at a max width of 830px but can be wider than that. It will just scale responsively.

To add an overlay image simply click the base image and an overlay icon will appear. Click the icon and you will be prompted to upload an optional overlay image (again this is not a requirement of FBW and should only be used if you want to add an overlay):

Optional overlay button (top left) is triggered by clicking on the base image. The overlay could be used to add a blockquote using a custom font.

Anchor Links with custom social share (optional)

Since the FBW is a nice way add distinct sections to your content within a post we added the ability to provide an anchor on the element. This is an optional field and you can always leave it blank. To add one it’s as simple as filling out the anchor field with the desired anchor tag:

i.e. drew

Then you would use the Kinja link tool to add the anchor to a text element the same way you would convert text to a link. Instead of filling out the URL field you can now select the anchor you created from a dropdown menu:

Now you have created a link that anchors to the FBW with the corresponding anchor tag!

I am text that jumps to the base image example

I am text that jumps to the overlay image example

Custom social share information (created if anchor is present):

You will also notice that the URL will automatically update on scroll if an anchor is present. This link can also be used to promote directly to the anchored content instead of a user entering at the top of the post. The url would look like this:

If a user shares a full bleed widget that has an anchor, the FBW image will be used for social promotion as well as the first paragraph following the FBW:

Image: Preview of custom social info created by FBW with an anchor

The share buttons will automatically update to share the section of content you are reading.

Parallax Effect (optional)

The FBW also supports a parallax effect. This option can be toggled by simply clicking the parallax icon.

Image: A toggle for parallax

The same dimension suggestions apply here. It is important to note that this has the effect of turning the image into a background element that covers the browser window. Portions of the image will not be visible at every browser dimension (16x9 is a relatively safe ratio for your images). It is best to consider a FBW with parallax a purely background element. It is also important to note that this is a desktop only supported feature and the mobile view will present itself as a standard FBW.

If you are using a gif as the full bleed image asset, we convert them to mp4s for both visual and page speed optimizations. This means that gifs cannot receive the parallax effect since they are no longer rendered as images.

Hopefully the FBW will inspire you to find new and creative ways to elevate and extend your storytelling using the featured post template. Feel free to reach out with any questions and concerns. Thanks!

Senior Product Manager

Share This Story

Get our newsletter