Design Diaries

If you’re here, then you are probably interested in creating a website for yourself or others using Showit. I LOVE Showit, I am not sponsored by the way, it’s so intuitive and simple especially for newbies. When I first started using Showit they didn’t have as many ‘how to’ articles online so researching new tips and tricks is something that I do even today as a full fledged website designer. I thought about how when I look for new design ideas, I usually have to look through several blogs to walk away with 3 new things I haven’t heard before. My hope is that you’ll hear some new things from me today.

How to add an arrow icon for your photo galleries

When you want to create a photo gallery in Showit, they give you a lot of options and settings on the right hand side. Once you create a gallary start by clicking on gallery settings and choose sliding gallery. From there showit with give you the option to add dots at the bottom of the gallery. This is a feature I really liked but my clients customer base was all older people that were confused by the dots. I tried to find a solution under the dots, maybe they had arrows or something else besides the dots, they dont. Because Showit doesn’t offer another way to slide the gallery, I set it up myself. So if you want to add arrows or something for them to click in order to slide the gallery. Go down to the bottom of Showit and add an icon. Click on your icon, go to icon chooser on the far right and pick whatever you want to slide the gallery images. Next go to click actions and under actions you’ll see ‘show canvas‘ drop down menu. Click on the menu and you’ll see the gallery option. After gallery is selected a new option will pop-up called ‘target‘ which should read gallery 1. (Make sure that if you have multiple galleries, that the icon matches the correct gallery. You will need to name your galleries in the gallery settings, or all of your galleries will be named gallery 1 and slide at the same time.) Under target you will see action, this will give the action to the icon or arrow. You can make the icon slide the gallery to next, previous, it can play & pause video, toggle and set image. So many great options. I love using this feature when my client has a lot of products they want to feature.

Code For Self Typing Text or Typewriter

When I want to add an interesting feature to my websites or just a little bit of movement. I will make the text type itself. I add an embed code to the canvas and copy and paste this code:

<div class=”si-embed”>

<div id=”container”>

https://unpkg.com/typewriter-effect@latest/dist/core.js

<span class=”Typewriter__wrapper”></span><span class=”Typewriter__cursor”>|</span></div>

<style>@font-face {

  font-family: Okine;

  src: url(https://static.showit.co/file/jLorJeJeSnKm0U8ntQCN4A/222498/madeokinesanspersonaluse-bold.woff);

}</style>

<script>var container = document.getElementById(‘container’);

var typewriter = new Typewriter(container, {

    loop: true,

});

container.style.font = “normal 75px Okine”

container.style.color = “#ffffff”

container.style.textAlign = “center”

container.style.lineheight = “1.6”

typewriter.typeString(‘Curated Seo.’)

    .pauseFor(1000)

    .deleteAll()

    .typeString(‘A Personalized Experience.’)

    .pauseFor(1000)

    .deleteAll()

    .typeString(‘Your Dream Website.’)

    .start();

</script></div>

This code can be edited with your own twist on it. I currently have it typing out curated seo, a personalized experience, and your dream website. You can personalize it to you by embedding the code into Showit and editing the titles to fit your brand. You can also change the font all right in the code. It’s honestly as simple as copy and paste.

Add music to your website

I added a song to my website from Spotify to showcase why my brand slogan is ‘Design Your Best Inspiration’. The song is called Best Inspiration by SDIB, highly recommend. To do this I went to Spotify and chose my song. On the right of the song you’ll see 3 dots. Click on those, at the bottom click on share & choose embed track. It will give you the option to decide on the size of the track for your website at the top. I always go with the smaller option for mobile. At the bottom click on copy, and paste it into your embed code on your Showit site. That’s it. Now you have a song on your website that easy!

Check out more tips and tricks on my blog under Showit !