is it possible to get this layout? - Support | Kriesi.at

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

Author

Posts

April 3, 2022 at 7:02 pm #1347072

Jonas

Guest

Hi there,

i wanted to ask, if its possible to get this layout with enfold:
attached with link in private

as you see this one image is larger as the other and goes about multiple rows.
I could get it run with color sections, grid rows or just with coloums.

I also dont want to use the Grid Element because i want to write text in those boxes and i need to place the content by myself.

I would be so happy if you could help me out with that! :)

April 3, 2022 at 9:44 pm #1347076

Mike

Moderator

Hey Jonas,
Thank you for your question, I was able to get pretty close to your mockup using columns with background images and custom css.
This is the desktop view:

notice that most are 1/3 square with the top left one being 2/3 square taking up 4 spaces, and in the middle right is one 1/3 tall being 2 blocks tall.
on tablet, 768px, they retain their ratios but are narrow:

and on mobile they all become full width and equal height:

So each of the columns has a custom class to create this and the one-third-tall & one-third-under have been set with top & clear to place them were they are. You will probably need to take care with how much content you add to these to not change their height.
You can remove the special-heading elements and the display: flex; align-items: center; from the css, as it was to center the special-heading.
If you Enable the Avia Layout Builder Debugger on your site you can add this page shortcode to test on your site:

[av_two_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-1.jpg' attachment='866' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='two-thirds' template_class='' aria_label='' av_uid='av-l1jjt2et' sc_version='1.0']

[av_heading heading='Two Thirds' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm7hat' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_two_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-2.jpg' attachment='862' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjtztc' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm81hx' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-4.jpg' attachment='863' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-2xo2xi' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-74tlzq' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-5.jpg' attachment='868' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjusx8' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-5yz9li' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/isometric-1.jpg' attachment='447' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third-tall' template_class='' aria_label='' av_uid='av-l1jjwv99' sc_version='1.0']

[av_heading heading='One Third Tall' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm8ztq' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-9.jpg' attachment='865' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjz118' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-4p5yli' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-1.jpg' attachment='866' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjv7wz' sc_version='1.0']

[av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-365q0m' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-5.jpg' attachment='868' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third-under' template_class='' aria_label='' av_uid='av-l1jjzvnn' sc_version='1.0']

[av_heading heading='One Third Under' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm9z90' sc_version='1.0' admin_preview_bg=''][/av_heading]

[/av_one_third]

This is where my example is.
This is the css for the page:

@media only screen and (min-width: 768px) { 
.one-third-tall {
	height: 819px;
	clear: initial;
	top: -436px;
    float: right!important;
    background-position: 50% 50% !important;
	display: flex;
    align-items: center;
}
.one-third {
	height: 385px;
    background-position: 50% 50% !important;
	display: flex;
    align-items: center;    
}
.two-thirds {
	height: 819px;
	background-size: cover !important;
	display: flex;
    align-items: center;    
}
.one-third-under {
	height: 385px;
	top: -436px;
    background-position: 50% 50% !important;
	display: flex;
    align-items: center;    
}
}
@media only screen and (max-width: 767px) { 
	.one-third,
	.one-third-under,
	.one-third-tall,
	.two-thirds {
		height: 361px;
		display: flex;
        align-items: center;
	}
	
}
.av-special-heading {
	background-color: rgb(255 255 255 / 75%);
}

Best regards,
Mike

PS. I see that you have asked this through our PreSaleRequest Contact form, for further questions please login to the support forum and create a new thread so we can help you and other users can benefit from the solutions. Thank you for using Enfold.

April 4, 2022 at 12:42 pm #1347129

Jonas

Guest

Hey Mike,

WOW, outstanding!!
I am in love with this.

I copied your code + CSS and it works like it should.

Could you still help me with one small customisation?
I want this whole container in full page width. As you can see in the attached link, i have some white space on the left an right. Is it possible to reduce this, so that the images fit perfectly? :)

Best regards and thanks for your support!

April 4, 2022 at 2:25 pm #1347143

Rikard

Keymaster

Hi,

Please try this CSS as well:

.page-id-2287 div.av-section-cont-open {
    width: 100%;
    max-width: 100%;
    padding: 0;
    display: table;
    margin: 0 auto;
}

Best regards,
Rikard

April 4, 2022 at 3:38 pm #1347157

Jonas

Guest

Thanks Rikard,
It works like a charme.

Is there any way to get the content (text) responsive in those Boxes? its really hard to make it fit perfektly and also looking good.
If we could get this run, im perfectly statisfied :)

best regads
Jonas

April 4, 2022 at 5:57 pm #1347173

Rikard

Keymaster

Hi Jonas,

Since the element height is set at a specific height, it’s difficult to get the text responsive without additional CSS. Which text in specific do you want to adjust, and for which screen sizes?

Best regards,
Rikard

April 12, 2022 at 11:21 am #1348083

Jonas

Guest

Hey together,

sorry for the late reply, but i fixed this issue by myself.

@Mike or @Rikard
Im facing another problem. After this section there is a lot of white space. I think that is a result of the margins there.
Is there any way to fix this, so that the gab is not that big? I want the next content directly under it.

I attached a link with the problem.

Thanks four you help! :)

April 12, 2022 at 2:41 pm #1348110

Rikard

Keymaster

Hi Jonas,

I’m not sure which gap you are looking to remove, could you post a screenshot highlighting it please?

Best regards,
Rikard

April 12, 2022 at 4:03 pm #1348123

Jonas

Guest

hi. i attached the link to the screenshot in the private area.

April 12, 2022 at 5:50 pm #1348138

Rikard

Keymaster

Hi,

Thanks for that. Please try this in Quick CSS as well:

.page-id-2126 #after_section_3 {
  display: none; 
}

Best regards,
Rikard

April 12, 2022 at 5:55 pm #1348141

Jonas

Guest

Hey Rikard,

sorry but this did not work for me.

Any other idea?

best regards,
jonas

April 13, 2022 at 11:17 am #1348205

Rikard

Keymaster

Hi,

Please try this CSS as well:

div.av-1ukycf-8d16549ea4f978f7af8303fe58c32980 {
    height: 1825px;
    max-height: 1825px;
}

Best regards,
Rikard

April 16, 2022 at 2:53 am #1348529

Jonas

Guest

Hi Rakard,

sadly this does not worky also. Could you please take a look at it again. That would be great! :)
Thank you!

Best regards
Jonas

April 16, 2022 at 1:02 pm #1348549

Rikard

Keymaster

Hi,

Thanks for the update. Could you try to assign a unique ID to the section in question please? You have assigned the section-container-width ID to several section on the same page. You should only use an ID once on the same page.

Best regards,
Rikard

April 16, 2022 at 8:00 pm #1348575

Jonas

Guest

Hi Rikard,

i applied the ID “Container-special-design” to the div. But now it destroyed a but of the layout. and the white space after this is still in.

April 16, 2022 at 9:30 pm #1348579

Mike

Moderator

Hi,
Thanks for the link to your page and adding the custom ID container-special-design
I see that your element doesn’t show until 768px (tablet) but at that view the side margin and padding makes it look narrow until 1440px, I also see the gap below it.
So please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (min-width: 767px) and (max-width: 1440px) { 
	#container-special-design,
	.responsive #container-special-design>.container {
		padding: 0;
		margin: 0;
		width: 99%;
		max-height: 1800px;
	}
}
@media only screen and (min-width: 1441px) { 
	#container-special-design,
	.responsive #container-special-design>.container {
		padding: 0;
		max-height: 1800px;
	}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Author

Posts

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

You must be logged in to reply to this topic.