定义WP自定义帖子类型区域

hopefully my description will be clear!

I'm basically trying to create an area for portfolio work to be displayed. I've created a custom post type in Wordpress and i'd like to bring it through to the front-page.php. I have designated areas for where i'd like the work to be displayed (see image). The dark grey areas are where i'd like to place the portfolio items ONLY. Each grey area should show 1 portfolio item

I'm using this script to pull in the custom post type:

<?php
$args = array( 'post_type' => 'Portfolio', 'posts_per_page' => 4 );
    $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post();
echo '<div class="home-recent-thumb">'; the_post_thumbnail(); echo '</div>';
echo '<div class="home-recent-title">'; the_title(); echo '</div>';
echo '<div class="home-recent-copy">'; the_excerpt(); echo '</div>';
endwhile;
?>

How do I designate the areas in the php so that it shows 4 posts inside the correct element?

Since your layout isn't necessarily conducive to the traditional "loop" functionailty - meaning, you aren't placing the results next to each other - and you haven't mentioned any outside libraries (like masonry or isotope) - I would just do individual queries for each of the four squares.

For the first custom post type square - it would like:

$query = new WP_Query( 'post_type' => 'Portfolio', 'posts_per_page' => 1 );

And the second (to nth) would look like:

$query = new WP_Query( 'post_type' => 'Portfolio', 'posts_per_page' => 1, 'offset=1' );

Where your offset continues to increase. In my mind this continues to stay dynamic and is simple enough for four posts. Else your jumping into just a bunch of additional logic with the other squares.

<?php
$portfolioPosts = get_posts([
    'post_type' => 'Portfolio',
    'posts_per_page' => 4
]);
//first section
?>
<div class="home-recent-thumb"><?php the_post_thumbnail($portfolioPosts[0]->ID); ?></div>
<div class="home-recent-title"><?php echo $portfolioPosts[0]->post_title ?></div>
<div class="home-recent-copy"><?php echo $portfolioPosts[0]->post_excerpt; ?></div>
<?php
//later in code
//second section
?>
<div class="home-recent-thumb"><?php the_post_thumbnail($portfolioPosts[1]->ID); ?></div>
<div class="home-recent-title"><?php echo $portfolioPosts[1]->post_title ?></div>
<div class="home-recent-copy"><?php echo $portfolioPosts[1]->post_excerpt; ?></div>
//et cetera