MANUAL DE PLUGINS INSERT SHORTCODE MANUAL PLUGIN SHORTCODES ULTIMATE Abril /2014 Versión 1.
-
Upload
therasia-gabriel -
Category
Documents
-
view
144 -
download
7
Transcript of 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
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL 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 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
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL 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 .
Área de trabajo de Wordpress
1
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
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
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
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
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)
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
2
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 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
4. Muestra la vista previa de la acción dentro del cuadro de
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
Regresa al listado de todos los iconos de shortcode
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
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
MANUAL DE PLUGINS INSERT SHORTCODE
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
2
Cita de pie de página para poner los datos de responsable de contenido
(Pullquote)
3A
A
B
MANUAL DE PLUGINS INSERT 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.
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
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.
4
AC
D
Regresa al listado de todos los iconos de shortcode
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
MANUAL DE PLUGINS INSERT SHORTCODE
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.
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
Regresa al listado de todos los iconos de shortcode
icon: checkhttp://web.ssaver.gob.mx/tecnologias/files/2014/03/Logo2TI-B.jpg
3
BA
C
D
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” )
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
D. La clase se queda por default en blanco
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)
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
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)
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL 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 SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
Inserta un botón y al darle clic se despliega la imagen obscureciendo la pantalla (Lightbox)
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.
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
D. La clase se queda por default en blanco
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.
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
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]
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
Lightbox
Inserta un botón o aun texto y al darle clic se despliega la imagen
obscureciendo la pantalla
5. Al dar insertar en el cuadro de propiedades
de contenido Lightbox (“ 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 Lightbox
5
6
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT 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.
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
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]
[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.
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
Regresa al listado de todos los iconos de shortcode
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
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.
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
5
6
7
Inserta tabla con pestañas para mostrar contenidos
( Tabs)
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT 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.
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
4. Muestra la vista previa de la acción dentro del cuadro de
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
Regresa al listado de todos los iconos de shortcode
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
Destacar los puntos de interés en un sombreado de texto
(High light)
5. Al dar insertar en el cuadro de propiedades
de contenido High light (“ 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 High light
5
6
7
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT 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.
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
Regresa al listado de todos los iconos de shortcode
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL 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 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
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
5. Al dar insertar en el cuadro de propiedades
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 .
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)
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT 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.
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)
Regresa al listado de todos los iconos de shortcode
H
MANUAL DE PLUGINS INSERT SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler)
3 4A
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 SHORTCODEMANUAL DE PLUGINS INSERT SHORTCODE
A 6
55. Al dar insertar en el cuadro de propiedades
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
Inserta tabla con pestaña que se despliega para mostrar contenidos
(Spoiler)