Genesis Blocks

Create effective content faster.

You are here: Home / Device Mockup Block

Device Mockup Block

This feature requires the Genesis Blocks Pro plugin which is available through a Genesis Pro subscription.

The Device Mockup block allows you to quickly and easily showcase how your designs look on a smartphone or tablet. You can choose the device type, device color, and device orientation. This block also includes several settings to determine how your images look within the devices.

Additionally, the Layouts block includes several pre-designed sections that feature the Device Mockup block (shown in the image below) making it quick and easy to build your pages.

Table of Contents:

Example of the Device Mockup block within the Layouts block

Click image to enlarge

Device settings

Device Settings in the Device Mockup block

Click image to enlarge

  1. Device Type: Choose whether your image will be displayed on a phone or tablet.
  2. Device Color: Choose a black or white device.
  3. Device Orientation: Choose to display the device vertically or horizontally.
  4. Enable Drop Shadow: Enable/disable the gray shadow that appears around the outside of the device.
  5. Device Max Width: Set the maximum width for the device.
  6. Device Border Width: Choose how wide the device border should be. When set to 0, the default width will be used. The border will become thicker as the number increases. In the example image above, the border width is set to 0 which is the default width.
  7. Device Border Radius: Choose how rounded the corners of the device should be. When set to 0, the corners will be slightly rounded. The corners will become more rounded as the number increases. In the example image above, the border radius is set to 0.

Background Image settings

Background Image settings in the Device Mockup blockc

Click image to enlarge

  1. Select Image: Click the Select Image button to select an image from your media library or to upload a new one. Alternatively, you can click directly on the device mockup to add the image.
  2. Focal Point: The focal point determines which part of the image is the most important or the area that you want to highlight. Click and drag the circle indicator that appears on the image (shown in the image above) until it’s at the desired focal point. Or you can enter an exact position in the next setting.
  3. Horizontal/Vertical pos.: If you’d rather use an exact focal point (instead of clicking and dragging the circle as described above), enter the horizontal and vertical position percentage values here.
  4. Image Opacity: Adjust the opacity (or transparency) of the image inside the device mockup. The lower the number, the more transparent the image will be.
  5. Fixed Background: Enable this option if you don’t want the image inside the device mockup to scroll with the page. In other words, when this option is enabled, the image will remain fixed into one place while the rest of the page scrolls.
  6. Image Display:Choose how the image will be displayed in the device mockup. You can choose from the following 3 options:
    • Auto: The background image is displayed in its original size. When an image that’s larger than the device mockup is added, only a portion of the image will show.
    • Cover: The background image is scaled to be as large as possible so it covers the entire container without stretching the image. The image may be cropped either vertically or horizontally so that no empty space remains.
    • Contain: The background image is scaled to be as large as possible without cropping or stretching the image. The image will be fully visible.

Advanced settings

Advanced Settings in the Device Mockup block

Click image to enlarge

  1. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the block. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.