This article will help you use the fullscreen template in generatepress. The aim is a page with large images for nicer web stories with less clutter. The full screen template will make all content stretch all horizontally all the way to the outer edges of the browser. This is nice for images but no so nice for text which we will make more narrow using CSS.
First you need to have the generatepress theme activated and then you need to make a new page.
You also need some images. For full screen images I reccommend no larger than 2560 pixels wide (this might change in the future as screens get bigger and bandwidth better). I also reccomend using a jpeg quality when saving in photoshop between 5-7. This should result in images about 350-500 Kb in filesize.
Large file sizes will make your page slower and as a result your google rank lower.
Here are some sample images you can use, all 2560 px wide and compressed as described above:
Unzip this folder and upload the images (or your own images) to your media library.
Set your page to fullscreen
You the need to edit the page settings on your new page to make it full width. This is done in the settings panel to the right. If you can’t see it click the little cog (norsk: tannhjul) on the top right. Then you need to check that you are adjusting page settings, not the current content block you might be editing.
In the settings panel to the right make this chioce:
Page Settings > Layout > Content Container > Full width
This will set all content on your page to use the full width of the screen. That is exactly what we want for images, not so much for text, and we might want to constrain some images from going full width as well. That can all be done with CSS and custom CSS classes.
Insert dummy text
Making a nice web story takes time but right now we are just going to familiarize ourselves with the template without thinking to much about the content so we use sample images and dummy text to see how text and images look together.
Here are a couple of dummy text generators. You can find text generators by googling ‘lorem ipsum’ or ‘dummy text generator’.
Or you can try this monthy python generator. Naughty words might appear!
Add images
The images in your media library can be published at different sizes.
Add some paragraphs, headings and images to make your page. Then save a draft and preview the page. You should see text and images going all the way out to the edge of the screen. Nice for images, not so much for text which is just too wide.
For images you want to display in full width first insert the image, then click on it and in the settings for the image (right panel) make sure ‘Image size’ is set to ‘Full size’.
You might want to display some images in a smaller size and with the same margin and max-width as the text (described below). In that case first set ‘Image size’ to medium and then you need to add a custom CSS class that adds this image to the elements targeted by the chuck of CSS further down on the page. In the settings (right side panel) for this image click on ‘Advanced’. Then in ‘additional CSS class(es)’ write the word ‘contain’.
Add margin and max width to the text with CSS
This will not give you deep insight into CSS, but rather some code for you to copy paste into your own project. If you want to learn CSS try codeacademy, w3schools or MDN.
So, the CSS will point to a bunch of text elements on the page (parapgraphs, headings etc) and limit their width using 2 CSS rules, margin and max-width. Copy this code into the CSS panel on your site:
.full-width-content .container.grid-container .entry-title, .full-width-content .container.grid-container p, .full-width-content .container.grid-container h1, .full-width-content .container.grid-container h2, .full-width-content .container.grid-container h3, .full-width-content .container.grid-container h4, .full-width-content .container.grid-container h5, .full-width-content .container.grid-container h6, .full-width-content .container.grid-container h7, .contain{
margin-left: 20%;
max-width: 600px;
}
@media screen and (max-width: 550px)
{
.full-width-content .container.grid-container .entry-title, .full-width-content .container.grid-container p, .full-width-content .container.grid-container h1, .full-width-content .container.grid-container h2, .full-width-content .container.grid-container h3, .full-width-content .container.grid-container h4, .full-width-content .container.grid-container h5, .full-width-content .container.grid-container h6, .full-width-content .container.grid-container h7, .contain{
margin-left: 4%;
margin-right: 4%;
}
}This code will target most text elements appearing within any page on your site that uses a full width content container. If you encounter elements that position themselves to the full width and tha needs to be limited in width you need to find this elements selector. If you are a first year MOK1800 student email gauheg@oslomet.no, if you are a MOKV2400 student you should try to find the selector yourself using the inspector, and then email me if you are stuck.
Add some margin above the page title if necessary
On my page the page title was squeezed to close to the header for my liking so I added som top margin with the following CSS:
#page{
padding-top: 2em;
}