1. Visual Composer
  2. VC Row
  3. VC Column
  4. Create Parallax Background
  5. Create Video Background
  6. Add Custom Heading
  7. Block 1 Feature Box
  8. Block 1 Feature Box style 2
  9. Block 1 Feature Box style 3
  10. Block 1 Feature Box style 4
  11. Block 1 Feature Box style 5
  12. Block 2 Feature List
  13. Block 3 Portfolio Full Width
  14. Block 4 Team member carousel
  15. Block 5 Tree Timeline
  16. Block 6 Video Background
  17. Block 7 Counter
  18. Block 8 PROCESS
  19. Block 9 Image OWL Carousel
  20. Block 10
  21. Block 11 Testimonials Carousel
  22. Block 11 Testimonials Style 2
  23. Block 12
  24. Block 13 Image OWL Carousel
  25. Block 14 Progress bar
  26. Block 14 Style 2
  27. Block 15 Welcome text
  28. Block 16 Feature List 2
  29. Block 17 Portfolio
  30. Block 18 Text
  31. Block 19 Service Box
  32. Block 20 Tabs
  33. Block 20 Tabs dark
  34. Block 21 Feature List
  35. Block 22 Pricing Table
  36. Block 23 Single Team member
  37. Block 24 Parllax Background
  38. Block 25 Single Team memeber
  39. Block 26 Client Images
  40. Block 27 Branches
  41. Block 28 Google Map
  42. Block 29 Contact info
  43. Block 30 Text with Dark Background
  44. Block 31 Text Block
  45. Block 32 Text Block
  46. Block 33 Icon Block
  47. Block 34 FAQ Style 1
  48. Block 35 FAQ Style 2
  49. Block 36 Contact Form
  50. Block 37 Contact Form 2
  51. MailChimp

Visual Composer

Visual composer documentation is an essential part of theme , visual composer developers have created an awesome documentation for vc , if you are unfamiliar with visual composer please read vc documentation. We have created several componets for visual composer , click here to view images for block you need to create and click image to go documentation for this block.

Please read documentation for work with row column and add custom heading.

Home | Visual composer Images | Shortcodes

Visual Composer Row

How to Add Row and Column with Visual Composer for WordPress video

Rozana themes add many parameter to row element like:

  1. Anchor Id
  2. Add Progress Image [used when create OUR PROCESS TO SUCCESS block].
  3. Anchor Id
  4. dropdown menu to select CSS class when creating some blocks
  5. Tab Theme Extra options
    • Full Width dropdown [block fullwidth or default]. [full width useful for display portfolio or custom google maps]
    • CSS Class for padding
    • Box Background [themecolor - grey background - darkness]. Darkness[ useful when using background image]
  6. Tab Parallax Background. [used to create parallax image Or video Background].
  7. Choose extra CSS Class. [from dropdown menu]
    1. Welcome Box with dark background. [used in this block]
    2. Add pattern to transparent. [used in this block]
    3. Details. [used in this block]
    4. Service Block. [used in this block]
    5. Pricing table without margin. [used in this block]
    6. Make H1, h2, h3 color White. [used in this block]
    7. banners Block text. [used in this block]
    8. FAQ Links. [used to create links in faq page it demo]
    9. Block have Accordions With Google maps. [used in this block and block]
    10. Block have Contact us information. [used in this block]
    11. comming soon page style 3.

Visual Composer Column

Rozana themes add many 3 parameter to Column element like:

  1. Text Align by default center.
  2. CSS Animation type. [Useful when element not have css animation]
  3. CSS Animation Delay.

Create Parallax Background

  1. Edit row settings click design options tab upload your image.
  2. click Parallax Background tab and check enable Parallax Background
  3. From Background type dropdown menu select image.
  4. click theme Extra Options tab.
  5. Field Box Background select Darkness.
  6. Field Background Opacity Overlay select transparent value you need best is 0.7.

