Instructions and Protocols
Website Protocols
These Global Colours and Fonts are set in the Elementor Pro Panel under Site Settings. If you change one of the colours or fonts there then all instances of that colour or font should change throughout the website.
Global Settings
Elementor Pro Site Settings (Hamburger)
Site Identity
- Site Name: SeniorNet Nelson
Site Description: Easy and affordable technology learning for people over 50 - Site Logo: SeniorNet Federation Logo
- Site Favicon: Lighthouse
Background
- Background Type: Classic
Colour = #E8ECEF
Layout
- Content Width: 1000 (px) [Default Width = 1140(px)]
- Widgets Space: 20 (px) [Default space between Widgets = 20]
- Page Title Selector: h1-entry title (this size title is hidden)
- Stretched Section Fit To: body (Leave blank to fit page width)
- Default Page Layout: Theme (other options – Elementor Canvas/Elementor Full Width)
Breakpoints
- Mobile (px): 544
- Tablet (px): 769
Global Fonts (set by me)
- Primary: Nunito; Size 45px; Weight 500; Line Height 1.4EM
(doesn’t change from here but can be changed in Theme Settings); Letter Spacing 1.1 - Secondary 35: Nunito; Size 35; everything else the same
- Text 20: Helvetica; Size 20px; Weight 500; everything else the same
- Accent: Default (Not using at the moment)
- Heading 24 – Upper Case : Nunito; Size 24; Weight 500; everything else the same
- Heading 24: Nunito; Size 24; Weight 500; everything else the same
- Heading 30: Nunito; Size 30; Weight 500; everything else the same
Global Colours (set by me)
- Primary (Dark Teal) – #267C89
- Secondary (Light Teal) – #8DCCED
- Text-Main (Dark Grey) – #5B5A5A
- Background SNet Logo (Very dark Teal) – #023848
- Hover (Very Pale Teal) – #BCDBF6
- Header Overlay Dk (Dark Teal in Header Mountains) – #1F83AC
- Text-White – #FFFFFF
- Button Background – #1F83AC (Same as Header Overlay Teal)
- Divider Teal (Light Teal) – #8DCCED
- Sand – Suggested Theme colour not used yet
Buttons
- Roboto: Size 14; Weight 500
Image Settings
- None set here. Set with individual image
Heading Image Sizes
- Width 100%; Height 350-400 (choose for best look)
Images and PDFs
To upload an image to the Media Library:
- Search for an appropriate (free to use) image from Google Images, Pixabay or similar, and save it to your device.
- Edit it to a suitable size and compression (Use the TinyPNG App or similar).
SUGGESTED BEST SIZES
- Logo: 200 x 200 px
- Blog post: 1200 x 630px
- Banner: 1048 x 250px
- Featured Image: 1200 x 900px (landscape) 900 x 1200 (portrait)
- WP Background: 1920 x 1080px
- Automatic sizes options in Elementor:
- 150 x 150px (Thumbnail) Max 300 x 300px (Medium)
- 1024 x 1024px (Large) The original size of the uploaded image (Full)
- General rule: WP images no bigger than 150kb except for large photos
- Compress every image (TinyPNG)
- Basic rule: JPEG for photos PNG for graphics
- Add Title Tags and Alt Tags
- You can have as many images as you like in the Media Library, it will not impact website speed
IMAGES ON OUR SITE
- Most images on our site are ok at: Width 100% Height Between 350px and 400px. May need adjusting for tablet and mobile
- Alignment: Centre
- Elementor Size option: 1024 x 1024px (Large)
- Max Width: 100%
- Object fit: Default
- Opacity: 1100
To upload a PDF to the Media Library
First you must upload the PDF:
- On the Dashboard click Media.
The Media Library opens. - Open the page where you would like to add the PDF.
- Add a new section (+)
- In the Widget panel search for ‘PDF‘ and drag the PDF Viewer widget into the section.
The PDF Viewer panel opens - In the panel change PDF Type to File
- Click in the box under Choose PDF File.
The Media Library opens
If you want the complete PDF file to open:
- Click the file you uploaded.
- Click the Insert Media button.
The complete file opens
If you only want a link to the file:
- Click the file you uploaded.
- Copy (Ctrl+C) the file address from the bottom right of the window, above the Insert Media button
- On your page or post type the text you want as a link.
- Highlight the text and click the link icon in the Text Editor.
- Paste (Ctrl+V) the link on the text into the box
- Update your page.
How-To Section
Copy / Duplicate a Page
Using Yoast Duplicate Post plugin method:
- Find a page or post similar to the one you would like to duplicate.
- Go to Dashboard > Pages or Posts > Hover over the title of the page/post you like (a line options appears).
- Choose Clone. This duplicates the page as a draft.
- Hover over the title of the new cloned document and choose Edit.
- On the Edit Page – Change the title and any other details you need to, e.g. a new Parent from the drop-down list of menu items.
- Click Publish > Publish > then Edit with Elementor. The new page will open ready for you to edit. The header and footer open automatically with every page, and you cannot edit those.
- Edit the page: In the editing page, click the image and, from the Text Editor panel on the left, hover over the image and click Replace the image.
The Media Library will open and you can choose an image from the Library or upload one from your own image folder. (See instructions above) - Edit the rest of the page to your liking:
Click the edit icon (pencil) in each of the heading or text boxes but then you need to edit the text in the Text Editor in the left panel. You can add new headings, textboxes or images if necessary by clicking and dragging an appropriate widget from the left side panel. - Click the Preview icon (eye) at the very bottom of the panel to see what your changes look like. The Preview opens in a new tab and updates every time you click Update at the bottom of the panel.
Leave the Please register early… section at the bottom of every class page.
Remove any sections you do not want (right-click the pen icon and choose Delete).
You can use this method to copy any page/section on the website.
Just be careful to check you are editing a copy and not an original page.above
Add a new Post to the Latest News Page
IMPORTANT: I have already created the template. Your posts will show automatically after you create a new post and publish it.
To create a post:
- From the top of the screen on the Admin Bar choose New > Post
OR via the Dashboard > Posts > Add New
The Edit Screen opens.
DO NOT CLICK “EDIT WITH ELEMENTOR
In the Edit Screen:
- Give the post a title
- Category (in the right side panel) – Click the appropriate Category
- Scroll down the right side panel
click Add Featured Image
This takes you to the Image Library. - Add or upload an appropriate image
This image will appear full width at the top of the Post Page when opened. - Don’t forget to give the image in the Media Library an Alt Title, a Title and a Description (all can be the same, just copy and paste)
Add your content:
- In the Edit Section of the page add the text for the Post –
type in your text or copy (CTRL+C and paste Ctrl+V) from elsewhere. - If you copy and paste don’t forget to click the Add Plain Text before you paste,
then highlight all (Ctrl+A) and click the Remove Formatting button. - Add a heading and choose Heading 3 from the drop-down paragraph box.
- Add images throughout your Post via the Add Media button above
- Publish > Update
- Check the Latest News page to view your Post
Watch this video for easy instructions:
- Design Your WordPress Blog Posts With Elementor’s Single Post Template