You can edit your content using a familiar looking toolbar. If you've used Microsoft Word or similar programs, you should be familiar with most of these functions. Most of these buttons are self-explanatory, but if you're unsure, simply hover over the button for a popup explanation.
We won't go into all these buttons in detail, we'll just cover the essentials, and a few things that aren't immediately obvious. This is a very important tutorial to understand – if you can work your content editor in the way you need to, you'll be able to create a stunning website with Shift.
One of the first things you'll need to be able to do is insert images. First, simply click where you want your image to appear. Next, just click the image button on the toolbar, or click 'add image'. This will bring up the file manager, where you can select from existing images or upload new ones. If you'd like a separate video tutorial on the file manager, just go to it on the dashboard and click the video tutorial link. To select your image, just click on it and select 'choose'.
When you insert your image into a content area, it will automatically insert it to the left, with the text wrapping around to the right. This is the default alignment, as we've found this is what most people want. If you want to change this to the picture being on the right, no alignment at all, or to the centre, it's easy.
Just click on the image, and click the image properties button. You've got three options in this dropdown – Image left with the text to the right, image right with the text to the left and image centred, with no text to the left or right. Just make your selection.
If you want to completely strip all alignment, select 'not set'. Some users require this if they want to some more complicated layouts using images. If you're finding the layout you're trying to achieve isn't working, try setting the image alignment to 'not set'.
Of course, if you want to adjust the padding on your images to create more space, or adjust the Image Description or alt tag to help with SEO, you can do so by clicking on the image, and clicking in the image properties button. Just make your adjustments here.
You've also got the option of adding a border here too – just insert the number of pixels of how thick you want the border to be.
You may not be aware, but we've got amazing image editing software built into Shift. It's called PicMonkey. You can create all sorts of graphically amazing effects, including borders and frames so your images don't appear to be simply 'placed' on the page. This is outside of the content editor. To access it, just go to your file manager, select the image you want to edit, and select 'edit'. Try adding a frame to your image and playing around with this. You can view a separate tutorial on this feature by clicking the video tutorial link.
You can resize images in PicMonkey – or it may be easier for you to resize them in the content editor itself. Simply click on the image. If you're using firefox, you'll see size adjusters on the corners, which you can simply click and drag – we highly recommend editing your Shift website firefox for reasons such as this. Alternatively, you can adjust the size by adjusting the pixel dimensions after clicking the image, then going into the image properties button.
Please note, if your images are bigger than 600px wide, your images will automatically resize to 600px. Our clients have found that images of this side are more workable. To make the image its original size, while you're in the image properties, just delete the size dimensions, click update, and your image will return to its original size.
Firstly, the 'paste as plain text' is very important. When you're loading in your content, you'll probably want to copy and paste from other sources (like word files). When you copy and paste from word files or other websites, what can happen is you'll also paste all the hidden 'creepy crawlies', like styling and invisible code snippets.
When you use 'paste as plain text' however, all of your content will be perfectly formatted for web. Regardless of what source you're copying from, try and get into the habit of using 'paste as plain text'. When you're copying and pasting from within your Shift, feel free to paste as normal.
There's also a 'paste from word' button you can use if you're pasting from Microsoft Word. This keeps things like font styling. However, to ensure your website is optimised for web, we still recommend using the 'paste as plain text' option. Some browsers may hide the insert button – if this is the case on your computer, just click 'tab' and 'enter' to click the insert button.
Format Dropdown Box
The format dropdown box is a really important feature to understand. Whenever you have a headline in your website, you should use this.
If you click the dropdown box, you'll notice a few different options. Your 'paragraph' font is your standard font website font. This is the same font that was in your website concept before we built your website.
The best looking websites are consistent looking websites. We recommend you stick to this font format for all your page text.
If you want to have a heading however, you'll have heading 1 through 6. These are very important for search engine optimisation, or SEO. Basically, search engines look at the words that use these headings to determine what your page is about. The smaller than number, the more important. If you use key words relevant to your products or services in these headings, your pages are more likely to be ranked for those key words.
For example, if you're a plumbing company on the North Shore, you could make your heading one 'North Shore Plumbing Services'.
The Header 1 is biggest, and it gets progressively smaller. Header 2 and 3 are used for sub headings, and are still very important for your google rankings.
Please note, for web, you can only choose one style for each paragraph. In other words, you'll need to press 'enter' in order to select a new font style.
Tip - Shift + Enter
When you press 'enter' on your keyboard, it inserts a new paragraph, which by default is about one and a half lines. You may want to only go down one line at a time. If you hold down shift, and press enter, you can achieve this.
You can easily create links by highlighting the text (or clicking on the image) you want linked, and clicking the link button. There are two types of links – internal and external. Internal links link through to other pages on your website. External links link to other websites.
If you need to link to another website, for example google, just type in its full web address in the 'Link URL' box. If you want to link to another page, simply click 'Insert Internal Link' and choose the page you want to link to.
If you want to have the link open up in a new window (which is always a good idea if you're linking to a website outside of your own), select 'Open in a new window' from the Target dropdown box.
You can also link to files directly for download (for example, PDF files). To do so, simply click the 'add file' link, and select or upload the file from your file manager.
To remove a link, simply click the remove link button.
Anchor links are links that go to different points of the same page. For example, you can have an link at the bottom of your page, going to the top.
To use an anchor link, first you must create an anchor. Just click on the place you want the visitor to be directed TO, and click the 'anchor' button. Give it a name – it's best to keep it to one word so you can remember it later.
Let's call it, 'top'. You'll now want to link to your anchor. Simply highlight what you want to link from, and press the 'link' button. If it's within the same content block, you can make the selection from the 'anchors' dropdown box. If however, it's on a different content block, simply put a hash, followed by the anchor link name in the 'link URL' box. For example, '#top'.
You can even link to anchors on different pages. To do this, you'll need to copy everything after the domain name (including the /), and adding the #anchor name, and pasting this into the URL box.
If you need to paste in html snippets, you can press the html button to reveal the html code. However, if you have html from other sources, we'd recommend not using this, and instead using the HTML block.
We recommend to our clients that they stay using the simple toolbar. The simple toolbar has all the features you'll need to create great looking content.
More advanced users might need some more flexibility, like changing fonts or font sizes and adding tables. If this sounds like you, you can click the button that says 'swap to advanced toolbar'. Click the 'swap to advanced toolbar' confirmation button. To see the advanced toolbar, just exit out of your content window, and open it up again.
The core difference between the simple and advanced toolbar is the fonts capability, and tables capability.
You'll now notice a 'font family' dropdown box, which enables you to select from a dozen or so web friendly fonts, and 'font size', which will let you adjust your font size.
We recommend you stay away from tables, unless you really need to use them. Tables on the web can be a bit temperamental and are bad for SEO. You can do most layouts using the 'insert layout' functionality in Shift – it just makes things more flexible and easier to work. A separate tutorial can be found on creating layouts by following the video tutorial help link.
For those that need to create table layouts, once you're in the advanced layout section, you can follow the prompts. You can do everything you need to using these buttons here. You can insert the table using the insert table button, and selecting the number of rows and columns. You can then add or take away rows and columns using these buttons.
You can then split and merge columns and rows by highlighting what you need changed with your mouse, and pressing the relevant button. For instance, you can merge table cells by highlighting two columns, and pressing the merge button.
You can also adjust individual cell properties by clicking in a cell, or highlighting a group of cells, right clicking, and selecting 'table cell properties'. You can set alignments, widths, heights border and background colours from there.