Create Video Background

  1. Edit row settings click Parallax Background.
  2. Check enable Parallax Background
  3. From Background type dropdown menu select video.
  4. Upload Background image for video.
  5. Add 3 URL links to Video.
  6. click theme Extra Options tab.
  7. Field Box Background select Darkness.
  8. Field Background Opacity Overlay select transparent value you need best is 0.7.

Add Custom Heading

  1. From Visual composer click add new element open popup.
  2. click tab by samathemes.
  3. click Add custom heading.
  4. Add your title and content and select animation you need.
  5. Save changes.

Feature Box      -Block 1

  1. From Visual composer click add new element open popup.
  2. click tab by samathemes.
  3. click Feature Box.
  4. Add your title.
  5. Text Align select center.
  6. Add Your content.
  7. Parghraph font size select default.
  8. Feature Box Icon Position select centered box.
  9. Feature Box With select icon
  10. Icon Active. [for first block select active]
  11. Icon Border select default.
  12. Icon Rounded corner make it empty.
  13. Icon font size select default 36px.
  14. Icon line height select default 70px.
  15. Featured Icon select your icon.
  16. Add button URL and text.
  17. Finaly Add animation.

Feature Box - Style 2      -Block 1

  1. From Visual composer click add new element open popup.
  2. click tab by samathemes.
  3. click Feature Box.
  4. Add your title ex: MISSION & VISION.
  5. Text Align select Left.
  6. Add Your content.
  7. Parghraph font size select default.
  8. Feature Box Icon Position select icon side.
  9. Feature Box With select icon
  10. Icon Active. [for first block select active]
  11. Icon Border select default.
  12. Icon Rounded corner make it yes.
  13. Icon font size select 26px.
  14. Icon line height select 65px.
  15. Featured Icon select your icon.
  16. button URL and text empty.
  17. Finaly Add animation.[fadeinup]

Feature Box - Style 3      -Block 1

  1. From Visual composer click add new element open popup.
  2. click tab by samathemes.
  3. click Feature Box.
  4. Add your title ex: PHOTOSHOP.
  5. Text Align select Left.
  6. Add Your content.
  7. Parghraph font size select default.
  8. Feature Box Icon Position select icon side.
  9. Feature Box With select image and upload your image.
  10. button URL and text empty.
  11. Finaly Add animation.[fadeinup]

Feature Box - Style 4      -Block 1

  1. Edit row settings and select grey background.
  2. view Feature box style 2.

Feature Box - Style 5      -Block 1

  1. From Visual composer click add new element open popup.
  2. click tab by samathemes.
  3. click Feature Box.
  4. Add your title ex: ADDRESS.
  5. Text Align select Left.
  6. Add Your content.
  7. Parghraph font size select 15px.
  8. Feature Box Icon Position select icon side.
  9. Feature Box With select icon.
  10. Icon Active. [for first block select active]
  11. Icon Border select Grey.
  12. Icon Rounded corner make it yes.
  13. Icon font size select 36px.
  14. Icon line height select 70px.
  15. Featured Icon select your icon.
  16. button URL and text empty.
  17. Finaly Add animation.[fadeinup]

Feature List      -Block 2

  1. make your row three column.
  2. Column 1.
    1. From popup Visual composer click tab by samathemes and select feature list container.
    2. For feature list container settings field icon align select Right.
    3. Click Save changes.
    4. Click + button inside feature list container.
    5. Click feature list item.
    6. Click edit feature list item.
    7. Add your title ex: iOS App.
    8. Icon Active empty.
    9. Featured Icon select your icon.
    10. Finaly Add animation.[fadeinup]
  3. Column 2
    1. Edit column 2 settings add new css class hide-mob [to hidden in mobile] and select animation you need.
    2. Add text block inside column 2 and insert image.
  4. Column 3.
    1. From popup Visual composer click tab by samathemes and select feature list container.
    2. For feature list container settings field icon align select Left.
    3. Click Save changes.
    4. Click + button inside feature list container.
    5. Click feature list item.
    6. Click edit feature list item.
    7. Add your title ex: Multimedia.
    8. Icon Active empty.
    9. Featured Icon select your icon.
    10. Finaly Add animation.[fadeinup]

