Modern

[ultimate_heading main_heading=”Present yourself in style” spacer=”icon_only” icon=”Defaults-star-empty” icon_size=”60″ icon_color=”#f05a23″][/ultimate_heading]

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.

[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]

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.

[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]

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.

[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]

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.

[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″]

Visually spoil your visitors

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


[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]
[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]
[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]

Deliver eye catching information

[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]
[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]
[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]

[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″]
[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;”]
[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]

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…
[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″]

Stand out from the crowd

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.


[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]
[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]
[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]