Home Page Print

_{Introduction:}

• _{Any text on this website can easily be changed by clicking on it and editing it as needed in the editor panel that opens on the left. You can also follow this short tutorial}
• _{Any image on this website can easily be replaced by clicking on it and editing it as needed in the editor panel that opens on the left. You can also follow this short tutorial}

1. _HERO

If you would like to change the image of the lady here shown in the hero section (A hero is a large web banner that your visitors first see when they visit your website):

• _{Hover your mouse over the top of the hero section and click on the section handle}
• _{The section editor panel will automatically open the left}
• _{Click on STYLE}
• _{Click on BACKGROUND}
• _{Click on the image to be able to select a new one from your media library or from your computer}

_{2. Hero Overlay Properties}

• _{The image has a dark grey overlay picture and a black tint to help make the white text stand out}
• _{You can change the overlay to another picture/color if you wish}
• _{To change the overlay picture/color simply click on BACKGROUND OVERLAY(background overlay is just below BACKGROUND)}
• _{Click on the color box and begin adjusting the colors as needed}

_{3. Animated Headline}

• _{This is an Animated Headline and you can change its color in the STYLE TAB}

Here are all the options that you have for your Animated Headline

Style: Choose Highlighted or Rotating style

If Highlighted style is chosen, the following options become available:

1. _{Shape: Choose the shape of the highlight, including Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, Strikethrough, and X}
2. _{Before Text: Type the headline text that will appear before the highlighted text}
3. _{Highlighted Text: Type the text that will be highlighted}
4. _{After Text: Type the headline text that will appear after the highlighted text}
5. _{Alignment: Set the alignment of the headline, Left, Center, or Right}
6. _{HTML Tag: Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph}

_{If Rotating style is chosen, the following options become available:}

1. _{Animation: Choose the animation of the rotating text including Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide, and Slide Down}
2. _{Before Text: Type the headline text that will appear before the rotating text}
3. _{Rotating Text: Enter the list of rotating text, in the order of rotation}
4. _{After Text: Type the headline text that will appear after the rotating text}
5. _{Alignment: Set the alignment of the headline, Left, Center, or Right}
6. _{HTML Tag: Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph}

_Style

_{Shape (option only available if Highlighted type is chosen)}

1. _{Color: Choose the color of the highlighted shape}
2. _{Width: Set the width of the highlighted shape}
3. _{Bring to Front: Slide to Yes to Bring the shape to the front}
4. _{Rounded Edges: Slide to Yes to round the edges of the shape}

_Headline

1. _{Text Color: Choose the color of the headline’s before and after the text}
2. _{Typography: Set the typography options for the headline’s before and after the text}

_{Animated Text}

1. _{Text Color: Choose the color of the animated text}
2. _{Typography: Set the typography options for the headline’s animated text}

_{4. Icon}

This is an icon

_{And here are the options you have for the icon:}

_{There are 3 different views for the widget: Default, Stacked and Framed. If the Default view is chosen, the following options are available:}

_Content

1. _{Icon: Choose from a list of Font Awesome icons}
2. _{View: Choose between default, stacked or framed}
3. _{Link: Enter the URL for the item’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.}
4. _{Alignment: Align the icon to left, center or right.}

_Style

_Icon

Normal

1. _{Primary: Choose the main and secondary colors for the icon}
2. _{Size: Increase or decrease the size of the icon}
3. _{Rotate: Rotate the icon}

Hover

1. _{Primary Color: Set colors for the hover}
2. _{Hover Animation: Set any animation for the hover state}
3. _{Size: Set the exact size of the icon}
4. _{Rotate: Rotate the icon up to 360 degrees}

If Stacked or Framed view is chosen, the following options are available_:

_Content

1. _{Icon: Choose from a list of Font Awesome icons}
2. _{View: Choose between default, stacked or framed}
3. _{Shape: Choose the shape of the stack or frame, either Circle or Square}
4. _{Link: Enter the URL for the item’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.}
5. _{Alignment: Align the icon to left, center or right.}

_Style

_Icon

_Normal

1. _{Primary Color: Choose the primary color (the background or frame) color for the icon}
2. _{Secondary Color: Choose the secondary color, which is the color of the icon itself}
3. _{Padding: Set the padding around the icon to control the size of the stack or frame}
4. _{Size: Set the size of the icon.}
5. _{Rotate: Rotate the icon up to 360 degrees}
6. _{Border Radius: Set the border-radius to control the corner roundness of the stack or frame}

_Hover

1. _{Primary Color: Choose the primary color (the background or frame) color for the icon}
2. _{Secondary Color: Choose the secondary color, which is the color of the icon itself}
3. _{Hover Animation: Choose an animation effect when hovering over the icon, such as Grow, Pulse, Skew, etc.}
4. _{Padding: Set the padding around the icon to control the size of the stack or frame}
5. _{Size: Set the size of the icon.}
6. _{Rotate: Rotate the icon up to 360 degrees}
7. _{Border Radius: Set the border-radius to control the corner roundness of the stack or frame}

_{5. Any element that has is faded out and has these lines on top of it is set to 'hidden'}

• _{For the sake of maintaining good responsiveness, you can choose to hide/unhide any element based on device}
• _{In the example below, the highlighted section is set to be hidden from users who are viewing the website using a desktop}
• _{But those using tablet/mobile devices can see that section}

_{5. Shape Divider}

• _{This shape highlighted below can be easily removed/straightened out or edited as needed.}
• _{It is called a section 'Shape Divider' and this type of divider is very common on almost every page of the website.}