Portfolio Full Width      -Block 3

  1. Required plugin Projects by WooThemes.
  2. Edit row settings and from theme extra options tab for field full width select Full Width Container.
  3. From popup Visual composer click tab by samathemes and select Portfolio Full Width.
  4. Add number for portfolio items you need to display.

Team members carousel      -Block 4

  1. Required plugin Team member by WooThemes.
  2. From popup Visual composer click tab by samathemes and select Team members carousel.
  3. you can display recent members or by id.
  4. If you select by id [use comma to Separates between ids].

Tree Timeline      -Block 5

  1. From popup Visual composer click tab by samathemes and select Tree Timeline Container.
  2. Inside Tree Timeline Container Click + button and select tree timeline item.
  3. Edit tree timeline item settings.
  4. Field Image Block Position select left. [ if you need image in right select right]
  5. Field Size like demo 98*98px or make it empty to display full image.
  6. Field Text under image EX: PARIS.
  7. Field Second text under image EX: 2014.
  8. Select CSS animation for this block.
  9. Second Block
    1. Field Title Ex: TOGETHER WE BUILD.
    2. Field Text Under title add content you need.
    3. Select CSS animation for this block.
  10. Repeat this steps to get more blocks for tree time line.

Video Background      -Block 6

  1. Go to create video Background.
  2. Add text block from Visual composer
  3. Add this text inside text bloxk
    4. <h1>VIDEO BACKGROUND</h1><h4>WE CREATE ROZANA FOR YOUR BUSINESS , AGENCIES & PORTFOLIO</h4><a class="slide-btn" href="#">VISIT NOW</a>

Counter      -Block 7

  1. make your row 4 column.
  2. For each column repeat this steps.
  3. From popup Visual composer click tab by samathemes and select custom counter.
  4. Field Title : Add your title ex: PROJECTS.
  5. Field Counter Type : select Box.
  6. Field Featured Icon : select icon.
  7. Field Value to count : ex: 3200.
  8. Field Unit : empty.
  9. Add CSS3 Animation and delay.

OUR PROCESS TO SUCCESS      -Block 8

  1. make your row 6 column.
  2. Edit row settings and and from field add progress image select Yes.
  3. For each column repeat this steps.
  4. From popup Visual composer click tab by samathemes and select custom counter.
  5. Field Title : Add your title ex: COFFE.
  6. Field Counter Type : select Icon inside Circle.
  7. Field Featured Icon : select icon.
  8. Field Value to count : empty.
  9. Field Unit : empty.
  10. Add CSS3 Animation and delay.

Image OWL Carousel      -Block 9

  1. From popup Visual composer click tab by samathemes and select Image OWL Carousel.
  2. Field type : select Like client carousel.
  3. Upload your images.

Block 10

  1. make your row 2 column.
  2. Column 1
    1. Add text block inside column and insert image and add CSS Class [img-responsive] to image.
  3. Column 2
    1. Add text block inside column and insert your content.
    2. create button like image.
<a class="btn-icon"><i class="fa fa-download"></i>Download Company Profile</a>

Testimonials Carousel      -Block 11

  1. Required plugin Testimonials by WooThemes
  2. Edit row settings from field Choose extra CSS class select Add pattern to transparent this need to create custom background image for this block and select darkness.
  3. From popup Visual composer click tab by samathemes and select Testimonials Carousel.
  4. Field Testimonials carousel type : select With Thumbnails.
  5. Field Display : select recent Or by IDS.
  6. Field Number of testimonials : EX: 4.

Testimonials Carousel Style 2      -Block 11

  1. Required plugin Testimonials by WooThemes
  2. Edit row settings from field Choose extra CSS class select Add pattern to transparent this need to create custom background image for this block and select darkness.
  3. From popup Visual composer click tab by samathemes and select Testimonials Carousel.
  4. Field Testimonials carousel type : select Without Thumbnails.
  5. Field Display : select recent Or by IDS.
  6. Field Number of testimonials : EX: 4.

