1. HTML5 UP

html5up.net provides fully responsive HTML/CSS templates built on clean code and sleek layouts. Ideal for landing pages, personal portfolios, and minimalist websites. Best of all? They’re free under a Creative Commons license.

2. Canva Templates

canva.com/templates offers thousands of free templates for Instagram posts, resumes, presentations, posters, and more. It’s great for quick mockups, mood boards, or when you need print-ready graphics in a pinch.

3. Figma Community

figma.com/community is a goldmine for UI designers. You’ll find wireframes, UI kits, dashboards, mobile layouts, and design systems—all created and shared by fellow designers. Simply duplicate and start editing.

4. Mixo.io – Landing Page Templates

mixo.io/templates offers free landing page templates powered by AI. Whether you’re launching a SaaS product, portfolio, or app, Mixo generates modern, mobile-ready templates you can edit in minutes.

5. Identity Design – Freebies

blog.identitydesign.us/freebies is our curated library of free HTML templates, email layouts, posters, and more—crafted from real-world design projects. Ideal for freelance designers, agencies, and students looking for usable, customizable files.

Final Thoughts

Great design doesn’t always start from scratch. These free resources help you prototype faster, test ideas, and deliver polished results. Bookmark your favorites, tweak to match your brand, and build better—faster.

Explore more freebies at Identity Design Freebies

The post Top 5 Free Design Template Sites Every Designer Should Know first appeared on identity design.

The post Top 5 Free Design Template Sites Every Designer Should Know appeared first on identity design.

body { font-family: Helvetica, sans-serif; } .site-title a { font-family: 'Bebas Neue', cursive; color:#222; } .site-description { color: #555; } .wrap-header { background: transparent; } .yarpp-related { display:none; } h3, .entry-content h3 { font-size: 11pt; } .entry-content .page-item p { font-size: 9pt !important; margin-bottom: 2%; margin-top: 1%; } .page-item { width: unset; display: unset; float: none; border: 0px solid #ccc; } .page-item a { overflow: auto; display: unset;

} .display-posts-listing img { float: none; margin: 0 0 10px 0; width: 100%; border: 1px solid #ccc !important; margin: 0px auto 0px; display: unset; height: 202px; object-fit: cover; }

Get Inspired!

Design Resources

Tools

The post Web Developer / Designer Bookmarks first appeared on identity design.

The post Web Developer / Designer Bookmarks appeared first on identity design.

Woocommerce offers a well designed free template for everyone called, the Storefront. By adding the CSS codes below, you can remove the credits, “Storefront designed by WooThemes” without editing or deleting a line of the core programmings. So instead of deleting anything, you are just hiding the text actually. So it’s a risk free, easy and fast!

Remove “Storefront designed by WooThemes” Credits

Place the CSS line on the WordPress backend where CSS is located:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer .col-full:after { 
 content: "© YOUR COMPANY NAME";
 font-size: 15px;
 color: #777;
 line-height: 140%;
 text-align: center;
 display: block;
 margin: 20px auto;
}

Now you’ll see the line, “Storefront designed by WooThemes” is gone. Feel free to edit the font-size and color of your own.

The post Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme first appeared on identity design.

The post Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme appeared first on identity design.

DEMO: How to Vertically Align Middle with CSS

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

In case if this css isn’t working, you can try as below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak around with different colors of the boxes or texts. Have fun!

The post CSS Vertical Align Center first appeared on identity design.

The post CSS Vertical Align Center appeared first on identity design.

Redirect to Different URL

Copy the code below and paste it to your blank html.

<script language="javascript">
window.location.href="http://YOUR-REDIRECT-PAGE"
</script>

*Replace YOUR-REDIRECT-PAGE with your new URL.

The post Simple JavaScript Redirect Code for HTML first appeared on identity design.

The post Simple JavaScript Redirect Code for HTML appeared first on identity design.

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Go to the backend -> Appearance -> Editor -> Find “storefront-functions.php” on the right. Input below code in the very bottom. “Update File” after adding the codes.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

}

If you wish to keep one or two of the three tabs, just remove the corresponding line from the codes. Enjoy woocommerce!

The post Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme first appeared on identity design.

The post Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme appeared first on identity design.

Here’s the basic story. I’m running an e-Commerce store with a Secure Sockets Layer installed on the domain. I created the logo with “La Belle Aurore” font from Google. When customers pay for their purchase, they have to land on the cart page showing https. My logo won’t be properly showing when my customer uses IE (Internet Explorer 11) browsers or my Safari from iPhones, so I really had resolve this issue.

I’ve seen some people trying to resolve the issue by creating weird code in the .htaccess file or tweaking the .function file in WordPress theme. I’ve tried it, but none of them actually worked for me.

