Hey Monika,

Thank you for the inquiry.

You can use this css code to adjust the style of the caption overlay.

.av-image-caption-overlay-center p {
    border-radius: 3px;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-main-color-button-font);
    background: var(--enfold-main-color-button-border);
    transition: all 0.4s ease-in-out;
    box-shadow: none;
    border: 0;
    padding: 25px 50px 23px;
    font-size: 28px;
    min-width: 200px;
}

Best regards,
Ismael

Hey craig374,

Please try the following in Quick CSS under Enfold->General Styling:

#text-7 span strong {
  font-size: 14px;
  text-transform: uppercase;
}

Best regards,
Rikard

Hi,
Ok, as I examine your page I see that the wrap_all & main divs are closed and your injected color section is outsite the page:

Then I recalled that injecting any full width element, like color sections, causes the page to auto close like this, so the way around this is to inject the HTML instead, so I tested this on my site linked below as a proof of concept and this is the code that I used:

add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	$post_id = get_the_ID();
    if(get_post_type( $post_id ) == "post" || is_archive() || is_category()) {
		echo '<div id="av_section_1" aria-label="header-blog" style="background-color:#e7e6e0;" class="avia-section av-gurxi-f7ad7ba9aa66e762665269785c869839 main_color avia-section-no-padding avia-no-border-styling  avia-builder-el-0  avia-builder-el-no-sibling  block-fit-size avia-bg-style-scroll container_wrap fullsize"><div class="container av-section-cont-open"><main role="main" itemprop="mainContentOfPage" class="template-page content  av-content-full alpha units"><div class="post-entry post-entry-type-page post-entry-3814"><div class="entry-content-wrapper clearfix"><div class="flex_column_table av-lwc8c3ub-7fae82ac0e7450fe73ac250f770e4e79 sc-av_one_half av-equal-height-column-flextable"><div style="padding: 20px 0 20px 0;" class="flex_column av-lwc8c3ub-7fae82ac0e7450fe73ac250f770e4e79 av_one_half  avia-builder-el-1  el_before_av_one_half  avia-builder-el-first  first no_margin flex_column_table_cell av-equal-height-column av-align-bottom  "><div class="av-special-heading av-tkaly-59af4c81dd5bd8035cb05863635061b6 av-special-heading-h1 custom-color-heading blockquote modern-quote  avia-builder-el-2  el_before_av_textblock  avia-builder-el-first "><div style="font-size: 18px;color: #a07860;" class="av_custom_color av-subheading av-subheading_above"><p>Veranstaltungen und Lesungen</p></div><h1 style="color:#1f4339;font-size:45px;font-family: "librebaskerville", Helvetica, Arial, sans-serif;text-transform: none;" class="av-special-heading-tag" itemprop="headline">Veranstaltungen</h1><div class="special-heading-border"><div class="special-heading-inner-border"></div></div></div><section class="av_textblock_section av-3a7ov5-3365d9d47359d52499c6170f6e5d6913 " itemscope="itemscope" ><div class="avia_textblock" itemprop="text"><p style="color: #666666;font-size: 17px;">Wir laden Sie ein, an unseren gemeinsamen Veranstaltungen, Reisen und Lesungen an besonderen Orten, teilzunehmen. Weiteres erfahren Sie in der jeweiligen Veranstaltungsbeschreibung.</p></div></section></div><div class="flex_column av-fy05a-677df80f19dcd41d19a6c602b9b923d5 av_one_half  avia-builder-el-4  el_after_av_one_half  avia-builder-el-last  buch-monat no_margin flex_column_table_cell av-equal-height-column av-align-bottom  "><div class="avia-image-container av-9gv81-4c6171ac5adc202d5cf1671f776d7959 av-styling- avia-align-right  avia-builder-el-5  avia-builder-el-no-sibling " itemprop="image" itemscope="itemscope" ><div class="avia-image-container-inner"><div class="avia-image-overlay-wrap"><img decoding="async" fetchpriority="high" class="wp-image- avia-img-lazy-loading-not- avia_image " src="/wp-content/uploads/2024/05/area-book-ueber-uns.png" alt="" title="" itemprop="thumbnailUrl"></div></div></div></div></div></div></div></main></div></div>';
	}
}

