Add customizable CTA arrow icons for all cards
- Add cta_card_X_cta_icon settings for each CTA card (1-4) - Default to "angle-double-right" icon for all cards - Allow admin to customize arrow icon per card (e.g., 'arrow-right', 'chevron-right', etc.) - Update component template to use settings instead of hardcoded icon - Each CTA card now has independent control over its arrow/action icon
This commit is contained in:
parent
f355950f9f
commit
e90fea48a0
2 changed files with 32 additions and 5 deletions
|
|
@ -86,7 +86,7 @@ export default class WelcomeBanner extends Component {
|
||||||
<span class="cta-title">{{settings.cta_card_1_title}}</span>
|
<span class="cta-title">{{settings.cta_card_1_title}}</span>
|
||||||
<span class="cta-desc">{{settings.cta_card_1_description}}</span>
|
<span class="cta-desc">{{settings.cta_card_1_description}}</span>
|
||||||
<span class="cta-cta">
|
<span class="cta-cta">
|
||||||
{{icon "angle-double-right"}}
|
{{icon settings.cta_card_1_cta_icon}}
|
||||||
{{settings.cta_card_1_cta_text}}
|
{{settings.cta_card_1_cta_text}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -108,7 +108,7 @@ export default class WelcomeBanner extends Component {
|
||||||
<span class="cta-title">{{settings.cta_card_2_title}}</span>
|
<span class="cta-title">{{settings.cta_card_2_title}}</span>
|
||||||
<span class="cta-desc">{{settings.cta_card_2_description}}</span>
|
<span class="cta-desc">{{settings.cta_card_2_description}}</span>
|
||||||
<span class="cta-cta">
|
<span class="cta-cta">
|
||||||
{{icon "angle-double-right"}}
|
{{icon settings.cta_card_2_cta_icon}}
|
||||||
{{settings.cta_card_2_cta_text}}
|
{{settings.cta_card_2_cta_text}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -130,8 +130,7 @@ export default class WelcomeBanner extends Component {
|
||||||
<span class="cta-title">{{settings.cta_card_3_title}}</span>
|
<span class="cta-title">{{settings.cta_card_3_title}}</span>
|
||||||
<span class="cta-desc">{{settings.cta_card_3_description}}</span>
|
<span class="cta-desc">{{settings.cta_card_3_description}}</span>
|
||||||
<span class="cta-cta">
|
<span class="cta-cta">
|
||||||
<p>»</p>
|
{{icon settings.cta_card_3_cta_icon}}
|
||||||
{{icon "angle-double-right"}}
|
|
||||||
{{settings.cta_card_3_cta_text}}
|
{{settings.cta_card_3_cta_text}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -153,7 +152,7 @@ export default class WelcomeBanner extends Component {
|
||||||
<span class="cta-title">{{settings.cta_card_4_title}}</span>
|
<span class="cta-title">{{settings.cta_card_4_title}}</span>
|
||||||
<span class="cta-desc">{{settings.cta_card_4_description}}</span>
|
<span class="cta-desc">{{settings.cta_card_4_description}}</span>
|
||||||
<span class="cta-cta">
|
<span class="cta-cta">
|
||||||
{{icon "angle-double-right"}}
|
{{icon settings.cta_card_4_cta_icon}}
|
||||||
{{settings.cta_card_4_cta_text}}
|
{{settings.cta_card_4_cta_text}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
28
settings.yml
28
settings.yml
|
|
@ -161,6 +161,13 @@ cta_card_1_cta_text:
|
||||||
en: CTA card 1 call-to-action text
|
en: CTA card 1 call-to-action text
|
||||||
hu: 1. CTA kártya cselekvésre ösztönző szöveg
|
hu: 1. CTA kártya cselekvésre ösztönző szöveg
|
||||||
|
|
||||||
|
cta_card_1_cta_icon:
|
||||||
|
default: "angle-double-right"
|
||||||
|
type: string
|
||||||
|
description:
|
||||||
|
en: "CTA card 1 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
hu: "1. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
|
||||||
cta_card_1_url:
|
cta_card_1_url:
|
||||||
default: "https://www.nyiltvilag.hu/c/tudasbazis/9"
|
default: "https://www.nyiltvilag.hu/c/tudasbazis/9"
|
||||||
type: string
|
type: string
|
||||||
|
|
@ -224,6 +231,13 @@ cta_card_2_cta_text:
|
||||||
en: CTA card 2 call-to-action text
|
en: CTA card 2 call-to-action text
|
||||||
hu: 2. CTA kártya cselekvésre ösztönző szöveg
|
hu: 2. CTA kártya cselekvésre ösztönző szöveg
|
||||||
|
|
||||||
|
cta_card_2_cta_icon:
|
||||||
|
default: "angle-double-right"
|
||||||
|
type: string
|
||||||
|
description:
|
||||||
|
en: "CTA card 2 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
hu: "2. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
|
||||||
cta_card_2_url:
|
cta_card_2_url:
|
||||||
default: "https://www.nyiltvilag.hu/c/altalanos/4"
|
default: "https://www.nyiltvilag.hu/c/altalanos/4"
|
||||||
type: string
|
type: string
|
||||||
|
|
@ -287,6 +301,13 @@ cta_card_3_cta_text:
|
||||||
en: CTA card 3 call-to-action text
|
en: CTA card 3 call-to-action text
|
||||||
hu: 3. CTA kártya cselekvésre ösztönző szöveg
|
hu: 3. CTA kártya cselekvésre ösztönző szöveg
|
||||||
|
|
||||||
|
cta_card_3_cta_icon:
|
||||||
|
default: "angle-double-right"
|
||||||
|
type: string
|
||||||
|
description:
|
||||||
|
en: "CTA card 3 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
hu: "3. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
|
||||||
cta_card_3_url:
|
cta_card_3_url:
|
||||||
default: "https://www.nyiltvilag.hu/c/fejlesztes/7"
|
default: "https://www.nyiltvilag.hu/c/fejlesztes/7"
|
||||||
type: string
|
type: string
|
||||||
|
|
@ -350,6 +371,13 @@ cta_card_4_cta_text:
|
||||||
en: CTA card 4 call-to-action text
|
en: CTA card 4 call-to-action text
|
||||||
hu: 4. CTA kártya cselekvésre ösztönző szöveg
|
hu: 4. CTA kártya cselekvésre ösztönző szöveg
|
||||||
|
|
||||||
|
cta_card_4_cta_icon:
|
||||||
|
default: "angle-double-right"
|
||||||
|
type: string
|
||||||
|
description:
|
||||||
|
en: "CTA card 4 arrow icon (Font Awesome). Examples: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
hu: "4. CTA kártya nyíl ikon (Font Awesome). Példák: 'angle-double-right', 'arrow-right', 'chevron-right', 'long-arrow-alt-right'"
|
||||||
|
|
||||||
cta_card_4_url:
|
cta_card_4_url:
|
||||||
default: "https://www.nyiltvilag.hu/c/biztonsag/8"
|
default: "https://www.nyiltvilag.hu/c/biztonsag/8"
|
||||||
type: string
|
type: string
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue