Resources For:

How To Edit Skins And Layouts In Themify

How To Edit Skins And Layouts In Themify

STUDENTS

arnold on Sep 20, 2018

With the last tutorial we created a test page, loaded a Themify skin and then loaded a themify layout that called “portfolio” which is a resume website layout.

Today we are going to load that skin on our home page and change all the material to make it unique to ourselves.

How To Create A Resume Website Using The Themify Builder

The first thing we need to do make sure we have a good skin for our resume website. The skin is going to control the way the header, menu and footer looks.  It will also determine the default styling and colors throughout the website. Because of this we need to pick a skin that goes the best with a potential resume.

Let’s go back to the dashboard of our WordPress and look at the skins again.  Simply click “Themify Ultra” in the left hand sidebar of the WordPress dashboard and then click “Skins and Demos.”

Themify Skins in WordPress

In the example below I need to get rid of the existing data that was imported when I loaded the eCommerce skin.  So I simply locate the eCommerce skin and find the erase button and click that.

Erase Import Data For Themify

Once I delete that data I can go ahead and load my favorite skin.  I went through all the demos using their preview button and look for my favorite menu, footer and contact page for a resume website.  The skin I liked the best was called “APP.”

Importing The App Skin In Themify

You can see in the image above that I first clicked “IMPORT” under the APP skin and then I got a message about the two plugins I need to import to get full functionality with this skin.  (See the previous tutorial for a reminder about how to upload plugins.)  Click On Proceed Import to load the skin.

Your website should now have the APP menu and features.  It may or may not have the resume website layout depending on what you did previously.  The one thing you want to check is that the menu looks normal.  If you see a double menu or a menu with a lot of options then you probably need to erase a previous import.

If your menu looks okay then you can go ahead and load the Themify builder:

Turning On The Themify Builder

Then go to the section where you can load a layout:

How To Load A Layout In The Themify Builder

Choose the “Profile” layout which can be seen below in the top right and click “Replace Existing Layout.”

Replace Or Append An Existing Layout In Themify Builder

You now have the resume Profile layout with the APP skin. The next thing we are going to do is start changing some things around in our resume template to make it our own. To do this go back to your homepage and click “Turn On Builder”  if you are not in your Themify builder yet. Then find the first module as shown below and click the Pencil icon which means “EDIT”

How To Edit Modules In The Themify Builder

You now need to click the upload button and upload an image of yourself. Click “Done” once you found an image that you like as shown below.How To Upload An Image In The Themify Builder

Now that you have an image uploaded go ahead and change the name from “John Smith” to your name. Next to the word TEXT you will see the edit icon where you can switch the name from Jon Smith to your name. Now change all the information to something more relevant about yourself. See my example below.  To make my text look nicer I used the headings as shown below.  The title below is an H1 tag and I moved down the chain for each layer thereafter. Then I changed one of my fonts to a CSU green to break up the text a little bit. Can you find how to change the font in the toolbar?

Changing The Heading Fonts In The WordPress Themify Builder

Next change the three social media icons to one LinkedIn icon and insert a link to your LinkedIn if you have one. See below for a hint.

How To Change Icons With The Themify Builder

Next I want you to start swapping out all the information on your website.

1) Start by inserting the ram logo in the top right of your resume website.

You can download the rams logo here:

http://thedigitalmarketingprofessor.com/wp-content/uploads/2018/09/CSU-rams-background-image.png

How To Swap Out Images In The WordPress Themify Builder

2) Change the skills to skills you have or skills you will have by the time you finish this class. Write a one or two sentence blurb about each skill.

WordPress Design Portfolio

Search Engine Optimization Portfolio

Content Marketing Portfolio

3) Change all the certification to the ones I did.  Or use your own if you have other certifications that you have done.

Here are a couple Certification Icons you can use for your website:

Google Analytics Certification

Google Adwords Certification

HootSuite Social Marketing Certification

Hubspot Inbound Marketing Certification

To change the icon to the logo image follow these steps:

a) On the icon screen below, where you upload the image, clear out the background by highlighting and then deleting the color code. You must get rid of these colors or your icon will not show.

How To Edit the Icon Colors In The Themify Builder

b) Switch to the image tab as shown below. Then upload your image. You can play with the layout of the image to look the best for you:

How To Select An Image As An Icon In The Themify Builder

 

4) Change the other two certifications so you get three in a row similar to the image below.  I made the bigger fonts by editing the Header tags in the WordPress editor.

Lining Up Certification In The Themify Builder

5) Delete the fourth row:

How to Delete A Row In The Themify Builder

9) Edit the contact form with your information and enter your email so that it sends an email to your email address.  Try a test email to see if it worked.

How To Edit The Contact Form In The Themify Builder To Send An Email

For the students in my Digital Marketing class, your website should look something like this:

Please submit your URL to Canva.

 

 

The Ultimate

WORDPRESS TOOLKIT

a collection of Wordpress related products and resources that every professional should have!

DOWNLOAD NOW

POPULAR POSTS