Loading...

803 psd to html5

This PSD will demo a responsive HTML and CSS website with advanced PSD to HTML features such as Google Maps, all integrated within Photoshop. This PSD uses CSS media queries for 2 target screens with along with responsive assets generated from a single file.

Each page is responsive and uses the size of the design content – not the document. This PSD uses multiple layer tags and effects to demo a complete website export with responsive, dynamic height, multiple pages, JavaScript plugins, and navigation menus.

IMPORTANT: Responsive webpages are considered an advanced output, we strongly recommend you read our online guide to learn how to create responsive webpages - learn more.

File Size

22.3 MB

Download Now

This sample also features JavaScript options to include dynamic scripts such as Google Maps directly in your PSD design. Remember to view source!

Responsive Screens

This example use 2 target screens to create a responsive design to match a desktop and tablet layout. The layout of the webpage will auto-layout to match the given CSS media query. Each media query is generate from the PSD design using Responsive Screen Tags.

  • 700px (tablet)
  • 1200px (desktop)
Learn more about Creating Responsive Screens.

Google Maps

Because Export Kit allows you to customize your HTML5 Content before export, you can add both custom CSS and JavaScript.

Learn more about Using External Files.

Navigation Menus

Nav Menus are a group of anchor links used to direct users to both internal and external pages. Nav Menus are involved in all common designs for both websites and applications.

Web Forms

Export Kit allows you to fully customize your web forms and data to create data-driven websites in a matter of minutes, without coding.

Learn more about Building Web Forms.

Images, Shapes and Text

This sample uses various layer types including folders, images, shapes, text, smart objects and more to create a practical PSD design for a res

Learn more about Layer Support.

Effects and Styles

This sample uses various layer effects and styles to achieve the optimal layout. Effects are used in most common project designs and are easily managed with Export Kit.

You must Enable Layer Effects to use this feature.

Layout and Overflow

With Export Kit you can align your page output and hide the content overflow to create both Flush and Fluid layouts.

Learn more about using Align Output and Hide Overflow with your export.

Testing the PSD

Use Layers views to see the code translation of each layer, or use Exports view to see the output of the document.

IMPORTANT: We recommend you enable Page Tags and Responsive CSS to test this PSD.

Using Exports View

Export the PSD in your required environment to see how shapes are rendered in your output.

Learn more about Using Exports View.
LOGIN NOW: Get instant access to our free Online Training - click here.

Products For WP Professionals


wp_developer

WP Developer Pack

wp_developer

WP Developer Pack (6 Months)

wp_designer

WP Designer Pack (6 Months)

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Advanced Website

A professional multi-page website design with dynamic height.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top