Move Call To Action Next To Slider In Executive Pro Theme

Dec 15, 2013

—

In this tutorial. i’ll show you how to move the Call to Action box next to the slider on the front page of the Executive Pro theme by StudioPress.

Janet asked: I want the slider to be 60% and the CTA widget to be 40%. How do I get them to be inline?

Here’s the result:

Re-Code Front Page Template

You’ll need to reposition the home-top widget after the CTA widget in your front-page.php template file.

CSS Code

You can then add this code near the end of your child themes style sheet or modify the existing code with these new rules.

.executive-pro-home .home-cta {
    float: right;
	background-color: #222;
	color: #ddd;
	padding: 60px;
	padding: 6rem;
	width: 40%;
}


.executive-pro-home .home-slider {
    float: left;
	width: 60%;
}

.executive-pro-home .home-cta .one-fourth {
width: 100%;
padding-top: 80px;
float: left;
}

.home-cta a.button {
float: left;
}

Genesis Responsive Widget Settings

These are the settings used to display the slider the same as what you see in the screenshot.

Comments

12 responses to “Move Call To Action Next To Slider In Executive Pro Theme”

Christine

June 5, 2014

Hi Brad,

Pleeeeeeeeease … oh wait … Hi!

I followed your code and the video is below the slider. I would love some guidance.

Thank you,
Christine

Log in to Reply
1. Brad Dalton
  
  June 5, 2014
  
  Hi Christine
  
  What theme are you using?
  
  The code generates exactly what you see in the screenshot.
  
  Log in to Reply
  1. Christine
    
    June 5, 2014
    
    I am using the Executive Pro
    
    It was great then when I put in the video … this is what I get.
    
    Thank you Brad so very much … very much,
    Christine
    
    Log in to Reply
    1. Brad Dalton
      
      June 5, 2014
      
      Sent you an email Christine.
      
      Log in to Reply
      1. Christine
        
        June 5, 2014
        
        What email? Did it have instructions or something?
        
        Christine
      2. Brad Dalton
        
        June 5, 2014
        
        Depends on how you look at things.
      3. Christine
        
        June 5, 2014
        
        What?
        
        Ummm … okay, thanks Brad.
      4. Christine
        
        June 5, 2014
        
        Hi Brad!
        
        Okay, I figured it out … but I think I still need some help … I sent ya request for consultation if that is okay. How do I pay you by Paypal?
        
        Thanks,
        Christine
Kristin

December 20, 2013

This is a great tip, just what I was looking for on the call to action. Is there an easy to to add another call to action right below the 3 widgeted sections on the home page? Basically where the old call to action was before we moved it, now I would like one under the 3 widgets. I look forward to your posts each day, they are a big help!

Log in to Reply
1. Brad Dalton
  
  December 21, 2013
  
  Hello Kristin
  
  Yes, you could add more code there for another one fairly easily.
  
  Log in to Reply
Jonathan

December 17, 2013

Hey Brad! Thanks for this post. I look forward to your posts everyday. Can you help me with responsiveness for this one? I’ve got everything else working.

Thanks,
Jonathan

Log in to Reply
1. Brad Dalton
  
  December 17, 2013
  
  Sure Jonathan. Please use the contact form.
  
  Log in to Reply