Different animations are provided for the slideshow images. To change the default animation (top), change the hero slideshow element with one of the following options:
o-slideshow__block-reveal--top
o-slideshow__block-reveal--bottom
o-slideshow__block-reveal--left
o-slideshow__block-reveal--right
So if you would prefer images to be revealed from right to left, the hero-slideshow elements should be as follows:
<section class="hero hero-slideshow">
...
<div class="o-slideshow__block-reveal o-slideshow__block-reveal--left"></div>
...
</section>
This theme supports the most commonly used video aspect ratios, so it can be perfectly adapted to your page. To change the aspect ratio set the data-modal-video-aspect-ratio attribute to one of the following supported values:
data-modal-video-aspect-ratio="4:3"
data-modal-video-aspect-ratio="16:9"
data-modal-video-aspect-ratio="16:10"
<button class="btn btn-outline-secondary js-open-video-modal" data-modal-video-aspect-ratio="4:3" ...>
Play video
</button>
If the video has a different aspect ratio, you can remove the data-modal-video-aspect-ratio
attribute. The video will be displayed nicely as well.
The Instagram feed is automatically fetched from Instagram thanks to InstagramFeed. This third-party plugin crawls the Instagram page of a user and uses the data directly from Instagram itself without the need of using the Instagram API (which requires some extra steps).
The Instagram <section>
can be identified by the class instagram
.
The href
attribute of the “Visit my instagram” <a>
tag needs to be set accordingly to the user's account.
<section class="instagram">
...
<a class="h6 font-sans-serif instagram__link" href="https://www.instagram.com/yourOwnUsername/" target="_blank">
...
</a>
...
</section>
The container of the instagram images can be identified by the class instagram__images
.
To configure the InstagramFeed to fetch the user's feed some attributes need to be set:
data-instagram-user-name
- The username of the Instagram account.data-instagram-limit
- The number of images to be displayed.<section class="instagram">
...
<ul class="js-instagram-images instagram__images" data-instagram-user-name="yourOwnUsername" data-instagram-limit="6">
...
<ul>
...
</section>
There's also the option to disable the automatic feed and add static images by removing the js-instagram-images
class and the attributes: data-instagram-user-name
and data-instagram-limit
.
The images can come from Instagram directly by copying the instagram post URL and adding some options:
https://www.instagram.com/p/B-aCdCSHXs6/media?size=m
Currently Instagram provides 3 different sizes:
t
- Thumbnailm
- Mediuml
- Large<ul class="instagram__images">
<li class="js-instagram-image-container instagram__image-container u-height-square">
<a class="instagram__image-link" href="https://www.instagram.com/p/B-aCdCSHXs6" target="_blank">
<img class="js-instagram-image instagram__image u-height-square__content" src="https://www.instagram.com/p/B-aCdCSHXs6/media?size=m">
</a>
</li>
<li class="js-instagram-image-container instagram__image-container u-height-square">
<a class="instagram__image-link" href="https://www.instagram.com/p/B-aCdCSHXs6" target="_blank">
<img class="js-instagram-image instagram__image u-height-square__content" src="https://www.instagram.com/p/B-aCdCSHXs6/media?size=m">
</a>
</li>
...
</ul>
Note: Instagram does not officially support this feature. If the methods mentioned above are deprecated any image URL can also be used.
This theme provides a newsletter section that is ready to be integrated with the popular marketing platform Mailchimp. Follow this steps to setup the newsletter with your own Mailchimp account:
action
URL provided by Mailchimp and replace the action
attribute of all the subscribe forms on your website followed by &c=callback
In addition to "Email Address", you can collect data like "first name", "last name", "company", and others. To add more fields to your newsletter form simply copy the group inputs provided by Mailchimp and replace the classes with those used on his theme. Please note that you must not change the input id.
<form action="https://example.us18.list-manage.com/subscribe/post?u=1a2b3c4d5e6f7g8h9i&id=9a8b7c6d&c=callback" ...>
...
</form>
More fields can be added by simply copying the group inputs provided by Mailchimp and replacing the classes with the theme’s customized ones (Note: Do NOT delete or change the input id
)
This theme includes markup and styling for user comments. All markup related to comments can be found on the article page under <section class="comments">
but can also be applied to any page you would like.
Something to keep in mind is that using a third-party plugin can imply losing the original comments styling. Please consider checking their documentation.
Two of the most popular 3rd party plugins are Disqus and Facebook Comments:
This theme provides markup, styling and form functionality like data validation, form submission and mockup response handling, and it’s ready to be integrated with any backend solution found suitable.
To customize the contact form, please read the in-code documentation on the sendContactForm()
function in scripts.js
.
Here is an example using Javascript fetch()
function to send an e-mail and handle the success and error:
function sendContactForm (form) {
if (formIsValid) {
fetch("yourEmailHandlingUrl", {
method: "post",
...
}).then(function () => {
form.classList.add('contact-form-is-valid');
response.innerHTML = 'Your message was sent successfully.';
response.classList.add('contact__response--success');
sendFormButton.value = sendFormButtonDefaultValue;
setTimeout(function () {
resetForm(form);
}, 4000);
}).catch(function() {
// If there was a problem sending the email
enableFormInputs(form);
response.innerHTML = 'An error has occurred, please try again later.';
response.classList.add('contact__response--error');
sendFormButton.value = sendFormButtonDefaultValue;
});
} else {
response.innerHTML = 'Please make sure all the fields are valid.';
response.classList.add('contact__response--error');
}
}