Use Custom Phone Mock in xThunkabel Builder | Chrome Extension

Creator Lounge
,
1

:wave: Hello everyone,

Hope you all are well and safe in this pandemic,
Today i took a try to create a chrome extension, using which i can change default phone mock to iOS (iPhone 8) or Android (Samsung Galaxy Note 5) one a click of a button. I have made this as an experiment, i don’t even know if this is useful or not. But right after it’s done, i thought to share this with you guys. Here is the output

banner-ss
banner-ss1210×81 10.3 KB

banner-ss6
banner-ss61015×297 21.2 KB

Click here to directly downoad the extension, Or visit my webiste (cttricks.com) where i have written a complete blog on how to download and install this extension. Please note that, i haven’t published this extension so you have to follow the manual method to use this extension.

Download and use this extension, Hit the :heart: button if you like this and feel free to write you feedback, suggestions & querys in the comment below.

Enjoy!!

6 Likes
2

awesome guide

3

i might try to add my own resolutions
can i know how u made these?
cant see output on live testing

image
image1320×829 28 KB



i have another question that can i use another resulution… like redmi5
can i edit source code?

4

I’m very lazy to explain something in comments :sweat_smile: But it’s not that complex to understand, You can download and take a look at the soure code of this extension and customise it according to your need. I have put code on github so you can take a look and get codes from there too.

Basically this extension is adding few lines of CSS codes in the header, and rest modifying CSS of mock container using Javascript.

3 Likes
5

well i edited the code aand i added redmi 5 image link but it was total rip

6

any solution?

7

woah this actually works thanks for sharing

8

@cttricks the asset in your website does not exist so icant download the zip file please look into this. thanks

9

You can get files/extension from my GitHub repo

1 Like