Quick Start Help: key2content
Login here: https://www.key2content.com/wp-admin using the details we emailed you.
*Note that link address will change to https://yourwebsitedomain.com/wp-admin once your site is transferred over and launched on your own hosting / domain.
On the login page enter the username and password we sent you. If you did not receive these details or need us to resend them just give us a shout!
Logging in takes you to the website admin dashboard or "back end". Don't panic! - you don't need to worry about 99% of all the stuff there. Promise!
Switch to your normal website view and back to the admin dashboard again by clicking the little home icon top left. Notice the new black admin toolbar strip running across the top of your pages when you are logged in. You can log out again by clicking the little profile picture icon top right, or you will be logged out automatically when you close your browser.
Editing your pages
Overview: Your website pages and posts are created using the Siteorigin Page Builder System. With a little practice you should soon find editing and creating new content a snip.
The concept of the page builder is that each page consists of rows. A page builder row can then be sub-divided into columns or sections. You can then add "widgets" to your sections. The most common and useful widget is the Siteorigin Editor. This allows you add text, images, videos or any other type of content you wish.
There are many other, more specific widgets to help you create all manner of image sliders, hero images with text on top, image galleries and so on. Your page rows can be "drag and dropped" into any order you wish. Your rows and individual sections can be duplicated or copy and pasted into other pages or deleted.
Each row can be adjusted (little spanner icon on the right of every row) to span the width of your page content (normal), full width where the row spans the whole width of your browser but the content inside maintains a preset width, or they can be "Stretched" so both the row and the content span your full browser width with no padding.
Your rows and sections backgrounds can also be styled by choosing a colour or an image. The possibilities are almost endless and we encourage to discover more about the options on the Siteorigin website if you're interested in such things:
WordPress Page Builder Tutorial: Getting Started with SiteOrigin
Many more site-wide editing options are available in the "Customizer" tab in the admin toolbar strip. Here you can update your logo, change text and page background colours, text and heading sizes and fonts etc etc. Use with caution though and take a site backup (see end of help doc.) before just diving in! More details available from wordpress: https://wordpress.com/support/customizer/
How to edit your pages:
Login and switch to the "normal" website view as described previously.
Navigate to any page you want to edit using the website navigation tabs and click the little Edit Page icon in the black admin tool bar across the top of your screen. This will open your page in the wordpress page editor.
You will find that your page content is contained within a series of rows or boxes which are arranged in the same order they appear on your page. To edit the actual content click inside any box to open the content editor.
You will find a handy "Undo" button in your content editor if you make a mistake. Your website also automatically creates backups of each page as you edit them. These backups are available within the page editor so you can select a restore point if things get out of hand!
Editing Text
Example - edit your homepage “Intro Text”
Login, switch to the normal site view and open your homepage for editing by clicking the little pencil icon (Edit Page) in the black admin toolbar strip across the top of your screen.
Click inside the 2nd row (Intro Text). This opens the content editor.
*Note: WordPress gives us 2 edit modes - "Visual & Code". You can switch between the 2 views by clicking the tabs in the top right of the editor. You would mostly be using the Visual mode as this displays your content as it looks on the website. The Code mode is more useful for pasting special html code or text lifted directly from another website or word processor document etc.
You'll see some familiar formatting options in the edit tool bar. Most of them are obvious, but there's a drop-down menu (paragraph) to select various Heading sizes (H1 to H6) or the normal default paragraph text size.
So make your text edits as required. Then click the blue "Done" button and finally the big blue 'Update' button in the Publish section on the right to save your changes. You can now check out the live page by clicking the 'View Page' tab in the black admin strip across the top of your browser.
Find out more about the Site Origin Page Builder system on their website: https://siteorigin.com/page-builder/documentation/
Changing Images
Homepage Banner Image & Text
Some of your pages, such as your home page have a large feature image or slider at the top. You can change this image by editing the homepage. Click inside the top row "Banner Image" to open your Hero widget.
Your image and text are contained inside a "Frame" in the Hero widget. There's only 1 frame at the moment, so click the little down arrow on the right of the frame to reveal the contents. Your banner text will be displayed within the familiar text editor, so make any changes there.
To change the banner image, scroll further down your frame, and under the text find the "Background Image". Click the "Choose Media" option and then browse your website media library for images you have already uploaded, or browse your computer for a new image to upload. Instead of Choose Media, you can try the "Image Search" option. This searches the popular and royalty free Pixabay website for images. Once you have selected a new image, click the blue "Set Media" button bottom right.
Once you have finished editing your banner click the large blue "Update" button to save your changes. Check out how it looks by clicking the “View Page” tab in the black admin toolbar strip across the top of your screen.
*Note: While your website image dimensions aren’t critical, for best results you want to use a fairly large, landscape / letterbox format image for these banner / hero images. Aim for something @ 2000px wide X @ 700px tall. (Tiny, portrait style images just won’t look right here)!
Replacing Content Images
If your pages include images in the content these can be replaced, resized or deleted.
A good example of this would be your “About” page which has an image on the left and some text on the right.
To replace the photo of the existing image, open your about page in the page editor (Edit Page tab in the black horizontal admin toolbar across the top).
The top row is split into 2 columns, with the image on the left and your text on the right, so click inside the box on the left to open the content editor.
This will reveal the current image. Click the image and select the little pencil edit link which pops up. This opens your image for editing. You have various options here, such as resizing or adding a hyperlink to another page etc. But for now we are just going to replace it. So Click the 'Replace' button underneath the big image thumbnail in the image editor, and browse your website media library or your computer for another image you want to use instead.
Once you have selected a new image, click the blue Replace button, then 'Done' and finally 'Update' to save your changes.
Uploading / Adding New Images
You can easily upload and add an image to any page. Just edit the page, open your content editor and click where you want the image to appear. Now use the 'Add Media' tab (top left of your page format toolbar) and browse to find your new image and click the blue 'Insert into page' button, then 'Done' and 'Update' to save your changes.
Services
We have created a main Services page for you, which includes a service strip section with 3 thumbnail images and a link to the individual pages. Such a strip is visible on your homepage, and also at the bottom of each Service page.
If you want to change the images in these sections it’s important to understand that you won’t actually find those 3 images when you edit a page. Instead you will find a section with "shortcode" such as:
[pt_view id="60f6b3cq4l"]This shortcode is created using a plugin “Content Views”. It searches your site for pages in whatever category you specify (eg. services) and then fetches an image and a small excerpt of the page text from each and adds a "Read More" link to your pages. This “view” will then be displayed on any page where you add the shortcode. Bit confusing, I know!
We have also hardcoded this service strip to appear at the bottom of each service page to aid your visitors to see what’s on offer and easily navigate your site.
You can change the thumbnail images used in the “View” by editing the individual pages they link to.
For example, if you wanted to change the image for the link to your Copywriting Service page (maybe because it's a bit too big and gets cut off... 😉 – Visit the copywriting page and open it in the page editor.
Find the "Featured Image" section on the right, and replace the existing image with the new one you want to use.
*Note: the same panel layout has also been repeated on your homepage and at the bottom of each individual service page to encourage your visitors to explore all your services.
Thumb Links Text Snippets
You can also create a custom text snippet for your Service thumbnail links. While editing any service page, scroll down the content editor and right at the bottom you find the "Excerpt" field. Just write a few words there and they will appear under the thumbnail.
Update, Done and finally “Update” to save your changes.
Resources / Case Studies
You will find a similar thumbnail / text link panel has also been created for the links to your case studies on the homepage, so as with the service page links, edit each case study to change the linking thumbnail and text.
You can find out more about the other layouts and possibilities Content Views offers by visiting: https://en-gb.wordpress.org/plugins/content-views-query-and-display-post-page/
Website Backup
We have installed the "All in one migration" backup plugin. You can use this to take a quick backup of your entire website. You can then download your backup to your computer for safe keeping and use it to restore your website if ever anything goes badly wrong. Best to store these backups on your own computer and delete them from the website backups section to aid security and save hosting space. To create a backup simply login to your website dashboard, find the "All-in-one-Wp-Migration" plugin in the left column and click backups / create backup - https://www.key2content.com/wp-admin/admin.php?page=ai1wm_backups
Website Maintenance & Security
The WordPress software, theme and plugins are all set to auto update to the latest versions whenever they become available.
We have also included the Sucuri plugin. This is an extra security feature and will alert the site's registered administrator via email if it encounters any issues. You can keep an eye on your website "health" once in a while by visiting the "Site Health" section in your admin dashboard: Admin dashboard / tools / Site Health https://www.key2content.com/wp-admin/site-health.php
Of course if there's anything you are not sure about just give us a shout.
And there's more...
This is really just a rough and ready quick start guide to help you carry out the most common edits. You can find out a whole lot more by visiting the plugin websites below where you can learn all about adding and styling rows and columns to hold your content, and alternative layouts for your Content Views, buttons and deeper theme customisation.
We have also included the "All in one migration" plugin. This allows you to create a complete backup of your website and to quickly restore it if anything goes badly wrong...
Of course, if you want help with anything specific all you have to do is give us a shout: web@speedypancake.co.uk
Technical Details
*Any premium / paid for software or plugins we use such as Generatepress Premium are available to you for free under our Speedypancake developer license. In the unlikely event we ever decide not to renew our license(s), your theme and plugins should continue work as normal, but you may not continue to receive regular software updates. If this is important to you then you are free to visit the theme or plugin website to purchase and install your own copy / license.
Website created using the most recent version of WordPress available at the time of handover.
Website theme / framework: Child version of Generatepress
Key Plugins
All-in-One WP Migration and Backup: https://en-gb.wordpress.org/plugins/all-in-one-wp-migration/
Content Views - Post Grid & Filter : https://en-gb.wordpress.org/plugins/content-views-query-and-display-post-page/
GP Premium: https://generatepress.com/premium/
MaxButtons: https://en-gb.wordpress.org/plugins/maxbuttons/
Page Builder by SiteOrigin: https://siteorigin.com/page-builder/
Strong Testimonials: https://en-gb.wordpress.org/plugins/strong-testimonials/
Sucuri Security: https://en-gb.wordpress.org/plugins/sucuri-scanner/
Yoast SEO: https://en-gb.wordpress.org/plugins/wordpress-seo/