Adding "background" image at the top of the blog (enfold 2017 "blog modern")

Hey John,

You can do that using a Color Section element. We can give you the shortcodes for that page only so that you can import it to see how it’s set up.

Best regards,
Rikard

Hi John,

No problem, first off please activate debug mode in order to see builder shortcodes: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

You can then paste the following shortcode to a new page:

[av_section min_height='' min_height_px='500px' padding='default' shadow='no-shadow' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='scroll' bottom_border_style='scroll' scroll_down='' id='' color='main_color' custom_bg='' src='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' video_mobile_disabled='' overlay_enable='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0']
[av_heading tag='h1' padding='15' heading='Color Section' color='custom-color-heading' style='blockquote modern-quote' custom_font='#000000' size='40' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg=''][/av_heading]

[av_textblock size='' font_color='' color='' admin_preview_bg='']
The color section is the most powerful layout element in your arsenal to build unique websites. it allows you to display fullwidth section that contains various elements, and also lets you set the styling of this section by changing background images and color, height, top and bottom border, etc

A color section is a fullwidth element that can not co-exist beside a sidebar. You can however display a sidebar below the last fullwidth element if you want to.

Below are a few color section examples
[/av_textblock]
[/av_section]

[av_section min_height='custom' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='border-extra-diagonal' bottom_border_diagonal_color='#ffffff' bottom_border_diagonal_direction='' bottom_border_style='' id='' color='main_color' custom_bg='' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2015/07/business-office-work.jpg' attachment='480' attachment_size='full' attach='fixed' position='center center' repeat='stretch' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.7' overlay_color='#000000' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0']
[av_heading heading='This is a color section with fixed background and slanted border' tag='h1' style='blockquote modern-quote modern-centered' size='40' subheading_active='' subheading_size='15' padding='0' color='custom-color-heading' custom_font='#ffffff' admin_preview_bg='rgb(34, 34, 34)'][/av_heading]
[/av_section]

[av_section min_height='25' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' id='' color='main_color' custom_bg='#ffffff' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0']
[av_heading heading='This is a color section with solid background' tag='h1' style='blockquote modern-quote modern-centered' size='40' subheading_active='' subheading_size='15' padding='0' color='' custom_font='#ffffff' admin_preview_bg='rgb(255, 255, 255)'][/av_heading]
[/av_section]

[av_section min_height='' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='no-border-styling' id='' color='alternate_color' custom_bg='' src='https://test.kriesi.at/enfold-gym/wp-content/uploads/sites/18/2016/02/hero-2.jpg' attachment='549' attachment_size='full' attach='fixed' position='center center' repeat='stretch' video='https://www.youtube.com/watch?v=oXdzvMLiE7Q' video_ratio='16:9' video_mobile_disabled='aviaTBvideo_mobile_disabled' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.8' overlay_color='#000000' overlay_pattern='' overlay_custom_pattern='']

[av_heading tag='h1' padding='0' heading='This is a color section with background video and some content elements' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#ffffff' size='40' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='rgb(34, 34, 34)'][/av_heading]

[av_one_fifth first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[/av_one_fifth][av_three_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[av_textblock size='' font_color='' color='' admin_preview_bg='']
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum spellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
[/av_textblock]

[/av_three_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[/av_one_fifth][av_one_fifth first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[av_font_icon icon='ue822' font='entypo-fontello' style='border' caption='Lorem Ipsum' link='' linktarget='' size='40px' position='center' color='' admin_preview_bg='']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
[/av_font_icon]

[/av_one_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[av_font_icon icon='ue80e' font='entypo-fontello' style='border' caption='Multi Media' link='' linktarget='' size='40px' position='center' color='' admin_preview_bg='']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
[/av_font_icon]

[/av_one_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[av_font_icon icon='ue82f' font='entypo-fontello' style='border' caption='Cloud Based' link='' linktarget='' size='40px' position='center' color='' admin_preview_bg='']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
[/av_font_icon]

[/av_one_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[av_font_icon icon='ue826' font='entypo-fontello' style='border' caption='Big Brother' link='' linktarget='' size='40px' position='center' color='' admin_preview_bg='']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
[/av_font_icon]

[/av_one_fifth][av_one_fifth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']

[av_font_icon icon='ue863' font='entypo-fontello' style='border' caption='Time is up' link='' linktarget='' size='40px' position='center' color='' admin_preview_bg='']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
[/av_font_icon]

[/av_one_fifth][/av_section]

Best regards,
Rikard

Hi John,

I’m not sure I understand what you mean by that, what exactly do you want to change? Do you want to change the font of the headers?

Best regards,
Rikard

Hi,
Please try adding a color section to the top of the page and adding the image as it’s background, then set the header to transparent for the page, here is a screenshot of the backend to assist.

Best regards,
Mike

Hi,
Sidebars will alway be below color sections because they are full width, but it looks like your page needs to have the header set to transparency.
Here’s an example using your video:

But the way your sidebar is showing on that page reminds me of a plugin conflict, Try disabling your plugins.
On your post though it looks like you added a color section to a post created with the default editor, which will not work well.
Try using the advanced layout builder to create the post if you wish, but it’s not recommended to mix editor types.

Best regards,
Mike

Hi,
Can you please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

Hi,
I took a look at you page & post, Please try to recreate your page using the advanced layout builder only, I believe you will find that it will work better that using advanced layout builder shortcodes in the default editor.

Best regards,
Mike

Hi,

The pages were using the advance layout builder previously because there are color section shortcodes inside the editor. It’s not possible to add a color section element in the default editor. Why did you switch to the default editor?

We edited one of the pages and switched to the advance layout builder. ( see private field )

Could I ask you to create a page and a post with the menu on the left and featured image and IF it works

Do you want to move the header to the left? Please update the theme to version 4.2.6.

Best regards,
Ismael

Hi,

The page was create in default editor. All of them. Always in default (text entry).

Again, color sections are only available in the advance layout builder. Did you add the color sections shortcode manually? How?

Best regards,
Ismael

Hi,

I see. You are supposed to add that shortcode in the debug mode field of the advance layout builder, not the default editor. Please review this documentation.

// https://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

What’s wrong with the builder again? It’s working properly. Do you mind opening a new thread? This one is a getting a bit long.

Best regards,
Ismael

Hi,
I have taken a look, and if I understand correctly, you have a page with a color section at the top of the page with a background video which is working good.
And you wish to use this layout for a post, yet when you try the color section is below the post featured image and post title.
This is because you have created the post using the default editor, which adds the post featured image and post title to the top of the post.
Please re-create the post using the advanced layout builder to have the color section above the post featured image and post title.
But please note that if you use the advanced layout builder for the post you will have to add the post featured image, post title, and other post elements manually.
Please see screenshots in Private Content area.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
and the video tutorials here
And if there are features that you wish Enfold had, you can request them and vote the requested ones here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

Best regards,
Mike