Achieving this look with sliders

[Refresh]

Hi,

Considering the challenges of built-in sliders and
the integration of the external sliders, how can I get this look?

Thanks

[Alaa]

Hi Refresh,

You can use “Revolution Slider” by activating it from (X > Validation) then in the slider settings, you should be able to control the “Arrows” and “Bullets” position by changing the vertical and horizontal offset as in this screenshot:

So, building a slide like this one:

Will result in something like that:

I hope this helps,
Thanks.

[Refresh]

Hi @Alaa,

Thanks for getting back to me.

My slider has text too. Does Revolution Slider facilitate the TypeKit
plugin?

This has been the major issue for me.

Unless I can bring this slider in a Global Block or Shortcode
or something. Trying to think about the integration while keeping
the text properties intact.

[jade]

Hi there,

Revolution Slider has its own standard of adding fonts and it’s only limited to google font as far I remember. You can’t add Typekit font to its list, but you can apply styling by adding to the text layers and adding some custom CSS like:

.the-layer {
    font-family: 'TheTypekitFont';
}

As for customizing the slider plugin you installed, we cannot provide support for it’s customization at it goes beyond the scope of our support.

[Refresh]

Can this be done using Global Blocks?

Here is a snippet from this thread:

Can the Classic Tabs element be styled?

Where @Rad said the flowing upon inserting the Shortcode:

So can this error be fixed and worth a try?

[Refresh]

I have inserted the code:

But I don’t see the font family:

[Alaa]

Hi Refresh ,

This CSS code won’t add the font to the list, actually, there is no option to add the font to the list currently, however here you are my recommendation:

• Install this plugin to load TypeKit fonts on your website.
• I assume you know the exact Font Family name you are trying to use in the slider at this point.
• Select any Text Layer in the slider and manually type the font name as in “Part Two” on this documentation:
  https://www.themepunch.com/faq/use-fonts-google-fonts/

I hope it helps,
Thanks.