About section with background shadow text in shopify

Create a Dynamic About us section in Shopify. You can change font-family, font color, add shadow text, add description & add a link in its section.

you can change any name in the background text. & change its color. using more fonts in the assets directory in Shopify you can add more font family in the section. two or three types of different arrow icons available.

this section used on the web page for show heading with highlight content. create section add heading & paragraph for information & add link label for redirect in the full page content. in bg-text div class add background text, using position:absolute property set background text in behind main div. the add fancy font family Dancing Script for attractive behind the text. & using this transform: rotate(-11deg) property rotate background text.

use font family in layout which I use the direct link from Google font.all images & content are free resources used in layout design.

• all the design & layout created in 1920 x 1080 screen size.
• all the design & layout is responsive in desktop,tablet & mobile view.
• all the content, fonts & image are free resources.

You have to add font-awesome cdn in your "theme.liquid" file this

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Section.liquid File

<div class="our-stories"> {%for block in section.settings %} <div class="text-box"> <div class="bg-text" style="font-family:'{{section.settings.our_font_style}}';color:{{section.settings.font_color}};"> {{section.settings.our_text_shadow}} </div> <h2>{{section.settings.our_text_heading_h2}}</h2> <p>{{section.settings.our_text_story_para}}</p> <a class="{{section.settings.our_text_url}}">{{section.settings.our_text_link}} <i class="{{section.settings.our_arrow_style}}" aria-hidden="true"></i> </a> </div> {% break %} {%endfor%} {% schema %} { "name": "Our Stories", "class": "index-section index-section--flush", "settings":[ { "type": "select", "id": "our_font_style", "label": "Select Font Style", "default": "DancingScript-Regular", "options": [ {"value": "DancingScript-Regular", "label": "Dancing Script"}, {"value": "MarckScript-Regular", "label": "Marck Script"} ] }, { "type": "paragraph", "content": "Edit your social settings and accounts in General settings" }, { "type": "text", "id": "our_text_shadow", "label": "Story Heading", "default": "About us" }, { "type": "color", "id": "font_color", "label": "BG Color Change", "default": "#9e9e9e" }, { "type": "text", "id": "our_text_heading_h2", "label": "Section Heading", "default": "What we do ?" }, { "type": "text", "id": "our_text_story_para", "label": "Story Paragraph", "default": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna." }, { "type": "text", "id": "our_text_link", "label": "Paragraph Text", "default": "Know more" }, { "type": "text", "id": "our_text_url", "label": "Link Url", "default": "#" }, { "type": "select", "id": "our_arrow_style", "label": "Arrow Style", "default": "fa fa-arrow-right", "options": [ {"value": "fa fa-arrow-right", "label": "Arrow"}, {"value": "fa fa-angle-right", "label": "Angle"}, {"value": "fa fa-angle-double-right", "label": "Angle Double"}, {"value": "fa fa-chevron-right", "label": "Chevron"}, {"value": "fa fa-long-arrow-right", "label": "Long Arrow "}, {"value": "fa fa-hand-o-right", "label": "Hand "} ] } ], "presets": [ { "name": "Our Story", "category": "Custom layout" } ] } {% endschema %} </div>

CSS .our-stories { display: block; width: 100%; clear: both; } .our-stories { position: relative; padding: 80px 0; width: 50%; margin: 0 auto; display: table; } .our-stories .text-box { position: relative; top: 0; flex: 50%; } .our-stories .text-box .bg-text { transform: rotateZ(-11deg); font-size: 100px; font-family: serif; font-weight: bold; color: #3e3e3e3d; position: absolute; text-align: center; left: 0; right: 0; opacity: 0.5; top: -75px; width: 400px; margin: 0 auto; line-height: 119px; text-align: center; } .our-stories .text-box h2 { font-size: 30px; padding: 0; position: relative; text-align: center; } .our-stories .text-box p { padding: 20px; text-align: center; } .our-stories .text-box a { color: #3e3e3e; text-align: center; position: relative; font-size: 15px; display: table; cursor: pointer; margin: 0 auto; } .our-stories .text-box a i { padding-top: 1px; display: table-cell; vertical-align: middle; padding-left: 6px; }

Output