manual de plugins insert shortcode manual plugin shortcodes ultimate abril /2014 versión 1

MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE

MANUAL PLUGIN SHORTCODES ULTIMATE

Abril /2014Versión 1


PLUGIN SHORTCODES ULTIMATE

Proporciona soporte para múltiples códigos cortos útiles con los que podrás darle

un mejor aspecto a tu web.

Con este plugin “ Shorcode Ultimate ” puedes crear fácilmente botones,

deslizadores, cajas diferentes, Spoiler y mucho más. Convierte tu tema a la prima

en tan sólo unos pocos clics. Utilizando códigos cortos con Ultimate y mostrarlo

en su sitio.

MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE

Cada componente al ejecutar su código tendrá un prefijo de inicio entre corchetes ( [su_]) un componente con sus características y un fin entre corchetes ([/su] )ejemplo

[su_ componente]

Contenido

[/su_componente]

La imagen siguiente muestra la ventana donde se despliegan los componentes del plugin Insert Shortcode, se enlistan los que por el momento se ejecutaran.

Componentes

1.Heading1.Divider2.Pullquote3.List4.Lightbox5.Tabs6.High light7.Accodion8.Spoiler


Como funciona ” Shortcodes Ultimate ” Cuando tenga instalado y activado el plugin verá que en la pantalla de nueva

entrada le aparece una nueva opción, en la parte de arriba al lado de “añadir objeto”

Visual.- Es el área en donde se insertaran los componentes que se vayan trabajando .

Área de trabajo de Wordpress

1

http://wordpress.org/extend/plugins/shortcodes-ultimate/



MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE

Componentes

1. Heading Pone encabezados a las paginas

2. Divider Enlace para ir a la parte superior de la página

3. Pullquote Cita de pie de página para poner los datos de responsable de contenido

4. List Enlista contenidos

5. Lightbox Inserta un botón o un texto y al darle clic se despliega la imagen en

obscureciendo la pantalla

6. Tabs Inserta tabla con pestañas para mostrar información en los cajones

mostrando contenidos en ellos

7. High light Destaca un párrafo con un sombreado en color

8. Accodion Despliega el contenido de una caja, simulando un acordeón para mostrar

contenido.

9. Spoiler Inserta tabla con pestaña que se despliega para mostrar contenidos


2

3

1. Estando en su página de trabajo de la plataforma Wordpress (PWP),

posicione el cursor en lugar donde se insertará la acción.

2. Elija heading (plugin “Shortcodes Ultimate” )

3. Se desplegaran las propiedades de contenido de heading.

A. Estilo será por default, el tamaño se recomienda que

también sea por default .

B. Alineación, dar clic en la pestaña y elegir la alineación

deseada (centrada, izquierda o derecha)

C. Margen, , se recomienda sea por default 20.

D. La clase se queda por default en blanco

E. Escriba el texto del encabezado en el cuadro de contenido.

F. Muestra la vista previa de la acción

4. Muestra la vista previa de la acción dentro del cuadro de

propiedades de contenido de heading (Shortcodes), ahí se muestra

como se ve ejecutado el componente heading, sí esta convencido de

la acción de clic.

Pone encabezados a las paginas (heading)

Regresa al listado de todos los iconos de shortcode

A

A

B

C

D

E

F

4

A


5. Al dar insertar en el cuadro de propiedades de contenido

heading (“ Shortcodes ”), se insertará en la página de trabajo

de la PWP, el código generado, ahí también puede cambiar si lo

desea el texto, y dar formato de acuerdo a los Estándares

Internos para la publicación en Micrositios del Portal de

SESVER.

6. Para una previa visualización de la acción dentro de la PWP, dé

clic a vista previa, si esta convencido de la acción, dé clic en

actualizar.

7. Así es como se muestra de heading en su página de trabajo de

la de la PWP, dé clic y así será como se apreciara

5

6

7

Pone encabezados a las paginas

(heading)


2



2. Elija Divider (plugin “Shortcodes Ultimate” )