Block 12

  1. Edit row settings from field Choose extra CSS class select Details.
  2. make your row 2 column.
  3. Column 1
    1. Add text block inside column and insert image and add CSS Class [img-responsive] to image.
  4. Column 2
    1. Add text block inside column and insert your content.
    2. To create List with icon copy this code.
<h2>CRISTIANO LUIZ</h2><h5>Art Director</h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<ul class="list-overview">	<li><i class="fa  fa-html5"></i> HTML5</li>	<li><i class="fa fa-css3"></i> CSS3</li>	<li><i class="fa fa-apple"></i> Apple Platform</li>	<li><i class="fa fa-android"></i> Android Platform</li></ul>

Image OWL Carousel      -Block 13

  1. From popup Visual composer click tab by samathemes and select Image OWL Carousel.
  2. Field type : select Like Screen shot carousel.
  3. Upload your images.
  4. Field On click : select Open Fancybox.

Progress bar      -Block 14

  1. From popup Visual composer click tab by samathemes and select Progress bar.
  2. Field title : EX: Web Design.
  3. Field value : EX: Web Design.
  4. Field unit : EX: %.
  5. Field Bar color : default.

Progress bar style 2      -Block 14

  1. view.
  2. Field Bar color : Choose any color from dropdown menu.

Text With Black Bacground      -Block 15

  1. Edit row settings from field Choose extra CSS class select Welcome Box with dark background.
  2. Edit row settings and from theme extra options tab for field Box Background select darkness and field Background Opacity Overlay select no.
  3. Add text block and add your content EX:
<h3>NEED A PROJECT ? Don't GO AWAY ! CONNECT WITH US <a class="panel-button" href="http://demo.samathemes.com/rozana/contact-us-pages/contact-us-style-3/">CONTACT US<a></h3>

Feature List 2      -Block 16

  1. Column 1
    1. From popup Visual composer click tab by samathemes and select Custom Single image.
    2. Upload your image.
    3. Field min Height : EX: 625px.
    4. Field Width : EX: 100%.
  2. Column 2
    1. From popup Visual composer click tab by samathemes and select Feature List container 2.
    2. Click + button inside feature list container 2.
    3. select feature list item 2.
    4. Field Title: EX: FOLLOW ME.
    5. Field URL Link: EX: URL Link for face book.
    6. Field Left position: EX: 58%.
    7. Field Margin Top: EX:0.
    8. Field Featured Icon: select your icon like facebook.
    9. Field CSS Animation: FadeinLeft.
    10. Field CSS Animation Delay: 200.
    11. Repeat steps from 2 - 10 and change Animation delay to: 400, 600, 800.

Portfolio      -Block 17

  1. Required plugin Projects by WooThemes.
  2. From popup Visual composer click tab by samathemes and select Portfolio.
  3. Add number for portfolio items you need to display.

Text Block      -Block 18

  1. Edit row settings from field Choose extra CSS class select Service Block.
  2. make row 3 columns like image above.
  3. Column 1
    1. From popup Visual composer select Text Block.
    2. Add your content.
  4. Column 2
    1. From popup Visual composer click tab by samathemes and select Image Bootstrap Carousel.
      1. Upload yor images.
      2. Field Show navigation arrows: no.
      3. Field Show pagination bullets: yes.
    2. From popup Visual composer select Raw HTML.
      <h3>Our Idea</h3><ul><li><span class="icon-star"></span>Lorem ipsum dolor sit amet feugiat </li><li><span class="icon-star"></span>Lorem ipsum dolor sit amet </li><li><span class="icon-star"></span>Lorem ipsum dolor  </li><li><span class="icon-star"></span>Lorem ipsum dolor sit amet feugiat </li><li><span class="icon-star"></span>Lorem ipsum dolor sit amet </li><li><span class="icon-star"></span>Lorem ipsum dolor  </li></ul>
  5. Column 3
    1. From popup Visual composer select Text Block.
    2. Add Your vimeo Video code or content.
    3. From popup Visual composer select Raw HTML.
      <ul class="service-list"><li><span class="icon-code"></span>Lorem ipsum dolor sit amet feugiat </li><li><span class="icon-cog"></span>Lorem ipsum dolor sit amet </li><li><span class="icon-airplane"></span>Lorem ipsum dolor  </li><li><span class="icon-archive"></span>Lorem ipsum dolor sit amet feugiat </li></ul>

