💡Case Study Template
Principal provides a separate template for case study
To create the Case Study post:
Go to Posts from the admin menu.
Click the New post button in the top right corner.
Add Post title.
Add featured image for this page.
Click
icon in the top right corner to open the Post settings.
Add a small description text (inside excerpt). Excerpt: This will be displayed on the case study card.
Select the Template dropdown and choose the Case Study Post.
Click Publish.
To create client date to sidebar:
Go to Settings > Code injection from the admin menu
Choose Site footer
Here is the code to add client data such as client name and image, products used, company type, location, methods, and results.
<script data-case-study-clients>
if (document.querySelector('#spectra')){
document.querySelector('#spectra').insertAdjacentHTML("beforeend", `
<div class="sidebar__client">
<h4 class="sidebar__title">Client</h4>
<div class="client-info">
<div class="client-info__img-wrapper">
<img class="client-info__img" src="/assets/images/client1.jpg" alt="client img"> // You need to change "src" and specify your path tho the downloaded image
</div>
<div class="client-info__wrapper">
<span class="client-info__name">Nick Anderson</span> // To change the name
<span class="client-info__desc">CEO Spectra</span> // To change the position held
</div>
</div>
<h4 class="sidebar__title">Products used</h4>
<div class="sidebar__product">
<span class="sidebar__text">Guides</span> // To change the product name
<span class="sidebar__desc">Maximized efficiency with guides.</span> // To change the product description
</div>
<div class="sidebar__product">
<span class="sidebar__text">Video Lectures</span> // To change the product name
<span class="sidebar__desc">Elevated skills with video insights.</span> // To change the product description
</div>
<h4 class="sidebar__title">Company type</h4>
<span class="sidebar__text">Higher Education</span> // To change the company type
<h4 class="sidebar__title">Location</h4>
<span class="sidebar__text">Canada</span> // To change the location
<h4 class="sidebar__title">Methods</h4>
<span class="sidebar__text">User Research</span> // To change the methods
<h4 class="sidebar__title">Results</h4>
<div class="sidebar__result">55+</div> // To change the results
<span class="sidebar__result-desc">Increase in user engagement.</span> // To change the results description
<div class="sidebar__result">30%</div> // To change the results
<span class="sidebar__result-desc">Reduction in checkout time.</span> // To change the results description
</div>
`);
}
</script>
Adding Client Photos to the Theme
To add a client's photo to the website, follow these steps:
Locate the theme folder named
assets
.Inside the
assets
folder, find animages
folder. If it doesn't exist, create a new folder namedimages
.Add the client's photos to the
images
folder.Specify the correct path in the code to include these images.
After updating the theme with new photos, reload the
Please specify the path to the photo:
<img class="client-info__img" src="/assets/images/client1.jpg" alt="client img">
You can also add photos via the web if you don't want to upload photos to the topic.
<img class="client-info__img" src="https://img.icons8.com/emoji/48/fire.png" alt="client img">
Click Save to save your work!
Last updated