Ta-Dah! It was simpler than I thought. I deleted the http: part on my CSS file, and it worked like magic! So DO “//fonts.googleapis.com/css?family=XXX”, NOT “http://fonts.googleapis.com/css?family=XXX”

@import url(//fonts.googleapis.com/css?family=NAME_OF_YOUR_FONT_FAMILY);

I used “La Belle Aurore” font on my site, so here’s what I have. @import url(//fonts.googleapis.com/css?family=La+Belle+Aurore); I hope this method save your time as well. Good luck!

The post Resolved! Loading Your Google Fonts Over https (SSL) Sites first appeared on identity design.

The post Resolved! Loading Your Google Fonts Over https (SSL) Sites appeared first on identity design.

DEMO: How It Looks

CSS

Copy the code below and paste into your CSS document.

table tr td { padding:20px }
table td:nth-child(1) { width:35%; }
table td:nth-child(2) { width:15%; }
table td:nth-child(3) { width:5%; }
table td:nth-child(4) { width:35%; }
table td:nth-child(5) { width:10%; }

HTML

Copy the code below and paste into your HTML document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

You can copy both CSS and HTML codes to your file and tweak around as you like!

The post CSS: A Simple Way to Set the Table Column Width first appeared on identity design.

The post CSS: A Simple Way to Set the Table Column Width appeared first on identity design.

You can make a circle around your Ordered List, <ol> as below without using image formats like JPG or PNG, so this way you can reduce the developing and loading time for your site.

DEMO: How It Looks

CSS

Copy the code below and paste into your CSS document.

ol {
    counter-reset:item; 
    margin:0; 
    padding-left:0; 
}
ol>li {
    counter-increment:item; 
    list-style:none inside; 
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol>li:before {
    content:counter(item) ;
    margin-right: 20px;
    padding: 8px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center; 
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    float: left;
}

HTML

Copy the code below and paste into your HTML document.

<ol>

    <li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>

    <li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum. </li>

    <li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>

    <li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>

    <li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>

</ol>

You can copy both CSS and HTML codes to your file and tweak around as you like. Enjoy coding!

CSS Only: Pop-up Modal Lightbox on Page Load

How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image)

CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible

The post Circled Number Lists (HTML/CSS) first appeared on identity design.

The post Circled Number Lists (HTML/CSS) appeared first on identity design.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: Weight Loss Diet / Health Website Design Mock Up (PSD) first appeared on identity design.

The post Freebies: Weight Loss Diet / Health Website Design Mock Up (PSD) appeared first on identity design.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: Christmas Responsive Email Template for Business (HTML/CSS) first appeared on identity design.

The post Freebies: Christmas Responsive Email Template for Business (HTML/CSS) appeared first on identity design.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: New Year New You Infographic Template (PSD) first appeared on identity design.

The post Freebies: New Year New You Infographic Template (PSD) appeared first on identity design.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: Merry Christmas Gif Animation Template (PSD) first appeared on identity design.

The post Freebies: Merry Christmas Gif Animation Template (PSD) appeared first on identity design.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: Foodie Website Mock Up Template (PSD) first appeared on identity design.

The post Freebies: Foodie Website Mock Up Template (PSD) appeared first on identity design.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: The Gloria Revival Grunge Poster Template first appeared on identity design.

The post Freebies: The Gloria Revival Grunge Poster Template appeared first on identity design.

• 1

  Download the MailChimp for WordPress Plugin. https://wordpress.org/plugins/mailchimp-for-wp/ or go to your WordPress Admin -> Plugins -> Add New -> (Search for) MailChimp for WordPress -> Download & Activate.

• 2

  Sign up MailChimp website for free. http://mailchimp.com/

• 3

  Create and name your list. Go to the ‘List’ menu on the sidebar. Create a list.

• 4

  Go to your name at the top of the sidebar and select ‘Account’.

• 5

  Create API Key. On the top menu click ‘Extras’ -> API keys -> ‘Create A Key’

• 6

  Copy the API Key you just created and Paste it onto your ‘MailChimp for WP’ (your WordPress Admin -> MailChimp for WordPress -> MailChimp Settings) then ‘Save Changes’

• 7

  Check and make sure you see ‘CONNECTED’ sign on ‘MailChimp API Settings’. Click on the button -‘Renew MailChimp lists’

• 8

  Go to the admin -> ‘MailChimp for WP’ -> ‘Checkboxes’ and check on the ‘MailChimp Lists’ box and save.

• 9

  Go to the admin -> ‘MailChimp for WP’ -> ‘Forms’and check on the ‘Lists this form subscribes to’ box and save.

• 10

  On the ‘Form’ setting page, copy the form shortcode below ‘Form mark-up’ and paste into any posts or pages you want to show your subscriber form, or you can use a MailChimp form widget to subscribe emails. (For widget users, go to the admin -> drag and drop ‘MailChimp Sign-Up Form’ to your widget sidebar.



• 11

  Test your email. Once you actually test subscribing with your email, you would get a successful message “Thank you, your sign-up request was successful! Please check your e-mail inbox.”, but if miss any steps from above, you might see a message “oops. Something went wrong. Please try again later.”

Enjoy the MailChimp for WordPress plugin / widget!

The post Quick Start Guide to MailChimp for WordPress first appeared on identity design.

The post Quick Start Guide to MailChimp for WordPress appeared first on identity design.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: The Way to Emmaus High-Res Poster Template first appeared on identity design.

The post Freebies: The Way to Emmaus High-Res Poster Template appeared first on identity design.

Free high resolution poster template for your design

You can easily change color.

Terms

• All iiiji.com freebies can be used for both personal and commercial use.
• You may not redistribute or resell iiiji.com freebies in any shape or form.

The post Freebies: Paint Splatter High-Res Art Poster Template first appeared on identity design.

The post Freebies: Paint Splatter High-Res Art Poster Template appeared first on identity design.

Below is the HOW-TO guide to tweak the current Google Adsense code with the new responsive Google Adsense banners on your site. You don’t need to have a deep understanding of it’s frame work. Here’s an easy way to make it happen.

Our DEMO is here. Just look at the header section of this site. Do you see a wide horizontal banner (728 px x 90 px)? Try resize the browser to make it smaller and reload the page. Try even smaller like you are using a mobile and reload the page. Do you see the size of the ad is changing as it’s responding?

Let’s first take a look at your current Google Adsense Code below. You can get this code from Google Adsense Site → My ads (top menu) → “Get Code” from one of your ad unit.

Make sure you select “asynchronous” code type from the drop down menu.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-8255226778912403"
     data-ad-slot="1054112722"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

1. You simply add a <div> around it.
2. Named the class to responsive-ad on the <div>
3. Added the class responsive-ad to <ins>. So it’s now adsbygoogle responsive-ad.
4. Changed the style to display:block
5. You must replace data-ad-client numbers and data-ad-slot numbers with yours..
6. Added data-format="auto" before closing </ins> tag.
7. Add <style> tags. You can tweak it whatever you want.

<div class="responsive-ad">	
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- NAME OF YOUR AD -->
<ins class="adsbygoogle responsive-ad"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<style type="text/css">
.responsive-ad { width: 320px; height: 50px; margin: 0 auto; }
@media (min-width:480px) { .responsive-ad { width: 468px; height: 60px; } }
@media (min-width:768px) { .responsive-ad { width: 728px; height: 90px; } }
</style>

The <style> above has set a minimum of 768px (and up) for desktops, a minimum of 480px (and up but below 768px) for tablet, and 320px (and up but below 480px) for mobile. You may feel free to change the numbers of min-width: as your site structure.

Enjoy your blogging and monetizing with the new Responsive Google Adsense!

The post Responsive Google Adsense is Easy! first appeared on identity design.

The post Responsive Google Adsense is Easy! appeared first on identity design.

If you are an individual proprietor or freelancer like myself, who’s willing to spend some time to dig for a nice photography for your design, you’ll enjoy my “Best Stock Photo Sites for Free for Commercial Use” list below. I know you’d especially enjoy the “for Commercial Use” part, which means you don’t need to get permission for both personal / commercial use.

The post Best Free Stock Photo Sites for Commercial Use first appeared on identity design.

The post Best Free Stock Photo Sites for Commercial Use appeared first on identity design.

This post was originally for the theme “TwentyTwelve”, however, as many people have asked about other recent themes, I have organized the codes for the default WordPress themes from “Twenty Twelve” to “Twenty Sixteen”.

For Twenty Twelve

Copy the code below and paste into your CSS document.

.attachment-post-thumbnail { display:none; }

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.entry-thumbnail { display:none; }

For Twenty Fourteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.site-content .hentry.has-post-thumbnail:first-child { margin-top: 48px; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, margin-top: 48px will fix the issue.

For Twenty Thirteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }
.hentry.has-post-thumbnail { padding-top: 8.3333%; }

For “Twenty Fourteen” theme, the margin of the top header gets weird after hiding the featured image. Adding the second line, padding-top: 8.3333% will fix the issue.

For Twenty Sixteen

Copy the code below and paste into your CSS document.

.post-thumbnail { display:none; }

For any questions, please leave a comment. Enjoy blogging!

The post A Simple Way to Hide Featured Image inside Post with CSS first appeared on identity design.

The post A Simple Way to Hide Featured Image inside Post with CSS appeared first on identity design.

The post TextureLovers.com first appeared on identity design.

The post TextureLovers.com appeared first on identity design.

1. Create a “New” canvas (go to “File” -> “New”). Set 6 pixels on both “Width” and “Height”.
2. Open “Layer” palette (go to “Window” -> “Layer”). Delete existing background layer so it’s now “Transparency”.
3. Blow the view all the way up to 3200% by select Magnifying Glass Icon from the “Tools”. Draw a line diagonally with “Pencil” tool (Like below).

Feel free to customize yourself with making different colors, directions, and even different sizes like 3 x 3 pixel or 2 x 2 pixel. You can also download PSD here:

Download PSD

Application

4. Lets continue with what we have, or simply open the PSD above.
5. Go to “Edit” -> “Define Pattern” to and name your pattern as you like. Now, we are done with defining the pattern. Let’s apply the pattern to the image.
6. Place a background less image by “File” -> “Place” and select your image. I’ve placed a chocolate donut png image.

7. Create a new layer (green arrow on right), fill a color as you like (I chose WHITE), and drag to place the layer below the “donut” layer.

8. Let’s add a layer style to the background layer (Mine is “white bg”) by click on the “fx” button (the yellow arrow) shown above. Then, on the “Layer Style” window, click “Pattern” button (the red arrow) and choose your Hatched / Slash / Diagonal Pattern you made.

FINAL WORK:

The post Download PSD: Photoshop Hatched Slash Diagonal Pattern first appeared on identity design.

The post Download PSD: Photoshop Hatched Slash Diagonal Pattern appeared first on identity design.

[“”] DOUBLE QUOTATION

Finding Exact Word with Order: wrap double quotation marks (“”) to your search words. In example, “cool free photoshop brushes” would only find cool free photoshop brushes NOT best free photoshop brushes or awesome free photoshop brushes.

[-] Negative/Minus CODE

Words You Want to Exclude: Add a negative/minus code immediately before the world you want to exclude without space. In example, abstract background image -jpg would find you all abstract related background images but not in jpg extension. (JPEG will shown in the search results)

[filetype:]

A Specific File Type Search: Input “filetype:(with colon)” in front of the file type name such as “jpg” or “pdf” to search that exact file type with the keywords. In example, “filetype:pdf design” would find you all PDF files that related to the word DESIGN.

[site:]

To Find Within a Site: Input “site:(with colon)” before any website such as “iiiji.com” follow by the keywords would let you find the subject within the website you’ve indicated. In example, “site:iiiji.com tutorial” would find articles about TUTORIAL within the site iiiji.com.

[*]

A Placeholder: The code “*” in between keywords be treated as a placeholder, so “Freelance * Design” will find you Freelance Graphic Design, , Freelance UI/UX Design, and so on.

[OR]

To Find Either One of Several Words: If you want to search for something either one of its kinds such as “design award 2010 OR 2011” will get you a result within these two years of resources. (OR must be ALL-CAP)

The post Google, Yahoo and All Major Search Engine Tips first appeared on identity design.

The post Google, Yahoo and All Major Search Engine Tips appeared first on identity design.

I’ve tried to follow other tutorials, but for some reason it didn’t work out for me. So I’ve done some other testings and finally it worked out! Now, let me introduce to how to migrate Joomla users to WordPress users. The versions I’ve used is Joomla 1.5 to WordPress 3. Here’s how as simple as:

1. On your Joomla site, export users to a CSV file.

To export Joomla users data, use ‘ARRA User Export Import’ plugin.

• Install plugin and go to the plugin page (Admin – Components – ARRA User Export Import)
  
• Click on ‘User Export’, mark the following check boxes, and “Export”!
  
• You’ll get a “CSV” file.

2. Tweak the CSV file before import to your WordPress site.

• You can open the file with Dreamweaver, Microsoft Excel, or one of the text editors you already have.
• Just need to change very top row.
  Edit text as the following table (Top to Bottom) and save.

  first name	last name	username	email	password	usertype
  first_name	last_name	user_login	user_email	joomlapass	role

  *Sometimes Microsoft Excel won’t save it right. I recommend Dreamweaver.

3. Import the CSV file to your WordPress site.

• To install plugin, on your wordpress site, go to Admin – Plugins – Add new.
  
• Search for ‘Import Users from CSV’,
  
  ‘Install Now’, and ‘Activate Plugin’.
  
• Go to ‘Users’ – ‘Import from CSV’
  
• Drag your updated ‘.CSV’ file to the ‘Choose File’ filed, “Import”!
  
• Check your ‘Users’ – ‘All Users” page to see everything looks right!
  

The post Migrating Joomla to WordPress first appeared on identity design.

The post Migrating Joomla to WordPress appeared first on identity design.