How to manage content on this site
|1||locate the selected jpg file with the dimensions of 1920 x 530|
|2||goto pagebuilder->pages and select media from the vertical menu on the left|
|3||click upload and select the header jpg image and upload|
|4||select the subpage by clicking on the name of the subpage|
|5||Take note of the first row which has no add-on's located within and click on the small gear on the upper right hand corner|
|if there are no rows or no empty first row then click add new row|
|now select the left most choice reflecting only a single column row|
|6||select the "style" tab and scroll down to the background area and select background image|
|7||now select choose your image and select the image from the list of images and click insert|
|8||Select the following remaining options|
|margin||-25px 0px 0px 0px|
|background position||center top|
|all others should be unset|
- Joomla overview
- Logging in on the back end
- logging in on the front end
- administrator back end overview
- Page builder Pages
- doing backups
- what about updates
- Page Builder Overview
- Structure of a page (template -> page -> row/section -> addons)
- Template (for articles outside of page builder and pages in page builder)
- Page = Page Builder context
- pages can be organized in categories if needed
- are editible on the back end or front end
- front end is newer and not fully capable yet but much better UI
- back end is stable and requires a save and view to test your changes
- like articles if someone has a page checked out (editing) others cannot edit that page
- whole pages can be exported as a JSON file on your workstation or one drive. JSON files can be imported into a new page to recreate the page
- pages can be linked to menu items
- the menu "Main Menu" is the menu which displays in the off canvas menu
- Pages are made up of rows/sections
- rows/sections are made up of addons
- rows/sections are styled (background, sizes (padding margin))
- can have 0 to many addons
- can be moved by drag drop
- should all be admin named
- can be saved in the my sections area and added/copied to other pages
- rows can be added, deleted, enabled, duplicated or disabled and the bootstrap grid layout can be established
- rows are organized by a standard grid method called Bootstrap and we are currently at version 4
- the grid consists of 12 elements wide and can be organized in any way as long as the row always ends up with a total of 12 elements wide. Examples: 6+6 (2 columns) or 3+3+3+3(three columns or 9+3(2 columns with the right most being 1/3 the size of the left) or 12 (which is one column)
- At the moment there are 131 addons available. 44 are native Page builder addons and the remander are from a third part called Shortcode Ultimate. Some of the Shortcode ultimate addons duplicate functionality of the native addons. The native addons are listed alphabetically first followed the the shortcode addons. When adding an addon, if possible use the native addon functionality if duplcated.
- addons are listed in the documentation under the SP Page Builder menu. Examples are image carosel, text box for placing text on a page, images, accordion, videos, buttons, and raw html
- addons are selected and placed into one of the grid sections in a row
- each addon has 2 primary areas for setup and the 3rd for mobile, tablet and desktop responsive settings (used less often)
- the first is for the general function of the addon. For example the image addon has settings for selecting the image file, title, font size, border choices, animation etc
- the second is mostly the same for all addons and has to do with the addon styling like background image, color, font sizing color etc
- Addons can be duplicated, moved, disabled, saved for use elsewhere, edited or deleted
- Addons have the option for setting CSS class names associated with that addon so that styling can be customized in the template style sheet. I currently have (700 lines) styling located in the custom.css sheet which is used for placement of page elements, color, sizing, behaviour and responsive characteristics for the pages. This CSS name is how I am able to reference the addon in my custom.css page
- most addons have the option for animation allowing for motion, fading etc
- most addons are simple and straight forward in their function and use
As a general reminder, please check that your updated pages work properly and responsively for tablet and mobile by narrowing the width of the browser to those sizes to ensure that they display properly.
How do you know there is a problem?
- change the width of your browser to tablet and mobile size and see if there is a space added to the top, bottom, left or rght of the addon or row.
- look at the row or addon style settings. Select the desktop, tablet and mobile icons and for each, have a look at the margin and pading settings to ensure that the values are as desired
- Note: at the moment, the margin default setting for bottom is 20px for tablet and 10px for mobile.
Landing Page Vision
Upon landing on the main page, the viewer will experience who we are without the use of words or video. Just photos. Each photo has been carefully chosen so to reflect who we are and what we stand for. Primarily we want to convey that we are, multigenerational with a focus on young families with students and childrens being a draw. That we are contemporary in our dress and worship style. (no suit and tie required), and that we have a place where you belong. All through carefully selected and strategically taken photos. We will NOT show photos of what we wish we were, but instead, who we are. That way when someone visits our website, and visits our church, there is no let downs or over statements.
High resolution photos
NO promotional material on front page or banner
Fonts must be used same throughout website- Font Name: "Montserrat"
Color Schemes will need to be same throughout
Calendar (if there is one) needs to be updated and “stocked”, an empty calendar looks as if nothing is happening.
Landing Page template Design
Big full screen image to set the tone. Immediately letting the viewer know what our priorities are. All photos will need to be High Resolution with a 1920x1080 dimensions. We should avoid having text and logos cover the faces of the people in the photos, and avoid photos that drown out the colors of the text that are layering (over top) of them.
This photos conveys heavy imagery that our church is directed by biblical teaching, from an experienced pastor, who is saying “come as your are” with his dress code.
Emotional evoking photos, EXAMPLE: a father hugging her daughter as she comes out of being Baptized, make the viewer connect to moments when they too felt those same emotions, or desire to experience themselves.
Who are we through images?: Being Transparent as to what a service looks like is important. The more clear we can be as to what our worship looks like, the better for the new comer to know whether or not this Gateway suits them.
Quick information Bar:
Very easy to spot contact buttons so that everyone can quickly snag the address, phone number, and office email right off the front page. This is about as heavy worded as we want to get on the front page. Aside from the initial image, this needs to be a quick resource for them to be able to navigate through the majority of the site.
Dimensions should be high res and at least 8x8 inches.
Quick Link Page Design: (Ministry Tiles)
Again these photos need to be clearly labeled and at a glance, people need to know exactly what each of them will contain when clicked. All photos should indicate action, or movement, to send the vibe of health and life. Dimensions should be high res and at least 8x8 inches. Please note that if for whatever reason you decide to change the title one your tile, you will need to be sure and change that title within all the categories that use that title as a reference.
Connect Bar Design:
VERY clear very simple connect information. Also we have the option of adding our Instagram/Facebook Handles.
Bottom of Page Bars:
The color scheme for these bars always must fall into the color family of the Websites primary color. An example for the Gateway website can be seen below. Our color family for our blue is: 006666, 339999, 3399cc, 33ccff