Instantly share code, notes, and snippets.
Last active
July 15, 2024 09:38
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save neverything/67264b10d56669fd0f6b7f9c382a112d to your computer and use it in GitHub Desktop.
GenerateBlocks Accordion Mega Menu in WordPress: https://silvanhagen.com/writing/wordpress-mega-menu-blocks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- wp:generateblocks/container {"uniqueId":"32f74817","isDynamic":true,"blockVersion":4,"variantRole":"accordion","display":"flex","accordionToggleType":"container"} --> | |
| <!-- wp:generateblocks/container {"uniqueId":"d61846ac","isDynamic":true,"blockVersion":4,"variantRole":"accordion-item","display":"flex","flexDirection":"column"} --> | |
| <!-- wp:generateblocks/container {"uniqueId":"180ef9ea","textColor":"#3e2723","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"variantRole":"accordion-toggle","flexDirection":"row","alignItems":"center","justifyContent":"space-between","columnGap":"0.5em","sizing":{"width":""},"typography":{"textAlign":"left"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"textColorHover":"#d8613c","textColorCurrent":"#d8613c"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"b1e610b6","element":"p","blockVersion":3,"typography":{"fontWeight":"500","fontSizeTablet":"18px","fontSizeMobile":"16px"}} --> | |
| <p class="gb-headline gb-headline-b1e610b6 gb-headline-text"><a href="http://wp-mega-menu.test/sample-page/" data-type="page" data-id="2">Our Services</a></p> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"8422a75c","isDynamic":true,"blockVersion":4,"variantRole":"accordion-content","spacing":{"paddingTop":"","paddingRight":"","paddingBottom":"","paddingLeft":"","marginBottom":""},"className":"navigation-overlay"} --> | |
| <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"backgroundColor":"base","layout":{"type":"default"}} --> | |
| <div class="wp-block-group has-base-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"base-2","layout":{"type":"default"}} --> | |
| <div class="wp-block-group has-base-2-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small","right":"var:preset|spacing|small"},"blockGap":"var:preset|spacing|small"}},"backgroundColor":"teal-light","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} --> | |
| <div class="wp-block-group has-teal-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} --> | |
| <div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|teal-dark"}}}},"textColor":"teal-dark","fontSize":"large","fontFamily":"heading"} --> | |
| <h3 class="wp-block-heading has-teal-dark-color has-text-color has-link-color has-heading-font-family has-large-font-size"><a href="http://wp-mega-menu.test/sample-page/" data-type="page" data-id="71496">Our Services</a></h3> | |
| <!-- /wp:heading --> | |
| <!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|teal-additional"}}}},"textColor":"teal-additional","fontFamily":"secondary"} --> | |
| <h4 class="wp-block-heading has-teal-additional-color has-text-color has-link-color has-secondary-font-family">Beautiful WordPress & WooCommerce Sites for Businesses</h4> | |
| <!-- /wp:heading --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:buttons --> | |
| <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-secondary-inverse-button is-style-outline","fontSize":"small"} --> | |
| <div class="wp-block-button has-custom-font-size is-style-secondary-inverse-button is-style-outline has-small-font-size"><a class="wp-block-button__link wp-element-button" href="http://wp-mega-menu.test/sample-page/">Learn more</a></div> | |
| <!-- /wp:button --></div> | |
| <!-- /wp:buttons --></div> | |
| <!-- /wp:group --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0"}}}} --> | |
| <div class="wp-block-columns" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"width":"66.66%","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}}} --> | |
| <div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10);flex-basis:66.66%"><!-- wp:columns --> | |
| <div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} --> | |
| <div class="wp-block-column"><!-- wp:generateblocks/container {"uniqueId":"886a6cca","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-start","position":"relative","sizing":{"width":"","widthMobile":"100%"},"textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"3902017a","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"linkColorHover":"#d8613c","hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-3902017a"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">WordPress Development</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|hazel-primary"},":hover":{"color":{"text":"var:preset|color|teal-additional"}}}}},"textColor":"hazel-primary","fontSize":"small"} --> | |
| <p class="has-hazel-primary-color has-text-color has-link-color has-small-font-size" style="margin-top:0;margin-bottom:0;margin-left:var(--wp--preset--spacing--20)">Custom built WordPress solutions based on your individual business needs.</p> | |
| <!-- /wp:paragraph --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"886a6cca","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-start","position":"relative","sizing":{"width":"","widthMobile":"100%"},"textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"3902017a","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"linkColorHover":"#00869E","hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-3902017a"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">WordPress Plugin Development</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|hazel-primary"},":hover":{"color":{"text":"var:preset|color|teal-additional"}}}}},"textColor":"hazel-primary","fontSize":"small"} --> | |
| <p class="has-hazel-primary-color has-text-color has-link-color has-small-font-size" style="margin-top:0;margin-bottom:0;margin-left:var(--wp--preset--spacing--20)">Plugins for you individual integrations and enhancements to WordPress.</p> | |
| <!-- /wp:paragraph --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"886a6cca","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-start","position":"relative","sizing":{"width":"","widthMobile":"100%"},"textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"3902017a","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"linkColorHover":"#00869E","hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-3902017a"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">WordPress Maintenance</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|hazel-primary"},":hover":{"color":{"text":"var:preset|color|teal-additional"}}}}},"textColor":"hazel-primary","fontSize":"small"} --> | |
| <p class="has-hazel-primary-color has-text-color has-link-color has-small-font-size" style="margin-top:0;margin-bottom:0;margin-left:var(--wp--preset--spacing--20)">Keeping your site up and running and protected at all times.</p> | |
| <!-- /wp:paragraph --> | |
| <!-- /wp:generateblocks/container --></div> | |
| <!-- /wp:column --> | |
| <!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|10","padding":{"top":"0","bottom":"0","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}}} --> | |
| <div class="wp-block-column" style="padding-top:0;padding-right:var(--wp--preset--spacing--10);padding-bottom:0;padding-left:var(--wp--preset--spacing--10)"><!-- wp:generateblocks/container {"uniqueId":"886a6cca","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-start","position":"relative","sizing":{"width":"","widthMobile":"100%"},"textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"3902017a","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"linkColorHover":"#00869E","hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-3902017a"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">WooCommerce Development</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|hazel-primary"},":hover":{"color":{"text":"var:preset|color|teal-additional"}}}}},"textColor":"hazel-primary","fontSize":"small"} --> | |
| <p class="has-hazel-primary-color has-text-color has-link-color has-small-font-size" style="margin-top:0;margin-bottom:0;margin-left:var(--wp--preset--spacing--20)">Sell your products online with an amazing experience for your customers.</p> | |
| <!-- /wp:paragraph --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"886a6cca","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","alignItems":"flex-start","justifyContent":"flex-start","position":"relative","sizing":{"width":"","widthMobile":"100%"},"textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"3902017a","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"linkColorHover":"#00869E","hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-3902017a"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">WooCommerce Plugin Development</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|hazel-primary"},":hover":{"color":{"text":"var:preset|color|teal-additional"}}}}},"textColor":"hazel-primary","fontSize":"small"} --> | |
| <p class="has-hazel-primary-color has-text-color has-link-color has-small-font-size" style="margin-top:0;margin-bottom:0;margin-left:var(--wp--preset--spacing--20)">Have a custom integration into your existing marketing stack? Let us build it for you.</p> | |
| <!-- /wp:paragraph --> | |
| <!-- /wp:generateblocks/container --></div> | |
| <!-- /wp:column --></div> | |
| <!-- /wp:columns --> | |
| <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right","orientation":"vertical"}} --> | |
| <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-secondary-button","fontSize":"small"} --> | |
| <div class="wp-block-button has-custom-font-size is-style-secondary-button has-small-font-size"><a class="wp-block-button__link wp-element-button" href="http://wp-mega-menu.test/sample-page/">All Services</a></div> | |
| <!-- /wp:button --></div> | |
| <!-- /wp:buttons --></div> | |
| <!-- /wp:column --> | |
| <!-- wp:column {"width":"33.33%","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"padding":{"top":"25px","bottom":"25px","left":"25px","right":"25px"},"blockGap":"var:preset|spacing|small"}},"backgroundColor":"accent-4","textColor":"base"} --> | |
| <div class="wp-block-column has-base-color has-accent-4-background-color has-text-color has-background has-link-color" style="padding-top:25px;padding-right:25px;padding-bottom:25px;padding-left:25px;flex-basis:33.33%"><!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} --> | |
| <div class="wp-block-group"><!-- wp:heading {"level":5,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} --> | |
| <h5 class="wp-block-heading has-base-color has-text-color has-link-color" style="margin-top:0;margin-bottom:0">Our WordPress Services</h5> | |
| <!-- /wp:heading --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:list {"style":{"spacing":{"margin":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}}},"className":"is-style-list-arrow is-style-checkmark-list","fontSize":"small"} --> | |
| <ul style="margin-top:var(--wp--preset--spacing--10);margin-bottom:var(--wp--preset--spacing--10)" class="is-style-list-arrow is-style-checkmark-list has-small-font-size"><!-- wp:list-item {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}},"fontSize":"small"} --> | |
| <li style="font-style:normal;font-weight:500" class="has-small-font-size">WordPress Theme Development</li> | |
| <!-- /wp:list-item --> | |
| <!-- wp:list-item {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} --> | |
| <li style="font-style:normal;font-weight:500">WordPress Plugin Development</li> | |
| <!-- /wp:list-item --> | |
| <!-- wp:list-item {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} --> | |
| <li style="font-style:normal;font-weight:500">WordPress Hosting</li> | |
| <!-- /wp:list-item --> | |
| <!-- wp:list-item {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} --> | |
| <li style="font-style:normal;font-weight:500">WordPress Support & Maintenance</li> | |
| <!-- /wp:list-item --></ul> | |
| <!-- /wp:list --> | |
| <!-- wp:heading {"level":5,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} --> | |
| <h5 class="wp-block-heading has-base-color has-text-color has-link-color" style="margin-top:0;margin-bottom:0">Our WooCommerce Services</h5> | |
| <!-- /wp:heading --> | |
| <!-- wp:list {"style":{"spacing":{"margin":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10"}}},"className":"is-style-list-arrow is-style-checkmark-list","fontSize":"small"} --> | |
| <ul style="margin-top:var(--wp--preset--spacing--10);margin-bottom:var(--wp--preset--spacing--10)" class="is-style-list-arrow is-style-checkmark-list has-small-font-size"><!-- wp:list-item {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}},"fontSize":"small"} --> | |
| <li style="font-style:normal;font-weight:500" class="has-small-font-size">WooCommerce Theme Development</li> | |
| <!-- /wp:list-item --> | |
| <!-- wp:list-item {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} --> | |
| <li style="font-style:normal;font-weight:500">WooCommerce Plugin Development</li> | |
| <!-- /wp:list-item --> | |
| <!-- wp:list-item {"style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} --> | |
| <li style="font-style:normal;font-weight:500">WooCommerce Support & Maintenance</li> | |
| <!-- /wp:list-item --></ul> | |
| <!-- /wp:list --></div> | |
| <!-- /wp:column --></div> | |
| <!-- /wp:columns --></div> | |
| <!-- /wp:group --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"3c65b46d","isDynamic":true,"blockVersion":4,"variantRole":"accordion-item","display":"flex","flexDirection":"column"} --> | |
| <!-- wp:generateblocks/container {"uniqueId":"1d1aae93","textColor":"#3e2723","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"variantRole":"accordion-toggle","flexDirection":"row","alignItems":"center","justifyContent":"space-between","columnGap":"0.5em","sizing":{"width":""},"typography":{"textAlign":"left"},"spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"textColorHover":"#d8613c","textColorCurrent":"#d8613c"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"6ce759c1","element":"p","blockVersion":3,"typography":{"fontWeight":"500","fontSizeTablet":"18px"}} --> | |
| <p class="gb-headline gb-headline-6ce759c1 gb-headline-text"><a href="http://wp-mega-menu.test/sample-page/" data-type="page" data-id="2">Articles</a></p> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"8422a75c","isDynamic":true,"blockVersion":4,"variantRole":"accordion-content","spacing":{"paddingTop":"","paddingRight":"","paddingBottom":"","paddingLeft":"","marginBottom":""},"className":"navigation-overlay"} --> | |
| <!-- wp:group {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"backgroundColor":"base","layout":{"type":"default"}} --> | |
| <div class="wp-block-group has-base-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}},"backgroundColor":"base-2","layout":{"type":"default"}} --> | |
| <div class="wp-block-group has-base-2-background-color has-background" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|small","bottom":"var:preset|spacing|small","left":"var:preset|spacing|small","right":"var:preset|spacing|small"},"blockGap":"var:preset|spacing|small"}},"backgroundColor":"teal-light","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} --> | |
| <div class="wp-block-group has-teal-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--small);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small);padding-left:var(--wp--preset--spacing--small)"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} --> | |
| <div class="wp-block-group"><!-- wp:heading {"level":3,"style":{"elements":{"link":{"color":{"text":"var:preset|color|teal-dark"}}}},"textColor":"teal-dark","fontSize":"large","fontFamily":"heading"} --> | |
| <h3 class="wp-block-heading has-teal-dark-color has-text-color has-link-color has-heading-font-family has-large-font-size"><a href="http://wp-mega-menu.test/sample-page/" data-type="page" data-id="2">Articles</a></h3> | |
| <!-- /wp:heading --> | |
| <!-- wp:heading {"level":4,"style":{"elements":{"link":{"color":{"text":"var:preset|color|teal-additional"}}}},"textColor":"teal-additional","fontFamily":"secondary"} --> | |
| <h4 class="wp-block-heading has-teal-additional-color has-text-color has-link-color has-secondary-font-family">We share our know-how with you & the community</h4> | |
| <!-- /wp:heading --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:buttons --> | |
| <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-secondary-inverse-button is-style-outline","fontSize":"small"} --> | |
| <div class="wp-block-button has-custom-font-size is-style-secondary-inverse-button is-style-outline has-small-font-size"><a class="wp-block-button__link wp-element-button" href="http://wp-mega-menu.test/sample-page/">Learn more</a></div> | |
| <!-- /wp:button --></div> | |
| <!-- /wp:buttons --></div> | |
| <!-- /wp:group --></div> | |
| <!-- /wp:group --> | |
| <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0"}}}} --> | |
| <div class="wp-block-columns" style="margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"width":"50%","style":{"spacing":{"padding":{"top":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10","right":"var:preset|spacing|10"}}}} --> | |
| <div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10);flex-basis:50%"><!-- wp:columns --> | |
| <div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}}} --> | |
| <div class="wp-block-column"><!-- wp:generateblocks/container {"uniqueId":"fdcb1bd8","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"position":"relative","textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"c0aa276f","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"linkColorHover":"#00869e","hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-c0aa276f"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">Become a WordPress Developer</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"70cabacd","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"position":"relative","textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"2eccb8b6","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-2eccb8b6"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">How we work</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"205b7375","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"position":"relative","textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"9e844f81","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-9e844f81"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">Project news</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"3e4ba31c","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"position":"relative","textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"1323aa6d","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-1323aa6d"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">Tutorials</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"3c018db5","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"position":"relative","textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"381f427c","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-381f427c"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">Business building</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"30440d1f","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"position":"relative","textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"cf10272a","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-cf10272a"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">Community events</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:generateblocks/container {"uniqueId":"30440d1f","linkColorHover":"#d8613c","isDynamic":true,"blockVersion":4,"position":"relative","textColorHover":"#d8613c","url":"http://wp-mega-menu.test/sample-page/"} --> | |
| <!-- wp:generateblocks/headline {"uniqueId":"cf10272a","element":"h5","blockVersion":3,"display":"flex","alignItems":"flex-start","columnGap":"0.5em","spacing":{"paddingTop":"","marginTop":"0px","marginLeft":"0px","marginRight":"0px","marginBottom":"0px"},"hasIcon":true,"iconStyles":{"height":"1em","width":"1em","paddingTop":".2em"}} --> | |
| <h5 class="gb-headline gb-headline-cf10272a"><span class="gb-icon"><svg viewBox="0 0 16 16" class="bi bi-arrow-right" fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" fill-rule="evenodd"></path> </svg></span><span class="gb-headline-text">Our team and their hobbies</span></h5> | |
| <!-- /wp:generateblocks/headline --> | |
| <!-- /wp:generateblocks/container --></div> | |
| <!-- /wp:column --></div> | |
| <!-- /wp:columns --></div> | |
| <!-- /wp:column --> | |
| <!-- wp:column {"width":"50%","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"blockGap":"var:preset|spacing|small"}},"backgroundColor":"accent-4","textColor":"base"} --> | |
| <div class="wp-block-column has-base-color has-accent-4-background-color has-text-color has-background has-link-color" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:50%"><!-- wp:image {"sizeSlug":"large","linkDestination":"none"} --> | |
| <figure class="wp-block-image size-large"><img src="http://wp-mega-menu.test/wp-content/themes/twentytwentyfour/assets/images/tourist-and-building.webp" alt="Kofi Annan"/></figure> | |
| <!-- /wp:image --></div> | |
| <!-- /wp:column --></div> | |
| <!-- /wp:columns --></div> | |
| <!-- /wp:group --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- /wp:generateblocks/container --> | |
| <!-- wp:buttons {"className":"button-support-us"} --> | |
| <div class="wp-block-buttons button-support-us"><!-- wp:button {"className":"is-style-primary-alt-button"} --> | |
| <div class="wp-block-button is-style-primary-alt-button"><a class="wp-block-button__link wp-element-button" href="http://wp-mega-menu.test/sample-page/">Contact Us</a></div> | |
| <!-- /wp:button --></div> | |
| <!-- /wp:buttons --> | |
| <!-- /wp:generateblocks/container --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment