Drop Box sample

Is my website mobile friendly?

To truly test if your site is mobile friendly (or “responsive” which it also is called), you can use Google’s test page here » Simply add your site’s domain (address) and it will give you a report of what’s not mobile-friendly on your site.

 

Then, there is one very quick way to find out if your website is visibly mobile friendly by “grabbing” the bottom right corner of your browser window with the cursor/pointer and make the window really narrow.

If your website rearranges the content so you still can see everything by only having scrolling up/down, then your site probably is good.

If you also have to scroll sideways, your site is not mobile-friendly and most search engines will punish your site by ranking it lower in a search.

Mobile friendly site

On a regular screen:

On a mobile screen:

Only need to scroll up/down to see all content as it reformats to fit the narrower screen.

Not mobile friendly site

On a regular screen:

On a mobile screen:

Note the scroll bar sideways as well as up/down. That means some of the content will end up outside of the screen on smaller devices and you would need to scroll sideways to see everything.

Pacific Crest Gallery’s website

1st Draft — home page

Design notes — top to bottom:

  1. Sun art will be replaced with actual logo
  2. Big photo/text is a slideshow of images with unique text for each image. Can be used for specials, seasonal, featured, etc. Links to product’s page.
  3. Three center blocks. Content is just suggestion. You decide what goes here.
  4. Four footer blocks. Content is just suggestion. These four blocks can be used as needed.

pcg_layout

IntraPoint PPT Template

Scandinavian Executive

Webbdesign, 1a förslaget

Det stora fotot längst upp kan vara en slideshow med 3-4 foton. Vi kan antingen ha välkomsttexten statisk eller byta ut text när det är en annan bild — kanske spinna på era 4 huvudrubriker?

Om vi gör det kanske välkomsttexten borde placeras lite längre ner på hemsidan istället. Upp till vad ni tycker är viktigaste informationen.

Här kan ni se temats mobilversion.

scandinavian_executive_layout

Upload and link a document (PDF or Word)

  1. Place your cursor in the text where you want your file link to be
  2. Click “Add Media” to upload your PDF or Word document
  3. In the “Add Media” window, type a title for your download link
    Screen Shot 2014-08-26 at 9.34.48 AM
  4. Click “Insert into post” and you will have a link like this in your text:
    My Word Doc
  5. If you want your file to open in a new window (preferred) instead of opening in the current window, do the following:
    1. Highlight your file link
    2. Click the Link tool in the toolbar
      Screen Shot 2014-08-26 at 9.18.57 AM
    3. Check the “Open link in a new window/tab” option
      Screen Shot 2014-08-26 at 9.38.29 AM
    4. Click “Update”
    5. Done.

Note! There is a difference between uploading a PDF v.s. a Word document. Web browsers can’t open and display a Word document, and will download the Word file directly to the user’s desktop instead.

If you upload a PDF to your page, the PDF will open in the browser window instead of download when clicked. The user then has the option to download the PDF if he/she wants to.

Add an email link

To add an email link like this:

hanna@highmarkdesigns.com
or
email me

Follow these steps:

  1. Type the text you want as your email link.
  2. Highlight the text
    Screen Shot 2014-08-26 at 9.18.20 AM
  3. With the text highlighted, click the “Link” symbol in the formatting bar
    Screen Shot 2014-08-26 at 9.18.57 AM
  4. Insert the following in the url field — mailto: followed by the email address:
    Screen Shot 2014-08-26 at 9.19.53 AM
  5. Click “Add Link”
  6. Your email link now has an underline to indicate it’s been linked:
    hanna@highmarkdesigns.com
  7. You can also add an email link the same way to an image or a word.

What’s the difference between a Page and a Post?

Pages are static content that are not time dependent. Normally, your website’s “static” content is used on Pages, like the About, Services, Contact etc. pages.

Posts are a dynamic content type. They have a timestamp and will be listed on your website in reverse chronological order. Each post is assigned to a Category. You can also Tag your posts. Posts are displayed in an RSS Feed.

Blogs use Posts as they can be organized in a manner so the reader easily can find a post about a specific subject or from a specific time.

Layout Settings

You can choose the layout of your page based on what’s available for your specific theme. Most theme has a default layout set that includes a sidebar. The “default” means that each time you create a new Page or Post, the default Layout is used.

But let’s say you are creating a page with something wide in the content and you don’t want it squeezed in next to a sidebar. Instead, you can select a page layout that doesn’t have a sidebar.

There are two ways to change the Layout Settings:

  1. In “Edit” or “Add New” view for your Page or Post, scroll down below the text editor window to the “Layout Settings” area* and select the layout that fits your content. Your options in the case below is Content/Sidebar, Sidebar/Content or Full Width.
    Screen Shot 2014-06-17 at 9.29.28 AM
    * If you don’t see the “Layout Settings” area, go to Screen Options and make sure Layout Settings gets enabled.
  2. Under “Page Attributes” in the right sidebar. Click the drop-down under “Template” and select the template (layout) you want for your current page. The selection might vary from theme to theme.
    Screen Shot 2014-06-19 at 8.57.10 AM
    * If you don’t see the “Page Attributes” area, go to Screen Options and make sure Page Attributes gets enabled.

Help, I messed up! I accidentally erased the content on my page or post!

WordPress automatically saves your work as you type so you don’t have to worry if your computer crashes or you make a mistake. Want to go back to a previous version? Not a problem. Every time you hit save, WordPress creates a snapshot that you can restore with a single click.

What if you accidentally erase the text on a Page or Post and hit “Publish” when you shouldn’t have. It happens to the best. That’s why we know how to fix it 😉

Here’s what you do if you need to bring back the previous version on a Page or Post:

  1. Go to the “Edit Page” (or Edit Post) for the page you edited incorrectly or accidentally erased the content on.
  2. In “Edit” view, go to “Screen Options” and make sure “Revisions” is selected.
    Screen Shot 2014-06-16 at 9.45.58 AM
  3. Scroll down to the “Revisions” tab (below your content editor window).
    Screen Shot 2014-06-16 at 10.10.03 AM
  4. Select a revision that’s the latest one you did BEFORE you made a mistake that you want to have undone.
  5. Your current page’s content will now be compared with the revision you chose. If you want to restore the older revision, simply click “Restore This Revision” and the page will be restored to an earlier version, overwriting the edits you made that you didn’t like.Screen Shot 2014-06-16 at 10.11.15 AM
  6. You can now redo your edits to your page without the mistakes 😉

Help I messed up! I trashed a page by mistake

Let’s say you accidentally delete a Page or Post only to realize you shouldn’t have… Well, it’s not so bad. The Page or Post will stay in the “Trash” until you empty the trash manually.

Here’s how you restore (“untrash”) a Page or Post from the Trash:

  1. Go to Posts —> All Posts or Pages —> All Pages (depending on what you want back).
    Screen Shot 2014-06-13 at 5.03.02 PM
  2. At the very top of the directory of all your Pages or Posts, look for the “Trash” link and click it.
    Screen Shot 2014-06-13 at 5.05.42 PM
  3. Select the Page (or Post if you’re in the Post’s Trash) that you want to restore and click “Restore.”
    Screen Shot 2014-06-13 at 5.07.11 PM
  4. Your Page is now moved out of the trash and back into your directory of All Pages (or Posts).
  5. Your page is back in the directory as well as on the site!
    Screen Shot 2014-06-13 at 5.08.39 PM

Widgets

Certain areas on your web page are using “Widgets” to automatically display dynamic (not static) content.

In order to get to the Widgets control panel, you need to log in to your WordPress site using the Admin access. Please contact your web developer if you don’t have this login info.

Most commonly widget areas are used on the Home page, Sidebars and Footer areas.

Widgets are independent sections of content that can be placed into any widgetized area provided by your theme (commonly called sidebars). To populate your sidebars/widget areas with individual widgets, drag and drop the title bars into the desired area. By default, only the first widget area is expanded. To populate additional widget areas, click on their title bars to expand them.

The Available Widgets section contains all the widgets you can choose from. Once you drag a widget into a sidebar, it will open to allow you to configure its settings. When you are happy with the widget settings, click the Save button and the widget will go live on your site. If you click Delete, it will remove the widget.

If you wish to manage your widgets, please follow these steps:

  1. Go to “Appearance —> Widgets”
    Screen Shot 2014-06-13 at 11.33.54 AM
  2. In the Widgets panel, find the Widgets area you want do edit and expand it.
    Screen Shot 2014-06-13 at 11.40.11 AM
  3. When you have expanded your Widget area, find the Widget you want to edit anc expand it:
    Screen Shot 2014-06-13 at 11.39.57 AM
  4. Do the edits you wish and click “Save” — this will update immediately on the website.

Widgets have a lot of functions and options, for more in-depth info, please read more here.

Screen Options

Some of the instructions here might ask you to find a specific area on your screen. If you are in the correct screen and don’t see the requested area, the area might be “turned off” in the Screen Options.