Feature List      -Block 19

  1. make your row three column see above image.
  2. Column 1.
    1. From popup Visual composer click tab by samathemes and select Service Box.
    2. Field Title: Ex: TECHNOLOGIES.
    3. Field Icon Active: yes Or empty.
    4. Field Featured Icon: Select icon.
    5. Field CSS Animation: FadeinUP.
    6. Field CSS Animation Delay: 200.
    7. To Add more service box repeat this steps.
  3. Column 2
    1. From popup Visual composer select Text Block.
    2. insert image.
  4. Column 3.
    1. From popup Visual composer click tab by samathemes and select Service Box.
    2. Field Title: Ex: INTERNET.
    3. Field Icon Active: empty.
    4. Field Featured Icon: Select icon.
    5. Field CSS Animation: FadeinUP.
    6. Field CSS Animation Delay: 200.
    7. To Add more service box repeat this steps.

Tabs      -Block 20

From popup Visual composer select Tabs and edit tabs settings and select style2.

Tab 1

  1. Add new row and make it 2 columns
  2. From popup Visual composer click tab by samathemes and select Image bootstrap Carousel and upload your images.
  3. For column 2 From popup Visual composer select text block and upload your content.
  4. to display list like demo add this html code inside content
    <h3>Web Development </h3>yourcontent <ul class="list-overview">	 <li> <i class="fa  fa-unlock "> </i> Unlimite Unlock System </li>	 <li> <i class="fa fa-microphone "> </i> Easy Record </li>	 <li> <i class="fa fa-cloud"> </i> Speed Loading System </li>	 <li> <i class="fa fa-download"> </i> Unlimite Download Files </li> </ul>

Tab 2 & tab 3

Add Text Block And Insert Your Content

Tab Dark      -Block 20

Here We create 2 tabs light and dark background

From popup Visual composer select Tabs and edit tabs settings and select style2.

Tab 1

  1. From popup Visual composer select Text Block and Add your content.
  2. to display UL list like demo add this html code inside text block content you create above
    <ul class="list-features">	<li><i class="fa fa-code"></i>Tons of Features</li>	<li><i class="fa fa-slack"></i>Use for Any Website</li>	<li><i class="fa fa-mortar-board"></i>Diffrent Websites</li></ul>

Tab 2

Add Text Block And Insert Your Content

  1. From popup Visual composer select Text Block and Add your content.
  2. to display UL list like demo add this html code inside text block content you create above
    <ul class="list-features">	<li><i class="fa fa-code"></i>Tons of Features</li>	<li><i class="fa fa-slack"></i>Use for Any Website</li>	<li><i class="fa fa-mortar-board"></i>Diffrent Websites</li></ul>

Tab 3 & tab 4

Add Text Block And Insert Your Content

Feature List      -Block 21

  1. make your row three column see above image.
  2. Column 1
    1. From popup Visual composer select Text Block.
    2. upload your image and add cssclass to image image-responsive.
  3. Column 2
    1. From popup Visual composer click tab by samathemes and select feature list container.
    2. For feature list container settings field icon align select Right.
    3. Click Save changes.
    4. Click + button inside feature list container.
    5. Click feature list item.
    6. Click edit feature list item.
    7. Add your title ex: Multimedia.
    8. Icon Active empty.
    9. Featured Icon select your icon.
    10. Finaly Add animation.[fadeinup] , delay 200, 400,600,800, ..

