SXA - overlay link

 Create an overlay link

ØOverlays let you work with on-screen prompts without leaving the page you are on.

ØYou can use overlays for focused interaction with your website visitor, using content boxes that draw attention, for example, to promote your newsletter, a product announcement, or one of your other websites. 

ØAny SXA rendering that can contain links can be set to display these links in an overlay view.

Set the overlay properties

To set the overlay properties:

In the Content Editor, navigate to Sitecore/Content/Tenant/Site/Home/Overlays and click Overlay Content.

Set up a link to open in an overlay

ØAdd the new RTE component in the experience editor

ØAdd some sample text and edit the text, the RTE will open

ØAdd the Sitecore link,  added one image here

Øedit the link manager

ØThe popup will open, but I couldn't find the overlay section here

ØIf you face the same issue, you would resolve the issue by following this post

https://www.harshbaid.in/2019/07/17/sitecore-sxa-open-in-overlay-checkbox-missing

ØAdded the overlay section, Then we can check the function in site

ØWhile clicking the name the media popup comes

Popup with external content

ØAdd the new Hyperlink manager for external site

ØI have added the external site urs as

https://doc.sitecore.com/users/sxa/17/sitecore-experience-accelerator/en/add--reusable--rich-text.html

ØSo after clicking the link, the popup comes with the site content

Rendering variants

 Rendering variants are configurable adaptations of the default renderings.

To encourage reusability, designers and front-end developers can also create new rendering variants. This gives authors more options in the way they present their content.

Demo

Create a new template name of Blog Post

Created the new three blogs under the Home page

Open one of the above post content items

Added the Page content is the required section

Then the section should be shown the below one -the content is coming for my item since I have field name as Content

I am going to add the Rendering variant for this Page Content Component

Go to the path

/sitecore/content/Demo SXA Sites/Cumulus/Presentation/Rendering Variants/Page Content

Already I have some Rendering variant , Going to create a new one for my blog page

Field

Updated the tag filed as H2 in Title definition item

Again Return to my Experience editor and chosen my rendering variant

After selecting it changed

 The title has been came with H2 tag

Field

I am going to add another field as Author and configure the tag as Span and added

the data attributes

Experience editor view

Text

 Now I am going to add the static text here, so now I create the new section as Text under the Blog post rendering variant.

Experience Editor View

The order is not good, so going to change the order

Current order

Changed order

Now the view in Experience editor

The author field is empty so i fill the author filed as Jenna Ridley in content item

Date

Going to add the date field in the rendering variant

New filed definition

The order is not good, so add the data attribute for adding style.

HTML Tag

Add one more section as Dividing Line

The Line has been added here.

Then I added the remaining blog fields in rendering variant

Section

Then I moved some of the filed under this new section