Contact Block Horizontal

Display extended customizable contacts block on the site.

Add contact block with various customization options.

You may see the example of the module on the Contact block horizontal page.

General settings

  • Style – select the most suitable style of the contact block for your site.
    • Simple – each contact block fields are displayed separately as a list.
    • Bordered – there is the border around the contact block icon displayed.
    • Underline – there is underline decoration added for the contact block icon.
    • Background – there is background color set for the contact block icon.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.

Content settings

  • Images or icons before content? – select whether you want to display icons or images before the contacts.
  • Upload Image Icon – upload custom image for the contacts from the Media library, for Images before the content.
  • Address – type the physical address of your company.
  • Phone – type the phone number for contacts.
  • Email – type the email address.
  •  Website – specify the website.


Icon decoration
Set the style of the icon.
  • Icon size – set the size of icon.
  • Icon Color – specify the icon color.
  • Thumb size – set the size of icon background.
  • Border radius – specify the border radius to make the corners rounded.
  • Border Style – select the style of the border, for Bordered and Background styles.
  • Border Width – specify the border width, for Bordered style.
  • Border Color – set the border color, for all styles except Simple one.
  • Thumb Background Color – select the background color, for Bordered style.
  • Triple border bottom – set it to Enable in case you want to display triple decoration bottom lines, for Bordered style.
Delimiter decoration
Style the delimiter in the module.
  • Delimiter Style – select the delimiter line style.
  • Delimiter Height – specify the height of the line.
  • Delimiter Color – set the delimiter color.
  • Align to icon – set it to Enable  in case you want to place the delimiter right to the thumb of the icon.

Typography settings

  • Element tag – select the tag for the title.
  • Font size – set the font size you need to use in the title.
  • Letter spacing – set the needed distance between letters.
  • Line-height – set the needed distance between lines in the title text.
  • Text color – set the color of the font.
  • Font style – select the font weight and style (bold, italic) for the title.
  • Custom font family – set it to Enable to use custom Google font.
    • Font Family – select the font family from the drop-down list.
    • Font style – select the font weight and style (bold, italic) for the title.


  • Animation – choose between 14 preset animation effects.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(;background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width >,#layout.dfd-gallery-loop > .row.full-width > {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}