How to add id to an element in visual composer

I’ve been trying to figure out how to add an ID to a visual composer element, but I can’t figure out how to do so. I’ve tried editing the row, but the only options I have are Custom CSS Class, Parallax, Full Width and Font Color, but no ID everywhere. I’ve tried putting id=”something” and Id=”something” into the shortcode with no good luck.

I need to do this in order to make links to some rows within the same page. If there’s another workaround to that, I’m eager to know.

Read More

Thanks in advance for any response.

Related posts

Leave a Reply

7 comments

  1. el_id

    Use el_id=’something’.

    Shortcode example:

    [vc_row el_id=’something’] CONTENT [/vc_row]

    It wil be generated like this into the DOM:

    <div id="something" class="vc_row wpb_row vc_row-fluid">

  2. I had to solve it also, what I did was to create an “Raw html” module, and add the ID on it:

    <div id="section"><div>
    

    and place it above the section you want to link to.

    Hope it helps!

  3. This work for me: for add a id to row you can aloso add this code in your function.php theme file:

    $attributes = array(
    'type' => 'textfield',
     'heading' => "HTML ID",
     'param_name' => 'element_id',
     'value' => '',
     'description' => __( "Assign an ID to the row", "discprofile" )
    );
    

    vc_add_param( ‘vc_row’, $attributes );

    After if you edit a row you find a new input element titled Html ID.

    Source: https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524335

  4. If you are using theme or plugin-specific shortcodes to display content, you are at the mercy of the developer as to whether you can specify an ID. If there’s no option for it, there’s no good way to add one without modifying the functions of the theme or shortcode.

    One workaround could be to do the following:

    1. Set up the shortcode like usual, with all the correct settings other than the ID you want.
    2. View the page. View the source of the page and find the element that was generated by that shortcode.
    3. Copy and paste the rendered code into the TEXT editor in the backend. Add an ID to the element manually. Remove the old shortcode to prevent duplicate data.

    You won’t be able to easily change shortcode settings, but in a pinch it should work!

  5. This feature is present in some themes like JUPITER but absent in most.

    A quick way to achieve this is to use the RAW HTML visual composer element instead of the shortcode options box you were using.

  6. Is verry easy if you want to add with php, for example:
    we can do in vc_map function this:

    array(
        'type' => 'textfield',
        'heading' => __( 'ID', 'ezrapp_tech_widget' ),
        'param_name' => 'id_item',
        'value' => uniqid(),
    )
    

    and now have generated uniquie id, but not this was my question.