try using that little snippet in your child theme functions.php:

function show_date_with_shortcode() { 
  date_default_timezone_set('Europe/Berlin');
  setlocale(LC_TIME, 'de_DE.UTF-8');
  $date = date_i18n( 'l \d\e\n ' . get_option( 'date_format' ) . ' ' . get_option( 'time_format' ). ' \U\h\r'  );
  return $date ;
}
add_shortcode( 'show_date', 'show_date_with_shortcode' );

use it as shortcode in your text : [show_date]

this is for my german language a binding word \d \e \n will end in Freitag den 17.04.1968
the rest will be corresponding to your lang settings – but if you like to have that binding word f.e. the then use \t\h\e
if you don’t like the time in this shortcode – just remove that part:
$date = date_i18n( 'l \d\e\n ' . get_option( 'date_format' ) );

___________

or style a kind of calendar sheet:

function datum_shortcode() {
  date_default_timezone_set("Europe/Berlin");
  setlocale(LC_TIME, 'de_DE.UTF8');
  $year = date_i18n('Y');
  $day = date_i18n('d');
  $month = date_i18n('F');
  $weekday = date_i18n('l');
  $weekdaycolor = date_i18n('l') == 'Sonntag' ? 'red': 'gray' ;
  $uhrzeit = date_i18n( get_option( 'time_format' ) );

  $datum = '<div id="calendar_sheet"><div class="month-year"><span class="month">'.$month.'</span><span class="year">' .$year.'</span></div><div class="day ' .$weekdaycolor.'">'.$day.'</div><div class="weekday">'.$weekday.'</div><div class="time">'.$uhrzeit.'</div></div>';
  return $datum;
}
add_shortcode('calendar_sheet', 'datum_shortcode');

here use it as shortcode in your text: [calendar_sheet]

some css for it:

#calendar_sheet{
text-align:center;
display: inline-block;
border:1px solid #eee;
border-top:15px solid #0076ba;
-webkit-box-shadow: 5px 5px 2px #ccc;
-moz-box-shadow: 5px 5px 2px #ccc;
box-shadow: 5px 5px 2px #ccc;
background:#fafafa;
padding: 5px;
min-width: 150px;
}

.month-year .month,
.month-year .year {
  padding: 0 5px
}

.day {
  font-size:48px;
  font-weight: bold;
  font-family: times;
  padding: 10px 0 0;
}

.day.red {
    color: red;
}

#calendar_sheet .time {
  font-size: 24px;
}

see both shortcodes in action on: https://enfold.webers-webdesign.de/3-columns/

again adjust to your language: so for red Sundays change that Sonntag to Sunday in weekday color ;)
and change to your local time in these lines:

date_default_timezone_set("Europe/Berlin");
  setlocale(LC_TIME, 'de_DE.UTF8');

• This reply was modified 2 years, 4 months ago by Yigit.

ok – allready posted to include a priority. Sorry did not read again.

you see the code above – that is only my test environment. – just change to your needs:

10 Washington Avenue in San Rafael front exterior<br><br><img class="aligncenter size-square" src="https://www.thomashenthorne.com/wp-content/uploads/2023/03/10-Washington-Ave-San-Rafael-78-of-78-HERO-cropped-180x180.jpg" alt="10 Washington Avenue in San Rafael front exterior" width="180" height="180" />

guess that will work – but i think that the size on the link will determine the image used ( in this case 180×180 )

As mentioned above why don’t you use: /%category%/%postname%/
one disadvantage – if you got 2 or more Categories for one Post the first category name will be inserted in that permalink.

the point is that even if the images are within your media gallery, they will not be used on the blog or single page. Images recalculated by Enfold are used there. Thats what i wrote above. Only if you are using the portfolio element or blog element on a page there is on the second tab of the element editor the option to choose the image used ( that is the custom setting ) – and on that custom setting you can have original image. But is it advisable to use original sizes of the images in a 3 or 4 grid display where the image widths can hardly exceed 300px? 20 or more featured images on a page with 900px ( and more ) – what would that do to performance?

And on blog and archive pages ( category pages) these options are not available.
In the blog it is by default : portfolio (‘width’ => 495, ‘height’ => 400)
In the single post, depending on whether with sidebar or without :
entry_without_sidebar ( ‘width’ => 1210, ‘height’ => 423 ) or entry_with_sidebar ( ‘width’ => 845, ‘height’ => 321 ) are used.

The second solution above not to take the nearby aspect ratio of magazine is to have your own image size registered – but then a recalculation of the thumbnails has to be done.

but what you are showing in your screenshot seems to be no accordion ! ;)
is it a tab container? – yes it is.

