About & Contact Page

The About and Contact pages use a few shortcodes: [column], [progress] and [gmap]. If you don’t know how to use shortcodes, learn about them here.

1. About page

Paste the following code into the HTML/Text editor, not the Visual editor:

<img class="aligncenter size-full wp-image-454" alt="boy-102832_1920" src="/wp-content/uploads/2013/07/boy-102832_1920.jpg" width="200" height="200" />
<h1>Hi.</h1>
[dropcap]W[/dropcap]e're [highlight style="1,2"]HeronWP[/highlight]. We love WordPress and elegant designs.
<h2>A little about me</h2>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
<h2>What I do?</h2>
[column size="1/2"]
[iconbox title="Design" icon="magic"]
Duis autem vel eum <strong>iriure dolor</strong> in hendrerit in vulputate velit esse molestie consequat.
[/iconbox]
[/column]

[column size="1/2" last="true"]
[iconbox title="SEO" icon="search"]
Luis dolore te feugait nulla facilisi. Nam liber <strong>tempor cum</strong> soluta nobis eleifend.
[/iconbox]
[/column]

[column size="1/2"]
[iconbox title="HTML/CSS" icon="html5"]
Duis autem vel eum <strong>iriure dolor</strong> in hendrerit in vulputate velit esse molestie consequat.
[/iconbox]
[/column]

[column size="1/2" last="true"]
[iconbox title="Marketing" icon="rocket"]
Luis dolore te feugait nulla facilisi. Nam liber <strong>tempor cum</strong> soluta nobis eleifend.
[/iconbox]
[/column]
<h2>My crazy skills</h2>
[column size="1/3"]
[progress percent="60" title="Wordpress / CMS" thickness="3" color="#666" size="120"]
[/column]

[column size="1/3"]
[progress percent="90" title="Design Skill" color="#222"]
[/column]

[column size="1/3" last="true"]
[progress percent="80" title="HTML / CSS / JS" color="#666" size="120" thickness="3"]
[/column]
<h2>Recent work</h2>
[recent_work column="2" number="4"]
<h2>Recent posts</h2>
[recent_posts number="2" excerpt_length="14"]
<h2>And the last</h2>
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

[button icon="play" link="/contact/" target="_self" lightbox="false" style="1"]Feel free to contact me[/button]

2. Contact page

The Contact page uses the Contact Form 7 plugin, which is included in the theme package. You need to activate this plugin before using it. If you haven’t installed it yet, go to Appearance » Install Plugins and install it. To learn how to use Contact Form 7, see its plugin page.

[gmap address="11 Park Place, New York City, NY 10007, United States" marker="true" info="11 Park Place, New York City, NY 10007, United States" height="300"]
<h2>Drop me a line</h2>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

[contact-form-7 id="6" title="Contact form 1"]
<h2>Find me social</h2>
[icon icon="facebook" title="My Facebook" link="#" target="_blank" tooltip="true"]
[icon icon="twitter" title="My Twitter" link="#" target="_blank" tooltip="true"]
[icon icon="google-plus" title="Google+" link="#" target="_blank" tooltip="true"]
[icon icon="linkedin" title="Linked In" link="#" target="_blank" tooltip="true"]
[icon icon="dribbble" title="Dribble" link="#" target="_blank" tooltip="true"]
[icon icon="deviantart" title="Deviantart" link="#" target="_blank" tooltip="true"]
[br]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.