To begin administering your website, you will first need to log in to it using the admin panel.
You will log in at https://yourwebsite.com/administrator
Use your user name and password you chose when you signed up, or had assigned to you.
The login screen will look similar to the image above. After you log in, you’ll be taken to the main administrative area where you will be able to manage your entire site.
You will only be using a very small portion of the components to do so, and most of those are set up as icon links to make it easy to locate. You can see these areas pointed out for reference in the next image below…
As indicated in red, you will want to click the BACKUP WEBSITE Icon first if you’re making any major changes to the website that could possibly cause problems for you. This would allow you to revert the site back to the original state before you attempted your changes and save you hours of work recovering your site.
You can read more, learn how to use Akeeba Backup by viewing their videos and reading their documentation HERE
The only other item on the page you would typically need would be the PAGES icon in GREEN in the SP Page Builder block on the right side of the admin page.
Upon clicking the Pages Icon, you’ll be taken to the SP Page Builder Program main page which lists all of the pages created and managed by Page Builder. (You MAY have page(s) that are NOT managed by it, and we’ll discuss that later.)
The page looks like the image below…..
You will notice that each page should be labeled to match closely the corresponding page on your website. In this way, you can navigate directly to the page you wish to edit without searching through all of them.
So if you’ll be editing the Home Page, just select “Home” by clicking the Page Name. If you hover your mouse cursor over the page name, You’ll see two menu items appear: “Preview” and “Frontend Editor”. If you’d like to see what your page looks like as you make changes, you can select the “Preview” item to open your page in a new browser window. You may also rearrange the pages to suit your needs, so if you only edit one or two normally, you can simply drag and drop those in the positions you prefer. Click and drag the dots to the left of the page name.
Once you’ve selected the page and opened it by clicking the page name, you’ll be looking at a screen similar to the one shown below. This is your editor screen and presents you with all of the items that appear on your page. They will usually be labeled with matching labels with your actual page items, but you can change those to meet your specific needs. (I have added descriptions for all of the Home Page Items so you can see immediately what each is. You can do the same for the rest of your pages.)
The next image shows the Home Page editor screen with those descriptions for each block.
You can easily tell what each block is and what it does by looking at the descriptions. These are created by clicking on the little GEAR icon on the top right above each ROW and typing in a description in the ADMIN LABEL block. (This is only visible to the administrator and never appears on the site.)
The image below shows the Settings “GEAR” circled.
The image on the next page shows the opened Settings block and you can see the “ADMIN LABEL” at the top. Just enter your description here, save and close it and it will immediately appear above that row.
The GREEN CHECKMARK block is the SAVE button. You must ALWAYS click that when using ANY of the editor blocks to save your work!
Each ROW contains 1 or more BLOCKS as assigned by you. There is a Add/Manage COLUMNS icon on the upper right of each row in the group of editor icons. Just hover your cursor over them to see their labels. The Columns Icon allows you to determine how many, and how wide, each column in your ROW will be. You can have from one large row up to 12 single rows, and anything in between. The rows selector shows you a visible representation of them so you can just select the look you want. See the image below…
You may also adjust any existing columns in an existing row by opening the columns item and selecting the new layout you want. You may need to move the addon content inside them as those will usually adjust to your layout automatically, and not likely the way you wanted them to.
After you’ve saved your edits or changes for the row or block, scroll back up to the top of the page and click the GREEN SAVE BUTTON. You MUST do this to save all the changes you’ve made to the PAGE. So you’ll save your block, then save the page.
Not ALL of the items on your site will be managed by the Page Builder. Some items may be managed by other components and selected in the MENU when the site was created. You can see WHICH pages use other components very easily.
Simply go to the “Menus” item in the top menu, and select “Main Menu” from the dropdown list. You’ll be presented with all of the menu items and what component is used to display them.
The first image shows the top bar menu in your admin area….
When you select the “Menus” item, you’ll see this….
And upon selecting the “Main Menu” item, you’ll be presented with the following….
You’ll now be able to determine which menu items use the Page Builder Pages and which do not. All those using the Page Builder component will appear with an "SP Page Builder >> Page" directly under them.
In your case, there MAY be pages NOT build using Page Builder such as the Login page, which uses the “Users/Login” component (found in your MENU SELECTION tool). These will always be evident as in the image above where a "URL" type or "Users >> Login Form" type has been used. (You can find out all about the Joomla Menu System
Check out the Video on managing your Joomla Menus HERE
Finally, to VIEW your SITE while editing, you can select the SITE NAME on to top right of your top bar and click that. It will open up a new page for the front end of your website….
A special note….
When creating some of the content, there may be WIDGETS (or specialized code) supplied by 3rd party sites and other vendors that were used in the design of your website. These widgets are simply COPY/PASTE code which is inserted into a RAW HTML CODE addon module in the Page Builder component. Any time you see “RAW HTML” in a block, that indicates that we’ve just copied and pasted the code from another website into the block on yours which then displays their content.
Finally, there are a TON of resources for working with Joomla and Page Builder. Since you’ll most likely ONLY be using Page Builder, the BEST information is found in their own documentation for using all of the features it has…
Visit JOOMSHAPER DOCUMENTATION to view their complete online user manual and they also have many videos that explain a lot more about the program. You can also just look up “Joomshaper” or Joomshaper Page Builder” in google or YouTube to find vast amounts of information about the program.
And of course you may always call on us for assistance.