This Hugo theme features an image or video visual section as well as a content section for your name, tagline, bio, and links.
Inside the folder of your Hugo site run:
$ cd themes $ git clone https://github.com/christianmendoza/hugo-split-theme
For more information read the official setup guide of Hugo.
After installing the Split theme successfully it requires a just a few more steps to get your site finally running.
The config file
Take a look inside the
exampleSite folder of this theme. You'll find a file called
config.toml. To use it, copy the
config.toml in the root folder of your Hugo site. Feel free to customize this theme as you like.
Use an image
true. Add your image(s) to the
static folder and change
files to the location of your image(s) accordingly. By default the image position is centered, however you can specify your own by supplying
position with a valid CSS position. If you specify multiple images, you can edit the time duration each image is shown by supplying
timer (in milliseconds).
[[params.visual.image]] enable = true files = ["images/background.jpg"] position = "center center" timer = 10000 # ms
Use a video
First, disable the image by setting
Second, enable the video by setting
You can either use a video that you host or one that is on YouTube.
Use your own video
Add your video to the
static folder and change
file to the location of your video accordingly. Make sure you delete
youtubeId or comment it out.
[[params.visual.image]] enable = false ... [params.visual.video] enable = true mute = true file = "videos/background.mp4" # youtubeId = "dk9uNWPP7EA"
Use a YouTube video
Get the ID of the YouTube video and add it to
youtubeId. Make sure you delete
file or comment it out.
[[params.visual.image]] enable = false ... [params.visual.video] enable = true mute = true # file = "videos/background.mp4" youtubeId = "dk9uNWPP7EA"
true if you want the video to play muted and
false if you want the sound. The video is coded to autoplay and loop. If you want to change that the code can be found in
bio corresponds to their respective text in the content section. Use markdown in
bio to add any links.
[params.content] name = "Jenny Jones" tagline = "Designer. Stylist. Nomad." bio = "Donec at libero id lectus porta dapibus eu in nibh. Cras id mauris sapien. Fusce viverra [luctus urna](#) ac rutrum. Duis semper elit eu mi facilisis eleifend. Donec semper, [ipsum in](#) malesuada congue, [purus sem](#) ullamcorper massa, sit amet lacinia nibh enim sed massa."
You can have up to 3 column lists in the links section.
heading is the list heading text. For the text links
text is the link text and
url is the link url. Follow the same snippet structure to add more links to a list. If you only want 1 or 2 lists, just remove the link list snippet you don't want.
This is what generates one link list:
# Links List #1 [[params.links]] [params.links.list1] heading = "Connect" [[params.links.list1.link]] text = "Blog" url = "#" [[params.links.list1.link]] text = "Email" url = "#" [[params.links.list1.link]] text = "Newsletter" url = "#"
description metadata helps search engines with how to display your site in search results.
twitterHandle help improves how your content is displayed when your site is shared across social media sites.
name = "Jenny Jones" description = "Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content." shareImage = "images/social.jpg" twitterHandle = "onepagelove"
static/favicon.ico with your favicon. If you don't want just delete
favicon.ico and the line below.
favicon = "favicon.ico"
copyright with the text you want for your copyright.
copyright = "©2017 Your Name"
Add Google Analytics
Enable Google Analytics by adding your tracking id to
googleAnalytics. Leave empty or remove if you don't want.
googleAnalytics = "UA-XXXXXXXX-1"
In order to see your site in action, run Hugo's built-in local server.
$ hugo server
localhost:1313 in the address bar of your browser.
The original template is released under the Creative Commons Attribution 3.0 License. Please keep the original attribution link when using for your own project. If you'd like to use the template without the attribution, you can check out the license option via the template author's website.
- Original Split Template by One Page Love
- Girl Image by Joe Gardner
- Clouds Over Mountain Video by John Guinn
- Video integration CSS ninja skills by my bud Manu