This document discusses advanced use and customization options for the Visual Composer page builder plugin for WordPress. It covers settings, elements, templates, grids, and how to create custom elements and templates. The document provides links for purchasing Visual Composer, video tutorials, documentation, and an example plugin for extending Visual Composer's functionality.

1. Visual Composer - Beyond Beginning
Erweiterte Anwendung und Einstellungen desVisual Composers
sowie Hinzufügen eigener Contentelemente und Layouts
10.02.2015 Frank Staude <frank@staude.net>

2. Hallo!
Frank Staude
Email: frank@staude.net
Twitter: @staude
Webseite: www.staude.net
GitHub: staude
Moderator im deutschen WordPress.org
Supportforum
Validator für die deutsche BuddyPress
Übersetzung
de.wordpress.org
WPMeetups
WP Meetup Hannover
Plugins

3. Visual Composer

4. Visual Composer

5. Einstellungen

6. Elemente/Rolle

7. Elemente/Rolle

8. Shortcodes

9. Shortcodes

10. Shortcodes

11. Templates

12. Templates

13. Templates

14. Templates

15. Front End Editor

16. Front End Editor

17. Grids

18. Grids

19. Grids

20. Grid

21. EigeneVorlagen

22. EigeneVorlagen

23. EigeneVorlagen
add_filter( 'vc_load_default_templates', 'my_custom_template' );
function my_custom_template( $data ) {
$template = array();
$template['name'] = __( 'Custom template', 'my-text-domain' );
$template['image_path'] = ‚images/custom_template_thumbnail.jpg'; // Pfad zur Grafik, Im PluginOrdner oder ThemeOrdner
$template['custom_class'] = 'custom_template_for_vc;
$template['content'] = <<<CONTENT
[vc_row][vc_column width="1/2"][vc_single_image border_color="grey" img_link_target="_self"]
[vc_column_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar
dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/2"][vc_message color="alert-info" style="rounded"]I am
message box. Click edit button to change this text.[/vc_message][/vc_column][/vc_row]
CONTENT;
array_unshift( $data, $template );
return $data;
}

24. Eigene Elemente

25. Eigene Elemente
add_shortcode( 'bartag', 'renderMyBartag' );
function renderMyBartag( $atts, $content = null ) {
extract( shortcode_atts( array(
'color' => '#FF0000'
), $atts ) );
$content = wpb_js_remove_wpautop($content, true); //fix unclosed/unwanted paragraph tags in $content
$output = "<div style='color:{$color};'>{$content}</div>";
return $output;
}

26. Eigene Elementeadd_action( 'init', 'integrateWithVC' );
function integrateWithVC() {
vc_map( array(
"name" => __("MyVC ContentElement", 'vc_extend'),
"description" => __("Bar tag description text", 'vc_extend'),
"base" => "bartag",
"class" => "",
"controls" => "full",
"category" => __('Content', 'js_composer'),
"params" => array(
array(
"type" => "colorpicker",
"holder" => "div",
"class" => "",
"heading" => __("Text color", 'vc_extend'),
"param_name" => "color",
"value" => '#FF0000', //Default Red color
"description" => __("Choose text color", 'vc_extend')
),
array(
"type" => "textarea_html",
"holder" => "div",
"class" => "",
"heading" => __("Content", 'vc_extend'),
"param_name" => "content",
"value" => __("<p>Ich bin ein Textblock. Bitte bearbeite mich.</p>", 'vc_extend'),
"description" => __("Enter your content.", 'vc_extend')
),
)
) );
}

27. Links
Visual Composer
http://vc.wpbakery.com
Bei CodeCanyon kaufen
http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431
Video Tutorials
http://vc.wpbakery.com/video-academy/
VC Dokumentation
https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress
Beispiel Erweiterung desVC
https://bitbucket.org/wpbakery/extend-visual-composer-plugin-example/src/23a71f2f485a?at=master

28. Danke! Fragen?