Presentación de PowerPoint

Report
MANUAL DE PLUGINS INSERT SHORTCODE
MANUAL
PLUGIN SHORTCODES ULTIMATE
Versión 1
Abril /2014
MANUAL DE PLUGINS INSERT SHORTCODE
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 SHORTCODE
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.
1.
2.
3.
4.
5.
6.
7.
8.
Heading
Divider
Pullquote
List
Lightbox
Tabs
High light
Accodion
Spoiler
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]
MANUAL DE PLUGINS INSERT SHORTCODE
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 .
1
Área de trabajo de Wordpress
MANUAL 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
MANUAL DE PLUGINS INSERT SHORTCODE
2
Pone encabezados a las paginas
(heading)
3
Regresa al listado de todos los iconos de shortcode
A
1. Estando en su página de trabajo de la plataforma Wordpress (PWP),
posicione el cursor en lugar donde se insertará la acción.
A
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
B
también sea por default .
B. Alineación, dar clic en la pestaña y elegir la alineación
C
deseada (centrada, izquierda o derecha)
C. Margen, , se recomienda sea por default 20.
D
4
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
E
4. Muestra la vista previa de la acción dentro del cuadro de
A
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.
F
MANUAL DE PLUGINS INSERT SHORTCODE
6
Pone encabezados a las
paginas
(heading)
5
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
7
MANUAL DE PLUGINS INSERT SHORTCODE
MANUAL DE PLUGINS INSERT SHORTCODE
2
Enlace para ir a la parte superior de la página
(Divider)
3
1. Estando en su página de trabajo de la plataforma Wordpress (PWP),
Regresa al listado de todos los iconos de shortcode
posicione el cursor en lugar donde se insertará la acción.
2. Elija Divider (plugin “Shortcodes Ultimate” )
A
3. Se despliega las propiedades de contenido de Divider.
A. Elija SI para ir a la parte superior de una página.
B
4
B. nombre el texto de enlace ( ir arriba)
C. La clase se deja por default en blanco
C
D. Dar clic para vista previa de la acción
4.
Muestra la vista previa de la acción dentro del cuadro de
D
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.
MANUAL DE PLUGINS INSERT SHORTCODE
MANUAL DE PLUGINS INSERT SHORTCODE
6
Enlace para ir a la parte superior de la
página
(Divider)
5
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.
7
MANUAL DE PLUGINS INSERT SHORTCODE
MANUAL DE PLUGINS INSERT SHORTCODE
Cita de pie de página para poner los datos de
responsable de contenido
(Pullquote)
2
A
1. Estando en su página de trabajo de la plataforma Wordpress
3
Regresa al listado de todos los iconos de shortcode
(PWP), posicione el cursor en lugar donde se insertará la
A
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
B
4
posicionar del pie de página.
B. La clase se queda por default en blanco
C. Escriba los datos del responsable de contenido
A
C
D. Dé clic para ver la vista previa
4. Muestra la vista previa de la acción dentro del cuadro de
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.
D
MANUAL DE PLUGINS INSERT SHORTCODE
MANUAL DE PLUGINS INSERT SHORTCODE
6
Cita de pie de página para poner
los datos de responsable de
contenido
(Pullquote)
5. Al dar insertar en el cuadro de propiedades
de contenido Pullquote (“ Shortcodes ”), se
5
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.
7
MANUAL DE PLUGINS INSERT SHORTCODE
3
2
Enlista contenidos
(List)
Regresa al listado de todos los iconos de shortcode
http://web.ssaver.gob.mx/tecnologias/files/2014/03/Logo2TI-B.jpg
icon: check
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 List (plugin “Shortcodes Ultimate” )
A
B
3. Se desplegaran las propiedades de contenido List
A – B Elija tipo de icono, personalizado (Media manager) ó un
icono incorporado del Icon picker.
C
Morado: #7c2791
Café: #c8beb7
Negro: #050606Gris:
#a6a3a0
C. Elija el color que desee de acuerdo al listado
D. La clase se queda por default en blanco
E. En el cuadro de contenido escriba el listado que desee se
D
muestre. ( ver imagen), si desea agregar mas información a
la lista, solo debe de copiar y pegar hacia abajo el código.
Ejemplo
E
<li> hola<li>
<li> hola<li>
</ul>
F. Muestra la vista previa de la acción
F
Verde: #83b99a
Amarillo: #dcd746
Azul: #9db4d2
Rosa: #d77ab3
MANUAL DE PLUGINS INSERT SHORTCODE
4. Muestra la vista previa de la acción
Enlista contenidos
(List)
dentro del cuadro de propiedades de
contenido de list (Shortcodes), ahí se
muestra como
se ve ejecutado
el
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
componente list , sí esta convencido de la
cambiar si lo desea el texto, y dar formato de acuerdo a los Estándares Internos
acción de clic.
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
4
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.
Código generado con un icono
6
5
A
5
B
MANUAL DE PLUGINS INSERT SHORTCODE
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
MANUAL DE PLUGINS INSERT SHORTCODE
Inserta un botón y al darle clic se despliega la imagen obscureciendo la
pantalla (Lightbox)
2
3
Regresa al listado de todos los iconos de shortcode
A
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 Lightbox (plugin “Shortcodes Ultimate” )
B
3. Se desplegaran las propiedades de contenido Lightbox
A Elija la imagen que será la que mostraraC. Escriba la url de esa imagen
4
D. La clase se queda por default en blanco
E. Muestra la vista previa de la acción
C
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
D
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.
E
MANUAL DE PLUGINS INSERT SHORTCODE
Inserta un botón o un texto y al darle clic se despliega la imagen obscureciendo la pantalla
Lightbox
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]
MANUAL DE PLUGINS INSERT SHORTCODE
6
Inserta un botón o aun texto y al
darle clic se despliega la imagen
obscureciendo la pantalla
Lightbox
5. Al dar insertar en el cuadro de propiedades
de contenido Lightbox (“ Shortcodes ”), se
5
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 Lightbox
MANUAL DE PLUGINS INSERT SHORTCODE
Inserta tabla con pestañas para mostrar información en
los cajones mostrando contenidos en ellos
( Tabs)
3
2
Regresa al listado de todos los iconos de shortcode
1. Estando en su página de trabajo de la plataforma Wordpress
(PWP), posicione el cursor en lugar donde se insertará la acción.
A
2. elija Tabs (plugin “Shortcodes Ultimate” )
3. Se despliega las propiedades de contenido de Tabs.
A. El estilo es por default
B
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
4
C
4
D. La clase se queda por default en blanco
E. Escriba el código en el cuadro ( content )
[su_tab title="Titulo de la pestaña"]escriba contenido[/su_tab]
D
[su_tab title="Titulo de la pestaña"]escriba contenido[/su_tab]
4. Muestra la vista previa de la acción dentro del cuadro de
propiedades de contenido de tabs (Shortcodes), ahí se muestra la
vista previa de como se ve ejecutado el componente tabs, sí esta
convencido de la acción de clic.
E
MANUAL DE PLUGINS INSERT SHORTCODE
6
Inserta tabla con pestañas para
mostrar contenidos
( Tabs)
5. Al dar insertar en el cuadro de
propiedades de contenido Tabs (“
Shortcodes ), se insertará en la página de
5
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 Tabs
7
MANUAL DE PLUGINS INSERT SHORTCODE
Destaca un párrafo con un sombreado en color
( High light)
2
3
Regresa al listado de todos los iconos de shortcode
1. Estando en su página de trabajo de la plataforma Wordpress
(PWP), posicione el cursor en lugar donde se insertará la acción.
AA
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
AA
de letra
B. La clase se deja por default en blanco
C. Escriba dentro del cuadro de contenido el texto que desee
BB
4
destacar dentro de su texto
D. Dé clic para ver la vista previa
4. Muestra la vista previa de la acción dentro del cuadro de
propiedades de contenido de
muestra
la
vista
previa
de
A
CC
D
High light (Shortcodes), ahí se
como
se
ve
ejecutado
componente High light, sí esta convencido de la acción de clic.
el
D
MANUAL DE PLUGINS INSERT SHORTCODE
Destacar los puntos de interés en un
sombreado de texto
(High light)
6
5. Al dar insertar en el cuadro de propiedades
de contenido High light (“ Shortcodes ), se
5
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
7
actualizar .
7. Así es como se muestra High light
MANUAL DE PLUGINS INSERT SHORTCODE
Despliega el contenido como simulando un acordeón
( Accordion)
3
2
1. Estando en su página de trabajo de la plataforma Wordpress (PWP),
Regresa al listado de todos los iconos de shortcode
posicione el cursor en lugar donde se insertará la acción.
2. elija Accordion (plugin “Shortcodes Ultimate” )
3. Se despliega las propiedades de contenido de Accordion
A
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]
texto a reemplazar
[su_spoiler title="Servicios que Ofrece Depto. de
Código
Tecnologías"]
[su_list icon=" icon: star " icon_color="#baafd0"]
A. Mantenimiento a equipos de cómputo
B.Sistemas Cliente servidor texto a reemplazar
C.Sistema
[/su_spoiler]
Dé clic para ver la vista previa
B
C
MANUAL DE PLUGINS INSERT SHORTCODE
Despliega el contenido como simulando un acordeón
( Accordion)
3
A
B
4. Muestra la vista previa de la acción dentro del cuadro de
propiedades de contenido de
4
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
MANUAL DE PLUGINS INSERT SHORTCODE
6
Despliega el contenido de una caja
simulando un acordeón para mostrar
contenido
( Accordion)
5. Al dar insertar en el cuadro de propiedades
5
de contenido Accordion (“ 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
6. Así es como se muestra Accordion
7
MANUAL DE PLUGINS INSERT SHORTCODE
Inserta tabla con pestaña que se despliega
para mostrar contenidos (Spoiler)
3
Regresa al listado de todos los iconos de shortcode
2
A
1. Estando en su página de trabajo de la plataforma Wordpress
(PWP), posicione el cursor en lugar donde se insertará la acción.
B
2. elija Spoiler (plugin “Shortcodes Ultimate” )
3. Se despliega las propiedades de contenido de Spoiler.
A. Poner el titulo
C
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
D
E
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
F
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
G
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
H
MANUAL DE PLUGINS INSERT SHORTCODE
Inserta tabla con pestaña que se despliega para mostrar
contenidos (Spoiler)
A
3
4
B
4. Muestra la vista previa de la acción dentro del cuadro de
propiedades de contenido de Spoiler (Shortcodes), ahí se
muestra como se ve ejecutado el componente Spoiler, 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 Spoiler
MANUAL DE PLUGINS INSERT SHORTCODE
A
6
Inserta tabla con pestaña que se
despliega para mostrar contenidos
(Spoiler)
5. Al dar insertar en el cuadro de propiedades
5
de contenido Spoiler (“ 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 Spoiler
7

similar documents