Pricing Table      -Block 22

  1. If you need pricing table without no margin Edit row settings from field Choose extra CSS class select Pricing table without margin.
  2. make your row three column see above image.
  3. From popup Visual composer click tab by samathemes and select Pricing Column.
  4. Field title: Ex: STANDARD.
  5. Field Display hot icon: Select no OR Yes.
  6. Field Column Style: Select Dark or any vlaue from dropdown menu.
  7. Field Price: EX: 3.99.
  8. Field Currency: EX: 3.99.
  9. Field %: EX: per month.
  10. Field Pricing Features: [Input price column features here. Divide values with linebreaks (Enter)]
    1GB Storage2 Clients5 Active Projects5 ColorsFree Goodies24/7 Email support
  11. Add content to othere fields.

Single Team Memeber      -Block 23

  1. From popup Visual composer select Text Block.
  2. Add Short Code team member. 

[sama_team_member style="style1" name="Abdel Fattah Arafa" role="CO-Founder" image="url to image" facebook="#" twitter="http://demo.samathemes.com/rozana/" linkedin="#" gplus="#" cssclass=""]about you here<img class="aligncenter size-full wp-image-2898" src="image url hrer" alt="signature" width="211" height="40" />[/sama_team_member]

Parllax Background      -Block 24

  1. Add Parallax Background.
  2. Edit row settings from field Choose extra CSS class select Make H1, h2, h3 color White.
  3. From popup Visual composer select Text Block.
  4. Add This content or any content you need.
<h1>WE WILL PROUD FOR YOUR COOPRATE WITH OUR CREATIVE TEAM WORK</h1><a class="slide-btn" href="http://themeforest.net/user/samathemes">Connect Now</a>

Single Team memeber      -Block 25

  1. If you need pricing table without no margin Edit row settings from field Choose extra CSS class select Pricing table without margin.
  2. make your row three column see above image.
  3. From popup Visual composer click tab by samathemes and select Single Team member.
  4. Field Type: woo team memebers
  5. Field Type: Add team memeber

Client Images      -Block 26

  1. From popup Visual composer click tab by samathemes and select Custom Single image.
  2. Field Type: empty
  3. Upload your image.
  4. Field Image size: single-client-image
  5. Add CSS3 Animation.

Branches With Accordions      -Block 27

  1. Edit row settings from field Choose extra CSS class select Block have Accordions With Google maps.
  2. From popup Visual composer select Accordion.
  3. Edit Accordion settings and from field style select Light
  4. Edit section 1 and change title to London and check active panel [active one panel from group panels].
  5. From popup Visual composer select Raw HTML and Add Embed code for google maps.
  6. From popup Visual composer select Raw HTML and Add content
    <div class="row no-margin"><div class="col-md-6 col-sm-6"><p><span class="icon-road"></span>3215 Oxford, London, UK.</p><p><span class="icon-mail"></span><a href="mailto:username@company.com">username@company.com</a></p></div><div class="col-md-6 col-sm-6"><p><span class="icon-mobile"></span>0045 010 547 00 21.</p><p><span class="icon-phone"></span>0045 010 542 248 65</p></div></div>

Custom Google Maps      -Block 28

  1. Edit row settings and from theme extra options tab for field full width select Full Width Container.
  2. From popup Visual composer click tab by samathemes and select Custom Google map.

Contact Info      -Block 29

  1. Edit row settings from field Choose extra CSS class select Block have Contact us information.
  2. make your row 2 column see above image and add vc element like image.
  3. For Raw HTML add this content
<ul class="service-list"><li><span class="icon-road"></span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. </li><li><span class="icon-phone"></span>02 - 2145 214 21 </li><li><span class="icon-mobile"></span>002 0100 843 1112 </li><li><span class=" icon-mail2"></span><a href="mailto:username@company.com">Username@company.com</a></li></ul>

Text Block Dark Background      -Block 30

  1. Edit row settings from field Choose extra CSS class select Welcome Box with dark background.
  2. make your row like image above.
  3. For Button add this content in text block
<a href="#">Purchase</a><a class="scroll" href="#services-onepage">Get Started</a>

Text Block      -Block 31

  1. Edit row settings from field Choose extra CSS class select Welcome Box with dark background.
  2. make your row like image above.
  3. For Button add this content in text block