To turn an area on, do the following:

  1. In most screens while in the WordPress Dashboard (you’re logged in), find the “Screen Options” tab and click it.
    Screen Shot 2014-06-13 at 11.20.26 AM
  2. When the tab is expanded, look for the area you need to “turn on” and select it.
    Screen Shot 2014-06-13 at 11.21.37 AM
  3. You can also “turn off” other areas if you don’t need them and want to keep your screen clean.

Home page — Centric Theme

The home page in the Centric Theme is using pages or posts for most of its home page areas. In order to change the content in the home page’s area for a specific page, please do the following:

  1. Scroll to the home page area you want to edit and click the link button to take you to the page in question.
  2. When you are on the correct page, click the “edit page” link or button in the site’s header bar.
    Screen Shot 2014-06-13 at 11.11.58 AM
  3. In “Page Edit” view, scroll down to the “Excerpt” area (if you don’t see the “Excerpt” area, follow instructions here to make it visible).
    Screen Shot 2014-06-13 at 11.14.33 AM
  4. Edit the text in the “Excerpt” area. For more instructions about Excerpts, please click here.
  5. Click “Update” in the upper right corner of your Page Edit window.
    Screen Shot 2014-06-13 at 11.15.24 AM
  6. Your edits are now published to the home page.

Note. If you need to change which page is displayed in an area on the home page, you need to log in to your WordPress site with Admin login. Please contact your web developer for this login if you don’t have it.

For Centric theme specific instructions, please click here.

Adding a custom widget

If you need to add something custom to your sidebar or another widget area (something that doesn’t come with a plugin), this is one way of doing this.

In this case, we are adding a button with a link to the Primary Sidebar.

  1. Open a new post.
  2. Add your button as an image placed into the post then link that image to the link you want it to go to.
    Screen Shot 2014-03-13 at 12.53.29 PM
  3. Click the “Text” tab in the editor and copy all the code.
    Screen Shot 2014-03-13 at 12.54.24 PM
  4. Go to “Appearance —> Widgets” and place an empty “Text Widget” into the area where you want your button. Paste the code copied above into that Text Widget and click “Save.” — You have now added your button with a link into your sidebar.
    Screen Shot 2014-03-13 at 12.55.36 PM

All-In-One Calendar Plugin

If your website has the All-In-One Calendar Plugin, here’s how you manage it.

You can find the plugin developer’s full tutorials and help here —>

Add an event

Go to “Events —> Add New”
Screen Shot 2014-03-02 at 2.26.58 PM

Add event information

Click on the green tabs to enter the information requested. Use the content area at the bottom for any additional descriptive text for your event including images — this area is just like the content area on a page or post.
Screen Shot 2014-03-02 at 2.33.03 PM

If you have Event Categories, don’t forget to select or add your event category:
Screen Shot 2014-03-02 at 2.39.19 PM

If you want a specific image used as the Featured Image for your event post, use the “Featured Image” upload:
Screen Shot 2014-03-02 at 2.39.52 PM

When you are done adding your event’s info, click “Publish”
Screen Shot 2014-03-02 at 2.38.18 PM

Post Categories

If your website has a blog, you might want to separate your blog posts — or content — into categories to help people find what they are interested in quicker.

Let’s say you post information about travel. Then you might want your subject to be “Travel” but divided into sub categories like “Europe,” “Asia,” “America” and “Africa.”

This means that if someone clicks on “Travel,” they will see all your posts whether they’re in sub categories or not. However, if they’re only interested in travel in Africa, they click Africa and only see your information pertaining to Africa.

So structure your content before you start adding it so it makes sense to your audience.

Here’s how to create categories:

  1. Go to “Posts —> Categories”
    Screen Shot 2014-02-03 at 4.17.47 PM
  2. Add the name of your main category — In this case it’s “Travel”:
    Screen Shot 2014-02-03 at 4.18.40 PM
  3. Save your new category by clicking the blue button “Add New Category”
  4. Add your sub categories — In this case “Africa” — select “Travel” as the parent category so this gets organized under Travel as well.
    Screen Shot 2014-02-03 at 4.20.05 PM
  5. Save your new sub category.
  6. Continue adding until you have the categories you need for your content.

You can rearrange your categories by selecting them and changing the “parent” category to a different category or none (then the sub category becomes another main category).

You can also add new categories “on demand” when you are in Edit or Add Post view. Simply click “+Add New Category” in the “Categories'” panel in the right sidebar:
Screen Shot 2014-02-03 at 4.23.42 PM

Don’t forget to click “Add New Category” link to confirm your addition.

More information on Categories.