Add Extra Full Width Widget in Altitude Pro Homepage?

[Vasilis]

Hey awesome people!

I would like to ask how is it possible to add an extra full width widget in altitude pro homepage

My website is this => http://cleancar.me

...and I would like to add a full width widget exactly under the price tables.

Any ideas, suggestions?

Kind regards

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Brad Dalton]

The easiest way to do this is to copy an existing widget from the front-page.php file.

You'll also need to register a new widget area in your functions file and make sure the i.d matches whats in your front page file to call the widget. The i.D will need to be changed and unique.

I suggest you setup a test site if you want to DIY your own programming.

---

Tutorials for StudioPress Themes.

[Vasilis]

Thank you Brad!

You mean copy this code?

genesis_widget_area( 'front-page-7', array(
		'before' => '<div id="front-page-7" class="front-page-7"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-7' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

As far as I understand this code is to create 7 different widget areas for Altitude Pro homepage, right?

What I want to do is to add an extra widget to an already existing widget area (area No.4 where is my price tables).

This widget should be full width.

Specifically I want to remove the color button with phone number from all price tables and just put it one time under all of them cause now it too crowded.

Hope you can help me out with this.

Thank you

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Victor Font]

The code you are displaying creates a single widget area named front-page-7. It does not create 7 widget area. Brad was sending you down the right path by suggesting you create an additional widget area under no. 4. You would style the extra widget area for full screen width and give it the appearance that is is part of no. 4.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Brad Dalton]

Thanks Victor.

Something like this @Vasilis

genesis_widget_area( 'front-page-8', array(
		'before' => '<div id="front-page-7" class="front-page-7"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-7' ) . '"><div class="wrap">',
		'after'  => '</div></div></div></div>',
	) );

Tested and works. You can easily change the values and experiment which is how you learn.

genesis_register_sidebar( array(
	'id'          => 'front-page-8',
	'name'        => __( 'Front Page 8', 'altitude' ),
	'description' => __( 'This is the front page 8 section.', 'altitude' ),
) );

Also add this to line 17

|| is_active_sidebar( 'front-page-8' )

---

Tutorials for StudioPress Themes.

[Vasilis]

Awesome!

Thank you both of you , appreciate it.

Will try it and let you know 🙂

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Vasilis]

Well once again thank you 🙂

Now @Brad I tried this code and it creates a new widget area at the home page of Altitude Pro

However what I want is to just add an extra widget in the 4th home page widget area.

I can already do this by default but it will take the default css settings and break my design.

Here check the image here to understand what I would like to do.

https://drive.google.com/file/d/0B57IEjC--2MUS2xFZWV5X3pOWWs/view?usp=sharing

And here is the website again to see it live.

http://cleancar.me

Once again I highly appreciate your help and support

Thank you very much

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Vasilis]

Bumping this post...

Any ideas for this?

Appreciate it 🙂

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Vasilis]

++Bump

Any ideas?

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

Hi Vasilis,

Adding the extra widget area to your theme would be the more robust approach 🙂

Given the image to which you linked - and the spirit in which Altitude Pro approaches CSS - one way to achieve what you would like to have would be to do the following:

(1) Add the extra widget as you normally would, e.g. add a text widget to the end of the fourth widget area.

(2) Add the following CSS:

.front-page-4 .flexible-widgets section:last-child {
	margin: 0 auto;
	width: 100%;
}

Since you are using Jetpack to minify your CSS file, I can't tell you exactly where this CSS should go. But, make sure it appears after any other definitions for .front-page-4 and .flexible-widgets (in case certain specificity rules take priority) ... but before the media queries stuff.

Just keep in mind that this CSS will always target the last widget that appears in the Front Page 4 widget area.

I have assumed that the yellow background and red text in your example image were for illustration purposes.

This should at least get you moving along 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

Well thank you very much!!!

That did the trick about the last widget

Now the problem is that the design of the other widgets break cause Altitude Pro has this specific widget arrangements.

Check it here http://cleancar.me

Can we place a code to "fake it" that it has 5 widgets there instead of 6?

