MANUAL PLUGIN SHORTCODES ULTIMATE

1. MANUAL PLUGIN SHORTCODES ULTIMATE Abril /2014 Versión 1

2. 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“ ShorcodeUltimate ” 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.

3. 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 • 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]

4. Como funciona  ” ShortcodesUltimate” 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

5. MANUAL DE PLUGINS INSERT SHORTCODE Componentes Heading Pone encabezados a las paginas Divider Enlace para ir a la parte superior de la página PullquoteCita de pie de página para poner los datos de responsable de contenido List Enlista contenidos LightboxInserta un botón o un texto y al darle clic se despliega la imagen en obscureciendo la pantalla TabsInserta tabla con pestañas para mostrar información en los cajones mostrando contenidos en ellos High light Destaca un párrafo con un sombreado en color AccodionDespliega el contenido de una caja, simulando un acordeón para mostrar contenido. Spoiler Inserta tabla con pestaña que se despliega para mostrar contenidos

6. 2 Pone encabezados a las paginas (heading) 3 Regresa al listado de todos los iconos de shortcode A • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • Elija heading(plugin “Shortcodes Ultimate” ) • Se desplegaran las propiedades de contenido de heading. • Estilo será por default, el tamaño se recomienda que también sea por default . • Alineación, dar clic en la pestaña y elegir la alineación deseada (centrada, izquierda o derecha) • Margen, , se recomienda sea por default 20. • La clase se queda por default en blanco • Escriba el texto del encabezado en el cuadro de contenido. • Muestra la vista previa de la acción • 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. A B C D 4 E A F

7. Pone encabezados a las paginas 6 (heading) 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. 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. Así es como se muestra de headingen su página de trabajo de la de la PWP, dé clic y así será como se apreciara 7

8. MANUAL DE PLUGINS INSERT SHORTCODE 2 Enlace para ir a la parte superior de la página (Divider) 3 • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • Elija Divider (plugin “Shortcodes Ultimate” ) • Se despliega las propiedades de contenido de Divider. • Elija SI para ir a la parte superior de una página. • nombre el texto de enlace ( ir arriba) • La clase se deja por default en blanco • Dar clic para vista previa de la acción • 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. Regresa al listado de todos los iconos de shortcode A B 4 C D

9. MANUAL DE PLUGINS INSERT SHORTCODE Enlace para ir a la parte superior de la página 6 (Divider) 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 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. 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

10. MANUAL DE PLUGINS INSERT SHORTCODE Cita de pie de página para poner los datos de responsable de contenido (Pullquote) 2 3 A • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • Elija Pullquote (plugin “Shortcodes Ultimate” ) • Se despliega las propiedades de contenido de Pullquote. • Muestra el tipo de alienación (left ó Right) a elegir para posicionar del pie de página. • La clase se queda por default en blanco • Escriba los datos del responsable de contenido • Dé clic para ver la vista previa • 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. Regresa al listado de todos los iconos de shortcode A B 4 A C D

11. MANUAL DE PLUGINS INSERT SHORTCODE Cita de pie de página para poner los datos de responsable de contenido 6 (Pullquote) 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 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- 5 Así es como se muestra Pullquote. 7

12. Enlista contenidos 3 2 (List) Regresa al listado de todos los iconos de shortcode http://web.ssaver.gob.mx/tecnologias/files/2014/03/Logo2TI-B.jpg icon: check • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • elija List (plugin “Shortcodes Ultimate” ) • Se desplegaran las propiedades de contenido List • A – B Elija tipo de icono, personalizado (Media manager) ó un icono incorporado del Icon picker. • Elija el color que desee de acuerdo al listado • La clase se queda por default en blanco • 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> • Muestra la vista previa de la acción A B Morado: #7c2791 Café: #c8beb7 Negro: #050606Gris: #a6a3a0 Verde: #83b99a Amarillo: #dcd746 Azul: #9db4d2 Rosa: #d77ab3 C D E F

13. 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) • 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. • 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. • Si ha elegido un icono incorporado del Icon picker, así se mostrara el código generado con el color seleccionado. • 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. 4 Código generado con un icono 5 B 6 5 A

