VamTam themes include our proprietary page builder called VamTam Drag & Drop builder. We will call it "The builder" for the purpose of this guide. The builder is a WYSIWYG (What You See Is What You Get) builder that allows you to quickly and easily build pages using all the included elements. We've created the Builder in a way that allows you to seamlessly switch between the builder interface and the regular WordPress interface - Visual and Text editors.
Table of contents:
VamTam Drag & Drop Page / Post Builder General Description
This section explains the main elements and aspects of the builder with images and descriptions. Knowing the different areas, icons and tools we include will help you quickly build beautiful pages with it. You can use the builder on each page / post / portfolio post.
Above the text editor in the top right side there are three tabs: Visual | Text | VamTam.
The VamTam Drag & Drop editor is tightly integrated with tinymce editor and you can switch to visual or text editor and vice versa at any time without losing any changes. Please note that on a newly created pages / posts you have first save the changes before switch to Visual or Text tab.
Columns and Builder Elements Description
Please view this general image and short descriptions below:
A. VamTam Drag & Drop columns and builder elements
You have 25+ elements to choose from. Hover over the icon to get some help info about each element:
Click on or drag the element buttons to add it to the builder.
Please note that the Columns element (Column-Color Box) is included into the elements top bar as well:
You may notice that some of our shortcodes are missing from the builder elements, such as: buttons, dropcaps, icon, divider, styled list, etc. These are content based shortcodes that require other text or content to go with them. For example, you would not use a dropcap or highlight without other text. These content based shortcodes need to be used with other shortcodes. For example, you would use a Text/Image Block element to add a dropcap or highlight. Add the Text/Image Block element and then click the edit icon. In the content field, you can access the visual or text editor and our shortcode generator button:
Click the generator button to select and use any of these content based shortcodes. Please refer to this tutorial for more details: http://support.vamtam.com/solution/articles/200739-how-to-use-shortcodes
B. Plus/Minus icons (Increase/Decrease width)
These icons allow you to change the width of the element. Click + to increase the size, or – to decrease.
This manner you can create a variety of different layouts.
1/1 (full width)
1/2 1/2
1/3 1/3 1/3
1/4 1/4 1/4 1/4
1/5 1/5 1/5 1/5 1/5
1/6 1/6 1/6 1/6 1/6 1/6
+ different combination equal to 1/1
Please note that you can resize the element itself or the columns containing different elements. Usually when adding element in a column, the element is 1/1 in order to fit the whole column's width. Feel free to add different size elements in the columns to have your own complex layout. Read more
C. Edit icon (Edit shortcode properties)
This is the icon you click to edit the column/element's properties and content. Read more
D. Clone icon
This is the clone icon. When you click this icon, it will clone the entire column/element and everything inside of it.
E. Click-to-toggle icon
The more complex layout contains columns with different element inside of them. To access the elements in, please click on the Click-to-toggle icon, as shown on the screenshot above.
F. Trash icon (Remove shortcode)
The trash bin icon allows you to quickly delete the entire content of the element. When you first click the icon, it will ask you "Are you sure you want to delete this section?", click "OK" to continue or "Cancel" to stop the action. This action cannot be undone.
Please note that the Trash bin isn't visible by default, you'll see the icon when moving the pointer over the editor's content.
How To Use VamTam Drag & Drop Builder
The builder is a drag and drop page editing tool that allows you to quickly and easily build pages. VamTam Drag & Drop editor is tightly integrated with tinymce editor and you can switch to visual or text editor at any time without losing any changes. Please note that on a newly created pages / posts you have first save the changes before switch to Visual or Text tab. The builder is intuitive, super fast and a pleasure to use.
1. VamTam Drag & Drop Elements
1.1. VamTam Drag & Drop Elements description and types
VamTam Drag & Drop elements are several types:
- associated with third party plugins: Contact Form 7, Flickr, Revolution Slider, Layer Slider, Twitter Timeline, Featured products (WooCommerce)
Please note that these elements can not work if you haven't installed, activated and set the appropriate plugin.
- associated with the standard WordPress options: Blog, Portfolio, Sitemap
- elements that can "nest" other elements: Column-Color Box, Accordion,
- elements that have a WISYNC editor: (please see the image below)
If this option is available in the settings panel of the element, you can add different media (images, video, etc.) and shortcodes as well.
1.2. List of the most common VamTam Drag & Drop Elements
Exploring the list below, please note that some of the elements aren't available in all VamTam themes. You can find the full list of your theme's VamTam Drag & Drop elements in the section under the name of the theme following this link: http://support.vamtam.com/solution/categories
Accordion
Adding panes, changing the name of the pane and adding content into the panes is done when the accordion element is toggled.
Blank Space
You can increase or decrease the space between elements using this shortcode.
To decrease the space please set a negative number. For example (-30 px)
Blog
Please note that this element shows already created blog posts. To create one go to the Posts tab in the WordPress main navigation menu on the left - add new. You do not have to go to Settings - Reading to set the blog listing page.
Box with a Link
You can set a link, background color and hover color to a section of the website and place your content there.
Call Out Box
You can place the call out box into а column - color box elemnent in order to have background color.
Column - Color Box
Once inserted into the editor you can change its width using +/- icons on the left.
You can insert any element into by dragging and dropping it onto the box.
You can drag and drop column into column for complex layouts.
You can move any element outside of the column by drag and drop.
You can set color/image background on any column.
Contact Form 7
Please note that the theme uses the Contact Form 7 plugin for building forms and its option panel is found in the WordPress navigation menu on the left.
To insert a contact form, first you have to create it.
Contact Info
You have 6 fields:
Name, Color, Phone, Cell Phone, Email, Address
Divider
Three types are available:
Expandable Box
You have open and closed states of the box and you can set different content and background of each state.
Flickr
This element is useful if you have a Flickr account. Use idGettr if you don't know your ID.
IFrame
You can embed a website using this element. Fill in the URL of the page you want to display in the Source field. Please note that the link should be in this format - http://www.google.com. Set the Width and Height values and that's it.
Revolution Slider
Please note that the theme uses Revolution Slider and its option panel is found in the WordPress navigation menu on the left. This element inserts already created slider into the page/post body. If you need to activate the slider in the Header, then you will need the option - "Page Slider" found below the editor.
Portfolio
Please note that this element shows already created portfolio posts. To create one go to the Portfolios tab in the WordPress main navigation menu on the left - Add New.
Price Box
You have 9 fields:
Title, Price, Currency, Duration, Summary, Description, Button Text, Button Link, Featured
Progress Indicator
You can choose from % indicator or animated number.
Service Box
Please note that the service box may not work properly in one half to full width layouts.
The settings of this element are: Style, Icon, Icon colour, Icon background, Image, Title, Description.
Sitemap
This element has the following settings:
General, Post and Portfolios, Categories
Tabs
Change to vertical or horizontal tabs from the element option panel. Add an icon by clicking on the "pencil" icon next to the pane title. Adding tabs, changing the name of the tab and adding content into the tabs is done when the tab element is toggled.
Team Member
You have 11 fields:
Name, Position, Link, Email, Phone, Picture URL, Google +, LinkedIn, Facebook, Twitter, YouTube
Testimonials
Please note that this element shows already created testimonials. To create one go to Testimonials tab in the WordPress main navigation menu on the left - Add new.
You can choose between Slider or Static Layout. You can set if the Slider will rotate automatically.
Text Divider
Two types are available: Title in the middle, Title above divider. Also fill the Text field in.
Text/Image Block
Please note that you can style your text with the help of the VamTam shortcodes found in the editor icon board at the top. Look for the V button.
You can insert an image by the button -Add Media- found above the editor when you open the element option panel.
You can toggle the element and insert plane text if you are in a rush.
Countdown
This element allows you to insert a countdown in your pages/posts. You have to fill Date and time, "Finished" text, Description text and Title (optional)
Twitter Timeline
Twitter Timeline is one of the themes functionalities. It comes with four settings to set up: Type, Username or Search Terms, Number of Tweets, Title (optional)
Featured Products
You have to set up the number of columns and limit (Maximum number of products)
You have also the possibility to order Featured products by Date, Menu order, to choose between Descending or Ascending order.
2. Adding Column or Builder Elements
2.1. Drag And Drop From Top Elements Panel To Content Area
One method to add columns or builder elements to the content area is to drag and drop them from the top elements panel, into the content area. The builder is precise, and will accurately place the element where you have dropped it with the mouse. Hover the mouse over the element you want, click and hold the mouse down while dragging the element into the desired spot. Once you have it where you want it, let go of the mouse button and it will fall into place. The content area will be highlighted in blue with a border when you drag and drop into place.
2.2. Click To Add Element In Next Available Spot
A second method to add column or builder elements to the content area is to simply click the element you want. When you click the element, the builder will add it to the content area. This method will add the element into the next available spot. For precise location, please drag and drop the element using the mouse into the content area.
2.3. Column-Color Box Options panel
The Column-Color Box comes with an array of choices not just overall, but with the background as well. You can choose to have an image, a solid color,, or even a video as your background. Below is a general image and more information on how to set different background options for the Column-Color Box.
A. Background Parallax:
The parallax effect will affect only the image background of the column not the elements you place into it.
You can insert column into column with transparent background images and thus create multi layers parallax effects.
Parallax - Simple, align in the middle - the column background is positioned - center/center when it is in the middle of the screen.
Parallax - Fixed attachment - the column background is positioned top center when the column is at the top of the screen.
The option bellow controls speed and direction of the animation.The parallax effect will be disabled on mobile devices as they do not yet properly support this animations and may cause different issues.
B. Full Screen Mode:
Extend the background of the column to the end of the screen. This is basicly a full screen mode.
C. Background Color / Image
- Set a custom solid color for your Column-Color Box by entering a hexcode into the Background Color field, or use our Color Picker tool to choose your desired color.
- Set an image background for your Column-Color Box. To upload your desired image please click the Insert button.
Please note that the background image left/right positions, as well as the cover option will not work as expected if the option Full Screen Mode is ON.
D. Hide the Background Image on Lower Resolutions
E. Background Video
Insert self-hosted video. Please note that if the video is the first element below the menu, It will not work properly in Chrome. You should use Layered Slider instead.
F. Vertical Padding
Positive values increase the blank space at the top/bottom of the column. Negative values are interpreted as setting the blank space so that the column is a certain amount of px shorter than the window. 0 means no padding.
Having both values set to a negative number will center the content vertically. In this case only the top value is use in the calculations.
G. "Read More" Button Link (optional)
If enabled, the column will have a button on the right.
H. "Read More" Button Text (optional)
If enabled, the column will have a button on the right.
I. Left Border
The left Border Color option accepts a hexcode value that sets the border’s color. You can also use our Color Picker tool to choose your desired color. Leave this option blank to disable the Left Border.
J. Class (Optional)
If you would like to add a specific class or ID for any element, you can do this by first wrapping the element in a Column, and then adding your chosen class/ID to the respective column options. In the case of the ID, you need to enter an alphanumeric string without any spaces. In the case of the Class option, you need to enter a space-separated list of classes without dots (similar to how you would use HTMLs class attribute). If you have entered my-column-class as the columns class, you can then use the following CSS selector for this column: .my-column-class
K. ID (Optional)
If you would like to add a specific class or ID for any element, you can do this by first wrapping the element in a Column, and then adding your chosen class/ID to the respective column options. In the case of the ID, you need to enter an alphanumeric string without any spaces. In the case of the Class option, you need to enter a space-separated list of classes without dots (similar to how you would use HTMLs class attribute). If you have entered my-column-class as the columns class, you can then use the following CSS selector for this column: .my-column-class
3. Drag And Drop Positioning
When you start to build pages, you will want to re-position elements and columns. The builder functionality is superb for this. It is precise and will accurately place the element where you have dropped it with the mouse. Hover the mouse over the element or column box you wish to move, click and hold the mouse down while dragging the element into the desired spot. Once you have it where you want it, let go of the mouse button and it will fall into place. The content area will be highlighted in blue with a border when you drag and drop into place.
IMPORTANT NOTE – Make sure that the content area is highlighted in yellow before you let go of the mouse. That signifies that the element is being moved. If you have a row of columns (1/3 + 1/3 + 1/3) and you need to drag the 3rd column into the 2nd column position, click and drag the 3rd column slightly above the center of the 2nd column. This will allow you to accurately place the 3rd box into the 2nd box’s spot. If you drag it all the way to the left of the 2nd column, it will be placed in the 1st box’s spot.
4. Add Elements Into Columns
4.1. Add elements into Column-Color Box
Elements can be inside or outside of Column-Color Boxes. Column-Color Boxes are used to hold a group of elements to help separate the layout. To add elements inside of column boxes, simply drag and drop the element to the interior of the column box. The content area will be highlighted in yellow when you drag and drop into place. You can add as many elements as you wish inside of a Column-Color Box. You can also add columns into columns to make a more complex layout.
Please note that you do not need to use the Column-Color Box shortcode unless the layout is very complex, as the width of
the elements is controlled by buttons +/- located on each element box.
4.2. Add elements into other elements
Elements can be added to other elements that are supposed to content other elements. For example these are: Accordion, Tabs. Please note that adding an Accordion element into other Accordion element won't work. The same is valid for the Tabs element.
5. Edit, Clone, Toggle Or Delete Elements & Columns
Each element or Column-Color Box you add has 3 icons in the top right corner that allow you to edit the element, clone the element or delete the element. Columns and elements boxes show 3 icons by default, and the Trash icon is visible only on hover. Simply click the icon you wish to use. More about these icons you can see in "Vamtam Drag & Drop columns and builder elements" section above.
5.1. Edit an element or column
This is the icon you click to edit the column/element's properties and content. Each element has its own settings panel (see the image below). What is common for all elements and columns are Title, Title Type and Element Animation options is that you need to click on the blue Save Element button before proceed with updating the page.
5.2. Clone an element or a column
If you clone a column box, it will clone the entire column and interior contents. Cloning the element box will only clone that element.
5.3. Toggle an element or a column
To access the elements in a Column-Color Box or other element, please click on the Click-to-toggle icon.
Please note that some of the elements' blocks have a toggle on the right side that allows you open them directly in the builder and edit the text - Text/Image Block and Call Out Box
5.4. Delete an element or a column
Please note that this action is irreversible. If you need your content back, you can use the standard Wordpress functionality Revision. Read more about revisions here: https://codex.wordpress.org/Revisions
Common Issues & Questions
Troubleshooting
Vamtam Drag & Drop Builder is missing?