First, we create the .phtml file, say footer_menu.phtml, and place it under add/design/Young/goggles/Magento_Theme/templates/. Add the following code:
<style>
* {
box-sizing: border-box;
}
.category-swimming-goggles{
background:#f4f4f4;
margin-top:auto;
padding-bottom:25px
}
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.column li {
padding: 0;
margin-bottom: 7px;
color: #000;
}
@media screen and (max-width: 900px) {
.row {
flex-direction: column;
}
}
@media screen and (max-width: 1920px) {
.footer.content .links {
width:100%;
}
.footer.content .block {
float: inherit;
}
.column {
flex: 33%;
}
}
</style>
<div>
<div class="row">
<div class="column">
<h3><a href="https://www.perfectgoggles.com/">Goggles</a></h3>
<ul>
<li><a href="https://www.perfectgoggles.com/">Prescription Goggles</a></li>
</ul>
</div>
<div class="column">
<h3><a href="https://www.perfectgoggles.com/prescription-ski-goggles">Ski Goggles</a></h3>
<ul>
<li><a href="https://www.perfectgoggles.com/prescription-ski-goggles/">Prescription Ski Goggles</a></li>
</ul>
</div>
<div class="column">
<h3><a href="https://www.perfectgoggles.com/prescription-swimming-goggles">Swimming Goggles</a></h3>
<ul>
<li><a href="https://www.perfectgoggles.com/prescription-swimming-goggles/">Prescription Swimming Goggles</a></li>
</ul>
</div>
</div>
</div>
Next, edit default.xml, which is under add/design/Young/goggles/Magento_Theme/layout/. Add the following code to a proper place.
<referenceContainer name="footer">
<container name="goggles.container" as="gogglesContainer" label="Goggles Container" htmlTag="div" htmlClass="some-container">
<block class="Magento\Framework\View\Element\Template" name="goggles_menu" template="Magento_Theme::footer_menu.phtml"></block>
</container>
</referenceContainer>
Run bin/magento c:f
Besides the basic html code we can add in a .phtml file, we also can add php code, say:
<?php echo '<a href="https://www.perfectgoggles.com/">Prescription Goggles</a>' ?>
We also can get the contents of a block, add the following code at your .phtml file:
<?php
echo $this->getLayout()
->createBlock(\Magento\Cms\Block\Block::class)
->setBlockId('footer_menu')
->toHtml();
?>
Here, footer_menu is the Identifier of the block, which you plan to load the contens from.