12. Shortcodes personalizados
Veja abaixo a lista dos shortcodes disponíveis:
Sessão
Descrição: Abre uma nova área no site (esse shortcode precisa ser fechado [/]).
Uso: [ sessao ] adicione o conteúdo aqui [ /sessao ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /sessao ])
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css;
- bg-cor – permite adicionar uma cor de fundo personalizada na sessão;
- bg-cor-dark – permite adicionar uma cor de fundo personalizada na sessão quando o site estiver em modo escuro;
- bg-img – permite adicionar uma imagem de fundo personalizada na sessão;
- id – permite adicionar um identificador único na sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ sessao bg-cor=”#efefef” classes=”texto-branco”] adicione o conteúdo aqui [ /sessao ].
Colunas
Descrição: Determina quantas colunas da sessão essa área irá usar (esse shortcode precisa ser fechado [/]).
Uso: [ col2 ] adicione o conteúdo aqui [ /col2 ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /col2 ])
Observações
Uma sessão é sempre dividida em 12 colunas, e a estrutura dentro dela deve ser dividido entre elas, para isso, você poder usar os shortcodes de colunas para preenche-las, veja:
No exemplo a cima, podemos ver que o shortcode [ col1 ] preenche 1 das 12 colunas da sessão, e todos os outros shortcodes seguem a mesma lógica.
Por exemplo, queremos uma sessão que seja dividida em 3 colunas iguais e sabemos que a sessão é dividida em 12 colunas, então pra dividir em 3 colunas iguais vamos precisar de 3 shortcodes [ col4 ], veja:
[ sessao ]
[ col4 ] conteúdo aqui [ /col4 ]
[ col4 ] conteúdo aqui [ /col4 ]
[ col4 ] conteúdo aqui [ /col4 ]
[ /sessao ]
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css;
- celular – permite informar quantas colunas essa área vai ocupar no celular (aceita valores entre 1 e 12);
- tablet – permite informar quantas colunas essa área vai ocupar no tablet (aceita valores entre 1 e 12).
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ col3 tablet=”6″ classes=”texto-branco”] adicione o conteúdo aqui [ /col3 ].
Abas de destaque
Para criar abas, são necessários 2 shortcodes, um para criar o botão da aba e outro para definir o conteúdo da aba.
Botão da aba
Descrição: Cria um botão que exibe uma aba de conteúdo (esse shortcode precisa ser fechado [/]).
Uso: [ aba-botao ] adicione o conteúdo aqui [ /aba-botao ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /aba-botao ])
Parâmetros:
- id – adiciona um identificador único para a aba (esse valor deve ser único);
- primeiro – obrigatório para a primeira aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- ultimo – obrigatório para a última aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- classe – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ aba-botao id=”1″ primeiro=”sim” ] digite o texto da aba aqui, você tbm pode adicionar ícones se necessário [ /aba-botao ].
Conteúdo da aba
Descrição: Cria uma área de conteúdo (esse shortcode precisa ser fechado [/]).
Uso: [ aba-conteudo ] adicione o conteúdo aqui [ /aba-conteudo ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /aba-conteudo ])
Parâmetros:
- id-botao – adiciona um identificador único para a área de conteúdo (esse valor deve ser o mesmo valor passado para o parâmetro “id” da aba que faz conjunto com essa área);
- primeiro – obrigatório para a primeira aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- ultimo – obrigatório para a última aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- titulo – adicione um título para a área.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ aba-conteudo id-botao=”1″ primeiro=”sim” titulo=”Estratégia” ] adicione o conteúdo aqui [ /aba-conteudo ].
Exemplo de uso completo
[ aba-botao id=”1″ primeiro=”sim” ] texto aba 1 [ /aba-botao ]
[ aba-botao id=”2″ ] texto aba 2 [ /aba-botao ]
[ aba-botao id=”3″ ultimo=”sim” ] texto aba 3 [ /aba-botao ]
[ aba-conteudo id-botao=”1″ primeiro=”sim” titulo=”título aqui” ] conteúdo aqui [ /aba-conteudo ]
[ aba-conteudo id-botao=”2″ titulo=”título aqui” ] conteúdo aqui [ /aba-conteudo ]
[ aba-conteudo id-botao=”3″ ultimo=”sim” titulo=”título aqui” ] conteúdo aqui [ /aba-conteudo ]
Abas (comum)
Para criar abas, são necessários 2 shortcodes, um para criar o botão da aba e outro para definir o conteúdo da aba.
Botão da aba
Descrição: Cria um botão que exibe uma aba de conteúdo (esse shortcode precisa ser fechado [/]).
Uso: [ aba ] adicione o conteúdo aqui [ /aba ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /aba ])
Parâmetros:
- id – adiciona um identificador único para a aba (esse valor deve ser único);
- primeiro – obrigatório para a primeira aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- ultimo – obrigatório para a última aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- classe – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ aba id=”1″ primeiro=”sim” ] digite o texto da aba aqui, você tbm pode adicionar ícones se necessário [ /aba ].
Conteúdo da aba
Descrição: Cria uma área de conteúdo (esse shortcode precisa ser fechado [/]).
Uso: [ conteudo-aba ] adicione o conteúdo aqui [ /conteudo-aba ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /conteudo-aba ])
Parâmetros:
- id-botao – adiciona um identificador único para a área de conteúdo (esse valor deve ser o mesmo valor passado para o parâmetro “id” da aba que faz conjunto com essa área);
- primeiro – obrigatório para a primeira aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- ultimo – obrigatório para a última aba criada. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- titulo – adicione um título para a área.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ conteudo-aba id-botao=”1″ primeiro=”sim” titulo=”Estratégia” ] adicione o conteúdo aqui [ /conteudo-aba ].
Exemplo de uso completo
[ aba id=”1″ primeiro=”sim” ] texto aba 1 [ /aba ]
[ aba id=”2″ ] texto aba 2 [ /aba ]
[ aba id=”3″ ultimo=”sim” ] texto aba 3 [ /aba ]
[ conteudo-aba id-botao=”1″ primeiro=”sim” titulo=”título aqui” ] conteúdo aqui [ /conteudo-aba ]
[ conteudo-aba id-botao=”2″ titulo=”título aqui” ] conteúdo aqui [ /conteudo-aba ]
[ conteudo-aba id-botao=”3″ ultimo=”sim” titulo=”título aqui” ] conteúdo aqui [ /conteudo-aba ]
Área de clientes
Descrição: Cria a lista de logo dos clientes.
Uso: [ area-clientes ] OBS.: Esse shortcode não precisa ser fechado.
Parâmetros:
- rel – indica se a lista deve ser relacionada (valores aceitos: sim ou nao).
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ area-clientes rel=”sim” ].
Área de parceiros
Descrição: Cria a lista de logo dos parceiros.
Uso: [ area-parceiros ] OBS.: Esse shortcode não precisa ser fechado.
Parâmetros:
- rel – indica se a lista deve ser relacionada (valores aceitos: sim ou nao);
- modelo – indica qual o modelo de lista (1 = apenas logo, 2 = logo e texto descritivo)
- carrossel – indica de deve ser carrossel (valores aceitos: sim ou nao)
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ area-parceiros rel=”sim” modelo=”2″ ].
Área de tecnologias
Descrição: Cria a lista de logo das tecnologias.
Uso: [ area-tecnologias ] OBS.: Esse shortcode não precisa ser fechado.
Parâmetros:
- rel – indica se a lista deve ser relacionada (valores aceitos: sim ou nao).
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ tecnologias rel=”nao”].
Cases
Descrição: Lista os últimos 3 cases publicados.
Uso: [ cases ] OBS.: Esse shortcode não precisa ser fechado.
Fundo branco
Descrição: Adiciona uma área branca que vai envolver o conteúdo (esse shortcode precisa ser fechado [/]).
Uso: [ fundo-branco ] adicione o conteúdo aqui [ /fundo-branco ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /fundo-branco ])
Form
Descrição: Adiciona o formulário “Página inicial” do RD.
Uso: [ form ]
Blog
Descrição: Adiciona a área do blog no site.
Uso: [ blog ]
Blog Personalizado
Descrição: Adiciona a área do blog no site com artigos selecionados.
Uso: [ blog-personalizado ids=”9578,5986,324,23598″ ]
Parâmetros:
- ids – lista de ids dos artigos que serão listados (parâmetro obrigatório);
- titulo – Título personalizado para a área.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ blog-personalizado ids=”9578,5986,324,23598″ titulo=”Veja também”]
Título
Descrição: Adiciona um título principal personalizado (esse shortcode precisa ser fechado [/]).
Uso: [ titulo ] adicione o conteúdo aqui [ /titulo ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /titulo ])
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css;
- bg-cor – permite adicionar uma cor de fundo personalizada na sessão;
- bg-cor-dark – permite adicionar uma cor de fundo personalizada na sessão quando o site estiver em modo escuro.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ titulo bg-cor=”#efefef” classes=”texto-branco”] adicione o conteúdo aqui [ /titulo ].
Acordeon
Descrição: Insere uma área de carrossel no site (esse shortcode precisa ser fechado [/]).
Uso: [ acordeon ] adicione o conteúdo aqui [ /acordeon ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /acordeon ])
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css;
- id – identificador único para o carrossel. OBS.: caso tenha apenas um carrossel na página não é necessário informar um id.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ acordeon classes=”texto-branco”] adicione o conteúdo aqui [ /acordeon ].
Caixa
Descrição: Insere conteúdo dentro de uma área de carrossel no site (esse shortcode precisa ser fechado [/]).
Uso: [ caixa id=”1″ titulo=”titulo aqui” ] adicione o conteúdo aqui [ /caixa ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /caixa ])
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css;
- id – identificador único para o carrossel;
- id-acordeon – identificador único para o carrossel que faz referência ao shortcode acordeon. OBS.: caso tenha apenas um carrossel na página não é necessário informar um id.
- titulo – Título desse item.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ caixa id=”1″ titulo=”titulo aqui” classes=”texto-branco”] adicione o conteúdo aqui [ /caixa ].
Espaço
Descrição: Insere um espaço vazio.
Uso: [ espaco valor=”120″]
Parâmetros:
- valor – altura do espaço em pixels;
- celular – altura do espaço em pixels para celular;
- tablet – altura do espaço em pixels para tablet.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ espaco valor=”120″ tablet=”60″ celular=”30″ ].
Estilo
Descrição: Essa marcação é de uso livre, para casos específicos que não existem marcações prontas (esse shortcode precisa ser fechado [/]).
Uso: [ estilo estilo=”código css aqui” ] conteúdo aqui [ /estilo ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /estilo ])
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ estilo estilo=”código css aqui” classes=”texto-branco” ] conteúdo aqui [ /estilo ]
Abrir form
Descrição: Adiciona um botão no site que ao ser clicado abrirá a popup de formulário (esse shortcode precisa ser fechado [/]).
Uso: [ abrir-form ] texto do botão aqui [ /abrir-form ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /abrir-form ])
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ abrir-form classes=”texto-branco” ] texto do botão aqui [ /abrir-form ]
Abrir menu
Descrição: Adiciona um botão no site que ao ser clicado abrirá o menu principal. OBS.: funciona apenas para dispositivos móveis (esse shortcode precisa ser fechado [/]).
Uso: [ abrir-menu ] texto do botão aqui [ /abrir-menu ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /abrir-menu ])
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ abrir-menu classes=”texto-branco” ] texto do botão aqui [ /abrir-menu ]
Redes sociais
Descrição: Insere os ícones das redes sociais.
Uso: [ redes-sociais ]
Lista categorias
Descrição: Adiciona uma lista com todas as categorias do blog.
Uso: [ lista-categorias ].
Parâmetros:
- classes – permite adicionar classes para personalizar a aparência da sessão;
- estilo – permite adicionar trechos personalizados de css.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ lista-categorias classes=”texto-branco” ]
Aviso
Descrição: Adiciona uma barra de aviso personalizada. OBS.: funciona apenas para dispositivos móveis (esse shortcode precisa ser fechado [/]).
Uso: [ aviso ] texto do aviso aqui [ /aviso ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /aviso ])
Parâmetros:
- url – ao indicar uma url como parâmetro é adicionado um botão com o link citado dentro do aviso.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ aviso url=”url_aqui” ] texto do aviso aqui [ /aviso ]
Carrossel
Descrição: Adiciona uma barra de aviso personalizada. OBS.: funciona apenas para dispositivos móveis (esse shortcode precisa ser fechado [/]).
Uso: [ carrossel ] conteúdo aqui [ /carrossel ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /carrossel ])
Parâmetros:
- estilo – permite adicionar trechos personalizados de css;
- primeiro – obrigatório para o primeiro item criado. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- ultimo – obrigatório para o último item criado. OBS.: Esse parâmetro sempre deve receber o valor “sim” quando usado;
- classe – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ carrossel primeiro=”sim” ] conteúdo aqui [ /carrossel ]
Tópico
Descrição: Adiciona uma área personalizada para tópicos, com números destacados.
Uso: [ topico n=”1″ ]
Parâmetros:
- n – adiciona o número do tópico.
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ topico n=”1″ classes=”texto-branco” ]
Botão
Descrição: Adiciona um botão personalizado (esse shortcode precisa ser fechado [/]).
Uso: [ botao ] texto do botão [ /botao ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /botao ])
Parâmetros:
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ botao classes=”texto-branco”] texto do botão [ /botao ]
Botão linha
Descrição: Adiciona um botão personalizado em linha (esse shortcode precisa ser fechado [/]).
Uso: [ botao-linha ] texto do botão [ /botao-linha ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /botao-linha ])
Parâmetros:
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ botao-linha classes=”texto-branco”] texto do botão [ /botao-linha ]
Botão ícone
Descrição: Adiciona um botão personalizado com ícone (esse shortcode precisa ser fechado [/]).
Uso: [ botao-icone ] adicione a imagem do ícone dentro do shortcode ao lado do texto do botão [ /botao-icone ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /botao-icone ])
Parâmetros:
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ botao-icone classes=”texto-branco”] texto do botão [ /botao-icone ]
Botão barra
Descrição: Adiciona um botão personalizado com uma barrinha (esse shortcode precisa ser fechado [/]).
Uso: [ botao-barra ] texto do botão [ /botao-barra ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /botao-barra ])
Parâmetros:
- link – esse botão possui suporte para abrir a popup de formulário do site, para usar esse botão para abrir a popup, basta passar esse parâmetro com o valor “nao”.
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ botao-barra classes=”texto-branco”] texto do botão [ /botao-barra ]
Final
Descrição: adiciona uma área de texto com um loop de categoria na lateral (esse shortcode precisa ser fechado [/]).
Uso: [ final ] conteúdo aqui [ /final ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /final ])
Parâmetros:
- cat – categoria para o loop.
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ final cat=”slug_da_categoria” ] conteúdo aqui [ /final ]
Contador
Descrição: adiciona uma área de contador no site.
Uso: [ contador img=”url_da_imagem” valor=”125000″ txt=”Usuários ativos todos os dias” ]
Parâmetros:
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão;
- valor – numero inteiro para o contador;
- img – url da imagem;
- txt – um breve texto descritivo;
- sinal – caso queira adicionar o sinal “+” ao contador passe o valor “sim” para esse parâmetro.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ contador img=”url_da_imagem” valor=”125000″ txt=”Usuários ativos todos os dias” sinal=”sim” ]
Menu
Descrição: Adicione um menu de navegação rápida na página (esse shortcode precisa ser fechado [/]).
Uso: [ menu ] lista aqui [ /menu ] OBS.: Shortcodes que envolvem um conteúdo devem ser fechados ao final do conteúdo (Ex: [ /menu ])
Parâmetros:
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ menu classes=”texto-branco” ] lista aqui [ /menu ]
News
Descrição: Adicione um menu de navegação rápida na página.
Uso: [ news ]
Parâmetros:
- estilo – permite adicionar trechos personalizados de css;
- classes – permite adicionar classes para personalizar a aparência da sessão.
Caso precise usar alguns dos parâmetros permitidos, basta adicioná-lo dentro do shortcode, veja:
Uso com parâmetros: [ news classes=”texto-branco” ]
Comments are closed.
Attention, this site uses Cookies
