{"id":29876,"date":"2019-09-02T11:31:04","date_gmt":"2019-09-02T11:31:04","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=29876"},"modified":"2025-12-30T01:58:12","modified_gmt":"2025-12-29T23:58:12","slug":"from-prototype-to-wordpress","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/","title":{"rendered":"How to Convert Your Design Prototype to WordPress"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"29876\" class=\"elementor elementor-29876\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-44492d1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"44492d1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ff4aa3b\" data-id=\"ff4aa3b\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6724ee3 elementor-align-center elementor-mobile-align-justify elementor-widget elementor-widget-global elementor-global-16648 elementor-widget-button\" data-id=\"6724ee3\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.youtube.com\/c\/elementor?sub_confirmation=1\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t\t\t\t\t\t<i class=\"fa fa-youtube\" aria-hidden=\"true\"><\/i>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Subscribe to Our YouTube Channel<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2687953 elementor-widget elementor-widget-text-editor\" data-id=\"2687953\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The process of translating your design prototype into a WP website just got a whole lot easier. Whether you prefer to create your website prototype in Photoshop or Sketch, once it&#8217;s done and you&#8217;ve got your client&#8217;s approval, you still have to transfer your designs to the actual site.<\/p><p>In this blog, learn the best practices for transferring your designs in PSD, Sketch, and any other tool, to WordPress and Elementor in the most efficient way.<\/p><p>What was once built using design platforms can now be done more directly using Elementor&#8217;s functionality. Instead of the laborious process of cutting HTML pieces and pasting them into your site, now, what you see is what you get.<\/p><p>What is the process?<\/p><p>Your design prototype functions as a reference, used side by side with Elementor, with many of the details (Min Height, font, etc.) readily available to be set up in Elementor. The more experience you gain using this process, the more you design in Sketch or Photoshop with Elementor in mind. You take into consideration the boxed grid of Elementor, the weight of your images, CTA button widgets, and other widgets you plan to use.<\/p><p>This way, you often end up adapting the site to what you designed in Sketch or another design tool. In Elementor, there is no conversion process; your design platform seamlessly pastes into WordPress.<\/p><p>Let&#8217;s take a look at the main benefits.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b19f580 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b19f580\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ede5b57\" data-id=\"ede5b57\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-03fbe98 blog-toc elementor-widget elementor-widget-heading\" data-id=\"03fbe98\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b10d8bc blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"b10d8bc\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#why-use-prototype-elementor\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Why You Should Recreate Your Prototype Using Elementor \u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#how-to-convert-prototype-wordpress\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">How to Convert Your Design Prototype to WordPress\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#preparation\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 1: Preparation<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#translate-design\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 2: Translate the Design to Elementor\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#responsive-views\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 3: Corrections for Responsive Views\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#repeating-process\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Step 4: Repeating the Process\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#conclusion\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Conclusion\u200b<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da7f0f5 elementor-widget elementor-widget-menu-anchor\" data-id=\"da7f0f5\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"why-use-prototype-elementor\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e4410d elementor-widget elementor-widget-heading\" data-id=\"0e4410d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why You Should Recreate Your Prototype Using Elementor <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c41a0fd elementor-widget elementor-widget-text-editor\" data-id=\"c41a0fd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li>When building in Elementor in reference to Sketch, you\u2019ll get the same spatial relations, as you can copy-paste the specific amounts (Min Height, etc.).&nbsp;<\/li>\n<\/ul>\n<ul>\n<li>Less work in your design platform, since you can use Elementor\u2019s functionality instead, such as filters and shape dividers.&nbsp;<\/li>\n<\/ul>\n<ul>\n<li>Our Navigator\u2019s layers are familiar to Photoshop veterans, as they are similar to the layers in Photoshop.&nbsp;<\/li>\n<\/ul>\n<ul>\n<li>The Sketch environment is similar to the web environment, so the live version will allow you to move things around freely, you will get web colors, and the transition between your Sketch layout and the Elementor WP site is seamless.<\/li>\n<\/ul>\n<ul>\n<li>At the stage of client feedback, there\u2019s increased flexibility to implement changes.<\/li>\n<\/ul>\n<ul>\n<li>Easier to price projects more accurately, as you can manage your time better.<\/li>\n<\/ul>\n<p>What\u2019s more, clients and designers can gradually agree upon the phases of the project, as they can view the <a href=\"https:\/\/elementor.com\/blog\/wordpress-staging-site\/\">staging<\/a> together before nailing down the live site.&nbsp;<\/p>\n<p>You can make custom-designed websites and ask for premium prices; accomplish the process in record time (depending on your skillset). The design language of the theme does not constrain you. And you can produce highly customized websites with amazing interactions and animations, meaning you can ask for higher compensation.<\/p>\n<p>In sum, you no longer need to prepare many elements for your layout inside your design platform. Instead, you can save time by using Elementor\u2019s design functionality. And after converting your design, you can play around with your design once it is live.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d6d046 elementor-widget elementor-widget-image\" data-id=\"9d6d046\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Screen-Shot-2019-09-01-at-13.05.08-r4q72vojgoyd78d9e5c5zj5t65xt4hr6mb65sugj4y.png\" title=\"Screen Shot 2019-09-01 at 13.05.08\" alt=\"Screen Shot 2019-09-01 at 13.05.08\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dae78a6 elementor-widget elementor-widget-text-editor\" data-id=\"dae78a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Although there is no magic button to press to convert from one tool to WordPress, Elementor is so user-friendly, you&#8217;ll see how easy it is to recreate your design in no time. This is the process our designers use to create Elementor templates. First, they design it in Sketch, then recreate it in Elementor.\u00a0<\/p><p>There are lots of tools out there that claim to be capable of translating your design in PSD to HTML or <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26315\">CSS<\/a> perfectly. Perhaps they can, but we aren&#8217;t aware of any. They help, sure. But they fall short when it comes to things like <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26314\">responsive<\/a> adaptation, and using columns, etc. Otherwise, we would be reviewing them right now.<\/p><p>Our designers prefer to use Sketch to work out their design, before translating it into WordPress using Elementor.<\/p><p>Many of our users are still debating the pros and cons of using Photoshop, Sketch, or even Adobe XD for prototyping their website designs. As interesting a discussion this is, we&#8217;ll focus on tips and tricks that will help speed up the process of translating your design to WordPress.\u00a0<\/p><p>This is a process that is the same for everyone, no matter your software of preference. That said, knowing the limitations of your medium is essential to this and every other creative process.\u00a0<\/p><p>When building your prototype, our designers already had Elementor&#8217;s widgets in mind.\u00a0<\/p><p>Knowing what widgets you have available, knowing the flexibility of the available widgets, what animations and motion effects you could be adding is vital to your workflow. As you&#8217;re drafting, think of various ways you can build the elements you&#8217;re designing later in Elementor, using widgets and sections to create each element.<\/p><p>Be sure to watch the <a href=\"https:\/\/www.youtube.com\/watch?v=bd6agRxR5Sk&amp;feature=youtu.be\" target=\"_blank\" rel=\"noopener\">video<\/a> for specific settings and more details.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3275a8e elementor-widget elementor-widget-image\" data-id=\"3275a8e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Screen-Shot-2019-09-01-at-12.53.49-r4q75fsq2gggt0ngg95lrvwzdxbs2twvmz3qtyny9y.png\" title=\"Screen Shot 2019-09-01 at 12.53.49\" alt=\"Screen Shot 2019-09-01 at 12.53.49\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-37c3779 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"37c3779\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-df10e48\" data-id=\"df10e48\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fccb9e1 elementor-widget elementor-widget-menu-anchor\" data-id=\"fccb9e1\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"how-to-convert-prototype-wordpress\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a361fa4 elementor-widget elementor-widget-heading\" data-id=\"a361fa4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">How to Convert Your Design Prototype to WordPress<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd10153 elementor-widget elementor-widget-menu-anchor\" data-id=\"bd10153\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"preparation\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c81e6e elementor-widget elementor-widget-heading\" data-id=\"9c81e6e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 1: Preparation\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5199c76 elementor-widget elementor-widget-text-editor\" data-id=\"5199c76\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First off, prepare your materials. If you&#8217;re working with Photoshop, you can use the Save for Web and Devices option. This helps keep the file size low and speeds up the page&#8217;s loading time.<\/p><p>Under <strong>File<\/strong>, go to<strong> Save for Web and Devices<\/strong>, and in the dialog window, select the 2-Up option to see your image alongside the original, so that you can appreciate the differences in file size and download storage.<\/p><p>We prefer to use PNG 24 because they tend to preserve better image quality when reduced to smaller-sized files. The other advantage is, of course, their ability to handle transparency.<\/p><p>Regarding the quality level, our preference is always to stick to the middle values, between 40 and 60. You may find that a very high quality leaves you with images that are too heavy.\u00a0<\/p><p>When it comes to icons and logos, we tend to prefer SVG files, especially since the latest version of Elementor allows you to upload them.\u00a0<\/p><p>If you need to change the size of the images, you have the parameters in the video.<\/p><p>And all that&#8217;s left to do is save your settings. Then allocate a name and destination of your web-ready image, and click save.\u00a0<\/p><p>We recommend that you create folders for your images to keep everything in order and create a preset.<\/p><p>If you&#8217;re looking to do this as a batch action and save you even more time, Adobe actually recommends you do so using their Image Processor Pro. Though some suggest using Photoshop&#8217;s action recording to create a batch process.<\/p><p>Prepare all the visual assets &#8211; images and icons.<\/p><p>Then after you&#8217;ve created a new page, edit it in Elementor. In the page settings, name the page and set your page layout to Elementor Canvas. Keep the navigator open to make life easier.<\/p><p>For those of you who prefer to preset your colors and fonts, do this right away by clicking on the menu icon, or hamburger, and select the Color Picker. Select each color, dial-in or paste the new color code from your Photoshop or Sketch file or and click \u2018apply&#8217;. The same goes for the fonts.<\/p><p>For this particular page, we used Google fonts, but you can just as easily upload a custom font.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-504f457 elementor-widget elementor-widget-image\" data-id=\"504f457\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Screen-Shot-2019-09-01-at-15.06.33-r4q77pkol1kev3co6qi5ata32g4pohxiy7uzl1apbe.png\" title=\"Screen Shot 2019-09-01 at 15.06.33\" alt=\"Screen Shot 2019-09-01 at 15.06.33\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-e2aa85e elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e2aa85e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c29e5fc\" data-id=\"c29e5fc\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-909dafa elementor-widget elementor-widget-menu-anchor\" data-id=\"909dafa\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"translate-design\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32800e2 elementor-widget elementor-widget-heading\" data-id=\"32800e2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 2: Translate the Design to Elementor<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d9913f elementor-widget elementor-widget-text-editor\" data-id=\"0d9913f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For this step, we\u2019ve added our first section \u2014 a single column section \u2014 and named it \u2018<strong>Hero<\/strong>\u2019. In the style settings, we added the image, which was resized beforehand. We edited other parameters like the position, the attachment, the scrolling effects, and the background overlay. We\u2019ve also added a button and edited it\u2019s text and setting to fit our needs.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05644a7 elementor-widget elementor-widget-image\" data-id=\"05644a7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"472\" height=\"305\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=472,h=305\/blog\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-01-at-13.40.32.png\" class=\"attachment-large size-large wp-image-29897\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=472\/blog\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-01-at-13.40.32.png 472w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2019\/09\/Screen-Shot-2019-09-01-at-13.40.32-300x194.png 300w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7ca3708 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7ca3708\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1de1bc1\" data-id=\"1de1bc1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a042171 elementor-widget elementor-widget-menu-anchor\" data-id=\"a042171\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"responsive-views\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b30d8d elementor-widget elementor-widget-heading\" data-id=\"0b30d8d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 3: Corrections for Responsive Views<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d5fe0f elementor-widget elementor-widget-text-editor\" data-id=\"6d5fe0f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The importance of responsive views and how to adapt your web designs to fit the screens on various devices is something we\u2019ve spoken about in a previous Masterclass. And just as we emphasized then, the most efficient practice is to adapt our design for responsive views after each section, rather than after a full page.\u00a0<\/p><p>By playing around with margins and padding at both the section and column level, you can get great results. We\u2019ve managed to translate our entire Hero section across three different views. We haven\u2019t used an ounce of code. We haven\u2019t had to change anything in our original design, and even if we did, we can make those changes on the fly and see the results instantly in front of us.<\/p><p>Many of you might be getting that itching need to ask why we don\u2019t create these prototypes or drafts directly in Elementor? The truth is that you can. You can design your page, build elements, even print it all to PDF and send drafts to your client. However, the vast majority of designers prefer to concentrate all of their trial and error in a safe zone. Tools like Sketch, Adobe XD, and Photoshop, are environments that designers are well acquainted with. They rely on them because of the flexibility they offer designers when they play around with ideas and need to see everything, all the assets across the entire site.\u00a0<\/p><p>Elementor was created by designers who not only understand the need for this safe zone; they relied on it themselves. This is precisely the reason why it was designed to combine the flexibility of the safety zones with the ability to see what the results would look like, on various devices in real-time.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6081f6 elementor-widget elementor-widget-image\" data-id=\"d6081f6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Screen-Shot-2019-09-01-at-13.05.47-r4q71ni4jh9w1k5fk48p8cb591zk2pvss8ic8ua1g2.png\" title=\"Screen Shot 2019-09-01 at 13.05.47\" alt=\"Screen Shot 2019-09-01 at 13.05.47\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8e34e91 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8e34e91\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ab29fbb\" data-id=\"ab29fbb\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-774ee28 elementor-widget elementor-widget-menu-anchor\" data-id=\"774ee28\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"repeating-process\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6daeda9 elementor-widget elementor-widget-heading\" data-id=\"6daeda9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Step 4: Repeating the Process<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-034a438 elementor-widget elementor-widget-text-editor\" data-id=\"034a438\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>From here on out, the process only gets faster. You can duplicate sections, save widgets as global widgets; save entire pages as templates. Use them as a foundation for the rest of the pages on your website \u2014 all this to avoid having to recreate elements from scratch.<\/p><p>Learn in the video how to apply Padding, Margins, Box shadow, and blur to get the desired effect. You can see how to use the Style tab and a shape divider to create all sorts of effects such as the bottom border at an angle. You can experiment with creative ways of using spacing, width, color, <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"26 Best Fonts For Websites &amp; Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"31852\">typography<\/a>, pixels.\u00a0<\/p><p>This would be the perfect time to review what you&#8217;ve done in responsive mode, and make the necessary corrections, exactly like we saw earlier. Again, adjusting designs, across the various responsive views, section by section, saves us time and headaches.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db7c676 elementor-widget elementor-widget-image\" data-id=\"db7c676\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/Screen-Shot-2019-09-01-at-13.05.47-r4q71ni4jh9w1k5fk48p8cb591zk2pvss8ic8ua1g2.png\" title=\"Screen Shot 2019-09-01 at 13.05.47\" alt=\"Screen Shot 2019-09-01 at 13.05.47\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b3efb43 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b3efb43\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-071f0d2\" data-id=\"071f0d2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-92eab88 elementor-widget elementor-widget-menu-anchor\" data-id=\"92eab88\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"conclusion\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-def97ce elementor-widget elementor-widget-heading\" data-id=\"def97ce\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8d682d elementor-widget elementor-widget-text-editor\" data-id=\"d8d682d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This week we saw how fast and simple it is to take your designs from Sketch, Photoshop, or your preferred tool; recreate it using Elementor for your <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-wordpress\/\"   title=\"What is WordPress? Build a Website, Sell, Start a Blog &amp; More (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"26313\">WordPress website<\/a>. To date, anyone who has tried using Elementor for this process has continued to work this way and never looked back.<\/p><p>Getting into the groove of a design process can take some time. By following the steps we outlined in this blog and the video, you should be quickly on your way to converting your design prototypes into stunning WP site using Elementor. Implement your websites sketches or designs lighting fast and with pixel pixel-perfect detail.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>No matter if you work with Photoshop, Sketch, or Adobe XD, now you can seamlessly convert your design prototype to WordPress, using Elementor.<\/p>\n","protected":false},"author":162405,"featured_media":29903,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[37,32],"tags":[79,173],"marketing_persona":[47],"marketing_intent":[49],"class_list":["post-29876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-masterclass","category-design","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Convert A Design Prototype to WordPress | Elementor<\/title>\n<meta name=\"description\" content=\"No matter if you work with Photoshop, Sketch, or Adobe XD, now you can seamlessly convert your design prototype to WordPress, using Elementor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Convert A Design Prototype to WordPress | Elementor\" \/>\n<meta property=\"og:description\" content=\"No matter if you work with Photoshop, Sketch, or Adobe XD, now you can seamlessly convert your design prototype to WordPress, using Elementor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-02T11:31:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-29T23:58:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Simon Shocket\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon Shocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/\"},\"author\":{\"name\":\"Simon Shocket\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\"},\"headline\":\"How to Convert Your Design Prototype to WordPress\",\"datePublished\":\"2019-09-02T11:31:04+00:00\",\"dateModified\":\"2025-12-29T23:58:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/\"},\"wordCount\":1868,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"Monday Masterclass\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/\",\"url\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/\",\"name\":\"How to Convert A Design Prototype to WordPress | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png\",\"datePublished\":\"2019-09-02T11:31:04+00:00\",\"dateModified\":\"2025-12-29T23:58:12+00:00\",\"description\":\"No matter if you work with Photoshop, Sketch, or Adobe XD, now you can seamlessly convert your design prototype to WordPress, using Elementor.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Monday Masterclass\",\"item\":\"https:\/\/elementor.com\/blog\/category\/masterclass\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Convert Your Design Prototype to WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6\",\"name\":\"Simon Shocket\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g\",\"caption\":\"Simon Shocket\"},\"description\":\"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.\",\"sameAs\":[\"http:\/\/simon.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/simon-shocket\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Convert A Design Prototype to WordPress | Elementor","description":"No matter if you work with Photoshop, Sketch, or Adobe XD, now you can seamlessly convert your design prototype to WordPress, using Elementor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Convert A Design Prototype to WordPress | Elementor","og_description":"No matter if you work with Photoshop, Sketch, or Adobe XD, now you can seamlessly convert your design prototype to WordPress, using Elementor.","og_url":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2019-09-02T11:31:04+00:00","article_modified_time":"2025-12-29T23:58:12+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png","type":"image\/png"}],"author":"Simon Shocket","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Simon Shocket","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/"},"author":{"name":"Simon Shocket","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6"},"headline":"How to Convert Your Design Prototype to WordPress","datePublished":"2019-09-02T11:31:04+00:00","dateModified":"2025-12-29T23:58:12+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/"},"wordCount":1868,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png","keywords":["Build","Video"],"articleSection":["Monday Masterclass","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/","url":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/","name":"How to Convert A Design Prototype to WordPress | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png","datePublished":"2019-09-02T11:31:04+00:00","dateModified":"2025-12-29T23:58:12+00:00","description":"No matter if you work with Photoshop, Sketch, or Adobe XD, now you can seamlessly convert your design prototype to WordPress, using Elementor.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2019\/09\/1200x628-outside-9.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/from-prototype-to-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Monday Masterclass","item":"https:\/\/elementor.com\/blog\/category\/masterclass\/"},{"@type":"ListItem","position":3,"name":"How to Convert Your Design Prototype to WordPress"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/6d402e139e63ed6fe22cce3a34a837c6","name":"Simon Shocket","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/308dc65a756b4c53b717191e395d537f081df95d98b8e8a846a9c4aea1b4a496?s=96&d=mm&r=g","caption":"Simon Shocket"},"description":"With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that\u2019s a lot to live up to.","sameAs":["http:\/\/simon.com"],"url":"https:\/\/elementor.com\/blog\/author\/simon-shocket\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/29876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/162405"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=29876"}],"version-history":[{"count":12,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/29876\/revisions"}],"predecessor-version":[{"id":149148,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/29876\/revisions\/149148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/29903"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=29876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=29876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=29876"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=29876"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=29876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}