Majesty

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.

Visual Composer Row

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

Majesty themes add many parameter to row element like:

1. Parallax Background
   • Useful to Add Parallax Image Background.
   • HTML5 Video Bavkground.
   • Youtube Video Background.
2. Box Background [default mean no bg - grey background - dark - themecolor]. dark[ useful when using background image to make text color white]
3. Padding usefull to add padding bottom and top to this element.
4. Choose extra CSS Class. [from dropdown menu]
   1. paragraph welcome block. [used in this block and used in this block 17]
   2. Black Background. [used in this block]
   3. Clients Images. [used in this block]
   4. App Blocks. [used in this block]
   5. Art Block. [used in this block]
   6. Chef Block Style 1. [used in this block]
   7. paragraph discover. [used in this block]
   8. Chef Block Style 2. [used in this block]
   9. Video Block with image aboslute positions.[used in this block]
   10. Pricing table without margin. [used in this block]

Visual Composer Column

Majesty themes add this features to column:

1. Text Align by default center.
2. Choose extra CSS class this CSS Class useful for some elements.
   1. No Padding Used to make this column no padding left or right usefull when select Stretch row.
   2. Columns contain one Image with absolute position. [used in this block]
   3. paragraph With absolute position. [used in this block]
   4. Columns have image with absolute position. [used in this block]
   5. Center content in screen. [used in this block]
   1. CSS Animation type. [Useful when element not have css animation]
   2. CSS Animation Delay.

   

Create Parallax Background

1. Edit row settings click Parallax Background tab.
2. From dropdown menu parallax type select image.
3. Upload Your Image
4. in row settings click General tab.
5. Field Add Padding Top Bottom select padding top bottom 100px this padding is used in most element in majesty.
6. Field Box Background select Dark this is useful to make text color white inside this Element.
7. Field Background Opacity Overlay select transparent is 0.3 OR change it to what you need.

Create Video Background

1. Edit row settings click Parallax Background tab.
2. From dropdown menu parallax type select HTML5 Video OR Youtube and ADD URL To Your video.
3. Upload Your Poster Image. [this is good is user use browser not support video to display this image]
4. in row settings click General tab.
5. Field Add Padding Top Bottom select padding top bottom 100px this padding is used in most element in majesty.
6. Field Box Background select Dark this is useful to make text color white inside this Element.
7. Field Background Opacity Overlay select transparent is 0.3 OR change it to what you need.

Use Pattern For BG

1. Edit row settings.
2. Field Background Opacity Overlay select Pattern.

Add Custom Heading

here coverd to create 3 header styles.

Header 1

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

Header 2

1. to create header above.
2. Edit Row settings and click Design Options tab and upload your image.
3. in row settings click General tab.
4. Field Add Padding Top Bottom select padding top bottom 50px.
5. Field Box Background select Dark.
6. From Visual composer click add new element open popup.
7. click tab by samathemes.
8. click Theme heading.
9. Add your title and content.
10. For icon type make it Empty.
11. field Element Tag Margin make it no margin.
12. Field Header Margin Bottom make it no margin.
13. Save changes.

Header 3

1. to create header above this is like header 2 but different is.
2. Edit Row settings and click Design Options tab and upload your image.
3. Add padding in design options tab 10px.

VC WooCommerce Shortcode

Visual Composer provid User interface form for all wooshortcode.

and Majesty themes add new element replace columns value with layout that display 6 layout.

VC Woo Products Slider

Majesty Create new Element For Visual Composer is Woo Products Slider thats display slider for products by Shop Category.

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click Woo Products Slider.
4. Check Category you need to display.
5. Save changes.

VC Woo Products Carousel

Majesty Create new Element For Visual Composer is Woo Products Carousel thats display carousel for products by Shop Category.

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click Woo Products Carousel.
4. Select Category you need to display.
5. Save changes.

VC Woo with Fliters

Majesty Create new Element For Visual Composer is Woo with Fliters thats filter products by Shop Category.

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click Woo with Fliters.
4. check Categories you need to display.
5. Save changes.

Block 1 TextBox      -Block 1

1. Edit row settings from field Choose extra CSS class select paragraph welcome block.
2. make your row 2 column.
3. Edit Column settings that contain text and in field text align select center

Block 2 TextBox      -Block 2

1. Edit row settings from field Choose extra CSS class select Chef Block Style 2.
2. make your row 2 column.
3. Edit Column settings that contain image and from field Choose extra CSS class select Columns contain one Image with absolute position.
4. to get signature font please add css class 'signature' to elemet in theme i add this class to h2.

Block 3 Team Memeber Carouser      -Block 3

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

Block 4 TextBox      -Block 4

1. Edit row settings from field Choose extra CSS class select Black Background.
2. Field Box Background select Dark and field Background Opacity Overlay select no.
3. From popup Visual composer select Raw HTML and add this text and change link URL.

<h2 class="text-uppercase">Come & <span>Experiences</span> our best of world class cuisine</h2>
<a href="#" class="btn black btn-gold mt20">GET IN TOUCH</a>
		

Block 5 TextBox      -Block 5

1. From popup Visual composer select Raw HTML and add this text and change link URL.

<h2 class="text-uppercase">Come & <span>Experiences</span> our best of world class cuisine</h2>
<a href="#" class="btn black btn-gold mt20">GET IN TOUCH</a>
		

Block 6 TextBox      -Block 6

1. Make your row 2 columns.
2. For Slider
   1. From popup Visual composer click tab by samathemes and select OWL Carousel.
   2. upload you images and change slider options.

Block 7 Client Images      -Block 7

