Viewing 30 results - 31 through 60 (of 1,186 total)
  • Author
    Search Results
  • #1477112
    gnilebein
    Participant

    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

    #1477023

    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,
    Ismael

    #1475983

    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.

    #1475942
    jmoriart
    Participant

    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?

    #1475876

    In 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]
    
    
    #1475233

    In 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]

    Thank 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

    abortolotti
    Participant

    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:

    Icon Circle

    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

    #1473329

    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.

    #1472855

    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,
    Rikard

    #1472326

    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,
    Ismael

    #1472322
    nyoung_web
    Participant

    I’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);
    }

    Hi,

    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,
    Ismael

    #1471354

    Hi,

    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,
    Ismael

    Hi,

    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,
    Ismael

    #1467805

    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.

    #1467794

    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.
    #1467793

    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.
    #1467088

    In reply to: Mega Menu

    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 ***/
      }
    } 

    Hi,
    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 ALB

    Best regards,
    Mike

    #1463806

    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,

    #1463790
    Kanza
    Participant

    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?

    #1463617

    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,

    #1462630
    nTECHgrate
    Participant

    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

    #1461660

    In 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,
    Ismael

    #1460645
    Jak73
    Participant

    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 Jak

    #1458528

    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.

    #1451858
    Marco
    Participant

    Hi 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

    #1451705

    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.

    #1447861

    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-681490

    Edit: 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 )

    see: https://webers-testseite.de/infinite-scroll/

Viewing 30 results - 31 through 60 (of 1,186 total)