WP SITES

2722

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

Move Call To Action Next To Slider In Executive Pro Theme

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:

cta next to slider

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.

Slider Settings

Reader Interactions

Comments

  1. 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

  2. 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!

  3. 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

Leave a Reply