Elementor Pro Call To Action Widget | abrindo um popup

Escrito por

Neste vídeo eu ensino a criar um Elementor Pro Call To Action

Abaixo você pode copiar o código CSS usado no Tutorial “Elementor Pro Call To Action Widget | abrindo um popup

/*****************************************************
SEÇÃO FORMULÁRIO DE BUSCA, LISTA DE ÍCONES E CALL T O ACTION (INFOBOX) *************************************************************/

/* SEARCH FORM */
.elementor-search-form i{
    width: 200px;
    height: 30px;
    background: url("https://bras.rodrigomilano.com.br/wp-content/uploads/2021/07/grey-search.svg") center left no-repeat;
}
/****************************************************************************/

/* LISTAS DESTAQUES */
/* regras que adicionam o sublinhado verde aos links da lista */

.items span{
    position: relative;/* faz ocupar somente o espaço do tamanho da palavra */
}
.items span:before{
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #008542;
    bottom: -3px;
    left: 0;
    transition: all ease-in-out 100ms;
}

.items span:hover:before{
    height: 4px;
    bottom: -5px;
}
/******** CTA (INFOBOX)*/

/* REGRA QUE FAZ O BOTÃO FICAR COM O ÍCONE DE PLAY E POSICIONADO NO LUGAR CORRETO */

.infobox .elementor-cta__button-wrapper{
    /*border: 1px solid red;*/
    position: absolute;
    transform: translateY(-98px);
    width: 52px;
    background: url("https://bras.rodrigomilano.com.br/wp-content/uploads/2021/07/arrow.svg") left center no-repeat;
    background-size: contain;
}
@media screen and (max-width: 1024px){
    .infobox .elementor-cta__button-wrapper{
    transform: translateY(-59px);
    width: 30px;
}
}
@media screen and (max-width: 768px){
    .infobox .elementor-cta__button-wrapper{
    transform: translateY(-93px);
    width: 30px;
}
}

@media screen and (max-width:345px){
    .infobox .elementor-cta__button-wrapper{
    transform: translateY(-104px);
    width: 40px;
}
}
.infobox .elementor-cta__button-wrapper a{
    padding: 25px 0px;
    display: block;
}
/* REGRA QUE ADICIONA O ESPAÇO À ESQUERDA DO TÍTULO E SUBTÍTULO */
.infobox .elementor-cta__title{
    margin-left: 86px
}
.infobox .elementor-cta__description{
    text-indent: 86px;
}
@media screen and (max-width: 1024px){
    .infobox .elementor-cta__title{
    margin-left: 40px
}
.infobox .elementor-cta__description{
    text-indent: 40px;
}
}
@media screen and (max-width:345px){
    .infobox .elementor-cta__title{
    margin-left: 50px
}
.infobox .elementor-cta__description{
    text-indent: 50px;
}
}

Compartilhe este artigo

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email
Compartilhar no pinterest
Compartilhar no whatsapp
Compartilhar no telegram
Compartilhar no email

Curso Elementor Grátis

Aprenda o construtor de sites mais usado atuamente

Explore mais artigos

Woocommerce label complemento não aparece
Desenvolvimento Web

Woocommerce label complemento não aparece

Eu estava com um problema: o label de complemento não estava aparecendo. Para resolver acrescentei o seguinte CSS no tema:

Ferramentas para Webmaster
Desenvolvimento Web

Ferramentas para Webmaster

Conheça as Ferramentas para Webmaster que vão te ajudar a trabalhar melhor e mais rápido. Ferramenta do Google para analisar configuração MX https://toolbox.googleapps.com/apps/checkmx/ Ferramenta para

Livros que indico


Quer dar um gás no seu site?

Vamos bater um papo que eu te ajudo

Curso Elementor Grátis

Aprenda todos os Widgets do Elementor nesse Curso Elementor exclusivo para você