_{How To Edit Shape Dividers}

1. _{Hover over the top of the Section where the shape divider is}
2. _{Go to > Style > Shape Divider}
3. _{Choose to display at the Top or Bottom of your section}
4. _{Type: Click the dropdown to choose your Shape Divider style}
5. _{Color: Pick a color}
6. _{Width: Set the width of your Shape Divider}
7. _{Height: Set the height of your Shape Divider}
8. _{Flip: Flip the direction of your Shape Divider}
9. _{Bring to front: Force your Shape Divider to be in front of other objects}

_{Want to learn more about hiding/unhiding elements? Watch the short video below:}

_{6. Background Graphic}

• _{Wondering how you can change this graphic circled below?}
• _{It is just a simple image}

• _{To change it, hover your mouse over the top center of that section and click on the section editor handle}
• _{Click on STYLE}
• _{Click on BACKGROUND OVERLAY}
• _{Click on the image to select a new one from your media library or  from your computer}

_{7. Section Background Properties}

• _{To change the background image/color of this section here:}

• _{Hover over the top center of the image and click on the section editor handle}
• _{Click on STYLE}
• _{Click on BACKGROUND to change the main image that shows in that section}
• _{Change the OVERLAY in the BACKGROUND OVERLAY tab}

_{8. Reposition Text}

• _{You can literally drag and drop this text here to any other place on this page}

• _{Whilst pressing your mouse pad`s left key, simply click and reposition the text to where you want}
• _{This is called absolute positioning}
• _{Note, absolute positioning is not highly recommended for good, responsive designing and should not be overly used}

_{9. Testimonial Carousel}

• _{The Testimonial Carousel widget lets you display a sliding carousel of customer testimonials in a variety of designs.}

And here are the options available for the Testimonial Carousel

Content

Slides

Items

Shows a list of all the items in the slide. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

_{Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon.}

1. _{Content: Enter the text of the testimonial}
2. _{Image: Upload or choose an image from the media library}
3. _{Name: Enter the customer’s name}
4. _{Title: Enter the customer’s title}

1. _{Skin: Select a pre-designed skin, either Default or Bubble}
2. _{Layout: Choose from Image Inline, Image Stacked, Image Above, Image Left, Image Right}
3. _{Alignment: Align the testimonial to the left, center or right}
4. _{Slides Per View: Select the number of slides to show at one time, from 1 to 10}
5. _{Slides To Scroll: Select how many slides to scroll per swipe, from 1 to 10}
6. _{Width: Set the width of the widget}

_{Additional Options:}

1. _{Arrows: Show or hide the navigation arrows}
2. _{Pagination: Select the carousel pagination style, either None, Dots, Fraction, or Progress}
3. _{Transition Duration: Set the time between slide movement, in milliseconds}

1. _{Autoplay: Slide to YES to have the carousel slide automatically}
2. _{Autoplay Speed: Set the speed at which the carousel will slide, in milliseconds}
3. _{Infinite Loop: Set to YES to have the carousel continue sliding, infinitely}
4. _{Pause on Interaction: Set to YES to have the autoplay pause when the carousel is hovered over with a mouse or clicked}
5. _{Image Size: Set the size of the image, from thumbnail to full, or enter a custom size}

_Style

_Slides

1. _{Space Between: Control the space between the slides}
2. _{Background Color: Choose the background color of the slides}
3. _{Border Size: Set the thickness of the border around each slide}
4. _{Border Radius: Set the border-radius to control corner roundness}
5. _{Border Color: Choose a color for the border}
6. _{Padding: Set the padding within the border of each slide}

_Content

1. _{Gap: Control the space between the image and the testimonial text}
2. _{Text Color: Choose the color of the testimonial text}
3. _{Typography: Change the typography options for the testimonial text}

_Name

1. _{Text Color: Choose the color of the name}
2. _{Typography: Change the typography options for the name}

_Title

1. _{Text Color: Choose the color of the title}
2. _{Typography: Change the typography options for the title}

_Image

1. _{Size: Adjust the size of the image}
2. _{Gap: If Image Inline is selected, the gap controls the space between the image and the name and title}
3. _{Border: Slide to YES to place a border around the image}
4. _{Border Color: If Border is set to YES, choose the color of the border}
5. _{Border Width: If Border is set to YES, set the thickness of the border around the image}
6. _{Border Radius: Set the border radius to control corner roundness. This option is available even if Border is set to NO}

_Navigation

_Arrows

1. _{Size: Adjust the size of the navigation arrows}
2. _{Color: Choose the color of the navigation arrows}

_Pagination

1. _{Size: Adjust the size of the pagination}
2. _{Color: Choose the color of the pagination}

_{Bubble (Options only available if using Bubble skin)}

1. _{Background Color: Choose the color of the bubble’s background}
2. _{Padding: Set the padding within the bubble}
3. _{Border Radius: Set the border-radius to control corner roundness. This option is available even if Border is set to NO.}
4. _{Border: Slide to YES to place a border around the bubble}
5. _{Border Color: If Border is set to YES, choose the color of the border}
6. _{Border Width: If Border is set to YES, set the thickness of the border around the bubble}

_{Note: Autoplay is affected by Google's Autoplay policy on Chrome browsers.}

_{10. Testimonial Background}

_{You can change the background image of the Testimonial Carousel}

• _{To change the image, hover over the top center of the section and click on the section editor handle}
• _{Click on STYLE}
• _{Change your image from the BACKGROUND OVERLAY section shown below}