Styling Your Freelancer Site

We’ve put together this post to go along with our video tutorial series that shows you how to set up a shop site. Once you’ve added the content and followed the last video (which explains how to run your checks and debugging), you’ll want to look at styling your site. This post covers the steps we took to get our demo site looking more professional and polished.

You can view our demo site here: http://www.ewdyoutubetutorials.com/freelancer-site/

Logo

The first thing we did was add a new custom logo. If you’re making the site for an existing store, it’s likely that you’ll already have branding and a logo in place (on your storefront, marketing materials, etc.). If it’s a new startup, you can work with a graphic designer to create a unique logo that captures the essence of your company. Either way, you’ll want to display this logo prominently on your site.

After adding the logo, we needed to make small adjustments to the heading/logo area in our theme. We used CSS for this. WordPress provides a section in their theme Customizer called “Additional CSS” that you can use to add in your own custom CSS. We used this to adjust the width of and the amount of space above the logo.

Homepage

After getting the logo in there, our next focus was the homepage, as that’s the first thing people see when they come to your site, and the page for which we needed to make the most changes.

The big image banner that shows at the top of the homepage is a feature that came with the theme that we used. We quickly added in the image and text using the “Front Page – Banner” section in the Customizer.

The theme has several other options for the homepage, all available in the “Front Page” section of the Customizer. We used these to set up the style and content for the two call-to-action areas you see on the homepage as well as for the icon columns section and the latest posts area.

Inner Pages

Next, we moved on to the layout of the inner pages. The Vega theme has different page templates that let you choose whether you want to display a full-width page or a page with a sidebar. We set it so the Services, About Us and Contact Us pages had a sidebar and the rest of the pages made use of the full-width template.

The sidebar contained only elements related to blog posts. While we did make use of the posts feature in WordPress to create some content for the latest posts area on the homepage, the focus of this site is not the blog. So we decided to remove these and to add two widgets that would showcase important information for customers. First we added the Popular FAQs widget, which comes with the Ultimate FAQs plugin, and which highlights questions your customers may have. Then we also added in the search widget that comes WordPress, so your visitors can quickly search for a specific project or page.

We also added some additional CSS to make the FAQ widget fit with the template we were using.

Besides this, we also added some CSS to make the button in the contact form match the styling of the rest of the site, and also to make the comment area on the contact page line up with the rest of the form. It’s important to note that the Additional CSS area can be used not only to modify the styling of theme elements, but also for elements from other plugins, like the WP Forms plugin, which we used on the  contact page.

FAQ Page

The Ultimate FAQs plugin that we are using to create our FAQ page comes with a lot of options that we made use of to bring the styling more in line with the overall feel of our site. In the plugin options, we chose the Block style layout and a different toggle icon. When then set it so that h3 headings would be used for the category titles and h4 headings for the questions, and then set the font size for each of those. We then used plugin options to hide the author of the post, to move the posted date below the answer, and to choose the color of the various FAQ elements.

We then also added some additional CSS to adjust the spacing and positioning of the various elements in the FAQ body and also to adjust various font sizes.

Here’s the final Additional CSS code that we used.

body {
color: #333333;
}
.navbar-brand.image-logo img {
max-width: 220px;
margin-top: 5px;
}

/*faq page*/
.ufaq-faq-category-title {
margin-bottom: 20px
}
.ufaq-faq-category-title h3 {
font-size: 20px;
letter-spacing: 0;
}
.ufaq-faq-title-text h4 {
text-transform: initial;
letter-spacing: 0;
}
.ewd-ufaq-post-margin-symbol {
margin-top: 1px;
}
.ufaq-faq-title {
padding: 1px
}
.ufaq-faq-post {
margin: 0 0 20px;
line-height: 1.5;
}
.ewd-ufaq-author-date {
margin-bottom: 13px;
}
.ewd-ufaq-date {
font-weight: normal;
}
.ufaq-faq-categories {
font-weight: bold;
}
.ufaq-faq-categories a {
font-weight: normal;
}
.ufaq-back-to-top-link {
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
}
.ufaq-permalink-image {
margin-top: -26px;
margin-left: 82px;
}

/*contact us page*/
div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium,
div.wpforms-container-full .wpforms-form textarea {
max-width: 100%;
}
div.wpforms-container-full .wpforms-form button[type=submit] {
background-color: #34ADCF;
padding: 14px 32px;
color: #fff;
border: none;
cursor: pointer;
}
div.wpforms-container-full .wpforms-form button[type=submit]:hover {
background-color: #6BCEEA;
border: none;
}

/*faq widget*/
.sidebar-widgets .ufaq-faq-title-text,
.footer-widgets .ufaq-faq-title-text {
width: 70%;
}
.sidebar-widgets .ufaq-faq-display-style-Contemporary .ewd-ufaq-post-margin-symbol,
.footer-widgets .ufaq-faq-display-style-Contemporary .ewd-ufaq-post-margin-symbol {
margin-top: 4px;
}
.sidebar-widgets .ufaq-faq-category-title,
.footer-widgets .ufaq-faq-category-title {
display: none;
}
.sidebar-widgets .ufaq-faq-category,
.sidebar-widgets .ufaq-faq-category-inner,
.footer-widgets .ufaq-faq-category,
.footer-widgets .ufaq-faq-category-inner {
margin-bottom: 0
}

Call to action box goes here
Need a Plugin to Improve Your Site?
Browse Plugins Now
Visitor-Submitted FAQs for WordPress
Visitor-Submitted FAQs for WordPress

Often, the people best placed to know what questions your users will run into when using your product or service are the users themselves. With a premium license for our Ultimate FAQ WordPress plugin, you can allow visitors to your site to submit their own questions, along with (optionally) their proposed answers to those questions,…

FAQ Custom Fields for WordPress
FAQ Custom Fields for WordPress

In this post, we’ll show you how to create custom fields for your FAQs, as well as re-order the FAQ elements in the Ultimate FAQ WordPress plugin. We’ll start with custom fields, which you’ll need a premium license to use. We’re going to add a field called “Priority”, with options for “High”, “Medium” and “Low”….

WooCommerce FAQs
WooCommerce FAQs

We’re going to be looking at adding FAQs to your WooCommerce products in this post. Product FAQs let you answer questions your customers may have, such as what your return policy is, quickly and easily,  before they purchase your products. To get started, you’ll need a premium license for our Ultimate FAQ WordPress plugin. Head…

Discover More Posts
Browse Plugins Now