Help Center | Website

Can't find what you're looking for? Ask us! Fill out the form below.

Contact Us



Anatomy of an Etrafficers Web Page

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.

Anatomy of a Page

To learn how to edit a section, please choose from the list below:

Edit the Header/Footer

Edit the Menu

Edit the Slider

Edit the page Content

Edit the Sidebar

Edit Special Pages (Calculators, Blog, Testimonials, etc)

 

Template & Colors

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:

  • After changing your template, you will need to re-select your Primary Menu with the drop-down under the “Menus” tab.
  • Changing your template WILL NOT delete or alter any text/content or images.  If you would like to update your content as well please also see the section: Anatomy of an Etrafficers Webpage.

Here are some examples of the same website with 3 different templates:

Big City
The Big City Template
Colonial
The Colonial Template
Liberty
The Liberty Template

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.

 

Edit the Site Header or Footer

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.

 

 

Menus

Main Menu

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.

 

Custom Menus

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.

Pages

Home Page

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

 

Custom pages

Parallax Pages& Video Background Pages

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.

 

Special Pages

Some pages have special logic that cannot be edited in the normal fashion.  Several of these pages are described below.

Blog

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.

Calculators

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

 

Testimonials

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”.

Apply Now

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

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

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.

 

 

Using the Editor

When editing your website you will often be presented with an editor that looks like this:

CkEditor

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

Text

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

 

Images

You can upload and add images to the editor.  Please watch the following video for instructions.

 

 

Videos

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.

Upload PDF’s and documents

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.

Create downloadable link

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.

Display on page

If your file is a PDF you can display it on your page.  Please watch the following video explaining the process.

Advanced Tips & Tricks

The following tips & tricks apply to more advanced users.  They may in some cases require you know/learn so basic HTML, CSS, and Javascript.

Source Mode

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

Responsive Grid

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.

  • Row (<div class=”row”>)
    Creates a block that fills it’s container’s width.  Always use it to contain columns.
  • Col span_{INSERT NUMBER} (<div class=”col span_6”>)
    Use this to define a column with a width of 1-12 where “span_1” is a 1/12 wide column and “span_12” is a 12/12 100% wide column.

 

Example usage:

<div class=”row”>

<div class=”col span_6”>

<p>COLUMN 1</p>

</div>

<div class=”col span_6”>

<p>COLUMN 2</p>

</div>

</div>

The example above would create a layout with two evenly divided columns that each take up half of the parent’s width.

Custom CSS

CSS allows your to change the style of any element on your website. This includes:

  • Color
  • Background color
  • Borders
  • Font
  • Font-size
  • Etc.

If you would like to learn more about CSS please follow some of the tutorials on this site.

http://www.w3schools.com/css/

 

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.