{"id":2023,"date":"2021-06-21T06:47:05","date_gmt":"2021-06-21T06:47:05","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2023"},"modified":"2023-02-22T09:31:17","modified_gmt":"2023-02-22T09:31:17","slug":"from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/","title":{"rendered":"From Design Tool to WordPress [Photoshop, Sketch or Other] &#8211; Monday Masterclass"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2023\" class=\"elementor elementor-2023\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1202d089 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1202d089\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-2dd92c8d\" data-id=\"2dd92c8d\" 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-1c068037 elementor-widget elementor-widget-video\" data-id=\"1c068037\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=bd6agRxR5Sk&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\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-6cf9f611 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6cf9f611\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\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-6ed520aa\" data-id=\"6ed520aa\" 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-6c92be3d elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"6c92be3d\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1821\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1821\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1822\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1822\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1821\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1821\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1821\" tabindex=\"0\" hidden=\"false\"><p>Want to go from design prototype to a live WordPress website in the fastest way possible?<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1822\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1822\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1822\" tabindex=\"0\" hidden=\"hidden\"><p>whether you prefer to create your<br \/>website mock up on Photoshop or sketch<br \/>once it&#8217;s done and you&#8217;ve got your<br \/>clients approval you still have to<br \/>transfer your design to the actual site<br \/>in this Monday masterclass we&#8217;ll be<br \/>showing you our recommended process for<br \/>transferring your designs to your<br \/>WordPress website<br \/>moving from PSD sketch Wix and any other<br \/>tool to WordPress and element or in the<br \/>smoothest fastest and most efficient way<br \/>now you should know there is no magic<br \/>button to press for converting from one<br \/>tool to WordPress<br \/>however since elemental is so<br \/>user-friendly we&#8217;ll show you just how<br \/>easy it is to perfectly recreate your<br \/>design in no time and this is actually<br \/>the process that our designers used to<br \/>create elemental templates they first<br \/>design it on sketch and then recreate it<br \/>in elemental let&#8217;s get started this is<br \/>the approved draft of the brand new<br \/>template kit our designers will be<br \/>publishing very soon which makes you<br \/>guys some of the very first people in<br \/>the world to see this sneak preview it<br \/>doesn&#8217;t matter if you use sketch<br \/>Photoshop Adobe XD or any of the tool<br \/>the process is exactly the same and<br \/>we&#8217;re going to take this prototype and<br \/>recreate it in elemental now when<br \/>building this prototype our designers<br \/>already had elementals widgets in mind<br \/>and we suggest that you do the same<br \/>because it will save a lot of time for<br \/>example to create this section here I&#8217;ll<br \/>use one section for the hero and add a<br \/>couple of headings and to create this<br \/>section over here I&#8217;ll use a section<br \/>with the shape divider effect to get<br \/>these angled lines and I&#8217;ll use some<br \/>image box widgets to create these<br \/>elements here so let&#8217;s get cracking and<br \/>create this page using elemental step<br \/>number one preparation as you can see<br \/>we&#8217;ve already prepared all the visual<br \/>assets the images and icons we&#8217;ll be<br \/>using later we&#8217;ve created a new page and<br \/>we&#8217;re<br \/>editing it in Elementor in the page<br \/>settings I&#8217;ve already named the page and<br \/>sets our page layouts to elements or<br \/>canvas for those of you who prefer to<br \/>preset your colors and fonts we&#8217;ll do<br \/>this right now by clicking on the menu<br \/>icon or hamburger and select the color<br \/>picker we already know what colors we&#8217;ll<br \/>be using<br \/>so we&#8217;ll select each color dial in or<br \/>paste in the new color code from our<br \/>Photoshop or sketch file and click apply<br \/>and the same goes for the fonts for this<br \/>particular page we&#8217;re using google fonts<br \/>but you can just as easily upload a<br \/>custom fonts into elemental step to<br \/>translate our design into Elementor<br \/>let&#8217;s kick off by adding our first<br \/>section a single column section in the<br \/>Navigator will give it the appropriate<br \/>name hero now we&#8217;ll go to the Edit panel<br \/>and in the style tab we&#8217;ll add our hero<br \/>image that we&#8217;ve already resized in<br \/>Photoshop we want this in the middle so<br \/>we&#8217;ll set the position to Center Center<br \/>set the attachment to fixed and we&#8217;ll<br \/>also enable the scrolling effects and go<br \/>into the scale parameters and have the<br \/>direction to scale down and the<br \/>scrolling speed to 3 and we also want<br \/>the viewpoint to be from the bottom<br \/>these are things that we&#8217;ve already<br \/>discussed in the design meetings in the<br \/>background overlay settings will<br \/>recreate the gradient from our sketch<br \/>file by using the almost black for the<br \/>first color and the blue or bluish<br \/>violet with a little transparency for<br \/>the second color now we&#8217;ll go to the<br \/>Layout tab and set the section width to<br \/>screens and set the minimum height to<br \/>column we&#8217;ll drag a heading widget<br \/>and then duplicate it will hop over to<br \/>the editor panel for the top heading and<br \/>will paste the text believe in yourself<br \/>from our sketch file set the HTML tag to<br \/>h2 and alignment to Center and the style<br \/>tab we&#8217;ll pick our yellow color for the<br \/>text and then in the typography settings<br \/>will select the Helvetica font and set<br \/>it to 30 pixels set the weight to 300<br \/>transform to capitalize and the font<br \/>style to oblique for the second heading<br \/>over here we&#8217;ll go to the content tab<br \/>and paste the text be the best you can<br \/>be set the HTML tag to h2 and the<br \/>alignment to Center in the style tab<br \/>we&#8217;ll set the text color to white then<br \/>in the typography settings will select<br \/>the racing sans 1 font set it to 110<br \/>pixels set the weight to 400 transform<br \/>to uppercase and let&#8217;s tweak the line<br \/>height to about there we also need to<br \/>add a button which will drag down here<br \/>now we&#8217;ll paste our text our classes<br \/>align it to center we&#8217;ll add an icon<br \/>from the library and set it to appear<br \/>after the text<br \/>in the buttons style tab will go into<br \/>the typography settings and we&#8217;ll select<br \/>our racing sans one font set it to 18<br \/>pixels set the weight to 400 and<br \/>capitalized will set the normal view of<br \/>the button with the text in our violet<br \/>color and the background in the yellow<br \/>and we&#8217;ll select the opposite colors for<br \/>the hover effect here we&#8217;ll have to use<br \/>a bit of gut feeling it looks like we&#8217;re<br \/>gonna need some padding and we&#8217;ll do<br \/>that in the Advanced tab and we&#8217;ll add<br \/>about 50 pixels of padding to the top<br \/>here as you can see we need to tidy up<br \/>the column that&#8217;s holding the widgets<br \/>here in our section and we&#8217;ll do that by<br \/>selecting the column and in the editor<br \/>we&#8217;ll select the vertical alignment to<br \/>middle and set the widget space to 30<br \/>pixels in the Advanced tab we&#8217;ll add<br \/>about 250 pixels of padding to the left<br \/>and the right and add 100 pixels to the<br \/>top okay now we&#8217;ll save this draft<br \/>before moving on to the next step step 3<br \/>Corrections for responsive views the<br \/>importance of responsive views and how<br \/>to adapt your web designs to fit the<br \/>screens on various devices is something<br \/>we&#8217;ve spoken about in a previous<br \/>masterclass and just as we emphasized<br \/>then the most efficient practice is to<br \/>adapt our designs for responsive views<br \/>after each section rather than after a<br \/>full page in responsive mode I&#8217;ll start<br \/>with the tablet view and set the<br \/>sections minimum height to 70 vertical<br \/>height or VH we also want to make sure<br \/>that the scrolling settings for the<br \/>sections background are the same now<br \/>we&#8217;ll go to the column settings and set<br \/>the width to 100% and in the advanced<br \/>setting we&#8217;ll set the padding on both<br \/>sides to 15% that should look nice now<br \/>we&#8217;ll scale the size of the top heading<br \/>to around 20 pixels and then the size of<br \/>the second heading to 72 pixels and<br \/>since there are no changes for the<br \/>button we&#8217;ll save the draft and move on<br \/>to the mobile view again we&#8217;ll start<br \/>with the section here we calculated a<br \/>minus 90 pixels to the top margin and<br \/>we&#8217;ll add padding to the top and bottom<br \/>of 25%<br \/>we&#8217;ll then go to the column and add 5%<br \/>of padding all around now we&#8217;ll scale<br \/>the size of the second heading to 55<br \/>pixels and there&#8217;s not much left to<br \/>change with the button in the mobile<br \/>view except for perhaps getting rid of<br \/>the additional padding in the Advanced<br \/>tab which we&#8217;ll do by setting it all to<br \/>zero will save our draft and just like<br \/>that we&#8217;ve translated our entire hero<br \/>section across our three different views<br \/>we haven&#8217;t used an ounce of code we<br \/>haven&#8217;t had to change anything in our<br \/>original design and even if we did we<br \/>can make those changes on the fly and<br \/>see the results instantly in front of us<br \/>now having just seen how easy and<br \/>intuitive this process is many of you<br \/>might be getting that itch need to ask<br \/>why don&#8217;t we create these prototypes or<br \/>drafts or mock-ups directly in elemental<br \/>and the truth is you can you can design<br \/>and create your page build elements even<br \/>print it all to PDF and send drafts to<br \/>your client however the vast majority of<br \/>designers prefer to concentrate all of<br \/>their trial and error in a safe zone so<br \/>tools like sketch Adobe XD in Photoshop<br \/>our environments that the designers are<br \/>well-acquainted with they rely on them<br \/>because of the flexibility that they<br \/>offer designers when they want to play<br \/>around with ideas and need to see<br \/>everything all at once all of those<br \/>assets across the entire site and who<br \/>can blame them<br \/>elemental was created by designers who<br \/>not only understand the need for this<br \/>safe zone<br \/>they rely on it themselves this is<br \/>precisely why it was designed to combine<br \/>the flexibility of the safety zones with<br \/>the ability to see what the results<br \/>would look like on various devices in<br \/>real time ok so moving on we&#8217;ll add a<br \/>new section we&#8217;ll set it to full width<br \/>with no gap between the columns with a<br \/>minimum height of 90 pixels and we&#8217;ll<br \/>set the column position to top now<br \/>notice that the bottom border of this<br \/>section is at an angle we&#8217;ll create this<br \/>effect in the style tab using<br \/>shape divider feature will select bottom<br \/>and we want it to tilt we already know<br \/>that we want it to be blue and we know<br \/>that it should be 50 pixels high and<br \/>we&#8217;re going to flip it we also want it<br \/>to float over the hero section so we&#8217;ll<br \/>go to the Advanced tab and drop the top<br \/>margin by minus 140 pixels and then add<br \/>will create the downward button by<br \/>dragging a button widget and erasing the<br \/>text we&#8217;ll align it to the right and<br \/>select our icon from the library<br \/>in the style tab under typography will<br \/>enlarge the font size to 25 pixels to<br \/>make that icon a bit bigger next we&#8217;ll<br \/>select the same colors as we did in the<br \/>previous button and we&#8217;ll add some<br \/>padding<br \/>now let&#8217;s add some box-shadow and raise<br \/>the blur a bit we also want this button<br \/>to overlap the next section so we&#8217;ll set<br \/>the bottom margin to minus 15<br \/>on to the next section we&#8217;ll set it to<br \/>be 1200 pixels wide like our hero<br \/>section in the style tab we&#8217;ll set the<br \/>background to a solid blue<br \/>the bottom border of this section is at<br \/>an angle and will create it again by<br \/>going to the style tab using the shape<br \/>divider feature and we&#8217;ll select bottom<br \/>and set it to tilt at 30 pixels high we<br \/>can create the yellow border by<br \/>selecting yellow as the colour of the<br \/>divider and will flip it will also add<br \/>the padding we need in the Advanced<br \/>section and set it to 50 pixels on the<br \/>bottom now we&#8217;ll link the downward<br \/>button we made to this section by<br \/>quickly setting up an anchor widget<br \/>we&#8217;ll name it<br \/>icons and then go to the button and in<br \/>the editor under content tab we&#8217;ll set<br \/>the link to icons<br \/>and done now to build up the icon<br \/>structure itself we&#8217;ll drag an inner<br \/>section widget like we mentioned before<br \/>and we&#8217;ll use the same width settings as<br \/>the section 1200 pixels and I&#8217;ll add the<br \/>the bottom<br \/>we&#8217;ll use image boxes here because they<br \/>include a heading and a description and<br \/>I&#8217;ll select my image<br \/>I&#8217;ll paste in the heading and then the<br \/>description and in the style tab will<br \/>reduce the spacing of the image to zero<br \/>and the width to 22% then we&#8217;ll set the<br \/>spacing of the title to six the color to<br \/>white<br \/>and in typography we&#8217;ll set the font to<br \/>racing sans one size 24 weight 400 and<br \/>uppercase and then we&#8217;ll set the<br \/>description color to white and the font<br \/>to Helvetica and set it to 16 pixels and<br \/>we&#8217;ll set the weight to 200 transform to<br \/>capitalize and the font style to oblique<br \/>now this would be a perfect time to<br \/>review what we&#8217;ve done in responsive<br \/>mode and make the necessary Corrections<br \/>exactly like we saw earlier now with<br \/>your permission we&#8217;ll skip to the next<br \/>stage so that with everything looking<br \/>great and responsive you will just<br \/>duplicate the icon and text we just<br \/>created change the icons and the text to<br \/>what they should be and this is the<br \/>result in responsive mode again<br \/>adjusting designs across the various<br \/>responsive views section by section<br \/>saves us time and headaches and what&#8217;s a<br \/>surprise we&#8217;re done with this section<br \/>too now from here on out so the process<br \/>will only get quicker we can duplicate<br \/>sections save widgets as global widgets<br \/>save entire pages as templates and use<br \/>them as a foundation for the rest of the<br \/>pages in our website all this to save<br \/>having to recreate elements from scratch<br \/>and without having to use any code this<br \/>week we saw how fast and simple it is to<br \/>take your designs from sketch Photoshop<br \/>or any other tool that you prefer and<br \/>recreate them using Elementor for your<br \/>WordPress website to date anyone who has<br \/>tried using Elementor for this process<br \/>has continued to work this way and never<br \/>look back<br \/>we hope this masterclass has been<br \/>helpful and inspiring as web designers<br \/>and creators were sure that you&#8217;ll agree<br \/>we&#8217;re always happy to hear of ways to<br \/>get the job done faster and more<br \/>efficiently and we&#8217;d love to hear any<br \/>more ideas tips and tricks that could<br \/>help other users speed up this process<br \/>even further after all our goal is to be<br \/>the best at helping others excel at<br \/>their craft<br \/>speaking of which make sure you never<br \/>miss a masterclass by clicking on the<br \/>subscribe button and tap that bell<br \/>looking forward to seeing you all next<br \/>week thanks for watching<br \/><br \/><\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\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>Overview Transcript Overview Want to go from design prototype to a live WordPress website in the fastest way possible? Transcript whether you prefer to create your website mock up on Photoshop or sketch once it\u2019s done and you\u2019ve got your clients approval you still have to transfer your design to the actual site in this [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4211,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4,6],"tags":[41],"class_list":["post-2023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","category-forms","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>From Design Tool to WordPress [Photoshop, Sketch or Other] - Monday Masterclass - Academy<\/title>\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\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"From Design Tool to WordPress [Photoshop, Sketch or Other] - Monday Masterclass - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Want to go from design prototype to a live WordPress website in the fastest way possible? Transcript whether you prefer to create your website mock up on Photoshop or sketch once it\u2019s done and you\u2019ve got your clients approval you still have to transfer your design to the actual site in this [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T06:47:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:31:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1083\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"From Design Tool to WordPress [Photoshop, Sketch or Other] - Monday Masterclass - Academy","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\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/","og_locale":"en_US","og_type":"article","og_title":"From Design Tool to WordPress [Photoshop, Sketch or Other] - Monday Masterclass - Academy","og_description":"Overview Transcript Overview Want to go from design prototype to a live WordPress website in the fastest way possible? Transcript whether you prefer to create your website mock up on Photoshop or sketch once it\u2019s done and you\u2019ve got your clients approval you still have to transfer your design to the actual site in this [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/","og_site_name":"Academy","article_published_time":"2021-06-21T06:47:05+00:00","article_modified_time":"2023-02-22T09:31:17+00:00","og_image":[{"width":1920,"height":1083,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-2.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"From Design Tool to WordPress [Photoshop, Sketch or Other] &#8211; Monday Masterclass","datePublished":"2021-06-21T06:47:05+00:00","dateModified":"2023-02-22T09:31:17+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/"},"wordCount":2451,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-2.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout","Forms"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/","url":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/","name":"From Design Tool to WordPress [Photoshop, Sketch or Other] - Monday Masterclass - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-2.jpg","datePublished":"2021-06-21T06:47:05+00:00","dateModified":"2023-02-22T09:31:17+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-2.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Monday-Master-Class-2.jpg","width":1920,"height":1083},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/from-design-tool-to-wordpress-photoshop-sketch-or-other-monday-masterclass\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"From Design Tool to WordPress [Photoshop, Sketch or Other] &#8211; Monday Masterclass"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2023"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2023\/revisions"}],"predecessor-version":[{"id":9531,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2023\/revisions\/9531"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4211"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}