I created customer_account_login.xml to add block.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="sociallogin" before="-" template="Lucent_SocialLogin::form/sociallogin.phtml" />   

So, this sociallogin.phtml file load top of the login form.But I need to display that in particular div which have class or id.


2 Answers 2


When you have used before"-" it will call your phtml before everything in content.

First method, you can use something like before="customer_form_login" or after="customer_form_login" would call your phtml before/after login form.

Second method, is through getChildHtml.
Call you phtml in any one of the customer_account_login.xml block like this:

<block class="Magento\Customer\Block\Form\Login" name="customer_form_login" template="Magento_Customer::form/login.phtml">
    <block class="Magento\Framework\View\Element\Template" name="sociallogin" before="-" template="Lucent_SocialLogin::form/sociallogin.phtml" />

After that in form/login.phtml, you can call

<?php echo $block->getChildHtml('sociallogin');?>

anywhere in the file

Third and easy method, you can also directly call your phtml in any div in any phtml like this:

<div class="Your_Div">
    <?php echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Lucent_SocialLogin::form/sociallogin.phtml")->toHtml(); ?>
  • Okay, This is perfect. But here I created custom module so there is not form/login file. I just want to display in particular inner div class. Jul 11, 2019 at 4:52
  • The method would be same for all xml file. Jul 11, 2019 at 5:32
  • Good to hear that you issue is resolved. +1 for answer acceptance :) Jul 11, 2019 at 5:33

The attribute before="-" will make the block render on top of all elements inside <referenceContainer name="content"> .

To create the block in a new HTML div tag, add htmlTag="div" attribute and to add a new CSS class to it, add htmlClass="css-class-name" .

If you want to render this block in an existing element, find the element name in the customer_account_login.xml present in vendor (search for this filename), reference the desired container/block and nest the block inside that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.