3. Se despliega las propiedades de contenido de Divider.

A. Elija SI para ir a la parte superior de una página.

B. nombre el texto de enlace ( ir arriba)

C. La clase se deja por default en blanco

D. Dar clic para vista previa de la acción


propiedades de contenido de Divider (Shortcodes), ahí se muestra

la vista previa de como se ve ejecutado el componente Divider, sí

esta convencido de la acción de clic.

Enlace para ir a la parte superior de la página (Divider)

3

A

B

C

MANUAL DE PLUGINS INSERT SHORTCODE

4

D



Enlace para ir a la parte superior de la página

(Divider)

7

5. Al dar insertar en el cuadro de propiedades de contenido

Divider (“ Shortcodes ”), se insertará en la página de trabajo de la PWP,

el código generado, ahí también puede cambiar si lo desea el texto que

haya escrito, y dar formato de acuerdo a los Estándares Internos para la

publicación en Micrositios del Portal de SESVER

6. Para una previa visualización de la acción dentro de la PWP, dé clic a

vista previa, si esta convencido de la acción, dé clic en actualizar.

7. Así es como se muestra Divider en su página de trabajo de la de la PWP,

dé clic y se deslizara a la parte superior de su página.

6

5



2

Cita de pie de página para poner los datos de responsable de contenido

(Pullquote)

3A

A

B


1. Estando en su página de trabajo de la plataforma Wordpress

(PWP), posicione el cursor en lugar donde se insertará la

acción.

2. Elija Pullquote (plugin “Shortcodes Ultimate” )

3. Se despliega las propiedades de contenido de Pullquote.

A. Muestra el tipo de alienación (left ó Right) a elegir para

posicionar del pie de página.

B. La clase se queda por default en blanco

C. Escriba los datos del responsable de contenido

D. Dé clic para ver la vista previa


propiedades de contenido de Pullquote (Shortcodes), ahí se

muestra como se ve ejecutado el componente Pullquote, sí esta

convencido de la acción de clic.

4

AC

D




Cita de pie de página para poner los datos de responsable de

contenido

(Pullquote)

5

6

7

5. Al dar insertar en el cuadro de propiedades

de contenido Pullquote (“ Shortcodes ”), se

insertará en la página de trabajo de la PWP,

el código generado, Insertado el texto, ahí

también puede cambiar si lo desea el texto

que haya escrito y dar formato de acuerdo a

los Estándares Internos para la publicación en

Micrositios del Portal de SESVER

6. Para una previa visualización de la acción

dentro de la PWP, dé clic a vista previa, si

esta convencido de la acción dé clic en

actualizar-

7. Así es como se muestra Pullquote.



icon: checkhttp://web.ssaver.gob.mx/tecnologias/files/2014/03/Logo2TI-B.jpg

3

BA

C

D


(PWP), posicione el cursor en lugar donde se insertará la acción.

2. elija List (plugin “Shortcodes Ultimate” )

3. Se desplegaran las propiedades de contenido List

A – B Elija tipo de icono, personalizado (Media manager) ó un

icono incorporado del Icon picker.

C. Elija el color que desee de acuerdo al listado


E. En el cuadro de contenido escriba el listado que desee se

muestre. ( ver imagen), si desea agregar mas información a

la lista, solo debe de copiar y pegar hacia abajo el código.

Ejemplo

<li> hola<li>

<li> hola<li>

</ul>

F. Muestra la vista previa de la acción

E

2

Verde: #83b99aAmarillo: #dcd746Azul: #9db4d2Rosa: #d77ab3

Morado: #7c2791Café: #c8beb7Negro: #050606Gris: #a6a3a0

F

Enlista contenidos (List)


5. Al dar insertar en el cuadro de propiedades de contenido list (“ Shortcodes ”), se

insertará en la página de trabajo de la PWP, el código generado, ahí también puede

cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos

para la publicación en Micrositios del Portal de SESVER.

A. En su pagina de trabajo se muestra el código generado personalizado (Media

manager), por default pone de propiedades el color verde, si sabe el código