1. Make your row like image above.
2. Edit row settings from field Choose extra CSS class select Clients Images.
3. Each image you upload don't forget to add css class 'img-responsive'.

Block 8 Client Carouser      -Block 8

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click OWL Carousel.
4. Upload your images.
5. Control your carousr options without touch jQuery.

Block 9 Client Images      -Block 9

1. Make your row with 4 columns.
2. Edit row settings from field Box Background select Dark.
3. Edit row settings from field Choose extra CSS class select Blackback ground.
4. Edit row settings from field Extra class name Add CSS CLASS clients-container.
5. Each image you upload don't forget to add css class 'img-responsive'.

Block 10 Feature Box      -Block 10

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. Feature Box Icon Position select icon side.
7. Select Your Icon
8. Add Your content.

Block 11 Google Maps      -Block 11

1. Go to theme options > general settings > in field Google Maps API add your API More info
2. Edit row settings and from field Row stretch select Stretch row.
3. From popup Visual composer click tab by samathemes and select Custom Google map.

Block 12 Feature Box With Image      -Block 12

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click Feature Box with image.
4. Add your title ex: BREAKFAST.
5. Upload Your image.
6. Add Your content.

Block 13 Blog Grid      -Block 13

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click Blog Grid.

Block 14 Text Block      -Block 14

1. Make your row 2 columns.
2. Edit row settings from field Choose extra CSS class select APP BLocks.
3. From Visual composer click add new element open popup.
4. select single image, uplad your image and in field Choose extra CSS class select Left For App Block.
5. in column two add RAW HTML and add code under.
6. in column two add textblock and add content you need.

<h2 class="text-uppercase heading"><span>Become</span> Life <span>More</span> Easier</h2>

Block 15 Text Block      -Block 15

1. Make your row 3 columns.
2. Edit row settings and from field Row stretch select Stretch row.
3. Edit row settings and from field Choose extra CSS class select Art Block.
4. First Column
   1. Edit Column settings from field Choose extra CSS class select no Padding.
   2. From Visual composer click add new element open popup.
   3. click add new Text Block.
   4. ADD Image and don't forget to add css class 'img-responsive'
5. Second Column
   1. Edit Column settings from field Choose extra CSS class select paragraph With absolute position.
   2. Edit row settings from field Extra class name Add CSS CLASS nopadding.
   3. From Visual composer click add new element open popup.
   4. click add new Text Block.
   5. From Visual composer click add new element open popup.
   6. Click Add RAW HTMLand code under.
6. Third Column
   1. Edit Column settings from field Choose extra CSS class select no Padding.
   2. From Visual composer click add new element open popup.
   3. click add new Text Block.
   4. ADD Image and don't forget to add css class 'img-responsive'

<div class="intro-text">
  <div class="head_title">
   <i class="icon-intro"></i>
   <h2>ART OF FOOD</h2>
   <span class="welcome">Welcome to Majesty</span>
  </div>
<p>Majesty is  a team work of  Majesty Restaurant Cafe, we aim at promoting the foodstuff industry through the branches ,
we establish and through the new dishes. and integrate between different cultures, 
by merging different Oriental  and its western recipes</p>
<a href="http://themeforest.net/user/samathemes/portfolio" class="btn btn-gold">READ MORE</a>
</div>

Block 16 Text Block      -Block 16

1. Make your row 2 columns.
2. Edit row settings from field Choose extra CSS class select Chef Block Style 1.
3. From Visual composer click add new element open popup.
4. click add new Text Block.
5. to get signature font please add css class 'signature' to elemet in theme i add this class to h2.
6. in column two add new text block and upload your image and add css class 'img-responsive' to image.

Block 17 Text Block      -Block 17

1. Make your row 3 columns.
2. Edit row settings from field Choose extra CSS class select paragraph welcome block.
3. upload your image and add css class 'img-responsive' to image.

Block 18 Text Block      -Block 18

1. Edit row settings from field Choose extra CSS class select paragraph discover.
2. Create Parallax Background.
3. Add your content inside text block.

Block 19 Overlay Box      -Block 19

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click Overlay Box.
4. upoload your image and add title and content.

Block 20 Text Box      -Block 20

1. Edit row settings from field Choose extra CSS class select Video Block with image aboslute positions.
2. Edit Column settings from field Choose extra CSS class select Columns have image with absolute position.
3. wrap viemo vido like code under.
4. click tab by samathemes.

<div class="embed-responsive embed-responsive-16by9 embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/23851992" width="500" height="281"></iframe>
</div>

Block 21 Text Box      -Block 21

1. Make your row 2 columns.
2. Edit row settings from field Choose extra CSS class select paragraph welcome block.

Block 22 FAQ Box      -Block 22

1. Make your row 2 columns.
2. From Visual composer click add new element open popup.
3. click tab by samathemes.
4. click FAQ Box and add your content.

Block 23 Testimonial      -Block 23

1. From Visual composer click add new element open popup.
2. click tab by samathemes.
3. click Testimonial and add your content.

Block 24 PRICING TABLE      -Block 24

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 four column see above image.
3. From popup Visual composer click tab by samathemes and select Pricing Column.
4. Field title: Ex: STANDARD.
5. Field Column Style: Select Dark or any vlaue from dropdown menu.
6. Field Price: EX: 3.99.
7. Field Currency: EX: 3.99.
8. Field %: EX: per month.
9. Field Pricing Features: [Input price column features here. Divide values with linebreaks (Enter)]

   1GB Storage
   2 Clients
   5 Active Projects
   5 Colors
   Free Goodies
   24/7 Email support
   

10. Add content to othere fields.