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/educational-ngo-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 News, Programs, Events, 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, and we do believe it is a good idea to maintain a blog on an educational/NGO type site, 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
}
