phikai

Justin Peacock

<p>Show your work in high resolution, responsive device mockups using only shortcodes. Wrap images, videos, or any other content within a few simple shortcodes to display them within any of the pre-packaged devices mockups, which are easily selectable from within the editor.</p>
<p><a href="https://devicemockupswp.com/" rel="nofollow ugc">Documentation</a></p>
<h4>Available shortcodes</h4>
<ul>
<li>[device][/device]</li>
<li>[browser][/browser]</li>
</ul>
<h4>Device Attributes</h4>
<ul>
<li>type: imac|iphone6|iphone6-plus|iphone5s|iphone5|s3|lumia920|ipad|nexus7|surface</li>
<li>color: black|white|gold|silver</li>
<li>orientation: portrait|landscape</li>
<li>stacked: open|closed</li>
<li>position: left|right</li>
<li>link</li>
<li>width: (px or %)</li>
<li>hide: left|right</li>
<li>scroll: false</li>
<li>gallery: false</li>
</ul>
<h4>Browser Attributes</h4>
<ul>
<li>type: chrome|firefox|safari</li>
<li>link</li>
<li>width: (px or %)</li>
<li>gallery: false</li>
</ul>
<h4>Creating a Gallery</h4>
<ul>
<li>Add gallery=”true” to your device|browser shortcode</li>
<li>Add your images within your device</li>
<li>Add a <code><div></code> around each image within the device</li>
</ul>
<p>I’m working to simplify this process but for now, this will get your galleries working.</p>
<p>See <a href="https://devicemockupswp.com/gallery-slider/" rel="nofollow ugc">Gallery Slider</a></p>
<h4>Recommended Image Sizes</h4>
<ul>
<li>iPhone 6 – 1334×750</li>
<li>iPhone 6 Plus – 1920×1080</li>
<li>iPhone 5s – 1136×640</li>
<li>iPhone 5 – 640×1136</li>
<li>iPad – 2048×1536</li>
<li>iMac – 1920×1200</li>
<li>Macbook Pro – 1440×900</li>
<li>Galaxy S3 – 720×1280</li>
<li>Nexus 7 – 1920×1200</li>
<li>Surface – 1920×1080</li>
<li>Lumia 920 – 768×1280</li>
<li>Chrome – 1440×900</li>
<li>Firefox – 1440×900</li>
<li>Safari – 1440×900</li>
</ul>
<h4>Bugs:</h4>
<ul>
<li><a href="https://wordpress.org/support/plugin/device-mockups" rel="ugc">Report an issue</a></li>
</ul>
<h4>Questions/Comments</h4>
<ul>
<li>https://byjust.in/contact/</li>
</ul>


Device Mockups

Show your work in high resolution, responsive device mockups using only shortcodes.

Mijanur Rahman

<p>Easily hide and show Gutenberg blocks based on the screen size to create responsive website layouts. With Responsive Block Visibility Swap, you can optimize your content for different devices and enhance the user experience.</p>
<h3>What’s Coming Next</h3>
<ul>
<li>
<p>Additional Device Support:<br />
Get ready for enhanced flexibility! In the upcoming update, we’re planning to introduce additional device support, allowing you to define more devices for precise control over block visibility. We have added support for mobile, tablet, and desktop devices and will be adding mobile landscape, tablet landscape, laptop, and widescreen support in the future.</p>
</li>
<li>
<p>Adjustable Media Query Width:<br />
Fine-tune your responsive layout like never before! We’re also planning to include the ability to adjust the media query width for each device, giving you greater control over how your blocks behave across different screen sizes. Whether you prefer pixel-perfect precision or a more fluid design, this feature will empower you to optimize your content for any device.</p>
</li>
</ul>
<p>*Stay Updated:</p>
<p>Keep an eye out for future announcements and updates as we work to bring these exciting features to life. We’re committed to providing you with the tools you need to create exceptional, responsive content with ease.</p>
<h3>Feedback and Suggestions</h3>
<p>Your feedback is invaluable to us! If you have any thoughts, ideas, or suggestions for how we can improve our plugin or make these upcoming features even better, we’d love to hear from you. Please don’t hesitate to reach out to our team with your input.</p>
<h3>Donate</h3>
<p>Your willingness to donate or help others is truly appreciated and can bring joy to those in need. Thank you for considering it!</p>


Responsive Block Visibility Swap

Easily hide and show Gutenberg blocks based on screen size to create responsive website layouts.

Device Mockups vs Responsive Block Visibility Swap