14. 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

15. 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 • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • Elija Lightbox(plugin “Shortcodes Ultimate” ) • Se desplegaran las propiedades de contenido Lightbox • A Elija la imagen que será la que mostrara- • Escriba la url de esa imagen • La clase se queda por default en blanco • Muestra la vista previa de la acción B 4 C • 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. D E

16. Inserta un botón o un texto y al darle clic se despliega la imagen obscureciendo la pantalla Lightbox • 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_lightboxtype="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_lightboxtype="image" src="http://web.ssaver.gob.mx/tecnologias/files/2014/03/Logo2TI-B.jpg"] Logo de tecnologías de la Información [/su_lightbox]

17. Inserta un botón o aun texto y al darle clic se despliega la imagen obscureciendo la pantalla 6 Lightbox 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 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- 5 Así es como se muestra Lightbox

18. 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 • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • elija Tabs (plugin “Shortcodes Ultimate” ) • Se despliega las propiedades de contenido de Tabs. • El estilo es por default • Poner en que pestaña de la tabla es en donde se abrirá la tabla • Elegirá la posición que quiere se presente la tabla • La clase se queda por default en blanco • Escriba el código en el cuadro ( content) • [su_tabtitle="Titulo de la pestaña"]escriba contenido[/su_tab] • [su_tabtitle="Titulo de la pestaña"]escriba contenido[/su_tab] • 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. A B 4 C 4 D E

19. Inserta tabla con pestañas para mostrar contenidos 6 (Tabs) 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. 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 . 5 Así es como se muestra  Tabs 7

20. Destaca un párrafo con un sombreado en color (High light) 2 3 Regresa al listado de todos los iconos de shortcode • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • elija High light (plugin “Shortcodes Ultimate” ) • Se despliega las propiedades de contenido de High light. • Seleccione el color de fondo de fondo para su texto y color de letra • La clase se deja por default en blanco • Escriba dentro del cuadro de contenido el texto que desee destacar dentro de su texto • Dé clic para ver la vista previa • 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. A A A A B B 4 A C C D D

21. Destacar los puntos de interés en un sombreado de texto  (High light) 6 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. 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 . 5 7 Así es como se muestra High light

22. Despliega el contenido como simulando un acordeón (Accordion) 3 2 • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • elija Accordion (plugin “Shortcodes Ultimate” ) • Se despliega las propiedades de contenido de Accordion • La clase se deja por default en blanco • Escriba dentro del cuadro de contenido el texto ejemplo y reemplace el texto de acuerdo a sus necesidades • [su_accordion] • [su_spoilertitle="Servicios que Ofrece Depto. de Tecnologías"] • [su_listicon=" icon: star " icon_color="#baafd0"] • Mantenimiento a equipos de cómputo • Sistemas Cliente servidor • Sistema • [/su_spoiler] • Dé clic para ver la vista previa Regresa al listado de todos los iconos de shortcode A texto a reemplazar B Código C texto a reemplazar

23. Despliega el contenido como simulando un acordeón 3 (Accordion) A B • 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

24. Despliega el contenido de una caja simulando un acordeón para mostrar contenido (Accordion) 6 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. 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 . 5 7 Así es como se muestra  Accordion 7

25. Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler) 3 Regresa al listado de todos los iconos de shortcode 2 A • Estando en su página de trabajo de la plataforma Wordpress (PWP), posicione el cursor en lugar donde se insertará la acción. • elija Spoiler (plugin“Shortcodes Ultimate” ) • Se despliega las propiedades de contenido de Spoiler. • Poner el titulo • Elija SI en caso de que desee que el Spoiler quiere aparezca abierto o NO si quiere aparezca cerrado • 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). • Elegir icono que desea que visualice en su spoiler • El anchor se sugiere que sea por default • La clase va por default en blanco • Escriba el el texto que desee se despliegue en su Spoiler • De clic para visualizar el spoiler B C D E F G H

26. Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler) 4 A 3 B • 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

27. Inserta tabla con pestaña que se despliega para mostrar contenidos (Spoiler) 6 A 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. 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 . 5 Así es como se muestra   Spoiler 7