<a href="#">Purchase</a><a class="scroll" href="#services-onepage">Get Started</a>

Text Block      -Block 32

  1. Add Parallax Background.
  2. Edit row settings from field Choose extra CSS class select banners Block text.
  3. From popup Visual composer select Text Block and Add your content.

Icon Block      -Block 33

  1. From popup Visual composer select Row HTML
    <header><h1>Download <span>Rozana</span> App Now</h1>  </header>
  2. From popup Visual composer click tab by samathemes and select Box with big icon.
  3. Field Title : empty you can add title if you need
  4. Field Link URL : empty
  5. Field Link Title Attributes : empty
  6. Field CSS Animation : bouncein
  7. Field CSS Animation Delay : 200

FAQ Style 1      -Block 34

  1. From popup Visual composer select Text Block
  2. Edit row settings from field Choose extra CSS class select Block have Accordions With Google maps.
  3. From popup Visual composer select Accordion.
  4. Edit Accordion settings and from field style select Light
  5. Edit section 1 and change title to Q1: How to customize design ? and check active panel [active one panel from group panels].

FAQ Style 2      -Block 35

  1. FAQ Style 1
  2. From popup Visual composer select Accordion.
  3. Edit Accordion settings and from field style select dark

Contact Form      -Block 36

  1. Required plugin Contact Form 7.
  2. From popup Visual composer select Contact Form 7.
  3. Select contact form from dropdown menu.
  4. You can wrap code in contact form you create like this

<div class="forms">	<div class="col-md-4 animated" data-animation="fadeInUp">		<p>Full Name<span>*</span></p>		<div class="element">[text* your-name]</div></div>	<div class="col-md-4 animated" data-animation="fadeInUp">		<p>Full Email<span>*</span></p>		<div class="element">[email* your-email]</div></div>	<div class="col-md-4 animated fadeInUp visible" data-animation="fadeInUp">		<p>Subject</p>		<div class="element">[text your-subject]</div></div>	<div class="col-md-12 animated" data-animation="fadeInUp">		<p>Your message<span>*</span></p>		<div class="element">[textarea your-message]</div></div>	<div class="col-md-12 animated" data-animation="fadeInUp">		<div class="element">			<button class="wpcf7-form-control wpcf7-submit" value="Send" type="submit"><i class="fa fa-edit"></i>Send</button><div class="loading"></div></div></div></div>

Contact Form styel 2      -Block 37

  1. Required plugin Contact Form 7.
  2. view Contact form.
  3. You can wrap code in contact form you create like this
<div class="forms"><div class="col-md-12 animated" data-animation="fadeInUp">	<p>Full Name<span>*</span></p>	<div class="element">		[text* your-name]	</div></div><div class="col-md-12 animated " data-animation="fadeInUp">	<p>Full Email<span>*</span></p>	<div class="element">		[email* your-email]	</div></div><div class="col-md-12 animated" data-animation="fadeInUp">	<p>Subject</p>	<div class="element">		[text your-subject]	</div></div><div class="col-md-12 animated" data-animation="fadeInUp">	<p>Your message<span>*</span></p>	<div class="element">		[textarea your-message]	</div></div><div class="col-md-12 animated " data-animation="fadeInUp">	<div class="element">	 <button class="wpcf7-form-control wpcf7-submit" value="Send" type="submit"><i class="fa fa-edit"></i>Send</button><div class="loading"></div></div></div></div>

Add MailChimp

  1. From popup Visual composer select Text Block and inside it Add shortcode for mailchim form you create.
  2. wordpress admin > MailChimp for WP > Forms > Load form styles (CSS)? select No
  3. wrap code in form like this.
<div class="newsletter">	<div class="element">		<input type="email" id="mc4wp_email" name="EMAIL" placeholder="YOUR EMAIL ADDRESS" required />	</div>	<div class="element">		<input type="submit" value="Sign up" /><i class="fa fa-heart"></i>	</div></div>