TemplateFlipWebsite Templates and Web Graphics2021-06-22T20:19:00Zhttps://templateflip.comPulse Animation CSS with Heart, Ring and Circle2021-06-22T20:19:00Zhttps://templateflip.com/blog/pulse-animation-css/<p>Let's create pulse animation effect with CSS on Heart, Ring and Circle. A pulsating animation effect can be easily created with CSS. Below you can see the CodePen demo of the animations I created.</p>
<p class="codepen" data-height="500" data-theme-id="light" data-default-tab="result" data-user="kanishkkunal" data-slug-hash="gpqKpd" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Pulse effects on Ring, Circle and Heart">
<span>See the Pen <a href="https://codepen.io/kanishkkunal/pen/gpqKpd">
Pulse effects on Ring, Circle and Heart</a> by Kanishk Kunal (<a href="https://codepen.io/kanishkkunal">@kanishkkunal</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<p>We have used this same effect in our template <a href="https://templateflip.com/templates/creative-cv/">Creative CV</a>. The pulse animation has been used for highlighting the profile picture in the header section. It gives a nice attractive effect to profile photos.</p>
<h2>HTML Code</h2>
<p>The HTML code for this demo is quite simple and consists of multiple <code>div</code> for creating the base shape. You can also embed an image inside these <code>div</code> and style them appropriately.</p>
<p>Classes <code>.pulse-base</code>, <code>.pulse-circle</code> and <code>heart</code> are used to add the CSS animation.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pulse-base<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pulse-base pulse-circle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>❤<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<h2>CSS Code</h2>
<p>The CSS code describes <code>@keyframes</code> for pulasting animations. We create the normal pulsate effect and also the heart-pulse which emulates a heart beating animation with CSS.</p>
<p>Individual classes <code>.pulse-base</code>, <code>.pulse-circle</code> and <code>heart</code> then use these animation with <code>animation-iteration-count</code> of <code>infinite</code>. Take a look at the CSS below.</p>
<pre class="language-css"><code class="language-css"><span class="token atrule"><span class="token rule">@keyframes</span> pulsate</span> <span class="token punctuation">{</span><br /> <span class="token selector">0%</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.6<span class="token punctuation">,</span> 0.6<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token selector">50%</span> <span class="token punctuation">{</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token selector">100%</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token atrule"><span class="token rule">@keyframes</span> heart-pulse</span> <span class="token punctuation">{</span><br /> <span class="token selector">0%</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.75<span class="token punctuation">,</span> 0.75<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /> <span class="token selector">30%</span> <span class="token punctuation">{</span><br /> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1<span class="token punctuation">,</span> 1<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.pulse-base</span> <span class="token punctuation">{</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span><br /> <span class="token property">border</span><span class="token punctuation">:</span> 15px solid #222<span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.pulse-circle</span> <span class="token punctuation">{</span><br /> <span class="token property">background</span><span class="token punctuation">:</span> #86cfda<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.pulse-base:before</span> <span class="token punctuation">{</span><br /> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span><br /> <span class="token property">border</span><span class="token punctuation">:</span> 15px solid <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span><br /> <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span><br /> <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span><br /> <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span><br /> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><br /> <span class="token property">left</span><span class="token punctuation">:</span> -15px<span class="token punctuation">;</span><br /> <span class="token property">bottom</span><span class="token punctuation">:</span> -15px<span class="token punctuation">;</span><br /> <span class="token property">animation</span><span class="token punctuation">:</span> pulsate 1.6s ease-out<span class="token punctuation">;</span><br /> <span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> infinite<span class="token punctuation">;</span><br /> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">z-index</span><span class="token punctuation">:</span> 99<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">.heart</span> <span class="token punctuation">{</span><br /> <span class="token property">font-size</span><span class="token punctuation">:</span> 90px<span class="token punctuation">;</span><br /> <span class="token property">line-height</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span><br /> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><br /> <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><br /> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><br /> <span class="token property">animation</span><span class="token punctuation">:</span> heart-pulse 0.8s ease-out alternate<span class="token punctuation">;</span><br /> <span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> infinite<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<h2>Pulse Animation in Use</h2>
<p>You can find that we used pulse animation in our template <a href="https://templateflip.com/templates/creative-cv/">Creative CV</a>. The pulse animation adds effect to the profile picture in the header section. Check out the demo and download the template to see it in action.</p>
<p><img src="https://templateflip.com/images/templates/creative-cv-screenshot.png" alt="Creative CV" /></p>
<p class="text-center">
<a class="btn btn-outline-info mt-4" href="https://templateflip.com/demo/templates/creative-cv/" target="_blank">Live Demo</a>
<a class="btn btn-info mt-4" href="https://templateflip.com/templates/creative-cv/" target="_blank">Download</a>
</p>
<p>If you liked the above template, you can find more such <a href="https://templateflip.com/templates/resume/">resume website templates</a> offered by us. You can also take a look at these <a href="https://superdevresources.com/html-resume-templates/">HTML resume templates</a> for more options.</p>
Templates Updated to Latest Bootstrap Stable2021-01-09T11:19:00Zhttps://templateflip.com/blog/templates-update-2020/<p>It has been some time since <a href="https://getbootstrap.com/">Bootstrap</a> moved forward to the next version which is 5, however it is still in beta at time of writing this (9th Jan, 2021). This also means that Bootstrap has put it's version 4 to latest stable version which as of now is Bootstrap 4.5.0.</p>
<p>Since all our current <a href="https://templateflip.com/templates/">templates</a> were built with Bootstrap 4, we have boosted their version to Bootstrap 4.5.0. You can download the new version from our site. If you purchased a license of the template then you can re-download using the download URL in your purchase confirmation e-mail to get the latest version of the template. Let us know if you need us to send your purchase email again.</p>
<p>You can access the <a href="https://getbootstrap.com/docs/4.5/getting-started/introduction/">docs for Bootstrap 4.5.0</a> if you need it.</p>
<p>If you are already using the earlier version of our template, it is not needed to update to the latest version unless you want to use any of the features introduced in Bootstrap 4.5.0.</p>
<p>Going forward, we will be building new templates with the Bootstrap 5 version. There are many new changes in this new release and you can read all about the changes in my article on <a href="https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/">Bootstrap 5 vs Bootstrap 4</a>. Largely, this involves breaking changes hence we are not updating the current templates to Bootstrap 5 as of now. However this may change in future.</p>
<p>Note that Bootstrap 5 has removed support for IE 10 and 11, hence we will be following similar suit for our new templates.</p>
<p>If you need templates based on any other frameworks such as <a href="https://tailwindcss.com/">Tailwind</a> or <a href="https://bulma.io/">Bulma</a>. Do let us known.</p>
<p>You can follow us on <a href="https://twitter.com/templateflip">@templateflip</a> for staying up-to-date with latest updates.</p>
<p>Happy New Year!</p>
Extended License Option Is Now Available2020-09-28T20:19:00Zhttps://templateflip.com/blog/extended-license-now-available/<p>We have added support to buy extended license for our graphic items and templates. This allows you to use these items in creating end products that are sold such as e-commerce items or subscription (SAAS) products.</p>
<p>Up-till now there was no option for buyers looking for buying a license which allows them to use our items in products that get sold. However, with this addition of extended license, you can start doing so.</p>
<p>For example, if you want to convert any of our <a href="https://templateflip.com/templates">templates</a> into a WordPress theme and then sell it on some other marketplace, you can now do so after purchasing the extended license. Another example would be using one of our resume template and offering it in a SAAS based product that allows you to create resumes online.</p>
<p>Similarly, you can use the <a href="https://templateflip.com/graphics/">graphic items</a> offered on our site in creating products that get sold on e-commerce store or get used in a SAAS based end-product.</p>
<p>Note that even with extended license option, you cannot sell or distribute any of TemplateFlip item directly without any modifications.</p>
<p>Here is a summary of the different license options that you can choose from when buying our items.</p>
<h2>Single License</h2>
<p>✔ No attribution is required.</p>
<p>✔ You can use it in a single personal project or for a client.</p>
<p>✖ You cannot use it in multiple client projects.</p>
<p>✖ You cannot use it for creating end products that are sold.</p>
<h2>Multiple License</h2>
<p>✔ No attribution is required.</p>
<p>✔ You can use it in multiple personal projects or client projects.</p>
<p>✖ You cannot use it for creating end products that are sold.</p>
<h2>Extended License</h2>
<p>✔ No attribution is required.</p>
<p>✔ You can use it in multiple personal projects or client projects.</p>
<p>✔ You can use it for creating end products that are sold such as e-commerce items or subscription (SAAS) products.</p>
<p>We hope that we are able to provide better buying options with this. As usual, we have kept the prices affordable. You still have the option to download most of our items for free when you want to use it only for your personal project and are ready to give credit (link-back) in return.</p>
<p>You can also refer to our <a href="https://templateflip.com/licenses/">license</a> and <a href="https://templateflip.com/terms/">terms</a> pages to know more.</p>
<p>Do let us know if you have any queries regarding the licenses and reach out to us using the <a href="https://templateflip.com/contact/">contact form</a>.</p>
Launching Graphics Section2020-07-07T14:19:00Zhttps://templateflip.com/blog/launching-graphics-section/<p>Today, we are launching a brand new section on this site. This new section will offer <a href="https://templateflip.com/graphics/">graphic design assets</a> for your web and graphic design projects.</p>
<p>Until now, we were giving graphic items as <a href="https://superdevresources.com/category/freebies/">freebies</a> on <a href="https://superdevresources.com/">Super Dev Resources</a> and selling premium items on Envato marketplace. With the new <a href="https://templateflip.com/graphics/">Graphics section</a>, we aim to bring all our graphic item offerings at one place on our own digital e-store.</p>
<p>Here are the types of graphic items currently available on the site:</p>
<ul>
<li><a href="https://templateflip.com/graphics/textures/">Textures</a></li>
<li><a href="https://templateflip.com/graphics/patterns/">Patterns</a></li>
<li><a href="https://templateflip.com/graphics/backgrounds/">Backgrounds</a></li>
<li><a href="https://templateflip.com/graphics/posters/">Posters</a></li>
</ul>
<p>With easy to access menu item in the header, you can browse these graphic items by different tags such as Backgrounds, Textures, Patterns etc. Each graphic item description also includes these tags in the footer for easy filtering.</p>
<p>Many of these graphic assets are available for free download under the <a href="https://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 license</a>. These resources are free for personal use with attribution to <a href="https://templateflip.com/">TemplateFlip.com</a>.</p>
<p>We also offer premium license that you can purchase to use the design resource in your commercial projects without attribution. The payment process is handled through our partners <a href="https://paddle.com/">Paddle</a> or <a href="https://gumroad.com/">Gumroad</a>. Read our <a href="https://templateflip.com/licenses/#graphics">licencing</a> and <a href="https://templateflip.com/faq/">FAQ</a> for further details.</p>
<p>We will keep on expanding the graphics section and creating more affordable graphic items for your design needs. If you would like to see a graphic item in any category, do reach out to us using the <a href="https://templateflip.com/contact/">contact form</a>.</p>
Filtering Templates by Tags Is Now Available2020-06-05T20:19:00Zhttps://templateflip.com/blog/filter-templates-by-tags/<p>We have added support to filter our templates by tags such as Landing, Agency, Portfolio etc. You will also find easy to acccess menu item in the header to browse templates by these tags. Each template description also includes these tags in the footer for easy filtering.</p>
<p>Here is a comprehensive list of tags currently available for our templates.</p>
<ul>
<li><a href="https://templateflip.com/templates/agency/">Agency</a></li>
<li><a href="https://templateflip.com/templates/portfolio/">Portfolio</a></li>
<li><a href="https://templateflip.com/templates/landing/">Landing Page</a></li>
<li><a href="https://templateflip.com/templates/resume/">Resume</a></li>
<li><a href="https://templateflip.com/templates/wedding/">Wedding</a></li>
<li><a href="https://templateflip.com/templates/photography/">Photography</a></li>
<li><a href="https://templateflip.com/templates/coming-soon/">Under Construction</a></li>
<li><a href="https://templateflip.com/templates/material/">Material</a></li>
<li><a href="https://templateflip.com/templates/bootstrap/">Bootstrap</a></li>
</ul>
<p>We hope to expand this list and add templates in all possible categories and provide access to modern yet affordable website templates. Our target audience is beginner as well as expert web-designers looking for creating an online presence.</p>
<p>Our core values when designing a template are:</p>
<ul>
<li>Functional and Usable</li>
<li>Focus on Simplicity</li>
<li>Light and fast</li>
<li>Responsive design working well on all devices</li>
<li>Free for personal use</li>
<li>Affordable pricing for commercial use</li>
</ul>
<p>If you would like to see website template is any category, do reach out to us using the contact form.</p>
Updated Blog Section is Now Live2020-06-05T11:19:00Zhttps://templateflip.com/blog/updated-blog-section/<p>Historically, we started as a WordPress blog, writing about responsive website templates and themes. As we curated templates from many sources, we felt the need to launch our own set of website templates which are modern, responsive and affordable. Thus we converted our blog into a digital e-store offering <a href="https://templateflip.com/templates/">website templates</a> and <a href="https://templateflip.com/themes/">themes</a>.</p>
<p>This decision also resulted in <a href="https://twitter.com/TemplateFlip/status/998234170299109376" target="_blank">moving</a> all our blog post to <a href="https://superdevresources.com/" target="_blank">Super Dev Resources</a>. We also moved our server stack from WordPress to Node.js during that time, but we have now moved to a complete static build using <a href="https://www.11ty.dev/" target="_blank">11ty</a>.</p>
<p>Since we felt the need of a blog section to post updates about our site and it's products, we have re-launched the <a href="https://templateflip.com/blog/">blog section</a>. We will use this to post updates about templates, themes and new sections and features of the site. We will also make use of the blog section to post articles about web design, WordPress, graphic design and digtial marketing.</p>
<p>Before you go, here are some of the popular articles from our first version of the site that are now moved to SDR:</p>
<ul>
<li><a href="https://superdevresources.com/material-design-html5-templates-free-download/">Material Design HTML5 Templates</a></li>
<li><a href="https://superdevresources.com/bootstrap-admin-templates/">Bootstrap Admin Templates</a></li>
<li><a href="https://superdevresources.com/html-resume-templates/">HTML Resume Templates</a></li>
</ul>
<p>We hope to bring similar useful articles here on our newly launched blog section.</p>
<p>You can follow us on <a href="https://twitter.com/templateflip">@templateflip</a> to get the latest updates from the blog as well as new product launches. If you have any suggestion or feedback do <a href="https://templateflip.com/contact/">contact us</a>. We have also opened <a href="https://templateflip.com/advertise/">advertisement opportunities</a> on this site.</p>
How to Install and Setup Human Droid WordPress Theme2017-07-26T20:19:00Zhttps://templateflip.com/blog/setup-human-droid-theme/<h2>Installing Theme</h2>
<p><strong>Human Droid</strong> is a child theme of Beans and hence you need to install Beans WordPress theme first on your website by following <a href="http://www.getbeans.io/documentation/setup-guide/">this guide</a> before proceeding with the installation of this theme.</p>
<p>Once you have Beans theme installed, install <strong>Human Droid</strong> theme by following the steps below:</p>
<ol>
<li><a href="https://templateflip.com/themes/human-droid/">Download Human Droid Theme</a>. You will get a zip file after download.</li>
<li>Go to your WordPress Dashboard and click on <strong>Appearance</strong> -> <strong>Themes</strong>.</li>
<li>Click on <strong>Add New</strong> button at the top of the Themes page.</li>
<li>Click on <strong>Upload Theme</strong>button situated on top, next to the title.</li>
<li>Click on <strong>Choose File</strong> and select the zip file you downloaded in step 1.</li>
<li>Click on <strong>Install Now</strong>.</li>
<li>Once installed, click on <strong>Activate Theme</strong> to active the theme on your site.</li>
</ol>
<h2>Setup Homepage and Blog Page</h2>
<p>The homepage is supposed to display your profile picture along with a short bio. The blog page lists down all the posts in your blog. By default, WordPress shows the blog posts on the homepage. We will be changing this so that our custom page gets shown on the home page and the blog is available at URL<em>yoursite.com__/blog</em>.</p>
<p>Below you can learn how to set this up:</p>
<h3>Create Home Page</h3>
<ol>
<li>Create a New Page from <strong>WordPress Dashboard -> Pages -> Add New</strong></li>
<li>In the <strong>Add New Page</strong> find the <strong>Page Attributes</strong> section on the right and select <strong>Profile Page Template</strong> in the drop-down.</li>
<li>Upload your picture by clicking on the <strong>Set featured image</strong> link in the <strong>Featured Image</strong> section. Make sure to have this image of size 830x430px or greater, as the image will need to be large enough to cover the entire area of the profile section on the homepage.</li>
<li>Do not enter any text in the page title and hit publish.</li>
<li>A new empty page with the empty title will get created. We will set this page later as the homepage.</li>
</ol>
<h3>Create Blog Page</h3>
<ol>
<li>Create another New Page from <strong>WordPress Dashboard -> Pages -> Add New</strong></li>
<li>In the <strong>Add New Page</strong> give the title <strong>Blog</strong> to the page.</li>
<li>Leave other options as it is and publish the page.</li>
<li>A new blank page titled Blog will get created at URL<em>yoursite.com/blog</em>. We will use this page as the blog post page as described below.</li>
</ol>
<h3>Update Reading Settings</h3>
<ol>
<li>Now go to <strong>WordPress Dashboard -> Settings -> Reading</strong></li>
<li>Under <strong>Reading Settings</strong> find the section <strong>Front page displays</strong> and select <strong>A static page</strong> as the radio option.</li>
<li>Now open the drop-down for <strong>Front page</strong> and select the Home page we created above. Note that since we didn’t give a page title it will appear as <strong>#x (no title)</strong> where x will be any number.</li>
<li>Open the drop-down for <strong>Posts page</strong> and select the blog page we created above. The page would be titled as <strong>Blog</strong> in the drop-down.</li>
<li>Click <strong>Save Changes</strong> button and then go to <strong>WordPress Dashboard -> Settings -> General</strong> and edit the <strong>Site Title</strong> and <strong>Tagline</strong> to suit your profile.</li>
<li><strong>Save Changes</strong> again and then check your homepage.</li>
</ol>
<h2>Setup Social Menu</h2>
<p>The social menu gets displayed in your profile on the homepage. To set this up follow the instructions below:</p>
<ol>
<li>Go to <strong>WordPress Dashboard -> Appearance -> Menus</strong></li>
<li>Click on <strong>Create a new menu</strong> link under the <strong>Edit Menus</strong> tab.</li>
<li>Give the menu name as <strong>Social Menu</strong> and hit the <strong>Create Menu</strong> button.</li>
<li>Now click and expand the <strong>Custom Links</strong> section on the left.</li>
<li>Enter the<em>URL</em> and<em>Link Text</em> in <strong>Custom Links</strong> section of one of your social profile and click <strong>Add to Menu</strong>. For e.g. enter<em>URL</em> as <em>https://twitter.com/templateflip</em> and<em>Link Text</em> as<em>Twitter.</em> Similarly, add links to your other social profiles.</li>
<li>Now we need to add icons for these menu items. Find and expand <strong>Screen Options</strong> situated at the top right of the current page.</li>
<li>You will find a checkbox for <strong>CSS classes</strong> under <strong>Show advanced menu properties</strong>. Check the check box for <strong>CSS classes</strong></li>
<li>Expand the individual menu item in the <strong>Menu Structure</strong> section. You will find a new text box for <strong>CSS classes</strong>.</li>
<li>Enter the CSS class for each social network in the text area. For example, use <strong>icon-facebook-square</strong> for Facebook, <strong>icon-twitter-square</strong> for Twitter and <strong>icon-linkedin-square</strong> for LinkedIn. Refer to <a href="http://fontawesome.io/icons/">FontAwesome icons</a> for a complete list of icon names you can use here.</li>
<li>Now check the <strong>Social Menu</strong> check box found at the bottom of the page under <strong>Menu Settings</strong>.</li>
<li>Now hit <strong>Save Menu</strong> and then visit your homepage to check the social menu.</li>
</ol>
<h2>Create Contact Page</h2>
<ol>
<li>Next, we can create a contact page for the site by going to <strong>WordPress Dashboard -> Pages -> Add New</strong></li>
<li>You can name this page as <strong>Contact Me</strong> or anything else that you like.</li>
<li>Contact Form can be added to the page using <a href="https://jetpack.com/support/contact-form/">Jetpack Contact Form</a> or <a href="https://wordpress.org/plugins/contact-form-7/">Contact Form 7</a> plugin. Or you can use any other plugin that you like.</li>
<li>Publish the page. We will add this page later to the main header menu.</li>
</ol>
<h2>Create Work Pages</h2>
<ol>
<li>Create Work page for your site by going to <strong>WordPress Dashboard -> Pages -> Add New</strong></li>
<li>Name this page Work.</li>
<li>If you want to use just one page to show your work than you can add details of your work on this page and then publish the page.</li>
<li>Alternatively, you can choose to show your work in multiple pages. For doing so we will create child pages for each one. You need to follow the steps below:
<ol>
<li>Create a new page for your site by going to <strong>WordPress Dashboard -> Pages -> Add New</strong></li>
<li>Name this page depending on the work that you want to show on this page. For e.g. Design, Development, Blogging etc.</li>
<li>In the <strong>Page Attributes</strong> section on the right, select <strong>Work</strong> as the <strong>Parent Page</strong>.</li>
<li>In the <strong>Page Attributes</strong> section on the right, select <strong>Child Page Template</strong> in the <strong>Template</strong> drop-down.</li>
<li>Add details about your work in the page and hit publish to create the page.</li>
<li>Similarly, create other pages for showcasing your work. Don’t forget to set parent as <strong>Work</strong> and the template as <strong>Child Page Template</strong>.</li>
<li>If you visit any of the child pages, you will see that a tab is automatically created for you to switch between the work pages.</li>
<li>We recommend creating max 3 such pages as any more page will not get shown properly in the tabs.</li>
</ol>
</li>
</ol>
<h2>Setup Header Menu</h2>
<ol>
<li>Go to <strong>WordPress Dashboard -> Appearance -> Menus</strong></li>
<li>Select the <strong>Navigation (Primary Menu)</strong> from the drop-down and click on <strong>Select</strong> button.</li>
<li>This menu should already have a link to your homepage added in the menu.</li>
<li>Add more menu items by ticking the checkbox against the pages: Work (or the first Child Page of Work), Blog and Contact from the Pages section on the left.</li>
<li>Expand the individual menu item in the <strong>Menu Structure</strong> section. You will find a text box for <strong>CSS classes</strong>. (Similar to the one we used for Social Menu)</li>
<li>Enter the CSS class for each menu item in the text area. For example, use <strong>icon-home</strong> for Home, <strong>icon-briefcase</strong> for Work and <strong>icon-pencil</strong> for Blog and <strong>icon-envelope</strong> for Contact. Refer to <a href="http://fontawesome.io/icons/">FontAwesome icons</a> for a complete list of icon names you can use here if you are adding or changing menu items.</li>
<li>Make sure that the <strong>Primary Menu</strong> checkbox is checked at the bottom of the page under <strong>Menu Settings</strong>.</li>
<li>Now hit <strong>Save Menu</strong> and then visit your homepage to check the header menu.</li>
</ol>