Each of your webpage consists of interchangeable widgets and in order to edit the right section, you’ll need to know which widget you would like to edit.
To learn how to edit a section, please choose from the list below:
Edit Special Pages (Calculators, Blog, Testimonials, etc)
To change your template, navigate to “Website” >> “Template & Colors”, then select a template from the “Template” Drop down.
To see examples of different templates go to https://www.etrafficers.com/websites/mortgage-website-templates/
Notes:
Here are some examples of the same website with 3 different templates:
Notice That the images, and text do not change, but rather the overall look and feel (colors, fonts, meny layout, etc.) of the website change.
To edit the header or footer, navigate to “Website” >> “Widgets”. Then expand either the header widget space or the footer widget space. With the widget expanded you will likely see several column blocks which you can then expand and edit.
To Edit the main menu navigate to “Website” >> “Menus”. Then press the pencil icon next to “Main Menu”. The column on the right represents your current menu. You can then delete menu items from that column or you can add new ones using the left-hand column.
To create/edit custom menus, navigate to “Website” >> “Menus” and find your custom menu from the list or click “New Menu”.
After creating a menu, you can use it in a “Custom Menu Block” or with a Custom Menu Macro.
To edit the home page, navigate to “Website” >> “Pages”. Find the home page from the list (It will be highlighted in red and will have the URI: “index.php”).
You can then proceed to use the editor to change your home page content, or you can choose from predefined content by clicking on the link that reads: “To repopulate the home page content with previously defined, click here”. Warning: Repopulating the home page will delete your current home page text and replace it with default text.
If you want to change your slider images, or turn your home page into a parallax or video background page, click one of the following links:
Video Background
Edit Slider
Parallax Background
A parallax page, uses parallax scrolling which means that the background scrolls at a different speed than the foreground. To see an example of parallax scrolling look at: https://clearsky-etrafficers-com.mysecureloan.com/
Video Background pages are parallax pages with a video in the background instead of a an image or solid color. You can mixed pages where there are both videos and images on the same page.
You can make any page parallax by navigating to “Website” >> “Pages” and then finding your page in the list. Click the pencil (edit) icon and scroll down to the bottom where you see a dropdown entitled: “Enable Parallax”. WARNING: This will erase your current page content.
Select “Yes” to enable parallax.
Each parallax page is broken down into slides. Each slide has a different background. To add a new slide, click “New Para-Slide” at the top of the slides list. You can then set the background for the slide and compose/paste in your content.
Some pages have special logic that cannot be edited in the normal fashion. Several of these pages are described below.
If your website uses a blog, you may notice that there is a Blog page listed under “Website” >> “Pages”. If you edit that page however, you will not see any of your blog posts listed in the editor. The only thing that you can change from the editor is the text that will appear above the blog posts (likely an introduction to your blog). If you want to add/edit/delete blog posts you will need to navigate to “Website” >> “Blog Posts” instead.
The calculators themselves cannot be edited. You can however select which calculators are displayed and you can add text that will appear above the calculator links on your “Calculators” page.
To change which calculators are displayed, navigate to “Website” >> “Pages” and choose “Mortgage Calculators” (may be under a different name like “Calculators & Tools”) from the list and hit the Edit (Pencil) icon.
Above the editor, you will see a link that reads: “To select which calculators are displayed on your site, click here”. Click on this link to select your calculators. To see an example of the calculators in use look at this page: http://www.askaloanofficer.com/calculators
If your website has a customer testimonials page. You might notice that the “Customer Testimonials” appears in the “Pages” menu. You will not see the testimonials listed in the editor however. The only thing you will see is the introduction to the testimonials. To add/edit/remove testimonials, navigate instead to “Website” >> “Testimonials”.
You can change the text that appears above the links on your “Apply Now” page. To change which applications are listed, See “Change which applications are available to Borrowers”
Sidebars are reusable elements that appear either on the left or right hand side of a page. To add a sidebar, navigate to “Website” >> “Widgets” and then click on “New Sidebar” at the top of the list. Then give your sidebar a name and press save. Once you have created a sidebar, expand it in the list and you can drag widgets from the left hand column into your new sidebar (HTML, Custom Menu, Testimonials, etc.).
Press “Save” at the bottom to save your sidebar. You can then press “Assign to Pages” at the top of your sidebar to choose on which pages the sidebar appears. Make sure to choose a layout that includes a sidebar (“Page content with Left sidebar”, etc.).
Sliders are large rotating images that typically appear at the top of your page. To edit/create them go to “Website” >> “Sliders”.
You can press “New Slider” to create a new one, or edit and existing slider.
When editing a slider you can change the transition speed, and manage each of the image slides.
When editing your website you will often be presented with an editor that looks like this:
It’s important that you understand and be able to use the editor. For the most part is works like any text editor, you can type, highlight and edit text. Can click and drag images and add hyperlinks. See below for details
The editor gives you the ability to make text “Bold”, “Italic”, or “underlined”. It also gives you standard justification modes (Right aligned, middle aligned, left aligned, justified). Many of the buttons on the editor will probably be familiar. You can also change a paragraph into a header by using the “format” dropdown.
NOTE: In order to provide easy continuity and consistent style, there is no option to change text font. If you would like change the font see the section: Advanced Tips & Tricks – Custom CSS
You can upload and add images to the editor. Please watch the following video for instructions.
To add a video to your site, you must first upload it to YouTube. If you need help creating a YouTube account see here: https://support.google.com/youtube/answer/161805?co=GENIE.Platform%3DDesktop&hl=en/
Once you have the video uploaded to YouTube, copy your video’s URL, and then with the cursor in the editor, press the “YouTube” button on the editor. You can then paste in your YouTube video’s URL and change the size. Hit okay and you will see the video appear in the editor.
You can upload your own pdfs and documents on a page to either display or download. To upload a document, in the editor toolbar, click on the Link button (looks like a chain link). Then click “Browse Server”. Click next on “Manage/Upload”, and then on “Upload New File”. Fill out the ensuing form including choosing your document.
To then create a link to your document, highlight the text that you would like make clickable. Press the Link Button in the editor toolbar. Click “Browse Server” . Under the “File Info” tab select “User Files” and locate your file in the “Files” list. Press OK, and then “OK” again.
If your file is a PDF you can display it on your page. Please watch the following video explaining the process.
The following tips & tricks apply to more advanced users. They may in some cases require you know/learn so basic HTML, CSS, and Javascript.
Anytime you see our editor, you can edit the Source HTML directly. This means that you can also insert inline CSS styling and JavaScript directly into that section. To edit the source code, simply press the “Source” button on the editor.
If you would like to learn more about HTML, you can follow some of the tutorials on this page:
http://www.w3schools.com/html/default.asp
Your website is mobile friendly by default. We include a 12-grid column system that will resize based on your screen size (Mobile/desktop/etc.). You are welcome to use the following CSS classes to create own custom layouts.
Example usage:
COLUMN 1
COLUMN 2
The example above would create a layout with two evenly divided columns that each take up half of the parent’s width.
CSS allows your to change the style of any element on your website. This includes:
If you would like to learn more about CSS please follow some of the tutorials on this site.
You can use source view to add custom defined classes to your elements. To define a site-wide CSS class, navigate to “Website” >> “Template & Colors”. One of the tabs on the left is “Custom Styles” Here you can insert any CSS and have it apply to your website.
