WordPress/wp-content/themes/twentytwentyfour/patterns/left-aligned-cta-image.php
Tammie Lister 7b9c4a9dfe Bundled Themes: Import Twenty Twenty-Four, the new default theme for WordPress 6.4.
Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography.

Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4. 

Twenty-Four karat magic in the air!

Props onemaggie, luminuu, beafialho, chrisdesrochers, amedv, melchoyce, kafleg, jeffikus, poena, robpetrin, hiyascout, audrasjb, huzaifaalmesbah, fabiankaegy, jordesign, vcanales, shailu25, jessplease, juanfra, maneshtimilsina, sabernhardt, richtabor, travel_girl, kishanjasani, sofiashendi, nudge, gnanasekaran, marcelle42, bosskhj, oncecoupled, bijayyadav, barbmiller, devmuhib, lyndauwp, kraftbj, alaminfirdows, littlebigthing, dhamibirendra, jeffpaul, kopila47, rabmalin, aplauche, colorful-tones, khleomix, pbking, esratpopy, scruffian, alexandrebuffet, gpotter, pbwebd, anphira, suprsam, damonsharp, maurodf, soean, kawsaralameven, mhimon, rajinsharwar, labunchemjong, bonkerz, karmacharya50, aristath, mukesh27, mikachan, joedolson, aurooba, afercia, jffng, benimub, joen, tanvirul, jeryj, thelovekesh, mrwweb, nielslange, sergiomdgomes, binsaifullah, hanneslsm, masoudnkh, dhrumilk, dianeco, webmandesign, desrosj.
See #59447.

Built from https://develop.svn.wordpress.org/trunk@56716


git-svn-id: http://core.svn.wordpress.org/trunk@56228 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2023-09-26 15:50:23 +00:00

49 lines
3.2 KiB
PHP

<?php
/**
* Title: Left Aligned Call to Action with Image
* Slug: twentytwentyfour/left-aligned-cta-image
* Categories: call-to-action
* Viewport width: 1400
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:heading -->
<h2 class="wp-block-heading"><?php echo esc_html_x( 'Enhance your architectural journey with the Études Architect app.', 'sample heading for call to action', 'twentytwentyfour' ); ?></h2>
<!-- /wp:heading -->
<!-- wp:list {"style":{"typography":{"lineHeight":"1.75"}},"className":"is-style-checkmark-list"} -->
<ul class="is-style-checkmark-list" style="line-height:1.75"><!-- wp:list-item -->
<li><?php echo esc_html_x( 'Collaborate with fellow architects.', 'A general list item.', 'twentytwentyfour' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php echo esc_html_x( 'Showcase your projects.', 'A general list item.', 'twentytwentyfour' ); ?></li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li><?php echo esc_html_x( 'Experience the world of architecture.', 'A general list item.', 'twentytwentyfour' ); ?></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'Download app', 'sample content for call to action button', 'twentytwentyfour' ); ?></a></div>
<!-- /wp:button -->
<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html_x( 'How it works', 'sample content for call to action button', 'twentytwentyfour' ); ?></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"full","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone|duotone-1"}},"className":"is-style-rounded"} -->
<figure class="wp-block-image size-full is-style-rounded"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/left-aligned-cta.webp" alt="<?php esc_attr_e( 'An abstract Pattern Image', 'twentytwentyfour' ); ?>" style="aspect-ratio:4/3;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->