Replicate demo content homepage magento 2

Question

I wanted to replicate the demo content layout of the homepage in a fresh install.

I copied the markup from content > blocks > homepage

But it looks different from the demo content, the text does not get superimposed on images etc.

                                     ****VS****

I read that it may be because sample content uses custom modules, is there a specific module or a specific fix for this so we can get the same layout?

I'm assuming it's one of the following extensions that does this (copied from the terminal while installing the sample data)

magento/module-catalog-sample-data
magento/module-bundle-sample-data
magento/module-theme-sample-data
magento/module-cms-sample-data
magento/module-customer-sample-data
magento/module-downloadable-sample-data
magento/module-grouped-product-sample-data
magento/module-msrp-sample-data
magento/module-offline-shipping-sample-data
magento/module-product-links-sample-data
magento/module-review-sample-data
magento/module-catalog-rule-sample-data
magento/module-sales-rule-sample-data
magento/module-configurable-sample-data
magento/module-sales-sample-data
magento/module-swatches-sample-data
magento/module-tax-sample-data
magento/module-widget-sample-data
magento/module-wishlist-sample-data
magento/sample-data-media

Answer 1

2 days and few broken themes later finally figured it out..

To make this easier I suggest having one install with sample data and a separate one without, so it will be easier to copy things from sample data install to your current site

1) Install a custom theme with luma being the parent, which means in your theme.xml you should have:

<parent>Magento/luma</parent>

Details: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-create.html

2) From sample data install copy the content of

vendor/magento/module-cms-sample-data/fixtures/styles.css

Which contains the CSS that makes the homepage look like in the sample data, then paste it into your custom theme's folder and register it inside the .xml file. See Ben Cook's reply here: https://magento.stackexchange.com/a/237680/83449

The custom .css file should end up in a folder like

app/design/frontend/[THEME VENDOR]/[THEME]/web/css/[CSS FILE].css

3) Copy the images from sample data site and put them in pub/media/wysiwyg/home/**and **/pub/media/ folders (when you're downloading the images you'll see where they should go). Example you should end up with /pub/media/wysiwyg/home/home-erin.jpg and other files from sample data

4) From sample data magento install copy the markup from content > blocks > homepage, now go to your fresh install and paste it into content > pages > homepage

Sample markup snippet:

<div class="blocks-promo"><a class="block-promo home-main" href="

You're done