Note that I didn’t understand why you had $thumbnail = get_the_post_thumbnail_url ( $post_id ); since I saw no call for $thumbnail so it’s not in my code, feel free to adjust after to test my code. I also had to add so style inline so my test would look like your page, it should not cause a issue for you.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Enable the Avia Layout Builder Debugger and add the code to the debugger and save:

[av_section min_height='' min_height_px='500px' padding='huge' shadow='no-shadow' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' id='' color='main_color' custom_bg='' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2017/02/business-office-work-blurred.jpg' attachment='885' attachment_size='full' attach='scroll' position='top center' repeat='stretch' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.6' overlay_color='#000000' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0' av_uid='av-35gtt']
[av_heading heading='Masonry Portfolio Example:<br/>4 Column Masonry Grid' tag='h1' style='blockquote modern-quote modern-centered' size='40' subheading_active='' subheading_size='15' padding='0' color='custom-color-heading' custom_font='#ffffff' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-qj14h'][/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-mx0kh']

[av_textblock size='' font_color='custom' color='#dddddd' admin_preview_bg='rgb(34, 34, 34)' av_uid='av-5ee9']
<p style="text-align: center;">Hey there! We are Enfold and we make really beautiful and amazing stuff.
This can be used to describe what you do, how you do it, & who you do it for.</p>
[/av_textblock]
[/av_section]

[av_masonry_entries link='portfolio_entries' term_rel='' wc_prod_visible='' wc_prod_hidden='hide' wc_prod_featured='' prod_order_by='' prod_order='' date_filter='' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' sort='yes-tax' query_orderby='date' query_order='DESC' caption_elements='title' caption_styling='overlay' caption_display='on-hover' img_copyright='' size='fixed manually' orientation='' image_size='masonry' gap='large' columns='4' av-desktop-columns='' av-medium-columns='' av-small-columns='' av-mini-columns='' items='9' paginate='load_more' color='' custom_bg='' img_copyright_font='' av-desktop-font-img_copyright_font='' av-medium-font-img_copyright_font='' av-small-font-img_copyright_font='' av-mini-font-img_copyright_font='' img_copyright_color='' img_copyright_bg='' animation='active' animation_duration='' animation_custom_bg_color='' animation_custom_bg_color_multi_list='' animation_z_index_curtain='100' overlay_fx='active' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' av_uid='av-83rt5' sc_version='1.0']

once the elements show after the page reloads open the masonry element and select the Portfolio Entries that you want to show.

Best regards,
Mike

Hi,
Thank you for your patience, in your shortcode it looks like you manually added class=’open-popup-link’, but the correct way to add a class in the shortcode is custom_class=’open-popup-link’ but this adds the class to the button and not the link in the button.
So we will follow these steps.
So this is what you add to your code block:

[av_button label='Jealousy-Letter abonnieren' icon_select='yes-right-icon' icon='ue875' font='entypo-fontello' icon_hover='aviaTBaviaTBicon_hover' link='manually,#test-popup' custom_class='pu-link' link_target='' size='x-large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color-highlight' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='solid' border_width='2' border_width_sync='true' border_color='#000000' border_radius='10' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' 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='' id='' template_class='' element_template='' one_element_template='' av_uid='av-1x42t1' sc_version='1.0' admin_preview_bg='']
<div id="test-popup" class="white-popup mfp-hide">[av_mailchimp list='eifersuchtscoach' double_opt_in='true' on_send='' sent='Thank you for subscribing to our newsletter!' link='' color='' hide_labels='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' alb_description='' id='' custom_class='' template_class='' av_uid='av-8l32o' sc_version='1.0'][/av_mailchimp]</div>

and this is your new popup code:

function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
       jQuery('.pu-link a').addClass('open-popup-link');
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
	});
});
</script>
<?php }

add_action('wp_head', 'popup_inline');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This should now work for you.

Best regards,
Mike

Hey joandjaxx,

Thank you for the inquiry.

You can add this css code to adjust the thickness of the arrow icon:

#top .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a:before {
    padding-top: 0;
    font-weight: 600;
    font-size: 18px;
}

Best regards,
Ismael

Hey Lewcfir66,

Thank you for the inquiry.

You can set the heading and body font in the Enfold > General Styling > Fonts tab. You can also adjust the style of a specific element in the Enfold > Advanced Styling panel. To further adjust the font size of the headings on different screen sizes, go to the Enfold > General Styling > Typography tab.

Best regards,
Ismael

Hi,

Thank you for the update.

And the size of the font plaese?

To adjust the font size, please adjust the css code a bit:

.avia-table tr.avia-heading-row {
    color: white; 
    font-size: 18px;
}

Best regards,
Ismael

Hey craig374,

Thank you for the inquiry.

Have you tried adjusting the Enfold > Main Menu > Menu Items For Mobile settings to the second option (Activate for Smartphones and Tablets)?

If you want to adjust the font size and space between the menu items on tablet view, add this css code:

@media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  #top #header .av-main-nav>li>a {
    font-size: 12px;
    padding: 0 4px;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can include this css code to adjust the style of the read more link:

.html_elegant-blog .avia-content-slider .read-more-link {
    font-size: 12px;
    padding: 4px;
}

.html_elegant-blog .more-link {
    margin: 30px auto 20px auto;
    clear: both;
    width: 180px;
    border-style: solid;
    border-width: 1px;
    padding: 5px 0;
    border-radius: 2px;
}

Best regards,
Ismael

Hey northorie,

Please try the following in Quick CSS under Enfold->General Styling:

.html_elegant-blog .avia-content-slider .slide-meta {
  display: none; 
}

.html_elegant-blog .avia-content-slider .read-more-link {
  font-size: 16px;
}

.html_elegant-blog .avia-content-slider .slide-entry-title {
  font-size: 18px !important;
}

Best regards,
Rikard

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field, it will make the icon larger and center vertically:

.iconbox_left .iconbox_content {  
	display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  grid-auto-columns: auto 1fr;
  gap: 0px 0px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}
.iconbox_left .iconbox_content .entry-content-header .iconbox_icon {
    height: 60px;
    width: 60px;
    font-size: 40px;
    top: 0;
    left: 0;
    align-content: center;
}
.iconbox_left .iconbox_content .entry-content-header {
  justify-self: center;
}
.iconbox_left .iconbox_content .iconbox_content_container p {
	margin-top: 0;
}

Best regards,
Mike

Hey Tanja,

Thank you for the inquiry.

You can use this css code to adjust the style of the submit button in the footer widget:

#footer .field-wrap>div input[type=checkbox], #footer .field-wrap button, #footer .field-wrap input[type=button], #footer .field-wrap input[type=submit] {
    width: auto;
    border-radius: 3px;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: 400;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-alternate-color-button-font);
    border-color: var(--enfold-alternate-color-button-border);
    background-color: var(--enfold-alternate-color-primary);
    min-width: 180px;
}

Best regards,
Ismael

Hey Tanja,

Thank you for the inquiry.

1.) You can adjust the style of the Widget Links element in the Enfold > Advanced Styling panel, or use the following css code to manually increase the font size.

#footer .widget_nav_menu a {
    font-size: 2em;
}

2.) Which widget title are you trying to adjust? If you need to adjust the title of the menu widget, use this css code:

#footer #nav_menu-2 h3.widgettitle {
    color: red;
}

Best regards,
Ismael

Hey Tanja,

Thank you for the inquiry.

1.) Try to set the Styling > General Styling > IconBox Styling to the last option (Display icon above title).

2.) To increase the font size, go to the Styling > Font Sizes panel, then adjust the element settings accordingly.

3.) You can upload monocolored fonts from fontello or flaticon using the Iconfont Manager. Please check the documentation below for more info: https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons-

Best regards,
Ismael

Hey xfacta,

Thank you for the inquiry.

Please add this css code to adjust the font size of the category heading:

#top.archive.category #wrap_all .all_colors .post-entry h2.post-title.entry-title {
    font-size: 48px;
}

You can also just the style of the h2 element in the Enfold > Advanced Styling panel.

Best regards,
Ismael