-
AuthorSearch Results
-
February 14, 2025 at 10:33 am #1477112
Topic: Lightbox Gallery Image Limitation
in forum Enfoldgnilebein
ParticipantHello everyone,
is there a way to open only images of a gallery in the lightbox and not all images of the page when the Enfold Lightbox is activated?The native WordPress Gallery has a unique ID (wp-block-gallery-2) of the galleries in the class:
<figure class="wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">However, I primarily use cadence blocks for galleries. Here the parent DIV has a suitable way of identifying this (id=‘splide02’)
<div class="kt-blocks-carousel-init kb-blocks-fluid-carousel kt-carousel-arrowstyle-whiteondark kt-carousel-dotstyle-dark kb-splide splide splide-initialized splide-slider splide--loop splide--ltr splide--draggable is-active is-overflow is-initialized" data-slider-anim-speed="400" data-slider-scroll="1" data-slider-arrows="true" data-slider-dots="true" data-slider-hover-pause="false" data-slider-auto="" data-slider-speed="7000" data-slider-type="fluidcarousel" data-slider-center-mode="true" data-slider-gap="10px" data-slider-gap-tablet="10px" data-slider-gap-mobile="10px" id="splide02" role="region" aria-roledescription="carousel">Many thanks for your support and suggestions.
Best regards
February 13, 2025 at 6:45 am #1477023In reply to: How to activate: Nach oben Button (Top)
Hi,
Thank you for the link.
The scroll-to-top button is there, in the bottom right corner of the page, beside the cookie consent message. If you want to move it to the left, use the following css code:
#scroll-top-link { left: 50px; bottom: 50px; right: auto; }Best regards,
IsmaelJanuary 29, 2025 at 9:17 pm #1475983In reply to: Disable scrolling on tab element
I’ve done that and I’m not seeing any change.
Page is https://new.shadehaven.net/mobile-shade-for-animals/
I have some custom code that is autoplaying videos and then the next tab is clicked (via js) when the video completes. If you are scrolled past the tab element you’ll be pulled back up to the top when the hash changes. Alternatively just clicking on the tab manually has the same effect.January 28, 2025 at 8:34 pm #1475942Topic: Disable scrolling on tab element
in forum Enfoldjmoriart
ParticipantI have a large tab element with tabs on the right side. I’d like to disable the behavior that scrolls you up to the top of the tabs on click. The hash appears and the browser window goes back up to the top. This would normally be fine but I’ve added some js that auto-cycles through the tabs and I don’t want the user pulled back up if they’ve scrolled past the element. Any help in disabling this?
January 27, 2025 at 6:29 pm #1475876In reply to: Video in Header
have a look at : https://webers-testseite.de/bemopriv/
the heading had to be styled for responsive case – but I didn’t feel like doing that anymore.the layout is based on a grid-row element
this is the enfold shortcode of the grid-row:
[av_layout_row min_height_percent='percent' min_height_pc='60' min_height='0' border='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' color='main_color' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' mobile='av-flex-cells' mobile_breaking='' mobile_column_order='' id='' custom_class='full-bg-image' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-m6f9v8gq' sc_version='1.0'] [av_cell_three_fourth vertical_align='middle' padding=',,,' av-desktop-padding=',,,80px' av-medium-padding=',,,80px' av-small-padding='3' av-small-padding_sync='true' av-mini-padding='20' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-m6f9ukqb' sc_version='1.0'] [av_four_fifth first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='1' border_style='solid' border_color='#000000' radius='15' radius_sync='true' min_col_height='' padding='30' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-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='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='rgba(0,0,0,0.5)' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' src_dynamic='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' fold_timer='' z_index_fold='' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' link='' link_dynamic='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' element_template='' one_element_template='' av_uid='av-t574on' sc_version='1.0'] [av_heading heading='FREEZE FLAT™' tag='h1' style='blockquote modern-quote' subheading_active='subheading_above' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='48' av-medium-font-size-title='42' av-small-font-size-title='36' av-mini-font-size-title='28' subheading_size='' av-desktop-font-size='36' av-medium-font-size='28' av-small-font-size='24' av-mini-font-size='20' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='#ffffff' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_dynamic='' link_target='' title_attr='' id='' custom_class='iceglas' template_class='' element_template='' one_element_template='' av_uid='av-m6e7xj5g' sc_version='1.0' admin_preview_bg=''] The Original [/av_heading] [/av_four_fifth][/av_cell_three_fourth][av_cell_one_fourth vertical_align='bottom' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' link_dynamic='' linktarget='' title_attr='' link_hover='' mobile_display='' mobile_col_pos='0' custom_class='' template_class='' av_uid='av-u4sunr' sc_version='1.0'] [av_video src='https://www.youtube.com/watch?v=W73GdyDSHuU' mobile_image='https://webers-testseite.de/wp-content/uploads/dynamic_avia/avia_video_thumbnails/youtube/W73GdyDSHuU/W73GdyDSHuU.jpg' attachment='49853' attachment_size='full' video_autoplay_enabled='aviaTBvideo_autoplay_enabled' html5_fullscreen='aviaTBhtml5_fullscreen' format='16-9' width='16' height='9' conditional_play='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m6f9u95o' sc_version='1.0'] [/av_cell_one_fourth] [/av_layout_row]January 16, 2025 at 4:12 pm #1475233In reply to: Accessibility Issues
Which shortcode do I need to apply the link titles to? I am confused
Are you referring to the PHP code?
my page shortcode does have link titles (see below)
[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='small' custom_margin='0px' custom_margin_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='' color='main_color' background='bg_color' custom_bg='#000000' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' 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='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-gw04d9' sc_version='1.0']
[av_hr class='invisible' icon_select='yes' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='-25' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-fvcgnh' sc_version='1.0' admin_preview_bg='']
[av_heading heading='CHECK OUT OUR OTHER BOWL 360 FRANCHISE ' tag='h3' style='blockquote modern-quote modern-centered' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='26' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='20' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='manually,http://' link_dynamic='' link_target='' title_attr='' id='' custom_class='' template_class='' av_uid='av-esbpnx' sc_version='1.0' admin_preview_bg='']
Birthdays. Holidays. Parties for the kids. Parties for the office. Parties for you and your friends. When you’re ready to celebrate, then it’s time to BE BOWLED. Bring your party to the lanes and get ready for one unforgettable event.
[/av_heading][av_hr class='invisible' icon_select='yes' icon='ue808' font='entypo-fontello' position='center' shadow='no-shadow' height='-50' custom_border='av-border-thin' custom_width='50px' custom_margin_top='30px' custom_margin_bottom='30px' custom_border_color='' custom_icon_color='' id='' custom_class='' template_class='' av_uid='av-cpo64d' sc_version='1.0' admin_preview_bg='']
[av_partner heading='' type='grid' columns='8' navigation='arrows' control_layout='av-control-default' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' size='no scaling' img_size_behave='' border='' img_border='solid' img_border_width='1' img_border_width_sync='true' img_border_color='#cccccc' border_radius='12' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' padding='10px' padding_sync='true' animation='slide' transition_speed='' autoplay='false' interval='5' heading_tag='' heading_class='' img_scrset='' lazy_loading='disabled' el_id='' custom_class='' template_class='' av_uid='av-bil12l' sc_version='1.0']
[av_partner_logo id='2178' id_dynamic='' hover='Bowl 360 Ozone Park' link='manually,https://bowl360.nyc/' link_dynamic='' link_target='_blank' linktitle='Bowl 360 Ozone Park' av_uid='av-9cabb1' sc_version='1.0']
[av_partner_logo id='2180' id_dynamic='' hover='' link='manually,https://bowl360astoria.nyc/' link_dynamic='' link_target='' linktitle='Bowl 360 Astoria' av_uid='av-6z8btp' sc_version='1.0']
[av_partner_logo id='2181' id_dynamic='' hover='' link='manually,https://bowl360brooklyn.nyc/' link_dynamic='' link_target='' linktitle='Bowl360 Brooklyn' av_uid='av-6jvk4t' sc_version='1.0']
[av_partner_logo id='2183' id_dynamic='' hover='' link='manually,http://bowl360newhydepark.com/' link_dynamic='' link_target='' linktitle='Bowl 360 New Hyde Park' av_uid='av-44jhel' sc_version='1.0']
[av_partner_logo id='2184' id_dynamic='' hover='' link='manually,https://bowl360strikecityspringhill.com/' link_dynamic='' link_target='' linktitle='Bowl 360 Strike City Spring Hill' av_uid='av-101zh' sc_version='1.0']
[av_partner_logo id='2220' id_dynamic='' hover='' link='manually,https://island360restaurant.com/' link_dynamic='' link_target='' linktitle='Island 360 Restaurant' av_uid='av-101zh-2' sc_version='1.0']
[av_partner_logo id='2222' id_dynamic='' hover='' link='manually,https://paddles360.com/' link_dynamic='' link_target='' linktitle='Paddles 360' av_uid='av-101zh-1' sc_version='1.0']
[av_partner_logo id='2260' id_dynamic='' hover='' link='manually,https://uptownbarandgrill360.com/' link_dynamic='' link_target='' linktitle='Uptown Bar and Grill' av_uid='av-101zh-1-1' sc_version='1.0']
[/av_partner][/av_section]
January 3, 2025 at 2:47 pm #1474565Thank you for the reply @Guenni007 and for the sample website you gave me.
Unfortunately, that doesn’t seem to do what I mean, as the animation goes normally also on our site when you start scrolling the page; for the site you sent me, you still have to hover over the icons to display their content inside the center of the circle.
What I would like to do is for everything to show without having to hover over the icon, i.e. you start seeing the logo inside the circle, then after 2 seconds you see the content of the first icon displayed, then after 2 seconds you see the content of the second icon displayed and lastly, after another 2 seconds you see the content of the third icon displayed in the center.
So everything would display automatically, as nearly nobody would point the mouse to the icons to reveal content, since nobody knows and the vast majority don0t event imagine there is something else to view.Hope that makes sense and hope that is something feasible, or if not, maybe that is a new feature to add to the next version of Enfold.
Thanks
January 3, 2025 at 9:06 am #1474513Topic: Is it possible to animate automatically the Icon Circles?
in forum Enfoldabortolotti
ParticipantHey there,
We love the Icon Circle element for the site we’re making now, but nearly nobody hover over the icon circle and therefore doesn’t view the content of each circle.
Is there a way to set an timed autodisplay of the Icon circles content automatically, while scrolling the page?
Here’s a screenshot of the page I mean:

Ideally, this would be the behaviour:
1. logo shows in the center, then after 2-3 seconds
2. First dot on top animates and shows up content in the center, then 2 seconds later,
3. Second dot on the right animates and shows up content in the center, then 2 seconds later,
4. Third and last dot on the left animates and show up content in the center.Maybe also on loop, so it continues.
Is it possible?
Thank you for your help.
Antonio
December 10, 2024 at 12:55 pm #1473329In reply to: remove container wrappers around code widget
Hello Ismael – yes I added that code, as per the code I posted to you, you can see it in the first line. What I am trying to do is create a video scrubber scrolling effect. This requires the container to be at that height, so the scroll is tied to the video position (see rest of code). Then to remove the height so it works similarly to parallax then we use section.vid div.holder {position:sticky!important; top:0!important;}. Making the screen stick to enable the scrolling video. However the problem is that Enfold automatically generates container tags around a code block. Therefore these div containers are also being set at that height of the section.vid box. My original question was how do we insert code without the container tags being generated, which would be the cleanest method. If that is not possible, then is there another solution to make the container tags also the same size? Any ideas appreciated. Thanks, Philip.
December 4, 2024 at 9:28 am #1472855In reply to: Need help to install demo
Hey evadietetique,
It might be easier if you simply add the shortcodes for that demo to a new page, since it’s only a single page. Please activate debug mode under Enfold->Layout Builder->Show Advanced Options, then paste this shortcode in the window which will appear under the regular layout window:
[av_layout_row border='' min_height_percent='100' min_height='0' color='main_color' mobile='av-flex-cells' id='welcome' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-busuf8'] [av_cell_one_half vertical_align='middle' padding='200px,0px,200px,0px' background_color='' src='https://kriesi.at/themes/enfold-freelancer/files/2017/09/freelancer-girl.jpg' attachment='219' attachment_size='full' background_attachment='scroll' background_position='center center' background_repeat='stretch' mobile_display='' av_uid='av-bqgyjg'] [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='' src='https://kriesi.at/themes/enfold-freelancer/files/2017/09/bg.jpg' attachment='217' attachment_size='full' background_attachment='scroll' background_position='center center' background_repeat='stretch' mobile_display='' av_uid='av-bjr95g'] [av_heading tag='h1' padding='0' heading='Welcome!' color='' style='blockquote modern-quote' custom_font='' size='60' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-bclyt0'][/av_heading] [av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-b880uk'] [av_textblock size='25' font_color='custom' color='#000000' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='' av_uid='av-13rf10'] I am Sarah, an experienced California based freelancer. I specialise in graphic design & user interfaces as well as photo, video & audio editing. [/av_textblock] [av_hr class='invisible' height='10' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-awl6x0'] [av_button label='Learn more!' link='manually,#next-section' link_target='' size='large' position='left' icon_select='no' icon='ue800' font='entypo-fontello' color='custom' custom_bg='#c3aca1' custom_font='#ffffff' admin_preview_bg='' av_uid='av-am3mbo'] [/av_cell_one_half] [/av_layout_row] [av_layout_row border='' min_height_percent='100' min_height='0' color='main_color' mobile='av-flex-cells' id='recent' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-ajcq50'] [av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='#d3c3bc' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='center center' background_repeat='contain' mobile_display='' av_uid='av-ab65z0'] [av_heading tag='h1' padding='0' heading='Recent Projects' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#ffffff' size='60' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='rgb(34, 34, 34)' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-a8puyk'][/av_heading] [av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#ffffff' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-a2eatw'] [av_textblock size='' font_color='custom' color='#ffffff' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-9v34ak'] <p style="text-align: center;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> [/av_textblock] [av_hr class='invisible' height='10' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-9piuf0'] [av_masonry_gallery ids='230,229,228,227,226,225' items='6' columns='2' paginate='none' size='fixed' orientation='av-orientation-square' gap='large' overlay_fx='active' container_links='active' id='' caption_elements='none' caption_styling='' caption_display='always' color='custom' custom_bg='#bfada5' av-medium-columns='' av-small-columns='' av-mini-columns='' av_uid='av-9g38c4'] [av_hr class='invisible' height='10' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-9eclpg'] [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='' src='https://kriesi.at/themes/enfold-freelancer/files/2017/09/sketches.jpg' attachment='223' attachment_size='full' background_attachment='fixed' background_position='center right' background_repeat='stretch' mobile_display='av-hide-on-mobile' av_uid='av-96xub8'] [/av_cell_one_half] [/av_layout_row] [av_layout_row border='' min_height_percent='100' min_height='0' color='main_color' mobile='av-flex-cells' id='services' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-90wqq4'] [av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='' src='https://kriesi.at/themes/enfold-freelancer/files/2017/09/laptop-hands.jpg' attachment='220' attachment_size='full' background_attachment='fixed' background_position='center center' background_repeat='stretch' mobile_display='av-hide-on-mobile' av_uid='av-8tm1xo'] [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='center center' background_repeat='contain' mobile_display='' av_uid='av-8pbwjw'] [av_heading tag='h1' padding='0' heading='Services' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#c3aca1' size='60' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='rgb(255, 255, 255)' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-8hz9jo'][/av_heading] [av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#c3aca1' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-8abezo'] [av_textblock size='' font_color='custom' color='#c3aca1' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-86jvd0'] <p style="text-align: center;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> [/av_textblock] [av_hr class='invisible' height='60' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-82hb4k'] [av_one_half 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_breaking='' mobile_display='' av_uid='av-7sqofw'] [av_font_icon icon='ue826' font='entypo-fontello' style='' caption='' link='' linktarget='' size='60px' position='center' color='#c3aca1' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-7rluj8'][/av_font_icon] [av_hr class='invisible' height='20' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-7kegkk'] [av_textblock size='' font_color='custom' color='#c3aca1' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-7fhz6c'] <h4 style="text-align: center;">Research</h4> <p style="text-align: center;">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> [/av_textblock] [av_hr class='custom' height='8' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#c3aca1' custom_margin_top='40px' custom_margin_bottom='0px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' av-small-hide='aviaTBav-small-hide' av-mini-hide='aviaTBav-mini-hide' admin_preview_bg='' av_uid='av-75qm98'] [/av_one_half][av_one_half 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_breaking='' mobile_display='' av_uid='av-737w1w'] [av_font_icon icon='ue8c0' font='entypo-fontello' style='' caption='' link='' linktarget='' size='60px' position='center' color='#c3aca1' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-6ty4mc'][/av_font_icon] [av_hr class='invisible' height='20' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-6p8lzw'] [av_textblock size='' font_color='custom' color='#c3aca1' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-6iw7rw'] <h4 style="text-align: center;">Design</h4> <p style="text-align: center;">Lorem ipsum dolor sit amet, consectetlit. Aenean eget dolor.</p> [/av_textblock] [av_hr class='custom' height='8' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#c3aca1' custom_margin_top='40px' custom_margin_bottom='0px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' av-small-hide='aviaTBav-small-hide' av-mini-hide='aviaTBav-mini-hide' admin_preview_bg='' av_uid='av-6d8t8s'] [/av_one_half][av_one_half 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_breaking='' mobile_display='' av_uid='av-66pnys'] [av_font_icon icon='ue80e' font='entypo-fontello' style='' caption='' link='' linktarget='' size='60px' position='center' color='#c3aca1' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-5zd8oc'][/av_font_icon] [av_hr class='invisible' height='20' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-5xjz50'] [av_textblock size='' font_color='custom' color='#c3aca1' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-5os6b8'] <h4 style="text-align: center;">Photography</h4> <p style="text-align: center;">Lorem ipsum dolor sit amet, consectetlit. Aenean eget dolor.</p> [/av_textblock] [/av_one_half][av_one_half 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_breaking='' mobile_display='' av_uid='av-5jx5dw'] [av_font_icon icon='ue856' font='entypo-fontello' style='' caption='' link='' linktarget='' size='60px' position='center' color='#c3aca1' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-5d2kuc'][/av_font_icon] [av_hr class='invisible' height='20' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-59xkxw'] [av_textblock size='' font_color='custom' color='#c3aca1' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(255, 255, 255)' av_uid='av-50iuhw'] <h4 style="text-align: center;">Development</h4> <p style="text-align: center;">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> [/av_textblock] [/av_one_half][/av_cell_one_half] [/av_layout_row] [av_layout_row border='' min_height_percent='100' min_height='0' color='main_color' mobile='av-flex-cells' id='about' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-4usz8c'] [av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='#d3c3bc' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='center center' background_repeat='contain' mobile_display='' av_uid='av-4pxp1o'] [av_heading tag='h1' padding='0' heading='About me' color='custom-color-heading' style='blockquote modern-quote' custom_font='#ffffff' size='60' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='rgb(34, 34, 34)' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-4k9wmk'][/av_heading] [av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#ffffff' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-4dvesc'] [av_textblock size='' font_color='custom' color='#ffffff' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-46o1lg'] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. [/av_textblock] [av_hr class='invisible' height='10' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#0a0a0a' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-41bgq4'] [av_heading tag='h1' padding='0' heading='Skills' color='custom-color-heading' style='blockquote modern-quote' custom_font='#ffffff' size='30' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='rgb(34, 34, 34)' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-3x52dg'][/av_heading] [av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#ffffff' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-3o141o'] [av_textblock size='' font_color='custom' color='#ffffff' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-3kiqnw'] Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. [/av_textblock] [av_one_full first min_height='' vertical_alignment='av-align-top' space='' custom_margin='aviaTBcustom_margin' margin='10px' margin_sync='true' padding='30px' padding_sync='true' border='5' border_color='#c3aca1' radius='0px' radius_sync='true' background_color='#ffffff' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-c0rn0'] [av_progress bar_styling='av-flat-bar' bar_animation='av-animated-bar' bar_styling_secondary='av-small-bar' show_percentage='av-show-bar-percentage' bar_height='4' admin_preview_bg='' av_uid='av-39fubo'] [av_progress_bar title='Web Design' progress='100' color='theme-color' icon_select='no' icon='43' font='entypo-fontello' av_uid='av-30j064'] [av_progress_bar title='Web Development' progress='90' color='theme-color' icon_select='no' icon='43' font='entypo-fontello' av_uid='av-2ubch0'] [av_progress_bar title='Photography' progress='90' color='theme-color' icon_select='no' icon='43' font='entypo-fontello' av_uid='av-2t3k30'] [/av_progress] [/av_one_full][/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='' src='https://kriesi.at/themes/enfold-freelancer/files/2017/09/freelance-girl-relax.jpg' attachment='218' attachment_size='full' background_attachment='fixed' background_position='center right' background_repeat='stretch' mobile_display='av-hide-on-mobile' av_uid='av-2ietrw'] [/av_cell_one_half] [/av_layout_row] [av_layout_row border='' min_height_percent='100' min_height='0' color='main_color' mobile='av-flex-cells' id='contact' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-2extrw'] [av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='' src='https://kriesi.at/themes/enfold-freelancer/files/2017/09/tochscreen.jpg' attachment='224' attachment_size='full' background_attachment='fixed' background_position='center center' background_repeat='stretch' mobile_display='av-hide-on-mobile' av_uid='av-280shw'] [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='100px' padding_sync='true' background_color='#85a7ca' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='center right' background_repeat='contain' mobile_display='' av_uid='av-23kzes'] [av_heading tag='h1' padding='0' heading='Get in touch' color='custom-color-heading' style='blockquote modern-quote' custom_font='#ffffff' size='60' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='rgb(34, 34, 34)' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-1z2mi4'][/av_heading] [av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#ffffff' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-1rakpo'] [av_one_half first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='#a95e33' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-1lcqes'] [av_textblock size='' font_color='custom' color='#ffffff' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='' av_uid='av-1f2rdo'] <h2>Address</h2> 10800 West Pico Boulevard Infinity Loop Cupertino, Los Angeles, USA <h2></h2> [/av_textblock] [/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='#a95e33' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='' mobile_breaking='' mobile_display='' av_uid='av-172ues'] [av_textblock size='' font_color='custom' color='#ffffff' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' admin_preview_bg='' av_uid='av-10nq70'] <h2>Opening Hours:</h2> Mo-Fr: 8:00-19:00 Sa: 8:00-14:00 So: closed <h2></h2> [/av_textblock] [/av_one_half][av_contact email='' title='' button='Submit' on_send='' sent='Your message has been sent!' link='manually,http://' subject='' autorespond='' captcha='' hide_labels='aviaTBhide_labels' form_align='' color='av-custom-form-color av-light-form' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-vk6xw'] [av_contact_field label='Name' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-2fvqs'][/av_contact_field] [av_contact_field label='E-Mail' type='text' check='is_email' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-k3aqs'][/av_contact_field] [av_contact_field label='Subject' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-hlg6c'][/av_contact_field] [av_contact_field label='Message' type='textarea' check='is_empty' options='' multi_select='' av_contact_preselect='' width='' av_uid='av-pq38'][/av_contact_field] [/av_contact] [/av_cell_one_half][/av_layout_row]Best regards,
RikardNovember 27, 2024 at 5:29 am #1472326In reply to: automatic sizing of vertical images
Hi,
for example horizontal photos are visible in their entirety because they are automatically adapted to the screen,
Some images appear fully visible on mobile because their aspect ratio differs from the phone browser’s viewport. In portrait mode, the viewport is taller than most images with a landscape proportion, making them fully visible. Please note that images automatically adjust to occupy the space of their parent container. If you want to control how the images are resized and make them fully visible on certain screens with different aspect ratio, you need to apply a custom css class name to them and adjust their width or height manually. For example, you can set the image width to 50%, and the image will resize proportionally to its height.
@media only screen and (max-width: 1366px) { /* Add your Mobile Styles here */ .av-limit-image-height img.avia_image { width: 50%; margin: 0 auto; } }Again, you need to apply the class name “av-limit-image-height” to the Image element. However, focusing on whether the images are fully visible on load may not be necessary, as users can still scroll to view the content.
Best regards,
IsmaelNovember 27, 2024 at 3:28 am #1472322Topic: Post slider image height
in forum Enfoldnyoung_web
ParticipantI’m still new to WordPress/Enfold and I’m trying to set the thumbnail for a post slider to the same height.
In the link of the test page, the post slider after the first image has one thumbnail that is at 1210 x 420, and the others 1080 x 420.
I want them all to appear at a certain height, preferably the same height as the one with the 1210 x 420 dimension.
The slider’s image size is set to “Entry without sidebar (1210×423)”.Below is the custom css I added over the course of solving multiple issues, so some of them may be working against each other. I would appreciate any advice about the custom css below or any additional one(s) that could achieve the look I want.
#top .avia-content-slider .slide-entry-title { font-size: 1em; } #top .post-entry .blog-categories { font-size: 0.9em; font-weight: normal; } #top .content .entry-content-wrapper { padding-right: 0px; } #top .avia-slideshow-inner { float: center; } #top .avia-content-slider .slide-entry-wrap { float: center; } #top .avia-content-slider-inner { margin: 0px; overflow: hidden !important; } #top .avia-content-slider { display: flex; } #top .avia-content-slider .slide-image img{ height: auto !important; } .avia_desktop .avia-content-slider .avia-slideshow-arrows a{ opacity: 1; } @media only screen and (max-width: 479px) { .responsive #top #wrap_all .slide-entry{width:48%; margin-left:4%} .responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even{margin:0; clear:both;} .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first{margin-left:0; width:100%;} .responsive .avia-content-slider .slide-image img { width: 100%; } .responsive #top .avia-slideshow-arrows a{ display:block !important; opacity: 1; font-size: 20px; width: 60px; height: 60px; top: 30%; margin: -30px 0 0; text-align: center; } } #top .scroll-down-link { height: 60px; width: 80px; margin: 0px 0 0 -40px; line-height: 60px; position: absolute; left: 50%; bottom: 25px; color: #263238; text-align: center; font-size: 70px; z-index: 100; text-decoration: none; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0); }November 18, 2024 at 8:34 am #1471530Hi,
Thank you for the inquiry.
The page can’t be scrolled due to this css rule, which is applied after adding an item to the cart:
body.xoo-wsc-cart-active, html.xoo-wsc-cart-active { overflow: hidden!important; }You can override it with the following css code:
body.xoo-wsc-cart-active, html.xoo-wsc-cart-active { overflow: auto!important; }Best regards,
IsmaelNovember 15, 2024 at 6:23 am #1471354Hi,
Thank you for the inquiry.
Unfortunately, there is no built-in option to delay the animation until the user scrolls to the slider. To achieve this, you can use the LayerSlider element as suggested previously. You’ll need to enable the Project Settings > Slideshow > Slideshow Behavior > Start only in Viewport option and disable the Auto-start slideshow option.
Best regards,
IsmaelOctober 16, 2024 at 9:10 am #1469199Hi,
Thank you for the inquiry.
Please edit all the Text Blocks with the table element, go to Advanced > Developer Settings panel, apply the name “av-custom-text-table” in the Custom CSS Class field, then add this css code to make the tables scrollable in mobile view.
.av-custom-text-table { overflow: auto; }Best regards,
IsmaelSeptember 25, 2024 at 1:31 pm #1467805In reply to: Right Sidebar Menu Sticky
or – maybe a simpler idea – we use the left header sidebar ! – and just handle the #wrap_all as a flex container – and define the order in this way that the header goes to the right side
@media only screen and (min-width: 768px) { #wrap_all { display: flex !important; flex-flow: row nowrap; } #wrap_all #header { order: 2; flex: 0 1 27%; right: 0; left: auto; } #wrap_all #main { order: 1; flex: 0 1 73%; margin-left: 0 !important; border-left: none !important; } .responsive #top .header_bg { box-shadow: -5px 0px 5px -5px #666; } /*** because submenu is defined to a width of 208px ***/ #top #avia-menu > li.dropdown_ul_available > ul.sub-menu { left: -207px } /*** have a bit more space from main menu-item to the fly-out submenu ***/ .html_header_sidebar #header .av-main-nav>li { margin-left: 5px !important; padding-left: 13px; } } @media only screen and (min-width: 990px) { #wrap_all #header { flex: 0 1 300px; } #wrap_all #main { flex: 0 1 calc(100% - 300px); } }see: https://enfold.webers-webdesign.de/
( the scroll away after some time does not belong to that settings here. – this is part of the inital Headersetting )this is not styled to the end – becaue i want to go back to the original setting of header on top.
above all, you now have to extend the subnavigation to the left – but that shouldn’t be a problem using css.September 25, 2024 at 10:20 am #1467794In reply to: Right Sidebar Menu Sticky
Hello Ismael
For now I’ve solved the issue by adding a scrollbar to the header to have the menu visible in every screen height.#header_main { overflow: auto !important; max-height: calc(100vh - 40px); /* the -40px works for me but it depends on the lenght of your header */ }Of course it would be nicer to have a function to make it scrollable as in the Left Sidebar Menu without the sidebar but my knowledge of php and js is very poor
Best wishes
Manu-
This reply was modified 1 year, 5 months ago by
manurimini.
September 25, 2024 at 10:18 am #1467793In reply to: Right Sidebar Menu Sticky
Hello Guenni
First of all, I would like to thank you for all the interventions you make on this forum that have helped me over the years to solve various issues.
When you use General Layout > Logo And Main Menu > Left Sidebar you have three choices in the tab Sticky Sidebar Menu (You can choose if you want a sticky sidebar that does not scroll with the content):
1 – Never Sticky
2 – Always Sticky
3 – Sticky if Sidebar is smaller then the screen size, scroll otherwise
You have this choices only if you use the Left Sidebar Menu
If you switch to Right Sidebar Menu the options tab Sticky Sidebar Menu is not available and as Ismael wrote with CSS unfortunately the feature “Sticky if Sidebar is smaller then the screen size scroll otherwise” when the right sidebar is enabled is impossible to set.
So, for now I’ve solved the issue by adding a scrollbar to the header to have the menu visible in every screen height.#header_main { overflow: auto !important; max-height: calc(100vh - 40px); /* the -40px works for me but it depends on the lenght of your header */ }Of course it would be nicer to have a function to make it scrollable as in the Left Sidebar Menu without the sidebar but my knowledge of php and js is very poor
Best wishes
Manu-
This reply was modified 1 year, 5 months ago by
manurimini.
be carefull if you install that child-theme on an existing installation!
Enfold has on Import/Export Options : “Import Settings From Your Parent Theme”. Button –
This generally works smoothly. The child theme then initially adopts the settings of the parent theme – including the quick css settings.But link above to docu can tell you more detailed
By the way: you do not need to edit this by ftp.
Mostly there is the opportunity to edit the child-theme functions.php via Dashboard:Dashboard – Appearance – theme file editor ( right side click f.e. on functions.php)

______________________________
after that for that test page of mine i have in quick css:
.avia_mega_div.avia_mega7 { right: calc(-100vw) !important; width: 95vw; } #top .avia_mega_div > .sub-menu { display: grid !important; margin:0; gap: 20px 0px; grid-auto-flow:row; grid-template-columns: repeat(7, 1fr); /*** that means 7 grid-cells with each 1 fraction (same size) ***/ } #top #header .avia_mega_div > .sub-menu > li { display: block !important; width: unset; position: relative; } #top #header .avia_mega_div { max-width: 100vw; /*** if it is neccessary ***/ } @media only screen and (min-width: 990px) and (max-width: 1199px) { #top #header .avia_mega_div > .sub-menu { grid-template-columns:repeat(4, 1fr); } #header .avia_mega_div { overflow-y: scroll; /*** needed - if your mega-div height is too large for your device ***/ max-height: calc(100vh - 200px); /*** depends on your header height ***/ } }August 16, 2024 at 4:34 pm #1464785Hi,
This is only for items in the /avia-shortcodes/ directory and you must add the code to your child theme and add a /shortcodes/ directory to your child theme, please see our documentation here. If the page doesn’t scroll automatically, scroll to Add Elements to ALBBest regards,
MikeAugust 5, 2024 at 5:34 am #1463806In reply to: [Tab element] Tab section scrollable?
Hello back everyone, I’ve managed to solve it by my own after many tests.
Here I share the code, hope it helps someone else:
.scrollable-tab .av-layout-tab-inner .container { position: relative; overflow: auto!important; max-height: 600px!important; } /* Styles for WebKit (Chrome, Safari) */ .scrollable-tab .av-layout-tab-inner .container::-webkit-scrollbar { width: 15px; } .scrollable-tab .av-layout-tab-inner .container::-webkit-scrollbar-track { background: #f1f1f1; } .scrollable-tab .av-layout-tab-inner .container::-webkit-scrollbar-thumb { background-color: #FF9D26; border-radius: 2px; border: 2px solid #f1f1f1; } .scrollable-tab .av-layout-tab-inner .container::-webkit-scrollbar-thumb:hover { background-color: #FFB84D; }If you have any ideas to improve it, please comment.
Regards,
August 4, 2024 at 7:37 pm #1463790Topic: [Tab element] Tab section scrollable?
in forum EnfoldKanza
ParticipantIs there a way to make a tab section content scrollable over a certain height?
I’ve tried giving a class to a specific tab and adding this css, but it doesn’t seems to work:
.scrollable-tab { position: relative; overflow: auto; max-height: 500px; }Any ideals?
August 2, 2024 at 11:10 am #1463617In reply to: Table sortable header row
I see you around for years in this forum. Your contribution is awesome! Thank you very much! I’m going now to try with your code.
On your first example, there is a little “box” on the top of the scroll section. From my tests, if you set custom width for columns, that little box turns funny and take a totally random shape and size. Perhaps I did something wrong…
I’m looking to get exactly the same result as the examples I sent in here: https://colorlib.com/etc/tb/Table_Fixed_Header/index.html
But perhaps this is impossible without changing the way Enfold generates tables. From what I know, it takes a custom class at some section that enfold doesn’t automatically generates. And it’s way too hard for me to figure out how to solve that trough JS.Thank you again, will make some new tests based on your page.
Regards,July 22, 2024 at 12:09 am #1462630Topic: Auto launch masonry gallery
in forum EnfoldnTECHgrate
ParticipantHello Enfold Team,
I have a masonry gallery on my homepage, but it doesn’t load until I start to scroll. I want to change this and have it load on page launch. Can you please help with this?
Thanks
-James
July 9, 2024 at 7:26 am #1461660In reply to: Table of content
Hi,
Thank you for the update.
All post but at the beginning.
You can create a custom shortcode for the TOC widget, then use a template hook to automatically render the TOC on every post. Please add this code to the functions.php file:
add_shortcode('avs_toc', 'avs_toc_function'); function avs_toc_function() { $args = array( 'name' => 'Displayed Everywhere', 'id' => 'av_everywhere', 'description' => '', 'class' => '', 'before_widget' => '<section id="avia_auto_toc-2" class="widget clearfix avia_auto_toc">', 'after_widget' => '<span class="seperator extralight-border"></span></section>', 'before_title' => '', 'after_title' => '', 'widget_id' => 'avia_auto_toc_custom', 'widget_name' => 'Enfold Child Table of Contents', ); $instance = array( 'title' => 'Toc', 'exclude' => '', 'style' => '', 'level' => 'h1', 'single_only' => 1, 'indent' => 1, 'smoothscroll' => 1, ); ob_start(); $toc = new \aviaFramework\widgets\avia_auto_toc; $toc->widget($args, $instance); $output = ob_get_clean(); return $output; }Then include this hook to render the TOC after the main title:
add_action('ava_after_main_title', function() { if(is_single()) echo do_shortcode('[avs_toc]'); }, 10);Best regards,
IsmaelJune 30, 2024 at 4:53 pm #1460645Topic: How to hide the autoscrolling arrow?
in forum EnfoldJak73
ParticipantHi,
i added a spacer (thin line). There is a strange autoscrolling arrow.
Could not find settings to disable it.
Please see screenshot.
kind regards JakJune 24, 2024 at 10:29 pm #1458528In reply to: Changes to right sidebar header
Top Header – Logo left – menu right.
to have on start to all pages first the hamburger active and to generate the widget area – this to child-theme functions.php:function custom_burger_menu_active( $active, $context ){ return true; return $active; } add_filter('avf_burger_menu_active', 'custom_burger_menu_active', 10, 2 ); add_action('ava_after_footer_output', function() { echo '<div id="extra_sidebar" class="container_wrap extra_sidebar_color" role="contentinfo" ><div class="container" style="text-align: center; padding: 10px 0 20px">'; echo do_shortcode("[av_sidebar widget_area='extra_sidebar']"); echo '</div></div>'; });this is for social bookmarks a shortcode to place inside a text-widget :
function social_bookmarks_shortcode() { $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => ''); $social = avia_social_media_icons($social_args, false); return $social; } add_shortcode('social-bookmarks', 'social_bookmarks_shortcode');to use it as :
[social-bookmarks]now goto your widgets and create a new widget area : extra_sidebar
!!! to have on top a free space not to overlap the hamburger icon i placed to that a text-widget on top with an empty div container:

here is the css code: you can fit to your needs the amount of that extra bar:
.responsive #top #wrap_all #header { position: fixed !important; height: 100px !important; } .html_header_top #top #header .container { width: 100% !important; padding: 0; max-width: 100% !important; } .html_header_top #top #header .main_menu, .html_header_top #top #header .av-main-nav-wrap, .html_header_top #top #header .av-burger-menu-main { width: 100px; margin: 0 !important; } .html_header_top #top #header .av-burger-menu-main a { padding: 0 !important; text-align: center; } #top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link { height: 100px !important; line-height: 100px !important; } .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a { background-color: transparent !important; } .html_header_top.html_header_sticky #top #wrap_all #header { box-shadow: none } .html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 0px !important; } .html_av-overlay-side #top .av-burger-overlay-scroll { background-color: rgba(0,0,0,0.5) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .responsive #top .av-logo-container .logo { display: none !important; } #extra_sidebar { display: block; position: fixed; width: 100px !important; height: 100%; top: 0; right: 0px; left: auto; background-color: #FFF; z-index: 302 !important; } #extra_sidebar .container { height: 100%; } .html_header_top #top #wrap_all #main { width: calc(100% - 100px); padding-top: 0px !important; } #top #extra_sidebar .avia-builder-widget-area { display: flex !important; flex-flow: column nowrap; justify-content: space-around !important; height: 90%; padding-top: 250px !important; /*** try your self a good looking value ******/ } #top #extra_sidebar .avia-builder-widget-area:before, #top #extra_sidebar .avia-builder-widget-area:after { display: none; } #top #extra_sidebar .avia-builder-widget-area > * { flex: 0 1 auto; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; /*! transform:rotate(180deg); */ } #top #extra_sidebar .avia-builder-widget-area svg, #top #extra_sidebar .avia-builder-widget-area img { width: auto; height: 70px; transform: rotate(90deg); transform-origin: top right; margin-right: 15px; } #top #extra_sidebar .widget ul.social_bookmarks { transform: rotate(90deg) !important; } #top #extra_sidebar .widget ul.social_bookmarks li a { transform: rotate(-90deg) !important; } @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 0px; } }I don’t know whether existing rules have played a role here. If it doesn’t work right away, please contact me again.
June 18, 2024 at 12:48 pm #1451858Topic: The Events Calendar Pro – prevent auto scroll to top
in forum EnfoldMarco
ParticipantHi there,
please have a look at the website in private content. The links on the calendar pagination (page number or next/previous button) are causing an auto scroll to top. So the user has to scroll down to get to the events again. Is there any chance to prevent that auto scroll.
I already had the people at the Events Calendar support have a look at the issue, but the issue seems unlikely to be coming from them.
Thanks in advance!
Best regards
MarcoJune 18, 2024 at 12:07 am #1451705In reply to: Alb full width submenu sticky on mobile upgrade
in detail : it is this calculation case:
if( burger_menu.is(":visible") ) { this.css({top: 'auto', position: 'absolute'}); fixed = false; return; }that is replaced by that:
if( burger_menu.is(":visible") && (scrolled + modifier > top_pos) ) { this.css({top: header.Height() , position: 'fixed !important'}); fixed = true; }and these values are set all to !important in the original menu.css
@media only screen and (max-width: 989px){ .responsive #top .av-switch-990.av-submenu-container{ top: auto ; position: relative ; } /**** … ***/ } @media only screen and (max-width: 767px){ .responsive #top .av-switch-768.av-submenu-container{ top: auto ; position: relative ; } /**** … ***/ } @media only screen and (max-width: 479px){ .responsive #top .av-switch-480.av-submenu-container{ top: auto ; position: relative ; } /**** … ***/ }only if they could be overwritten by that js script – the mobile sticky submenu will work.
June 4, 2024 at 12:54 pm #1447861In reply to: How to get a different blog format ?
this technique is called : infinite scroll – maybe that older post can help you on that:
https://kriesi.at/support/topic/quick-way-to-add-infinite-scroll/#post-681490Edit: it still works.
Download that little script: https://jscroll.com/#/installation
and upload it to your child-theme js folder ( if there is none – create that child-theme subfolder )I load the script only for my test page (ID: 45777)
put this to your child-theme functions.php:function my_custom_infinite_scoll() { if ( is_page(45777) ) { wp_enqueue_script( 'avia-child-jscroll', get_stylesheet_directory_uri().'/js/jscroll.min.js', array('jquery'), 2, true ); } } add_action('wp_enqueue_scripts', 'my_custom_infinite_scoll');and
function infinite_scroll() { if ( is_page(45777) ) { ?> <script type="text/javascript"> (function($) { $( ".content" ).jscroll({ loadingHtml: '<img src="/wp-content/uploads/anim-world.gif" alt="Loading" /> Loading...', nextSelector: 'span.current + a', contentSelector: '.article-grid', autoTrigger: true, }); })(jQuery); </script> <?php } } add_action('wp_footer', 'infinite_scroll', 999);In my case it is a blog element – give that custom class: article-grid to that element.
Read the setting carefully ( with pagination – this nav is set to display none via css ) -
This reply was modified 1 year, 5 months ago by
-
AuthorSearch Results
-
Search Results
-
Hello everyone,
is there a way to open only images of a gallery in the lightbox and not all images of the page when the Enfold Lightbox is activated?The native WordPress Gallery has a unique ID (wp-block-gallery-2) of the galleries in the class:
<figure class="wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex">However, I primarily use cadence blocks for galleries. Here the parent DIV has a suitable way of identifying this (id=‘splide02’)
<div class="kt-blocks-carousel-init kb-blocks-fluid-carousel kt-carousel-arrowstyle-whiteondark kt-carousel-dotstyle-dark kb-splide splide splide-initialized splide-slider splide--loop splide--ltr splide--draggable is-active is-overflow is-initialized" data-slider-anim-speed="400" data-slider-scroll="1" data-slider-arrows="true" data-slider-dots="true" data-slider-hover-pause="false" data-slider-auto="" data-slider-speed="7000" data-slider-type="fluidcarousel" data-slider-center-mode="true" data-slider-gap="10px" data-slider-gap-tablet="10px" data-slider-gap-mobile="10px" id="splide02" role="region" aria-roledescription="carousel">Many thanks for your support and suggestions.
Best regards
I have a large tab element with tabs on the right side. I’d like to disable the behavior that scrolls you up to the top of the tabs on click. The hash appears and the browser window goes back up to the top. This would normally be fine but I’ve added some js that auto-cycles through the tabs and I don’t want the user pulled back up if they’ve scrolled past the element. Any help in disabling this?
Hey there,
We love the Icon Circle element for the site we’re making now, but nearly nobody hover over the icon circle and therefore doesn’t view the content of each circle.
Is there a way to set an timed autodisplay of the Icon circles content automatically, while scrolling the page?
Here’s a screenshot of the page I mean:

Ideally, this would be the behaviour:
1. logo shows in the center, then after 2-3 seconds
2. First dot on top animates and shows up content in the center, then 2 seconds later,
3. Second dot on the right animates and shows up content in the center, then 2 seconds later,
4. Third and last dot on the left animates and show up content in the center.Maybe also on loop, so it continues.
Is it possible?
Thank you for your help.
Antonio
Topic: Post slider image height
Is there a way to make a tab section content scrollable over a certain height?
I’ve tried giving a class to a specific tab and adding this css, but it doesn’t seems to work:
.scrollable-tab { position: relative; overflow: auto; max-height: 500px; }Any ideals?
Topic: Auto launch masonry gallery
Hello Enfold Team,
I have a masonry gallery on my homepage, but it doesn’t load until I start to scroll. I want to change this and have it load on page launch. Can you please help with this?
Thanks
-James
Hi,
i added a spacer (thin line). There is a strange autoscrolling arrow.
Could not find settings to disable it.
Please see screenshot.
kind regards JakHi there,
please have a look at the website in private content. The links on the calendar pagination (page number or next/previous button) are causing an auto scroll to top. So the user has to scroll down to get to the events again. Is there any chance to prevent that auto scroll.
I already had the people at the Events Calendar support have a look at the issue, but the issue seems unlikely to be coming from them.
Thanks in advance!
Best regards
Marco
