you see the layout here: https://kriesi.at/support/topic/icon-boxes-8/#post-1296421

It is important that the content of your list is not part of the iconbox.
The Iconbox element only is for the icon and the heading.
The content you wanted to have in a scroll window must be separated – because we must have different overflow values.

The icons you can set what ever you like yourself in the iconbox element.
The shadow is part of the column setting – so it can be removed or adjusted by yourself.

It is important that you read the answers carefully – and not only to copy paste the css in the answers.

: no i can not do that for you – i’m participant as you are – maybe a mod is willing to implement this for you.

___________

or if you are familiar with enfold-shortcodes and you know how to get a new page by this – here is the column-section i used on the bottom:
and use the css from here: https://kriesi.at/support/topic/icon-boxes-8/#post-1296475

[av_section min_height='' min_height_pc='25' min_height_px='500px' padding='huge' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' 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='telmore1 flexboxed' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-knvcep5w' sc_version='1.0']
[av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow='aviaTBcolumn_boxshadow' column_boxshadow_color='#4c4c4c' column_boxshadow_width='10' background='bg_color' background_color='#deeef7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='column1' template_class='' aria_label='' av_uid='av-4hq6raq' sc_version='1.0']

[av_icon_box icon='ue837' font='entypo-fontello' title='vidste du, at …' position='top' icon_style='' boxed='av-no-box' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#083a96' custom_font='#ffffff' custom_border='#083a96' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='' linktarget='' linkelement='' id='' custom_class='' template_class='' av_uid='av-3yvn15e' sc_version='1.0' admin_preview_bg=''][/av_icon_box]

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-3athmaa' sc_version='1.0' admin_preview_bg='']
<span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span>

<span class="test pum-trigger" style="cursor: pointer;">Telmore gennemfører en prisændring på kunder</span>

<span class="test pum-trigger" style="cursor: pointer;">Vi ændrer oprettelsesgebyret på 5G-modems til 299 kr.</span>

<span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span>

<span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span>

<span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span>

<span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span>

<span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span>

<span class="test pum-trigger" style="cursor: pointer;">Online kampagne: Få Lenovo Tab M10 2. Gen 4G med Telmore Musik-abonnement</span>
[/av_textblock]

[/av_one_third][av_one_third min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow='aviaTBcolumn_boxshadow' column_boxshadow_color='#4c4c4c' column_boxshadow_width='10' background='bg_color' background_color='#deeef7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='column1' template_class='' aria_label='' av_uid='av-2vojkaa' sc_version='1.0']

[av_icon_box icon='ue837' font='entypo-fontello' title='Kort nyt' position='top' icon_style='' boxed='av-no-box' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#083a96' custom_font='#ffffff' custom_border='#083a96' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='' linktarget='' linkelement='' id='' custom_class='' template_class='' av_uid='av-2qjmbsi' sc_version='1.0' admin_preview_bg=''][/av_icon_box]

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-20i9gz6' sc_version='1.0' admin_preview_bg='']
<span class="test pum-trigger" style="cursor: pointer;">Månedens medarbejder</span>

<span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede, igen</span>

<span class="test pum-trigger" style="cursor: pointer;">Vi flytter til Roskilde</span>

<span class="test pum-trigger" style="cursor: pointer;">Ny medarbejder i Kollegahjælp</span>

<span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede</span>

<span class="test pum-trigger" style="cursor: pointer;">Månedens medarbejder</span>

<span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede, igen</span>

<span class="test pum-trigger" style="cursor: pointer;">Vi flytter til Roskilde</span>

<span class="test pum-trigger" style="cursor: pointer;">Ny medarbejder i Kollegahjælp</span>

<span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede</span>

<span class="test pum-trigger" style="cursor: pointer;">Månedens medarbejder</span>

<span class="test pum-trigger" style="cursor: pointer;">Toiletterne er nede, igen</span>

<span class="test pum-trigger" style="cursor: pointer;">Vi flytter til Roskilde</span>

<span class="test pum-trigger" style="cursor: pointer;">Ny medarbejder i Kollegahjælp</span>
[/av_textblock]

[/av_one_third][av_one_third min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow='aviaTBcolumn_boxshadow' column_boxshadow_color='#4c4c4c' column_boxshadow_width='10' background='bg_color' background_color='#deeef7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='column1' template_class='' aria_label='' av_uid='av-1nmcieq' sc_version='1.0']

[av_icon_box icon='ue837' font='entypo-fontello' title='Opdateringer på Telman' position='top' icon_style='' boxed='av-no-box' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#083a96' custom_font='#ffffff' custom_border='#083a96' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='' linktarget='' linkelement='' id='' custom_class='' template_class='' av_uid='av-11jp9aq' sc_version='1.0' admin_preview_bg=''][/av_icon_box]

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-ofkiky' sc_version='1.0' admin_preview_bg='']
<ul>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
 	<li style="text-align: left; font-size: 15px;">Nye dokumenter i pakkeoversigten</li>
</ul>
[/av_textblock]

[/av_one_third]
[/av_section]

maybe you show a little icon that your users can see that there is interaction with that text-block:

.telmore .av_textblock_section:before,
.telmore1 .av_textblock_section:before {
  content: "↕";
  position: absolute;
  left: 8px;
  top: 50%;
  font-size: 30px;
  color: #083a96;
}

i did it this way – an for simplicity reasons i only take html entities to form the arrows:
this to child-theme functions.php

function ava_tab_section_arrows(){
?>
<script>
(function($) {
    $('.av-tab-section-container').each(function() {
        $(this).find('.av-tab-section-outer-container').prepend("<div class='av-tabsection-navs av-tabsection-nav-prev'>&lang;</div><div class='av-tabsection-navs av-tabsection-nav-next'>&rang;</div>");
        var arrowColor = $(this).find('.av-tab-section-tab-title-container').css('background-color');
        $(this).find('.av-tabsection-navs').css('color', arrowColor);

        var that = this;
        $('.av-tabsection-nav-prev', this).on('click', function(){	
        	$(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().trigger('click');  
        });
        $('.av-tabsection-nav-next', this).on('click' , function(){	
            $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().trigger('click');
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_tab_section_arrows');

this to quick css:

.av-layout-tab .container {
  padding-left: 100px;
  padding-right: 100px;
}
.av-tabsection-navs {
  opacity: 0.1;
  position: absolute;
  top: 55%;
  cursor: pointer;
  z-index: 5;
  font-family: arial;
  font-size: 40px;
  font-weight: bold;
  color: #333;
  height: 40px;
  width: 40px;
  transition: all 1s ease
}
.av-tab-section-outer-container:hover .av-tabsection-navs {
  opacity: 1;
  transition: all 1s ease;
  text-shadow: 8px 1px 5px #aaa;
}
.av-tab-section-outer-container:hover .av-tabsection-navs {
  transition: all 1s ease;
  transform: scale(1.5);
}
.av-tabsection-navs.av-tabsection-nav-prev {
  left: 0;
  text-align: right;
}
.av-tabsection-navs.av-tabsection-nav-next {
  right: 0;
  float: left;
}
@media only screen and (max-width:767px)  {
  .responsive #top #wrap_all .av-layout-tab .container {
    padding: 0 30px;
  }
  .av-tabsection-navs {
    width: 25px;
  }
}

Result page: https://webers-testseite.de/tab-section/
If your tab-title background is white – overwrite the calculated color of the arrows by css with important.

• This reply was modified 4 years, 11 months ago by Guenni007.