para cambiar el color puede hacerlo.

B. Si ha elegido un icono incorporado del Icon picker, así se mostrara el código

generado con el color seleccionado.

6. Para una previa visualización de la acción dentro de la PWP, dé clic a vista previa, si

esta convencido de la acción, dé clic en actualizar.

A

4

5

Código generado con un icono B

65

4. Muestra la vista previa de la acción

dentro del cuadro de propiedades de

contenido de list (Shortcodes), ahí se

muestra como se ve ejecutado el

componente list , sí esta convencido de la

acción de clic.

Enlista contenidos (List)


7. Así es como se muestra de List en su página de trabajo de la de la PWP, dé clic y así será como se apreciara

7


Inserta un botón y al darle clic se despliega la imagen obscureciendo la pantalla (Lightbox)




2. Elija Lightbox (plugin “Shortcodes Ultimate” )

3. Se desplegaran las propiedades de contenido Lightbox

A Elija la imagen que será la que mostrara-

C. Escriba la url de esa imagen


E. Muestra la vista previa de la acción

B

A

C

D

E

23

4

4. Al dar vista previa le desplegara el cuadro de contenido, en él

aparecerá el código con el componte botton y con el texto imagen,

Usted en vista previa visualizará un botton en color azul que al

insertarlo en su pagina de trabajo al darle clic le obscurecerá la

pantalla en su alrededor, si desea cambiar el texto lo puede hacer

con el nombre de lo que desea mostrar.


Lightbox

Inserta un botón o un texto y al darle clic se despliega la imagen obscureciendo la pantalla

4. Al dar vista previa le desplegara el cuadro de contenido, en él aparecerá el código con el componte botton y con el texto imagen, Usted

en vista previa visualizará un botton en color azul que al insertarlo en su pagina de trabajo al darle clic le obscurecerá la pantalla en su

alrededor, si desea cambiar el texto lo puede hacer con el nombre de lo que desea mostrar. Ejemplo en el siguiente código

[su_lightbox type="image" src="http://web.ssaver.gob.mx/tecnologias/files/2014/03/Logo2TI-B.jpg"][su_button] Imagen

TI[/su_button][/su_lightbox]

clic en un texto aparece la imagen

Usted debe de borrar dentro del código el componente botton ejemplo en el siguiente código.

[su_lightbox type="image" src="http://web.ssaver.gob.mx/tecnologias/files/2014/03/Logo2TI-B.jpg"] Logo de tecnologías de la

Información [/su_lightbox]


Lightbox

Inserta un botón o aun texto y al darle clic se despliega la imagen

obscureciendo la pantalla


de contenido Lightbox (“ Shortcodes ”), se


el código generado, Insertado el texto, ahí

también puede cambiar si lo desea el texto

que haya escrito y dar formato de acuerdo a

los Estándares Internos para la publicación en

Micrositios del Portal de SESVER




actualizar-

7. Así es como se muestra Lightbox

5

6




2. elija Tabs (plugin “Shortcodes Ultimate” )

3. Se despliega las propiedades de contenido de Tabs.

A. El estilo es por default

B. Poner en que pestaña de la tabla es en donde se abrirá la

tabla

C. Elegirá la posición que quiere se presente la tabla


E. Escriba el código en el cuadro ( content )

[su_tab title="Titulo de la pestaña"]escriba contenido[/su_tab]

[su_tab title="Titulo de la pestaña"]escriba contenido[/su_tab]


propiedades de contenido de tabs (Shortcodes), ahí se muestra la

vista previa de como se ve ejecutado el componente tabs, sí esta


Inserta tabla con pestañas para mostrar información en los cajones mostrando contenidos en ellos

( Tabs)

23

4

E

A

B

C

D

4



5. Al dar insertar en el cuadro de

propiedades de contenido Tabs (“

Shortcodes ), se insertará en la página de

trabajo de la PWP, el código generado, ahí

también puede cambiar si lo desea el texto,

y dar formato de acuerdo a los Estándares

