Do you want to showcase your portfolio in laptop, tablet and mobile phone device mockups? This video tutorial from Permaslug will walk you through. Here's step by step instructions, along with a couple of points I found out along the way:
- If you haven't already, add in the 'code snippet' plugin to WordPress
- Clone the example CSS snippet, paste in the code from here. Hint, ensure you leave the header and footer code from the example and just paste over the highlighted text in this image:
- Under the code you have just pasted, select 'Run Snippet Everywhere' and save it.
- Create a second snippet (no need to clone anything here) and paste in the code from here
- Set to 'Run Snippet Everywhere' as well.
- Devices that are currently supported:
- You'll need the names and colours for the short codes you are about to apply
- Now on any Oxygen page, add in a shortcode wrapper and enter the following shortcode
- Note that device needs to be in lowercase, as does the colour (not color). Be sure to explicitly include a colour, otherwise the frontend display may not work correctly.
- You can now add content and it will be displayed within the device. It's best to wrap the content you want to display in a div. The content is unlikely to display correctly in the backend, so wrapping in a div allows you to move it 'in and out' of the shortcut wrapper to see what it actually looks like. Here's what I did with an image:
- The image is not displaying, but if you look on the frontend it is right there in the device. Note you may need to change the 'size' of the image to have it displayed correctly. As it stands this is what you will see:
- There is a scroll bar on the right-hand side which you may want to remove. Add a code block within shortcode-wrapper (not the div) and enter the following CSS code:
.device-frame div::-webkit-scrollbar {
display: none;
}
Many thanks to the following authors and resources:
Device Mockups in Oxygen Builder | Permaslug
Devices.css - Modern devices in pure CSS (picturepan2.github.io)
