Modern

[vc_row full_width=”stretch_row” bg_type=”bg_color” parallax_content=”parallax_content_value” fadeout_row=”fadeout_row_value” seperator_enable=”seperator_enable_value” seperator_type=”tilt_right_seperator” seperator_position=”bottom_seperator” seperator_svg_height=”60″ seperator_shape_background=”#f05a23″ css=”.vc_custom_1452279691983{padding-top: 50px !important;padding-bottom: 100px !important;}” bg_color_value=”#ffffff”][vc_column width=”1/4″][vc_column_text]
[/vc_column_text][/vc_column][vc_column width=”1/2″][ultimate_heading main_heading=”Present yourself in style” spacer=”icon_only” icon=”Defaults-star-empty” icon_size=”60″ icon_color=”#f05a23″][/ultimate_heading][vc_column_text css=”.vc_custom_1450142987819{padding-top: 30px !important;}”]

This style of presentation is rapidly moving across the web and not only does it give visitors a great first impression, it also keeps the information simple and easy to digest. By doing this you can actually get more concepts across in less time.

[/vc_column_text][/vc_column][vc_column width=”1/4″][vc_column_text]
[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” parallax_content=”parallax_content_value” fadeout_row=”fadeout_row_value” css=”.vc_custom_1452279670996{padding-top: 50px !important;padding-bottom: 50px !important;}” bg_color_value=”#f05a23″][vc_column width=”1/3″][ultimate_heading main_heading=”Break the mould” main_heading_color=”#ffffff” spacer=”icon_only” icon=”Defaults-unlink” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_color_bg=”#ffffff” main_heading_font_size=”desktop:25px;”][/ultimate_heading][vc_column_text css=”.vc_custom_1452198879226{padding-top: 10px !important;}”]

Gone are the days where websites are all built with the same pixel widths and layouts. Modern sites are about breaking out of the old systems and looking for different ways to represent you within your website.

[/vc_column_text][/vc_column][vc_column width=”1/3″][ultimate_heading main_heading=”Responsive Design” main_heading_color=”#ffffff” spacer=”icon_only” icon=”Defaults-mobile mobile-phone” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_color_bg=”#ffffff” main_heading_font_size=”desktop:25px;”][/ultimate_heading][vc_column_text css=”.vc_custom_1452198888187{padding-top: 10px !important;}”]

With the multiple devices available websites are now built to react differently based on what the reader is using. This style of website is focused on each elements conforming to the core concepts of Responsive Design.

[/vc_column_text][/vc_column][vc_column width=”1/3″][ultimate_heading main_heading=”Flexibility & Customisation” main_heading_color=”#ffffff” spacer=”icon_only” icon=”Defaults-puzzle” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_color_bg=”#ffffff” main_heading_font_size=”desktop:25px;”][/ultimate_heading][vc_column_text css=”.vc_custom_1452198897308{padding-top: 10px !important;}”]

The older basic style of website did not leave a lot of room to differentiate one website layout from another but now designers have more tools to customise a website to match your marketing or brand.

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”image” parallax_style=”vcpb-vz-jquery” bg_image_new=”84|https://www.hdbuild.nz/wp-content/uploads/2016/01/IceMan-01-e1453363279397.jpg” bg_image_repeat=”no-repeat” parallax_sense=”50″ parallax_content=”parallax_content_value” enable_overlay=”enable_overlay_value” overlay_color=”#000000″ overlay_pattern=”01.png” overlay_pattern_opacity=”80″ seperator_enable=”seperator_enable_value” seperator_type=”tilt_left_seperator” seperator_position=”top_bottom_seperator” seperator_svg_height=”60″ seperator_shape_background=”#f05a23″ css=”.vc_custom_1453363274337{border-top-width: 0px !important;padding-top: 200px !important;padding-bottom: 175px !important;}”][vc_column][ultimate_fancytext fancytext_align=”left” strings_textspeed=”70″ strings_backspeed=”35″ strings_startdelay=”2000″ fancytext_strings=”Row Backgrounds” strings_font_size=”40″ fancytext_color=”#ffffff” ticker_background=”#f05a23″][vc_column_text]

Visually spoil your visitors

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]

There are multiple ways you can alter your rows to help break up the content and keep a page interesting.

Row backgrounds can be enhanced by using colours, gradients, images, videos, overlays, separators, variable width & height, or even parallax or continuous scrolling to give a 3D feel to your page.

 

This row in particular has an image with an pattern overlay on it with a vertical parallax setting (that’s how the background is moving slower than the normal scrolling you are doing).

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″]
[/vc_column_inner][vc_column_inner width=”1/6″][bsf-info-box icon=”Font-Awesome-HD-paint-brush” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_animation=”rotateIn” title=”Full Colour” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][bsf-info-box icon=”Font-Awesome-HD-server” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_animation=”rotateIn” title=”Separator” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″][bsf-info-box icon=”Defaults-move” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_animation=”rotateIn” title=”Adjustable Size” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][bsf-info-box icon=”Defaults-copy” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_animation=”rotateIn” title=”Overlay” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″][bsf-info-box icon=”Font-Awesome-HD-play” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_animation=”rotateIn” title=”Video” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][bsf-info-box icon=”Defaults-barcode” icon_size=”30″ icon_color=”#f05a23″ icon_style=”circle” icon_animation=”rotateIn” title=”Gradient” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” seperator_enable=”seperator_enable_value” seperator_type=”tilt_right_seperator” seperator_svg_height=”60″ seperator_shape_background=”#f05a23″ css=”.vc_custom_1452306826286{padding-top: 100px !important;padding-bottom: 25px !important;}” bg_color_value=”#ffffff”][vc_column][vc_column_text]

Deliver eye catching information

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” parallax_content=”parallax_content_value” css=”.vc_custom_1452303108499{padding-top: 25px !important;padding-bottom: 50px !important;}” bg_color_value=”#ffffff”][vc_column width=”1/12″][vc_column_text]
[/vc_column_text][/vc_column][vc_column width=”5/6″][vc_row_inner][vc_column_inner width=”1/3″][bsf-info-box icon=”Font-Awesome-HD-adjust” icon_size=”32″ icon_color=”#3171a3″ icon_animation=”pulse” title=”Be different” pos=”left” title_font_size=”16″ title_font_line_height=”32″ desc_font_size=”16″ desc_font_line_height=”32″ title_font_color=”#3171a3″]Information can be delivered in multiple styles from simple boxes of text to options with icons, images or even animations.[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/3″][bsf-info-box icon=”Defaults-zoom-in” icon_size=”32″ icon_color=”#3171a3″ icon_animation=”pulse” title=”Add focus” pos=”left” title_font_size=”16″ title_font_line_height=”32″ desc_font_size=”16″ desc_font_line_height=”32″ title_font_color=”#3171a3″]Keeping peoples attention is important on a website and a modern setup has the features to do it[/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/3″][bsf-info-box icon=”Font-Awesome-HD-file-movie-o file-video-o” icon_size=”32″ icon_color=”#3171a3″ icon_animation=”pulse” title=”Element Animations” pos=”left” title_font_size=”16″ title_font_line_height=”32″ desc_font_size=”16″ desc_font_line_height=”32″ title_font_color=”#3171a3″]Add a little bit of flair to elements with a slight introduction or hover animation as people scroll down the page.[/bsf-info-box][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/12″][vc_column_text]
[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” parallax_content=”parallax_content_value” css=”.vc_custom_1452303108499{padding-top: 25px !important;padding-bottom: 50px !important;}” bg_color_value=”#ffffff”][vc_column width=”1/12″][vc_column_text]
[/vc_column_text][/vc_column][vc_column width=”5/6″][vc_row_inner][vc_column_inner width=”1/3″][icon_counter border_size=”1″ border_color=”#f1f1f1″ icon=”Defaults-user” icon_size=”70″ icon_color=”#3171a3″ bg_color=”#f4f4f4″ block_title_front=”Hover on me!” block_desc_front=”Here is an example of adding a unique touch to your site. Hover over this box and see what happens!” block_title_back=”Just like that!” block_desc_back=”Welcome to the other side! It may seem like a neat gimmick but why not use it to your advantage?” title_font_style=”font-weight:bold;” title_font_size=”16″ title_font_line_height=”18″ desc_font_size=”14″ desc_font_line_height=”24″][/vc_column_inner][vc_column_inner width=”1/3″][interactive_banner_2 banner_title=”Hover over me as well!” banner_desc=”Another nice way to offer a point of difference while using images or branding material you use elsewhere.” banner_image=”45|https://www.hdbuild.nz/wp-content/uploads/revslider/modern/modernheader1.jpg” banner_link=”url:http%3A%2F%2Fwww.hdbuild.nz%2Fmodern%2F||” banner_style=”style10″ banner_color_bg=”#000000″ image_opacity=”.8″ image_opacity_on_hover=”.5″ banner_title_style=”font-weight:bold;”][/vc_column_inner][vc_column_inner width=”1/3″][bsf-info-box icon=”Font-Awesome-HD-external-link” icon_size=”32″ icon_color=”#3171a3″ icon_animation=”pulse” title=”A Modal Box” pos=”top” title_font_size=”16″ title_font_line_height=”32″ desc_font_size=”16″ desc_font_line_height=”32″ title_font_color=”#3171a3″]

A modal box is a simple way to add extra content while using as little or as much space as you’d like. Go ahead and click the button to see what I mean!

[/bsf-info-box][ultimate_modal icon_type=”selector” icon=”Defaults-folder-open-o” modal_title=”Welcome to a Modal Box!” btn_size=”lg” btn_bg_color=”#3171a3″ btn_txt_color=”#ffffff” btn_text=”Click Here!” modal_size=”medium” modal_style=”overlay-fade” overlay_bg_color=”#3171a3″ overlay_bg_opacity=”80″ content_bg_color=”#ffffff” content_text_color=”#222222″ header_bg_color=”#f05a23″ header_text_color=”#ffffff”]A modal box can be used to do a multiple list of jobs.

I have used it in the past to have a small contact form or on this site as an introduction to the page (it came be set up to open on page load or by user click).

I think it’s a powerful tool that could be used to highlight content you want to be seen as special or unique.[/ultimate_modal][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width=”1/12″][vc_column_text]
[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” parallax_content=”parallax_content_value” seperator_enable=”seperator_enable_value” seperator_type=”tilt_right_seperator” seperator_position=”bottom_seperator” seperator_svg_height=”60″ seperator_shape_background=”#3171a3″ bg_color_value=”#ffffff” css=”.vc_custom_1452421787386{padding-bottom: 100px !important;}”][vc_column][vc_column_text]

This is only a tiny sample of the information Box options available to be used on your website from timelines to price boxes and so much more…

[/vc_column_text][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”image” parallax_style=”vcpb-vz-jquery” bg_image_new=”85|https://www.hdbuild.nz/wp-content/uploads/2016/01/ClockTowerFireweb.jpg” bg_image_repeat=”no-repeat” parallax_sense=”50″ parallax_content=”parallax_content_value” enable_overlay=”enable_overlay_value” overlay_color=”#000000″ overlay_pattern=”01.png” overlay_pattern_opacity=”80″ seperator_enable=”seperator_enable_value” seperator_type=”tilt_left_seperator” seperator_position=”top_bottom_seperator” seperator_svg_height=”60″ seperator_shape_background=”#3171a3″ css=”.vc_custom_1453363159963{border-top-width: 0px !important;padding-top: 200px !important;padding-bottom: 175px !important;}”][vc_column][ultimate_fancytext fancytext_align=”left” strings_textspeed=”70″ strings_backspeed=”35″ strings_startdelay=”2000″ fancytext_strings=”Styling Options” strings_font_size=”40″ fancytext_color=”#ffffff” ticker_background=”#3171a3″][vc_column_text]

Stand out from the crowd

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][vc_column_text]The ability to change the style of something as simple as text, a link, or a button can be an effective way to help dress a website. It’s all part of the mission to keep a website engaging and the reader interested and entertained.

Even the title you see here has a nice simple typing animation that can give the page a bit of movement and life.

[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/6″]
[/vc_column_inner][vc_column_inner width=”1/6″][bsf-info-box icon=”Font-Awesome-HD-edit pencil-square-o” icon_size=”30″ icon_color=”#3171a3″ icon_style=”circle” icon_animation=”rotateIn” title=”Highlighted Effects” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][bsf-info-box icon=”Font-Awesome-HD-text-height” icon_size=”30″ icon_color=”#3171a3″ icon_style=”circle” icon_animation=”rotateIn” title=”Fancy Text & Headers” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″][bsf-info-box icon=”Defaults-sort-by-order” icon_size=”30″ icon_color=”#3171a3″ icon_style=”circle” icon_animation=”rotateIn” title=”Counters” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][bsf-info-box icon=”Font-Awesome-HD-chain-broken unlink” icon_size=”30″ icon_color=”#3171a3″ icon_style=”circle” icon_animation=”rotateIn” title=”Creative Links & Buttons” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][/vc_column_inner][vc_column_inner width=”1/6″][bsf-info-box icon=”Defaults-sort-by-order-alt” icon_size=”30″ icon_color=”#3171a3″ icon_style=”circle” icon_animation=”rotateIn” title=”Countdowns” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][bsf-info-box icon=”Font-Awesome-HD-google” icon_size=”30″ icon_color=”#3171a3″ icon_style=”circle” icon_animation=”rotateIn” title=”Google Font Library” hover_effect=”style_2″ pos=”top” title_font_style=”font-weight:bold;” title_font_size=”18″ title_font_line_height=”28″ title_font_color=”#ffffff”][/bsf-info-box][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]