This will give a few tips about how to control the layout of a webpage made with scollyteller where the background elements are maps or charts. It will require the Scrollyteller theme and the Generateblock plugin.
The latest Scrollyteller version can be found here:
https://www.spacemoped.com/wp-content/uploads/2023/11/scrollyTeller187img.zip
- Download the .zip
- Don’t unzip it!
- In WordPress choose Add theme
- Choose upload
- Choos ehte .zip file you just downloaded
- Activate the theme
This Scrollyteller version does not yet have the data narratives funcitonality. The purpose of that is that Scrollyteller can tell a javascrip app to go to a specific step in its narrative, hopefully leading to more possibilities for visual narratives.
As it is now the Scrollyteller can show one or more background elements, display scrolling elements (text etc) on top and then switch the backgrounds.
In order to control the layout I reccommend the Generateblocks plugin.
If you want a chart as a background you typically don’t want that chart covering the entire screen, and you also want slightly different layouts for a larger screen (Pc / laptop) and mobile screens. Generateblocks will help with this.
Using a container element
Let’s say we want the chart/map on the right side for pc/laptop, and then we want the text scolling over the left part of the screen. There are several ways of achieveing this but here is a relatively simple way with generateblocks.
First we need a background element. If we wanted an image as a background and or that image to cover the entire screen we simply upload a large enough image, place that image on out page (which should have ‘Content container’ set to ‘full width’) and then give it a class name of ‘bgimage’.
In this case we want a chart on the background and we son’t want it to cover the entire screen. So we will use a container element as the background and give it the class name ‘bgimage’, and then position the chart/map within that element:
- Make a new container element on your page
- Give it classname ‘bgimage’
- You can set a background image for this entire container element
- You can change background colour for the container element
- Be aware of contrast throughout this and check that your text is readable
- https://color.adobe.com/create/color-contrast-analyzer
- Place another container inside the top container, no classname required
- Give this container a left margin of 50% on pc/laptop screen
- Place the chart/map inside this container with a custom HTML element
- Give the chart/map element appropriate margin and padding to position it
- In order to place the narrative elements you first need to get out of the ‘bgimage’ container
- Click the dotted blue box to choose the parent container until you are at the top level
- Click Enter to make a new block
- Choose to make another container, this container does not need a classname
- Give this container a width of 50%
- Place narrative texts/elements inside this container.
- Each narrative text must have a classname of ‘swoosh’
- Add several ‘bgimage’ elements and following ‘swoosh’ elements to complete your story
How well the page looks depends on a lot of factors. Datawrappers charts and maps are not entirely responsive, they adapt to the width but the height is fixed. If we make a d3.js of Leaflets.js app we can adjust this to a larger extent. For a chart suitable to fit on a half background i Reccomend a height of 6-700 px.
Typography of ‘swoosh’ elements
Using CSS classes:
There are several ways to adjust the typography of the ‘swoosh’ elements. One easy way os to use CSS classes built in to Scrollyteller. Here are some:
.waw – white always works
This makes bold white text with a semi transparent shadow outline. This text will always be readable regardless of the background.
.newsbox
This makes semi transparent white boxes and the text will be written with black serif fonts. It might be better for longer texts than the .waw class.
.bsw – black sometimes works
This is the opposite of .waw. Black text generally does not work as well as white text when placed over images, but for bright backgrounds it can work well
Using standard typography tools:
You can use any of the built in typography tools to get the result you want. Bear in mind that if you have a lot of swoosh elements you migh need to make the same adjustmenst for every elements. The advantage of usin CSS classes is tha you can have the same setting applied to a range of elements, and then only change the class if you want to change the properties of all elements.