Kind Regards

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

The proposal from Brad - which, as he pointed out is also "the easiest way to do this" ... by far - along with the supporting point from Victor (to ensure a seamless transition between the two widget areas) would be the way I would typically handle this sort of thing myself.

The reason why this is the easiest approach is because the theme deliberately determines which CSS selector to use based on the number of widgets found inside a widget area ... and it won't display more than 4 widgets in one so-to-speak "row".

So ... it's not that the design itself is breaking. It is behaving as per theme design 🙂 And it's not the only Genesis child theme to do this, e.g. Author Pro does something similar.

If you would prefer not to do this yourself then I can certainly sort this one out for you ... but I will charge for the time. But since Brad was here first, I think he should be given first opportunity for a paid engagement. If that doesn't work out - and Victor can't or doesn't want to do it - then I'll be happy to pick this one up 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

Ok got it.

Now I understand it almost 100% cause you explained it to me.

Already working on the website 🙂

Only problem , the background picture option from WordPress didn't change to the appropriate numbers....so now I can't seem to be able to put the background pictures in their place.

Also the background color and margins of the new widget? (I would like to make it a little narrower with the same background as the full-page-widget-4 )

You've been really helpful!

Totally appreciate it.

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

For the background images, you need to go into Appearance -> Customize and reassign them. The image that is currently assigned to Front Page 5 needs to be removed ... and then assign it to Front Page 6, etc.

For the background colour for front-page-5, look in your CSS for:
.front-page-4 .solid-section
then change it to:
.front-page-4 .solid-section,.front-page-5 .solid-section

For the margins, look for the .flexible-widgets definition in your CSS. It will look something like:
padding-bottom: 60px;
padding-top: 100px;
Don't touch those ... but define a new definition immediately below it that looks something like:

.front-page-4 .flexible-widgets {
	padding-bottom: 0;
}
.front-page-5 .flexible-widgets {
	padding-bottom: 0;
	padding-top: 0;
}

Lastly - for completeness - in your CSS, you should add .front-page-8 to where you see something that looks like:
.front-page-2, .front-page-3, .front-page-4, .front-page-5, .front-page-6, .front-page-7

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

Awesome ok I fixed everything and now works as smooth as before!

Thank you very much Erik!

Please check this about the featured image section on home page.

https://drive.google.com/file/d/0B57IEjC--2MUdEVvaVhRdTJRamc/view?usp=sharing

This is defined by WordPress I think...and it didn't change although I edited all the necessary CSS fields...

So now I have the option to choose a featured image for the sections which have a solid background....and for the sections that need an image background it thinks they have a solid background.

Any ideas on this?

Kind regards

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

This is defined by WordPress I think…and it didn’t change although I edited all the necessary CSS fields…

(1) It's defined by the theme, which has added these options to the WordPress Customizer.

(2) You missed the very first point I mentioned, i.e.
"For the background images, you need to go into Appearance -> Customize and reassign them. The image that is currently assigned to Front Page 5 needs to be removed … and then assign it to Front Page 6, etc."

In other words ... remove the images from Feature Section 5 Image and Feature Section 7 Image ... and then add images to Feature Section 6 Image and Feature Section 8 Image accordingly.

You haven't done this part yet ... as confirmed by the image you just uploaded 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

Well there is NO featured section 6 and featured section 8 as I mentioned before 🙂

So I cannot upload them there if there is no option available.

That's why I send you this picture to see that there is no other section options available.

Thank you 🙂

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

/themes/altitude-pro/lib/customize.php, line 74:

$images = apply_filters( 'altitude_images', array( '1', '3', '5', '7' ) );

/themes/altitude-pro/lib/output.php, line 19:

$opts = apply_filters( 'altitude_images', array( '1', '3', '5', '7' ) );

'1', '3', '5', '7' relates directly to the front page/featured image sections. You probably want to change them to '1', '3', '6', '8' ... but you should probably remove the images first ... so you don't get confused at a later date if you decide to switch these values back 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

Awesome!

Highly appreciate it Erik 🙂

May you have a great day!

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Author]

Posts