Internos para la publicación en Micrositios

del Portal de SESVER.




actualizar .

7. Así es como se muestra Tabs

5

6

7

Inserta tabla con pestañas para mostrar contenidos

( Tabs)




2. elija High light (plugin “Shortcodes Ultimate” )

3. Se despliega las propiedades de contenido de High light.

A. Seleccione el color de fondo de fondo para su texto y color

de letra

B. La clase se deja por default en blanco

C. Escriba dentro del cuadro de contenido el texto que desee

destacar dentro de su texto

D. Dé clic para ver la vista previa


propiedades de contenido de High light (Shortcodes), ahí se

muestra la vista previa de como se ve ejecutado el componente

High light, sí esta convencido de la acción de clic.

Destaca un párrafo con un sombreado en color

( High light)

2 3

A

A

B

C

4

A

D

A

A

B

DC



Destacar los puntos de interés en un sombreado de texto

(High light)


de contenido High light (“ Shortcodes ), se


el código generado, ahí también puede

cambiar si lo desea el texto, y dar formato de

acuerdo a los Estándares Internos para la

publicación en Micrositios del Portal de

SESVER.




actualizar .

7. Así es como se muestra High light

5

6

7




2. elija Accordion (plugin “Shortcodes Ultimate” )

3. Se despliega las propiedades de contenido de Accordion

A. La clase se deja por default en blanco

B. Escriba dentro del cuadro de contenido el texto ejemplo y

reemplace el texto de acuerdo a sus necesidades

[su_accordion]

[su_spoiler title="Servicios que Ofrece Depto. de

Tecnologías"]

[su_list icon=" icon: star " icon_color="#baafd0"]

C. Mantenimiento a equipos de cómputo

B.Sistemas Cliente servidor

C.Sistema

[/su_spoiler]

Dé clic para ver la vista previa

Despliega el contenido como simulando un acordeón ( Accordion)

23

A

B

CCódigo

texto a reemplazar

texto a reemplazar



Despliega el contenido como simulando un acordeón ( Accordion) 3

A

B


propiedades de contenido de Accordion (Shortcodes), ahí se

muestra la vista previa de como se ve ejecutado el componente

Accordion, sí esta convencido de la acción de clic.

A – B Se mostrara el contenido en icono listo para que

se le de clic para desplegarse como acordeón

4



de contenido Accordion (“ Shortcodes ), se






SESVER.




actualizar .

6. Así es como se muestra Accordion

6

7

5

7

Despliega el contenido de una caja simulando un acordeón para mostrar

contenido ( Accordion)




2. elija Spoiler (plugin “Shortcodes Ultimate” )

3. Se despliega las propiedades de contenido de Spoiler.

A. Poner el titulo

B. Elija SI en caso de que desee que el Spoiler quiere aparezca

abierto o NO si quiere aparezca cerrado

C. El estilo se elige dependiendo si quiere que el spoiler no

tenga un recuadro gris (default), simple( con recuadro y

imagen eligiendo el icono del cuadro (D), y fancy con

recuadro con las esquinas ovaladas y además imagen que

elija en el icono del inciso (D).

D. Elegir icono que desea que visualice en su spoiler

E. El anchor se sugiere que sea por default

F. La clase va por default en blanco

G. Escriba el el texto que desee se despliegue en su Spoiler

H. De clic para visualizar el spoiler

23

E

A

B

C

D

F

G

Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler)


H


Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler)

3 4A

B


propiedades de contenido de Spoiler (Shortcodes), ahí se

muestra como se ve ejecutado el componente Spoiler, sí esta


A – B Se mostrara el contenido en icono listo para que

se le de clic para desplegarse como Spoiler


A 6


de contenido Spoiler (“ Shortcodes ), se






SESVER.




actualizar .

7. Así es como se muestra Spoiler

7

Inserta tabla con pestaña que se despliega para mostrar contenidos

(Spoiler)

manual de plugins insert shortcode manual plugin shortcodes ultimate abril /2014 versión 1

Documents