This topic has 7 replies, 2 voices, and was last updated 9 years by sharmstr.

  • Author
  • #40736
     lux007
    Participant

    I prefer to use shortcodes and raw HTML for my website. I am trying to change the background of the homepage rows but it never goes through?

    COPY CODE
    [vc_row inner_container="yes" text_align="center" section_type="main" type="image" bg_position="center" bg_position_horizontal="center" bg_repeat="no-repeat" bg_cover="true" bg_attachment="false" parallax_speed="0.04" padding_top="300" padding_bottom="60" min_height="0.04" border="none" css_animation="right-to-left" bg_image="4931" enable_parallax="false"][vc_column width="1/1"][vc_column_text css_animation="right-to-left"]
    <h1><span style="color: #ffffff;">EXPLORE THE PLANET</span></h1>
    [/vc_column_text][kleo_gap size="20px"][kleo_search_form form_style="transparent"][kleo_gap size="30px"][vc_row_inner][vc_column_inner width="1/4"][/vc_column_inner][vc_column_inner width="1/6"][vc_column_text css_animation="right-to-left"]
    <h2 style="margin-bottom: 0; color: #fff !important;">[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]2[/kleo_animate_numbers].[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]247[/kleo_animate_numbers]</h2>
    <p style="color: #fff;">PORTFOLIO ITEMS</p>
    [/vc_column_text][/vc_column_inner][vc_column_inner width="1/6"][vc_column_text css_animation="right-to-left"]
    <h2 style="margin-bottom: 0; color: #fff !important;">[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]158[/kleo_animate_numbers]</h2>
    <p style="color: #fff;">FEATURED ARTICLES</p>
    [/vc_column_text][/vc_column_inner][vc_column_inner width="1/6"][vc_column_text css_animation="right-to-left"]
    <h2 style="margin-bottom: 0; color: #fff !important;">[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]28[/kleo_animate_numbers].[kleo_animate_numbers animation="animate-when-almost-visible" timer="1500"]731[/kleo_animate_numbers]</h2>
    <p style="color: #fff;">DAILY SEARCHES</p>
    [/vc_column_text][/vc_column_inner][vc_column_inner width="1/4"][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]

    To change the background, do I use “bg_url=blabla”? or “background_url=blalba” ? I’ve tried both and they don’t work. This is getting frustrating… Visual composer is fine for those that don’t know HTML but it makes things so much slower for those that know how to create div ids/classes, etc… I don’t want to have to upload an image every time I want to edit a row.

    #40737
     sharmstr
    Moderator

    Is it faster to ask here or to just create a new page, add a row and a background image and then switch back to classic mode to get your answer? 🙂

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    #40738
     sharmstr
    Moderator

    Also, I looked for a shortcode options list over at WP Bakery the other day because I use the VC shortcodes in php templates. I couldnt find one. Honestly, the easiest way I’ve found is to only add the section I’m trying to code in VC then switch back to classic mode. Quick and easy.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    #40740
     sharmstr
    Moderator

    And to answer your question, you dont use either way you’ve tried. Its defined by the bg_image attribute. You give it the attachment (image) id. Not the image path/name.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    #40741
     lux007
    Participant

    So there’s no solution to this?

    If I’m designing a site, would it be more efficient to:

    1. upload/overwrite an image in http://www.site.com/images/ or
    2. Go to pages, edit, switch to “backend editor”, edit row, wait for it to load, and upload the image (while knowing that I’d have to still delete all other previous uploads).

    I’d rather do option #1.

    #40742
     lux007
    Participant
    COPY CODE
    <section style="background-image: url(http://www.domain.com/images/image.jpg);background-position: center center;background-repeat: no-repeat;background-attachment: scroll;background-size: cover;padding-top: 300px;padding-bottom: 60px;min-height: 0.04px" data-prlx-speed="0.04" class="container-wrap main-color bg-parallax  text-center"><div class="section-container container"><div class="row">
    	<div class="col-sm-12 wpb_column column_container">
    		<div class="wpb_wrapper">
    			
    	<div class="kleo_text_column wpb_content_element ">
    		<div class="wpb_wrapper">
    			<h1><span style="color: #ffffff;">EXPLORE THE PLANET</span></h1>
    
    		</div> 
    	</div> <div style="height:20px;line-height:20px;" class="kleo-gap"></div><div class="kleo-search-wrap kleo-search-form search-style-transparent"><form data-context="" action="http://www.domain.com/" id="searchform" method="get" role="search">
    		<div class="input-group">
    			<input type="text" placeholder="" value="" class="ajax_s form-control input-lg" autocomplete="off" id="s" name="s" style="opacity: 0.5;"><span class="input-group-btn"><input type="submit" class="button" id="searchsubmit" value="Search"></span></div></form><span class="kleo-ajax-search-loading"><span class="kleo-loading-icon"></span></span><div class="kleo_ajax_results" style="opacity: 0.5;"></div></div><div style="height:30px;line-height:30px;" class="kleo-gap"></div>
    <section style="" class="container-wrap main-color"><div class="section-container container"><div class="row">
    	<div class="col-sm-3 wpb_column column_container">
    		<div class="wpb_wrapper">
    			
    		</div> 
    	</div> 
    
    	<div class="col-sm-2 wpb_column column_container">
    		<div class="wpb_wrapper">
    			
    	<div class="kleo_text_column wpb_content_element ">
    		<div class="wpb_wrapper">
    			<h2 style="margin-bottom: 0; color: #fff !important;"><span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="2">2</span>.<span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="247">247</span></h2>
    <p style="color: #fff;">PORTFOLIO ITEMS</p>
    
    		</div> 
    	</div> 
    		</div> 
    	</div> 
    
    	<div class="col-sm-2 wpb_column column_container">
    		<div class="wpb_wrapper">
    			
    	<div class="kleo_text_column wpb_content_element ">
    		<div class="wpb_wrapper">
    			<h2 style="margin-bottom: 0; color: #fff !important;"><span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="158">158</span></h2>
    <p style="color: #fff;">FEATURED ARTICLES</p>
    
    		</div> 
    	</div> 
    		</div> 
    	</div> 
    
    	<div class="col-sm-2 wpb_column column_container">
    		<div class="wpb_wrapper">
    			
    	<div class="kleo_text_column wpb_content_element ">
    		<div class="wpb_wrapper">
    			<h2 style="margin-bottom: 0; color: #fff !important;"><span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="28">28</span>.<span data-timer="1500" class="kleo-animate-number animate-when-almost-visible number_prepared start-animation" data-number="731">731</span></h2>
    <p style="color: #fff;">DAILY SEARCHES</p>
    
    		</div> 
    	</div> 
    		</div> 
    	</div> 
    
    	<div class="col-sm-3 wpb_column column_container">
    		<div class="wpb_wrapper">
    			
    		</div> 
    	</div> 
    </div></div></section><!-- end section -->
    		</div> 
    	</div> 
    </div></div></section>

    I guess that’s the only way to do it… straight html.

    #40743
     sharmstr
    Moderator

    You have to upload the image anyway. All you have to do is edit the image id number which you can see in media manager after you upload it. Not sure why that’s so hard.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

    #40744
     sharmstr
    Moderator

    (hit submit too soon) I wasn’t implying that you use VC everytime you wanted to change the image. I was only saying you need to do it once to figure out the actual shortcode options.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘General questions’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?