Todos los estilos Tipografía y formatos de escritura
No todos los estilos a continuación se pueden usar directamente en el modo "Vista de escritura", pero también hay algunas funciones que solo se pueden usar desde el modo "Vista HTML".
Formato de escritura para: Plantilla Plus UI v2.5.1
Actualizado el: 15 de febrero de 2022
Imagen con leyenda y Lightbox automático
El título de esta imagen no se leerá en la descripción/fragmento del artículo. También puede optar por mantener los subtítulos legibles en los fragmentos de artículos.
|
| Caption_here |
Todas las imágenes en el artículo automáticamente tendrán una función de caja de luz, excepto la imagen en la etiqueta <figure>, intente hacer clic en una de las imágenes en esta publicación.
Formato de escritura:
<table class='tr-caption-container'>
<tbody>
<tr>
<td>
<img alt='Image_Alt_Here' src='image_src.png'/>
</td>
</tr>
<tr>
<td> class='tr-caption'>Caption_here</td>
</tr>
</tbody>
</table>
Video de Introducción
Imagen con diseño de cuadrícula
Formato de escritura:
<!--[ Grid Image ]--> <div class='gridImage'> <img alt='Image_Alt_Here' src='image_src.png'/> <img alt='Image_Alt_Here' src='image_src.png'/> <img alt='Image_Alt_Here' src='image_src.png'/> <img alt='Image_Alt_Here' src='image_src.png'/> </div>
Imagen con la función Mostrar todo
Se utiliza para ocultar algunas imágenes y se mostrará cuando el usuario haga clic en el botón 'Mostrar todo'. La función Mostrar todo solo se puede activar una vez, las imágenes no se pueden ocultar de nuevo cuando la activa.
Formato de escritura:
<!--[ Show All Image ]-->
<input class='imageInput hidden' id='for-hideImage' type='checkbox'>
<div class='hideImage'>
<img alt='Image_Alt_Here' src='image_src.png'/>
<img alt='Image_Alt_Here' src='image_src.png'/>
<img alt='Image_Alt_Here' src='image_src.png'/>
<div class='buttonImage'>
<img alt='Image_Alt_Here' src='image_src.png'/>
<!--[ Button image to activate ]-->
<label for='for-hideImage' aria-label='Show all image'></label>
</div>
<!--[ Hide the rest image here ]-->
<div class='showImage'>
<img alt='Image_Alt_Here' src='image_src.png'/>
<img alt='Image_Alt_Here' src='image_src.png'/>
<img alt='Image_Alt_Here' src='image_src.png'/>
<img alt='Image_Alt_Here' src='image_src.png'/>
</div>
</div>
Imagen con diseño de desplazamiento
Igual que el diseño de la imagen anterior, solo que en la pantalla del móvil las imágenes se organizarán en paralelo con la función de desplazamiento lateral adicional en la pantalla del móvil.
También agregamos un efecto de desplazamiento suave a esta función. Intente abrir esta página en su dispositivo móvil:
Formato de escritura:
<!--[ Scroll Image ]--> <div class='scrollImage'> <img alt='Image_Alt_Here' src='image_src.png'/> <img alt='Image_Alt_Here' src='image_src.png'/> <img alt='Image_Alt_Here' src='image_src.png'/> </div>
Lazyload Image
Useful for delaying loading images so that the blog's PageSpeed score is higher, image will only load when user scrolls to the image area. All images in this article use Lazyload.
Formato de escritura:
<img class='lazy' alt='Image_Alt_Here' data-src='image_src.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
Publicación relacionada con el manual
Es importante tener en cuenta que esta función se escribe manualmente, no aparece automáticamente en todas las páginas.
Formato de escritura:
<div class='postRelated'>
<!--[ Related title ]-->
<b>Baca juga :</b>
<ul>
<li><a href='javascript:;'>Lorem ipsum dolor sit amet consectetur adipiscing</a></li>
<li><a href='javascript:;'>Proin vestibulum dignissim diam</a></li>
<li><a href='javascript:;'>Sed suscipit sapien sed turpis ultrices viverra</a></li>
</ul>
</div>
Publicaciónes relacionadas Automatiocas
Related Posts
Formato de escritura:
<details class='spoiler toc' open=''> <summary data-show='Show' data-hide='Hide'>Related Posts</summary> <div class='toC' id='rPst'></div> </details>
Separador
Puedes utilizar esta función para separar párrafos o para abrir un nuevo capítulo en un post, aquí tienes un ejemplo de cómo queda:
Formato de escritura:
<i class='separate'></i>
Párrafo con sangría de texto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Formato de escritura:
<p class='textIndent'>Your_text_here</p>
Párrafo con mayúscula
Mis a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.
The drop cap will resize the first letter of the paragraph so that it drops one or more lines down. Many types of print media use drop caps such as books, magazines, newspapers and so on because they can add to the visual appeal.
Formato de escritura:
<p><span class='dropCap'>Y</span>our_text_here</p>
Cita en bloque
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Otro estilo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
Formato de escritura:
<blockquote>Your_text_here</blockquote> // Otro estilo <blockquote class='style-1'>Your_text_here</blockquote>
Tabla
La tabla de este tema se ha configurado de forma responsiva, por ejemplo, si el número de columnas o la anchura de la tabla supera la anchura de la pantalla, para no dañar el diseño, la tabla tendrá automáticamente una función de desplazamiento.
Abra este artículo en su dispositivo móvil y resalte la sección de la tabla que aparece a continuación:
| No | Column_1 | Column_2 | Column_3 | Column_4 | Column_5 |
|---|---|---|---|---|---|
| 1 | Data_table_1 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 2 | Data_table_2 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 3 | Data_table_3 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
| 4 | Data_table_4 | 00.000.000 | 0.000.000 | 0.000.000 | 0.000.000 |
Formato de escritura:
<div class='table'>
<table>
<thead>
<tr>
<th>No</th>
<th>Column_1</th>
<th>Column_2</th>
<th>Column_3</th>
<th>Column_4</th>
<th>Column_5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Data_table_1</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
<tr>
<td>2</td>
<td>Data_table_2</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
<tr>
<td>3</td>
<td>Data_table_3</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
<tr>
<td>4</td>
<td>Data_table_4</td>
<td>00.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
<td>0.000.000</td>
</tr>
</tbody>
</table>
</div>
Tabla de contenidos del manual
Puede optar por utilizar la TdC manual si no desea que todas las etiquetas de encabezamiento (h1, h2, h3, h4, h5, h6) se muestren en el índice de contenidos.
Para la escritura manual tienes que añadir un atributo id=' ... ' nuevo a cada etiqueta de título que quieras añadir a la tabla de contenidos, puede ser un poco difícil de implementar pero puedes elegir qué Título quieres mostrar.
Contents
Formato de escritura:
<details class='spoiler toc' open=''>
<summary data-show='Show all' data-hide='Hide all'>Contents</summary>
<div class='toC'>
<ol>
<li><a href='#Image_with_Caption'>Image with Caption</a></li>
<li><a href='#Manual_Related_Post'>Manual Related Post</a></li>
<li><a href='#Post_Break'>Post Break</a></li>
<li><a href='#Blockquote'>Blockquote</a></li>
</ol>
<p>With sub-heading</p>
<ol>
<li><a href='#'>Heading_title</a>
<ol>
<li><a href='#'>subheading_1</a></li>
<li><a href='#'>subheading_2</a></li>
<li><a href='#'>subheading_3</a></li>
</ol>
</li>
</ol>
</div>
</details>
Tabla de contenidos semiautomática
Esta segunda opción añadirá una tabla de contenido de forma automática en tu post, el único inconveniente es que añadirá cada etiqueta de encabezado a la TdC, el orden puede ser desordenado o error si las etiquetas de encabezado se escriben regularmente.
Table of Contents
Formato de escritura:
<details class='spoiler toc'> <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary> <div class='toC' id='autoToc'></div> </details>
<script>/*<![CDATA[*/ document.addEventListener('DOMContentLoaded', () => new TableOfContents({from: document.querySelector('#postBody'), to: document.querySelector('#autoToc')}).generateToc() ); /*]]>*/</script>
Resaltador de sintaxis
Used to write lines of HTML code in posts
Puede hacer doble clic en el resaltador de sintaxis para copiar su contenido en el portapapeles.
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Sample Page</title>
</head>
<!--[ <body> open ]-->
<body>
<p>Sample content here!</p>
</body>
<!--[ </body> close ]-->
</html>
// Tags to add color
<i class='gray'>...</i> = Grey
<i class='red'>...</i> = Red
<i class='blue'>...</i> = Blue
<i class='green'>...</i> = Green
<i class='block'>...</i> = Block Blue
Para escribir código HTML, CSS o JS en los posts, Formato de escritura:
<div class='pre html notranslate'> <pre>Your_HTML_code_here</pre> </div>
Sintaxis de escritura para el formato CSS:
<div class='pre css notranslate'> <pre>Your_CSS_code_here</pre> </div>
Sintaxis de escritura para el formato JS:
<div class='pre js notranslate'> <pre>Your_JS_code_here</pre> </div>
Para desactivar la función de desplazamiento, utilice la siguiente etiqueta:
<div class='pre js notranslate'> <pre style='white-space:pre-wrap'>Your_JS_code_here</pre> </div>
También puedes escribir código como: <html> en párrafos utilizando:
<code>code_here</code>
Resaltador de sintaxis MultiTabs
<!DOCTYPE html>
<html dir='ltr' lang='en'>
<head>
<title>Sample Page</title>
</head>
<!--[ <body> open ]-->
<body>
<p>Sample content here!</p>
</body>
<!--[ </body> close ]-->
</html>
/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}
JS here
Código de escritura:
<div class='pre tb notranslate'>
<!--[ Active function ]-->
<input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
<input class='prei hidden' id='preT-2' type='radio' name='preTab'>
<input class='prei hidden' id='preT-3' type='radio' name='preTab'>
<!--[ Header/title ]-->
<div class='preH tbHd'>
<!--[ Change atribute data-text='...' to replace title ]-->
<label for='preT-1' data-text='HTML'></label>
<label for='preT-2' data-text='CSS'></label>
<label for='preT-3' data-text='JS'></label>
</div>
<!--[ Content ]-->
<div class='preC-1'>
<pre>Tab_content_1</pre>
</div>
<div class='preC-2'>
<pre>Tab_content_2</pre>
</div>
<div class='preC-3'>
<pre>Tab_content_3</pre>
</div>
</div>
Spoiler - Botón mostrar/ocultar
Spoiler:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
<details class='spoiler notranslate'> <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary> <p>Your_content_here</p> </details>
Acordeón / Menú alternativo
Accordion_first_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_second_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_third_title
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
Accordion_fourth_title (alt)
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
<div class='showH'>
<!--[ Accordion line 1 ]-->
<details class='accordion'>
<summary>Accordion_first_title</summary>
<div class='accorContent'>
<p>Accordion_content_1</p>
</div>
</details>
<!--[ Accordion line 2 ]-->
<details class='accordion'>
<summary>Accordion_second_title</summary>
<div class='accorContent'>
<p>Accordion_content_2</p>
</div>
</details>
<!--[ Accordion line 3 ]-->
<details class='accordion'>
<summary>Accordion_third_title</summary>
<div class='accorContent'>
<p>Accordion_content_3</p>
</div>
</details>
<!--[ Accordion line 4 ]-->
<details class='accordion alt'>
<summary>Accordion_fourth_title (alt)</summary>
<div class='accorContent'>
<p>Accordion_content_4</p>
</div>
</details>
</div>
Bloque de notas
Esta función sirve para añadir información importante, frases de advertencia o resaltar frases, hay dos estilos que puedes probar incluyendo:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
Warning!Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.
<p class='note'>Yout_text_here</p> // Another style <p class='note noteAlert'>Yout_text_here</p>
Enlace externo
Si hay un enlace externo en la publicación, puede notificar al usuario utilizando esta función:
Sample_external_linkSample_link_alt
<a class='extLink' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a> <a class='extLink alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>
Button
Standard_buttonDownload
Download
Demo
Buy now
Whatsapp me
<a class='button' href='#'>Standard_button</a> <a class='button' href='#'><i class='icon download'></i>Download</a> <a class='button outline' href='#'><i class='icon download'></i>Download</a> <a class='button' href='#'><i class='icon demo'></i>Demo</a> <a class='button' href='#'><i class='icon cart'></i>Buy now</a> <a class='button whatsapp' href='#'><i class='icon whatsapp'></i>Whatsapp me</a>
Dos botones seguidos:
<div class='buttonInfo'> <a class='button' href='#'><i class='icon download'></i>Download</a> <a class='button outline' href='#'>Demo</a> </div>
Download Link
Formato de escritura:
<div class='downloadInfo notranslate'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<!--[ File name ]-->
<span>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>
Imagen de fondo en lugar de texto
Formato de escritura:
<div class='downloadInfo notranslate'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fileType lazy' data-text='zip' data-style='background-image: url(Add_Image_Url_Here)'></span>
<div class='fileName'>
<!--[ File name ]-->
<span>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<!--[ Download link (change href='...' atribute to add link download) ]-->
<a class='button fileLink' aria-label='Download' href='#'><i class='icon download'></i></a>
</div>
Countdown Download Button (Direct)
Esta función mostrará una cuenta atrás antes de que el usuario descargue cualquier archivo.
Esta función requiere un enlace de descarga directa de archivos en la nube. Puede utilizar Google Drive para obtener el enlace de descarga directa de un archivo. Puede leer este artículo para el tutorial.
Sólo puede utilizar un botón de descarga del temporizador de cuenta atrás en una entrada.
Formato de escritura:
<div class='downloadInfo countD notranslate'>
<!--[ Change data-text='...' atribute to add new file type ]-->
<span class='fileType' data-text='zip'></span>
<div class='fileName'>
<!--[ File name ]-->
<span class='fileText'>file_name.zip</span>
<span class='fileSize'>200kb</span>
</div>
<!--[ Change link (data-link='...' atribute to download link) and timer (data-time='...' atribute to countdown timer) ]-->
<a class='button fileLink' data-link='#' data-time='25' aria-label='Download' href='javascript:;'><i class='icon download'></i></a>
<a class='button retryLink' aria-label='Retry' href='javascript:;'><i class='icon retry'></i></a>
</div>
Youtube Video
Lazy YouTube
Sirve para cargar los vídeos de youtube después de que la página se desplace para acelerar la carga del blog
Formato de escritura:
<!--[ Lazy youtube ]-->
<div class='lazyYoutube' data-embed='7tSlCHgDgMA'>
<div class='playBut'>
<svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
</div>
</div>
iFrame Lazy YouTube
Otra alternativa para retrasar la carga del iframe con la función defer:
Formato de escritura:
<!--[ Lazysize iframe ]--> <div class='videoYoutube'> <iframe title='Lazy Iframe' class='lazy' data-src='//www.youtube.com/embed/aC76qElP2Jc' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe> </div>
Change the part marked with Youtube video embed code which you can copy from Youtube video url, for example:youtube.com/watch?v=aC76qElP2Jc, 'aC76qElP2Jc' is video embed code in question
Referencia del Post
Para añadir una lista de referencias a los artículos que has escrito:
Reference:
www.jagodesain.com
<p class='postReference'>Reference:<br> www.jagodesain.com</p>
Publicar un comentario