How To Edit Skins And Layouts In Themify

How To Edit Skins And Layouts In Themify

STUDENTS

arnold on Sep 20, 2018

***Updated 9/11/2024***

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

 

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 Change Profile Image

You now need to click the Select Files button and upload an image of yourself. Navigate to an image on your computer and upload that image.

 

Upload An Image In WordPress

 

Once you choose the image you will see it on your site.  If the image is too big you can adjust the size as shown below.

 

 

Change image size Themify

 

Now that you have an image uploaded go ahead and change the name from “John 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. To get the font options simply select the text you want to change. The title below is an H1 tag.  Then I used and H2 and an H3. I also changed one of my fonts to a CSU green to break up the text a little bit. Add a couple tidbits of information about yourself here.

Changing Text In Themify

Next delete two of the social media icons and change on of them to LinkedIn icon.  Go to your linkedIn and copy your url from the browser.  Then paste it into Themify as shown below.  Change the Open Link In to New Tab.

Change Icon In Themify

 

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. (Once you see the image right click on it and click SAVE or SAVE AS:

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

HootSuite Social Marketing Certification

Hubspot Inbound Marketing Certification

To change the icon double click on the icon to open the styling options. The click the FEATURE LAYOUT arrow to expand the options.

Click To Expand Options

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.

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

 

Please submit your URL to Canvas.

 

 

The Ultimate

DIGITAL MARKETING Email List

SPEND ONE HOUR A WEEK ON YOUR DIGITAL MARKETING WITH THE HELP OF OUR WEEKLY GUIDES EMAILED TO YOU!

SIGN UP NOW

    IS THIS CONTENT

    UP-TO-DATE?

    IF NOT, PLEASE LET US KNOW
    SO WE CAN UPDATE

    POPULAR POSTS