A Tab Element is exactly to save space and to make content more compact.

if your nick belongs to your page – i think i know what you like to go for.

Enfold uses different sources for the images on different elements. For example on a single post it uses the entry_with_sidebar size!
This is a ratio at : 2.6
the magazine ratio is nearby: 1.89 – so try this one if it is ok for you
On a blog in grid view – it uses the portfolio image size. – But you can change that by child-theme functions.php snippet:

try:

add_filter("avf_post_slider_args", function($atts, $context) {
	if( $context == "archive" ) {
		$atts['type']  = 'grid'; 
		$atts['columns']  = 3;
		$atts['preview_mode'] = 'custom';
		$atts['image_size'] = 'magazine';
	}
	return $atts;
}, 10, 2);

_______
now : if it has to be that 16:9 aspect-ratio:
you can either redefine the entry_with_sidebar size to that ratio or set your own image-size in that ratio.
Both solutions need a recalculation of your thumbnails.

just a little question – did you activate the advanced layout builder for your custom post type – via filter: avf_alb_supported_post_types ?
and is it a CPT or do we have here a custom template – based on archive ?

so what was the reason to use the grid-row element? – because that is exactly the point – it is a full-width element on default

if i like to use the grid-row element as a container for other elements and have not a full-width setting. i use a littel snippet for child-theme functions.php.
And i use it with a custom-class on grid-row ( here in my case: grid-notfull )

function grid_layout_notfull(){
$responsive_size = avia_get_option('responsive_size');
?>
<script>
(function($){
  $('.av-layout-grid-container.grid-notfull' ).each(function() {
    var notfullID = $(this).attr('id');
    $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : '';
    $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : '';
  });
  $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
  $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

______________

Now:. if you do not want to use grid-row element on portfolios as a fullwidth element – you can change the selector above to alway set on single portfolios:
#top.single-portfolio .av-layout-grid-container :

function grid_layout_notfull(){
$responsive_size = avia_get_option('responsive_size');
?>
<script>
(function($){
  $('#top.single-portfolio .av-layout-grid-container' ).each(function() {
    var notfullID = $(this).attr('id');
    $(this).hasClass('main_color') ? $(this).wrap('<div class="main_color notfullsize '+notfullID+'"></div>') : '';
    $(this).hasClass('alternate_color') ? $(this).wrap( '<div class="alternate_color notfullsize '+notfullID+'"></div>') : '';
  });
  $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
  $('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

the IDs transfer as class to the wrapping container is only to have better selectors for them on other settings.

One thing – there might be a little difference on the alignment. this derives from the padding that commonly the columns will have ( f.e. if you tend to have 30px padding on columns – you can correct this line in the snippet to:
$('.grid-notfull').css({"max-width": "<?php echo $responsive_size; ?>" , "margin": "0 auto" , "padding": "0 20px"});

see here a demo page: https://webers-testseite.de/grid-row-alb/

OK – Mike is right. The p-tag designation in your question misled me a bit.
Open both 1/2 columns and remove the background image there.
The one on the color-section is enough ;)

Why do you choose this way to do it?

Push your page/portfolio as column to the place to go – and insert to the column label your text including the image:
f.e.:
10 Washington Avenue in San Rafael front exterior<br><br><img class="alignnone size-full" src="https://www.thomashenthorne.com/wp-content/uploads/2023/03/10-Washington-Ave-San-Rafael-78-of-78-HERO-cropped-180x180.jpg" alt="10 Washington Avenue in San Rafael front exterior" width="180" height="180" />

you do not need to set it as sublevel menu item

it seems that these images inserted to column labels are not transfered to mobile menu!

womit hast du die zip Datei erstellt?

Entpacke mal das zip file und lade die drei Schriftarten hier hoch: Transfonter

die Demo brauchst du nicht! – Die wahl welche Schrifttypen du wählst, ist natürlich dir überlassen. Ich nehme meist nur ttf und woff2.
Alle modernen Browser kommen mit woff2 zurecht. Das ttf quasi nur als fallback bei alten browsern.

Im Grunde ist das zip welches du dort runterladen kannst nach dem convertieren schon upload fähig für den Enfold Font Manager.
Was aber bei den Dropdown Auswahlen in Enfold angezeigt wird ist der name des zip files – also:
vor dem Upload umbenennen mit dem Schriftnamen : z.B. open-sans.zip
( die @font-face rules die enfold generiert, haben mit diesem Namen nichts zu tun, die sind abhängig von den Schriftnamen in dem zip )

so verfahren solltest Du alle Schriftschnitte dann auch im Font-Manager angezeigt bekommen: